@wordpress/editor 14.50.0 → 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/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

package/src/components/media-categories/index.js

@@ -10,7 +10,7 @@
  * WordPress dependencies
  */
 import { __, sprintf, _x } from '@wordpress/i18n';
-import { resolveSelect } from '@wordpress/data';
+import { dispatch, resolveSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -124,14 +124,16 @@ const getOpenverseCaption = ( item ) => {
 	return _caption.replace( /\s{2}/g, ' ' );
 };
 
+const getCoreMediaQuery = ( query = {} ) => ( {
+	...query,
+	orderBy: !! query?.search ? 'relevance' : 'date',
+} );
+
 const coreMediaFetch = async ( query = {} ) => {
 	const mediaItems = await resolveSelect( coreStore ).getEntityRecords(
 		'postType',
 		'attachment',
-		{
-			...query,
-			orderBy: !! query?.search ? 'relevance' : 'date',
-		}
+		getCoreMediaQuery( query )
 	);
 	return mediaItems.map( ( mediaItem ) => ( {
 		...mediaItem,
@@ -142,6 +144,129 @@ const coreMediaFetch = async ( query = {} ) => {
 	} ) );
 };
 
+const getAttachedImagesQuery = ( postId, query = {} ) => ( {
+	...query,
+	media_type: 'image',
+	parent: postId,
+} );
+
+const normalizePostId = ( postId ) => {
+	const parsedPostId = typeof postId === 'number' ? postId : Number( postId );
+
+	return Number.isInteger( parsedPostId ) && parsedPostId > 0
+		? parsedPostId
+		: undefined;
+};
+
+const saveAttachmentParent = ( attachmentId, postId ) =>
+	// `throwOnError` so a failed REST write rejects (rather than being silently
+	// swallowed), letting the attach/detach handlers surface an error notice
+	// instead of a false success.
+	dispatch( coreStore ).saveEntityRecord(
+		'postType',
+		'attachment',
+		{
+			id: attachmentId,
+			post: postId,
+		},
+		{ throwOnError: true }
+	);
+
+// A selected media item's coarse type is exposed differently by each picker.
+// The classic media modal puts the media type directly on `type` (e.g. 'image').
+// The DataViews-driven modal passes REST attachment records, where `type` is the
+// *post* type ('attachment') and the media type lives in `media_type`
+// ('image'|'file') / `mime_type`. So the REST fields must be read first, with
+// `type` as the classic-modal fallback — otherwise a REST image reads as
+// 'attachment' and gets gated out.
+const getMediaItemType = ( mediaItem ) =>
+	mediaItem?.media_type ||
+	mediaItem?.mime_type?.split( '/' )[ 0 ] ||
+	mediaItem?.type;
+
+// The picker's "Upload files" tab accepts any file type, so the selection can
+// include non-images. Gate to images only: a non-image would be reparented to
+// the post but never appear in the image-filtered grid, and would wrongly count
+// toward the "images attached" notice.
+const getImageAttachmentIds = ( mediaItems ) => [
+	...new Set(
+		( Array.isArray( mediaItems ) ? mediaItems : [ mediaItems ] )
+			.filter(
+				( mediaItem ) => getMediaItemType( mediaItem ) === 'image'
+			)
+			.map( ( mediaItem ) => mediaItem?.id )
+			.filter( Boolean )
+	),
+];
+
+const invalidateAttachedImagesQueries = ( postId, query = {} ) => {
+	const { invalidateResolution } = dispatch( coreStore );
+	// Invalidate the resolution backing the visible grid so it refetches after
+	// an attach/detach and reflects the updated set of attached images. The tab
+	// is always shown (via `emptyMessage`), so there's no separate visibility
+	// probe to invalidate.
+	invalidateResolution( 'getEntityRecords', [
+		'postType',
+		'attachment',
+		getCoreMediaQuery( getAttachedImagesQuery( postId, query ) ),
+	] );
+};
+
+/**
+ * Builds the "Attachments" media category for a given post. It behaves like
+ * any other inserter media source (e.g. Openverse): it appears in the tab list
+ * and renders through the shared media panel. In addition to `fetch`, it exposes
+ * optional `attach`/`detach`/`invalidate` capabilities that the shared panel
+ * picks up to offer an "Attach images" button and a per-item "Detach from post"
+ * action in the same dropdown Openverse uses for "Report image".
+ *
+ * @param {number}      postId      The current post id.
+ * @param {string|null} [typeLabel] The post type's singular label to use in copy (e.g. "Page"),
+ *                                  or null to fall back to the generic "post".
+ * @return {InserterMediaCategory} The Attachments media category.
+ */
+const getAttachedImagesCategory = ( postId, typeLabel ) => ( {
+	name: 'attached-images',
+	labels: {
+		name: __( 'Attached images' ),
+		search_items: __( 'Search attachments' ),
+	},
+	mediaType: 'image',
+	// The post type's singular label (e.g. "Page"), threaded through so the
+	// shared panel can word its attach/detach copy for the current post type.
+	postTypeLabel: typeLabel,
+	// Empty-state message. Providing this also keeps the source in the tab list
+	// when it has no items, so it stays discoverable and the first image can be
+	// attached even with none yet.
+	emptyMessage: typeLabel
+		? sprintf(
+				// translators: %s: Name of the post type e.g: "Page".
+				__( 'No images attached to this %s.' ),
+				typeLabel
+		  )
+		: __( 'No images attached to this post.' ),
+	async fetch( query = {} ) {
+		return coreMediaFetch( getAttachedImagesQuery( postId, query ) );
+	},
+	async attach( mediaItems ) {
+		const attachmentIds = getImageAttachmentIds( mediaItems );
+
+		await Promise.all(
+			attachmentIds.map( ( attachmentId ) =>
+				saveAttachmentParent( attachmentId, postId )
+			)
+		);
+
+		return attachmentIds.length;
+	},
+	async detach( mediaItem ) {
+		await saveAttachmentParent( mediaItem.id, 0 );
+	},
+	invalidate( query = {} ) {
+		invalidateAttachedImagesQueries( postId, query );
+	},
+} );
+
 /** @type {InserterMediaCategory[]} */
 const inserterMediaCategories = [
 	{
@@ -226,4 +351,33 @@ const inserterMediaCategories = [
 	},
 ];
 
-export default inserterMediaCategories;
+/**
+ * Returns the inserter media categories for a given post. The "Attachments"
+ * category is prepended only when editing real, front-end-rendered content
+ * (posts, pages, public custom post types). It is omitted for synced patterns,
+ * navigation menus and templates, which aren't the entity that actually gets
+ * rendered, so attaching media to them is meaningless.
+ *
+ * @param {number|string} postId                  The current post id.
+ * @param {string}        [viewablePostTypeLabel] Singular label of the post type, set only when it is front-end viewable (post, page, public CPT).
+ * @return {InserterMediaCategory[]} The inserter media categories.
+ */
+export default function getInserterMediaCategories(
+	postId,
+	viewablePostTypeLabel
+) {
+	const currentPostId = normalizePostId( postId );
+
+	// A falsy label means either a non-viewable post type (synced pattern,
+	// navigation, template) or that the record hasn't resolved yet — in both
+	// cases the category is omitted. A numeric id is also required since it
+	// backs the attachment `parent` query.
+	if ( ! currentPostId || ! viewablePostTypeLabel ) {
+		return inserterMediaCategories;
+	}
+
+	return [
+		getAttachedImagesCategory( currentPostId, viewablePostTypeLabel ),
+		...inserterMediaCategories,
+	];
+}