@wordpress/editor 14.49.1 → 14.51.1-next.v.202607070741.0

package/src/components/collaborators-presence/use-collaborator-notifications.ts

@@ -68,43 +68,75 @@ export function useCollaboratorNotifications(
 	postId: number | null,
 	postType: string | null
 ): void {
-	const { postStatus, isCollaborationEnabled, showNotifications } = useSelect(
-		( select ) => {
-			const {
-				getCurrentPostAttribute,
-				isCollaborationEnabledForCurrentPost,
-			} = unlock( select( editorStore ) );
-			return {
-				postStatus: getCurrentPostAttribute( 'status' ) as
-					| string
-					| undefined,
-				isCollaborationEnabled: isCollaborationEnabledForCurrentPost(),
-				showNotifications:
-					select( preferencesStore ).get(
-						'core',
-						'showCollaborationNotifications'
-					) ?? true,
-			};
-		},
-		[]
-	);
+	const {
+		postStatus,
+		isCollaborationEnabled,
+		showJoinNotifications,
+		showLeaveNotifications,
+		showPostSaveNotifications,
+	} = useSelect( ( select ) => {
+		const {
+			getCurrentPostAttribute,
+			isCollaborationEnabledForCurrentPost,
+		} = unlock( select( editorStore ) );
+		// Notification preferences default to enabled when unset.
+		const getNotificationPreference = ( name: string ) =>
+			select( preferencesStore ).get( 'core', name ) ?? true;
+		return {
+			postStatus: getCurrentPostAttribute( 'status' ) as
+				| string
+				| undefined,
+			isCollaborationEnabled: isCollaborationEnabledForCurrentPost(),
+			showJoinNotifications: getNotificationPreference(
+				'showCollaborationJoinNotifications'
+			),
+			showLeaveNotifications: getNotificationPreference(
+				'showCollaborationLeaveNotifications'
+			),
+			showPostSaveNotifications: getNotificationPreference(
+				'showCollaborationPostSaveNotifications'
+			),
+		};
+	}, [] );
 
 	const { createNotice } = useDispatch( noticesStore );
 
-	// Pass null when collaboration is disabled or notifications are
+	// Pass null when collaboration is disabled or a notification type is
 	// turned off to prevent the hooks from subscribing to awareness state.
-	const shouldSubscribe = isCollaborationEnabled && showNotifications;
-	const effectivePostId = shouldSubscribe ? postId : null;
-	const effectivePostType = shouldSubscribe ? postType : null;
+	const shouldShowJoinNotifications =
+		isCollaborationEnabled && showJoinNotifications;
+	const shouldShowLeaveNotifications =
+		isCollaborationEnabled && showLeaveNotifications;
+	const shouldShowPostSaveNotifications =
+		isCollaborationEnabled && showPostSaveNotifications;
+	// A disabled notification type passes null, which unsubscribes its hook;
+	// callback guards handle any events already queued before then.
+	const effectiveTarget = (
+		shouldShow: boolean
+	): [ number | null, string | null ] =>
+		shouldShow ? [ postId, postType ] : [ null, null ];
+	const [ joinPostId, joinPostType ] = effectiveTarget(
+		shouldShowJoinNotifications
+	);
+	const [ leavePostId, leavePostType ] = effectiveTarget(
+		shouldShowLeaveNotifications
+	);
+	const [ postSavePostId, postSavePostType ] = effectiveTarget(
+		shouldShowPostSaveNotifications
+	);
 
 	useOnCollaboratorJoin(
-		effectivePostId,
-		effectivePostType,
+		joinPostId,
+		joinPostType,
 		useCallback(
 			(
 				collaborator: PostEditorAwarenessState,
 				me?: PostEditorAwarenessState
 			) => {
+				if ( ! shouldShowJoinNotifications ) {
+					return;
+				}
+
 				/*
 				 * Skip collaborators who were present before the current user
 				 * joined. Their enteredAt is earlier than ours, meaning we're
@@ -132,15 +164,19 @@ export function useCollaboratorNotifications(
 					}
 				);
 			},
-			[ createNotice ]
+			[ createNotice, shouldShowJoinNotifications ]
 		)
 	);
 
 	useOnCollaboratorLeave(
-		effectivePostId,
-		effectivePostType,
+		leavePostId,
+		leavePostType,
 		useCallback(
 			( collaborator: PostEditorAwarenessState ) => {
+				if ( ! shouldShowLeaveNotifications ) {
+					return;
+				}
+
 				void createNotice(
 					'info',
 					sprintf(
@@ -155,20 +191,20 @@ export function useCollaboratorNotifications(
 					}
 				);
 			},
-			[ createNotice ]
+			[ createNotice, shouldShowLeaveNotifications ]
 		)
 	);
 
 	useOnPostSave(
-		effectivePostId,
-		effectivePostType,
+		postSavePostId,
+		postSavePostType,
 		useCallback(
 			(
 				saveEvent: PostSaveEvent,
 				saver: PostEditorAwarenessState,
 				prevEvent: PostSaveEvent | null
 			) => {
-				if ( ! postStatus ) {
+				if ( ! shouldShowPostSaveNotifications || ! postStatus ) {
 					return;
 				}
 
@@ -197,7 +233,7 @@ export function useCollaboratorNotifications(
 					isDismissible: false,
 				} );
 			},
-			[ createNotice, postStatus ]
+			[ createNotice, postStatus, shouldShowPostSaveNotifications ]
 		)
 	);
 }

package/src/components/commands/index.js

@@ -41,6 +41,49 @@ import { modalName as patternRenameModalName } from '../pattern-rename-modal';
 import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal';
 import isTemplateRevertable from '../../store/utils/is-template-revertable';
 
+/**
+ * Returns the command that toggles content-only editing for patterns and template parts.
+ * The command is registered both globally for search and contextually for block
+ * selection, so keeping it in one place ensures the label and callback stay aligned.
+ *
+ * @param {Object}   options                                               Command options.
+ * @param {boolean}  options.disableContentOnlyForPatternsAndTemplateParts Whether content-only editing is disabled for patterns and template parts.
+ * @param {Function} options.stopEditingContentOnlySection                 Stops editing the current content-only section before changing the setting.
+ * @param {Function} options.updateEditorSettings                          Updates the editor settings.
+ * @return {Object} The command configuration.
+ */
+function getTogglePatternEditingCommand( {
+	disableContentOnlyForPatternsAndTemplateParts,
+	stopEditingContentOnlySection,
+	updateEditorSettings,
+} ) {
+	return {
+		name: 'core/toggle-pattern-editing',
+		label: disableContentOnlyForPatternsAndTemplateParts
+			? __( 'Disable editing all patterns' )
+			: __( 'Enable editing all patterns' ),
+		icon: symbol,
+		category: 'command',
+		callback: ( { close } ) => {
+			const disableContentOnly =
+				! disableContentOnlyForPatternsAndTemplateParts;
+			stopEditingContentOnlySection();
+			updateEditorSettings( {
+				disableContentOnlyForUnsyncedPatterns: disableContentOnly,
+				disableContentOnlyForTemplateParts: disableContentOnly,
+			} );
+			close();
+		},
+	};
+}
+
+function isPatternOrTemplatePartBlock( blockName, attributes ) {
+	return (
+		!! attributes?.metadata?.patternName ||
+		blockName === 'core/template-part'
+	);
+}
+
 const getEditorCommandLoader = () =>
 	function useEditorCommandLoader() {
 		const {
@@ -54,6 +97,8 @@ const getEditorCommandLoader = () =>
 			isCodeEditingEnabled,
 			isRichEditingEnabled,
 			isPublishSidebarEnabled,
+			disableContentOnlyForUnsyncedPatterns,
+			disableContentOnlyForTemplateParts,
 		} = useSelect( ( select ) => {
 			const { get } = select( preferencesStore );
 			const { isListViewOpened, getCurrentPostType, getEditorSettings } =
@@ -74,6 +119,11 @@ const getEditorCommandLoader = () =>
 				isRichEditingEnabled: getEditorSettings().richEditingEnabled,
 				isPublishSidebarEnabled:
 					select( editorStore ).isPublishSidebarEnabled(),
+				disableContentOnlyForUnsyncedPatterns:
+					!! getEditorSettings()
+						.disableContentOnlyForUnsyncedPatterns,
+				disableContentOnlyForTemplateParts:
+					!! getEditorSettings().disableContentOnlyForTemplateParts,
 			};
 		}, [] );
 		const { getActiveComplementaryArea } = useSelect( interfaceStore );
@@ -86,7 +136,12 @@ const getEditorCommandLoader = () =>
 			toggleDistractionFree,
 			toggleSpotlightMode,
 			toggleTopToolbar,
+			updateEditorSettings,
 		} = useDispatch( editorStore );
+		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+		const { stopEditingContentOnlySection } = unlock(
+			useDispatch( blockEditorStore )
+		);
 		const { openModal, enableComplementaryArea, disableComplementaryArea } =
 			useDispatch( interfaceStore );
 		const { getCurrentPostId } = useSelect( editorStore );
@@ -98,6 +153,9 @@ const getEditorCommandLoader = () =>
 		}
 
 		const commands = [];
+		const disableContentOnlyForPatternsAndTemplateParts =
+			disableContentOnlyForUnsyncedPatterns &&
+			disableContentOnlyForTemplateParts;
 
 		commands.push( {
 			name: 'core/open-shortcut-help',
@@ -176,6 +234,14 @@ const getEditorCommandLoader = () =>
 			},
 		} );
 
+		commands.push(
+			getTogglePatternEditingCommand( {
+				disableContentOnlyForPatternsAndTemplateParts,
+				stopEditingContentOnlySection,
+				updateEditorSettings,
+			} )
+		);
+
 		if ( allowSwitchEditorMode ) {
 			commands.push( {
 				name: 'core/toggle-code-editor',
@@ -290,6 +356,76 @@ const getEditorCommandLoader = () =>
 		};
 	};
 
+const getPatternEditingContextualCommands = () =>
+	function usePatternEditingContextualCommands( { search } ) {
+		const {
+			disableContentOnlyForPatternsAndTemplateParts,
+			hasPatternOrTemplatePartSelection,
+			isPreviewMode,
+		} = useSelect( ( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockName,
+				getBlockParents,
+				getSelectedBlockClientId,
+				getSelectedBlockClientIds,
+				getSettings,
+			} = select( blockEditorStore );
+			const { getEditorSettings } = select( editorStore );
+			const editorSettings = getEditorSettings();
+			const selectedBlockClientId = getSelectedBlockClientId();
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const clientIdsToCheck =
+				selectedBlockClientId && selectedBlockClientIds.length === 1
+					? [
+							selectedBlockClientId,
+							...getBlockParents( selectedBlockClientId, true ),
+					  ]
+					: [];
+
+			return {
+				disableContentOnlyForPatternsAndTemplateParts:
+					!! editorSettings.disableContentOnlyForUnsyncedPatterns &&
+					!! editorSettings.disableContentOnlyForTemplateParts,
+				hasPatternOrTemplatePartSelection: clientIdsToCheck.some(
+					( clientId ) =>
+						isPatternOrTemplatePartBlock(
+							getBlockName( clientId ),
+							getBlockAttributes( clientId )
+						)
+				),
+				isPreviewMode: getSettings().isPreviewMode,
+			};
+		}, [] );
+		const { updateEditorSettings } = useDispatch( editorStore );
+		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+		const { stopEditingContentOnlySection } = unlock(
+			useDispatch( blockEditorStore )
+		);
+
+		// Keep the disable command available after full pattern editing is enabled,
+		// even when the current selection is no longer inside a pattern or template part.
+		if (
+			search ||
+			( ! hasPatternOrTemplatePartSelection &&
+				! disableContentOnlyForPatternsAndTemplateParts ) ||
+			isPreviewMode
+		) {
+			return { isLoading: false, commands: [] };
+		}
+
+		return {
+			isLoading: false,
+			commands: [
+				getTogglePatternEditingCommand( {
+					disableContentOnlyForPatternsAndTemplateParts,
+					stopEditingContentOnlySection,
+					updateEditorSettings,
+				} ),
+			],
+		};
+	};
+
 const getEditedEntityContextualCommands = () =>
 	function useEditedEntityContextualCommands() {
 		const { postType } = useSelect( ( select ) => {
@@ -480,6 +616,12 @@ export default function useCommands() {
 		context: 'entity-edit',
 	} );
 
+	useCommandLoader( {
+		name: 'core/editor/pattern-editing-contextual-commands',
+		hook: getPatternEditingContextualCommands(),
+		context: 'block-selection-edit',
+	} );
+
 	useCommandLoader( {
 		name: 'core/editor/page-content-focus',
 		hook: getPageContentFocusCommands(),

package/src/components/document-bar/index.js

@@ -16,7 +16,6 @@ import {
 } from '@wordpress/components';
 import { BlockIcon, store as blockEditorStore } from '@wordpress/block-editor';
 import { chevronLeftSmall, chevronRightSmall, layout } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as commandsStore } from '@wordpress/commands';
 import { useRef, useEffect } from '@wordpress/element';
@@ -141,8 +140,6 @@ export default function DocumentBar( props ) {
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 	const isReducedMotion = useReducedMotion();
 
-	const hasShortcut = ! window.__experimentalAdminBarInEditor;
-
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
 	const hasBackButton =
 		!! onNavigateToPreviousEntityRecord || !! unlockedPatternInfo;
@@ -177,7 +174,6 @@ export default function DocumentBar( props ) {
 		<div
 			className={ clsx( 'editor-document-bar', {
 				'has-back-button': hasBackButton,
-				'has-shortcut': hasShortcut,
 			} ) }
 		>
 			<AnimatePresence>
@@ -270,11 +266,6 @@ export default function DocumentBar( props ) {
 								) }
 						</WCText>
 					</motion.div>
-					{ hasShortcut && (
-						<span className="editor-document-bar__shortcut">
-							{ displayShortcut.primary( 'k' ) }
-						</span>
-					) }
 				</Button>
 			) }
 		</div>

package/src/components/document-bar/style.scss

@@ -54,13 +54,6 @@
 	margin: 0 auto;
 	max-width: 70%;
 
-	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
-	.editor-document-bar.has-shortcut & {
-		@include break-medium() {
-			padding-left: $grid-unit-30;
-		}
-	}
-
 	h1 {
 		display: flex;
 		align-items: center;
@@ -88,16 +81,6 @@
 	}
 }
 
-.editor-document-bar__shortcut {
-	color: $gray-800;
-	min-width: $grid-unit-30;
-	display: none;
-
-	@include break-medium() {
-		display: initial;
-	}
-}
-
 .editor-document-bar__back.components-button.has-icon.has-text {
 	min-width: $button-size;
 	flex-shrink: 0;

package/src/components/entities-saved-states/index.js

@@ -27,10 +27,6 @@ import { useIsDirty } from './hooks/use-is-dirty';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-function identity( values ) {
-	return values;
-}
-
 /**
  * Renders the component for managing saved states of entities.
  *
@@ -79,7 +75,7 @@ export default function EntitiesSavedStates( {
 export function EntitiesSavedStatesExtensible( {
 	additionalPrompt = undefined,
 	close,
-	onSave = identity,
+	onSave = undefined,
 	saveEnabled: saveEnabledProp = undefined,
 	saveLabel = __( 'Save' ),
 	renderDialog,

package/src/components/header/index.js

@@ -23,12 +23,6 @@ import PostViewLink from '../post-view-link';
 import PreviewDropdown from '../preview-dropdown';
 import ZoomOutToggle from '../zoom-out-toggle';
 import { store as editorStore } from '../../store';
-import {
-	ATTACHMENT_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
-	NAVIGATION_POST_TYPE,
-} from '../../store/constants';
 import { CollaboratorsPresence } from '../collaborators-presence/index';
 import { unlock } from '../../lock-unlock';
 
@@ -84,14 +78,6 @@ function Header( {
 		[ 'post', 'page', 'wp_template' ].includes( postType ) &&
 		hasSectionRootClientId;
 
-	const disablePreviewOption =
-		[
-			ATTACHMENT_POST_TYPE,
-			NAVIGATION_POST_TYPE,
-			TEMPLATE_PART_POST_TYPE,
-			PATTERN_POST_TYPE,
-		].includes( postType ) || isStylesCanvasActive;
-
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 
@@ -152,7 +138,7 @@ function Header( {
 
 					<PreviewDropdown
 						forceIsAutosaveable={ forceIsDirty }
-						disabled={ disablePreviewOption }
+						disabled={ isStylesCanvasActive }
 					/>
 
 					<PostPreviewButton

package/src/components/header/style.scss

@@ -10,11 +10,11 @@
 	background: $white;
 	display: grid;
 	grid-auto-flow: row;
-	grid-template: auto / $header-height minmax(0, max-content) minmax(min-content, 1fr) $header-height;
+	grid-template: auto / $button-size-compact minmax(0, max-content) minmax(min-content, 1fr) $header-height;
 	&:has(> .editor-header__center) {
-		grid-template: auto / $header-height min-content 1fr min-content $header-height;
+		grid-template: auto / $button-size-compact min-content 1fr min-content $header-height;
 		@include break-medium {
-			grid-template: auto / $header-height minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) $header-height;
+			grid-template: auto / $button-size-compact minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) $header-height;
 		}
 	}
 	@include break-mobile {
@@ -31,6 +31,10 @@
 	}
 }
 
+.editor-header__back-button {
+	padding-left: $grid-unit;
+}
+
 .editor-header__toolbar {
 	grid-column: 1 / 3;
 	// When there is no back button or the viewport is <= mobile the margin keeps the content off