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

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,
+	];
+}

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

@@ -0,0 +1,202 @@
+/**
+ * WordPress dependencies
+ */
+import { dispatch, resolveSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import getInserterMediaCategories from '..';
+
+jest.mock( '@wordpress/data', () => ( {
+	dispatch: jest.fn(),
+	resolveSelect: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/core-data', () => ( {
+	store: 'core',
+} ) );
+
+describe( 'getInserterMediaCategories', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'does not include attached images for non-numeric post IDs', () => {
+		const categories = getInserterMediaCategories(
+			'wp_template//theme//home'
+		);
+
+		expect(
+			categories.some(
+				( category ) => category.name === 'attached-images'
+			)
+		).toBe( false );
+	} );
+
+	it( 'fetches images attached to the current post', async () => {
+		const getEntityRecords = jest.fn().mockResolvedValue( [
+			{
+				id: 10,
+				source_url: 'https://example.com/image.jpg',
+				alt_text: 'Alt text',
+				media_details: {
+					sizes: {
+						medium: {
+							source_url: 'https://example.com/image-medium.jpg',
+						},
+					},
+				},
+				caption: {
+					raw: 'Caption',
+				},
+			},
+		] );
+		resolveSelect.mockReturnValue( { getEntityRecords } );
+
+		const [ attachedImagesCategory ] = getInserterMediaCategories(
+			42,
+			'Post'
+		);
+		const results = await attachedImagesCategory.fetch( { per_page: 20 } );
+
+		expect( getEntityRecords ).toHaveBeenCalledWith(
+			'postType',
+			'attachment',
+			{
+				per_page: 20,
+				media_type: 'image',
+				parent: 42,
+				orderBy: 'date',
+			}
+		);
+		expect( results ).toEqual( [
+			expect.objectContaining( {
+				id: 10,
+				url: 'https://example.com/image.jpg',
+				previewUrl: 'https://example.com/image-medium.jpg',
+				alt: 'Alt text',
+				caption: 'Caption',
+			} ),
+		] );
+	} );
+
+	it( 'attaches and detaches attachment records', async () => {
+		const saveEntityRecord = jest.fn().mockResolvedValue( {} );
+		dispatch.mockReturnValue( { saveEntityRecord } );
+
+		const [ attachedImagesCategory ] = getInserterMediaCategories(
+			42,
+			'Post'
+		);
+		const attachedCount = await attachedImagesCategory.attach( [
+			// Classic media modal items expose `type`.
+			{ id: 10, type: 'image' },
+			{ id: 11, type: 'image' },
+			{ id: 10, type: 'image' },
+			// Non-image (e.g. a PDF uploaded via the picker) is skipped.
+			{ id: 12, type: 'application' },
+			{},
+			// DataViews-driven modal items are REST attachments: `type` is the
+			// post type ('attachment'), and the media type lives in
+			// `media_type`/`mime_type`. These must still gate to images.
+			{
+				id: 13,
+				type: 'attachment',
+				media_type: 'image',
+				mime_type: 'image/png',
+			},
+			{ id: 14, type: 'attachment', mime_type: 'image/jpeg' },
+			{
+				id: 15,
+				type: 'attachment',
+				media_type: 'file',
+				mime_type: 'application/pdf',
+			},
+		] );
+		await attachedImagesCategory.detach( { id: 11 } );
+
+		expect( attachedCount ).toBe( 4 );
+		expect( saveEntityRecord ).toHaveBeenCalledWith(
+			'postType',
+			'attachment',
+			{
+				id: 10,
+				post: 42,
+			},
+			{ throwOnError: true }
+		);
+		expect( saveEntityRecord ).toHaveBeenCalledWith(
+			'postType',
+			'attachment',
+			{
+				id: 11,
+				post: 42,
+			},
+			{ throwOnError: true }
+		);
+		expect( saveEntityRecord ).toHaveBeenCalledWith(
+			'postType',
+			'attachment',
+			{
+				id: 11,
+				post: 0,
+			},
+			{ throwOnError: true }
+		);
+		expect( saveEntityRecord ).toHaveBeenCalledWith(
+			'postType',
+			'attachment',
+			{
+				id: 13,
+				post: 42,
+			},
+			{ throwOnError: true }
+		);
+		expect( saveEntityRecord ).toHaveBeenCalledWith(
+			'postType',
+			'attachment',
+			{
+				id: 14,
+				post: 42,
+			},
+			{ throwOnError: true }
+		);
+		expect( saveEntityRecord ).not.toHaveBeenCalledWith(
+			'postType',
+			'attachment',
+			expect.objectContaining( { id: 12 } ),
+			expect.anything()
+		);
+		expect( saveEntityRecord ).not.toHaveBeenCalledWith(
+			'postType',
+			'attachment',
+			expect.objectContaining( { id: 15 } ),
+			expect.anything()
+		);
+		expect( saveEntityRecord ).toHaveBeenCalledTimes( 5 );
+	} );
+
+	it( 'words the empty state from the post type label', () => {
+		const [ attachedImagesCategory ] = getInserterMediaCategories(
+			42,
+			'Page'
+		);
+
+		expect( attachedImagesCategory.emptyMessage ).toBe(
+			'No images attached to this Page.'
+		);
+	} );
+
+	it( 'excludes attached images when there is no viewable post type label', () => {
+		// The label is empty for non-viewable post types (synced patterns,
+		// navigation, templates) and before the record resolves.
+		const categories = getInserterMediaCategories( 42, undefined );
+
+		expect(
+			categories.some(
+				( category ) => category.name === 'attached-images'
+			)
+		).toBe( false );
+	} );
+} );

package/src/components/page-attributes/parent.js

@@ -195,7 +195,6 @@ export function PageAttributesParent() {
 
 	return (
 		<ComboboxControl
-			__next40pxDefaultSize
 			className="editor-page-attributes__parent"
 			label={ __( 'Parent' ) }
 			help={ __( 'Choose a parent page.' ) }

package/src/components/post-author/combobox.js

@@ -34,7 +34,6 @@ export default function PostAuthorCombobox() {
 
 	return (
 		<ComboboxControl
-			__next40pxDefaultSize
 			label={ __( 'Author' ) }
 			options={ authorOptions }
 			value={ authorId }

package/src/components/post-author/select.js

@@ -22,7 +22,6 @@ export default function PostAuthorSelect() {
 
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			className="post-author-selector"
 			label={ __( 'Author' ) }
 			options={ authorOptions }

package/src/components/post-preview-button/index.js

@@ -14,7 +14,7 @@ import { VisuallyHidden } from '@wordpress/ui';
  */
 import { store as editorStore } from '../../store';
 
-function writeInterstitialMessage( targetDocument ) {
+function buildInterstitialMarkup() {
 	let markup = renderToString(
 		<div className="editor-post-preview-button__interstitial-message">
 			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
@@ -95,11 +95,77 @@ function writeInterstitialMessage( targetDocument ) {
 	 */
 	markup = applyFilters( 'editor.PostPreview.interstitialMarkup', markup );
 
+	return markup;
+}
+
+function writeInterstitialMessage( targetDocument, markup ) {
 	targetDocument.write( markup );
 	targetDocument.title = __( 'Generating preview…' );
 	targetDocument.close();
 }
 
+/**
+ * Resolves the preview window's `document`, working around
+ * `Document-Isolation-Policy` (DIP) isolation.
+ *
+ * The editor screen is served with `Document-Isolation-Policy:
+ * isolate-and-credentialless` to enable cross-origin isolation. This places the
+ * editor tab and an already-open preview tab in separate agent clusters, so
+ * synchronous access to a reused preview tab's `document` throws a
+ * `SecurityError`. Navigating the reused tab back to `about:blank` returns it to
+ * the opener's agent cluster and restores access. That navigation is
+ * asynchronous and we can't attach a cross-isolation `load` listener, so poll
+ * the `document` access (the operation that throws) until it succeeds, up to a
+ * short timeout.
+ *
+ * @param {Window} previewWindow The preview window/tab.
+ *
+ * @return {?Document} The reachable preview document, or `null` if it never
+ *                     becomes reachable within the timeout.
+ */
+async function getPreviewDocument( previewWindow ) {
+	// A freshly opened tab is already on `about:blank` and accessible, so this
+	// succeeds on the first preview without any reset.
+	try {
+		return previewWindow.document;
+	} catch {
+		// The reused preview tab is isolated from the editor; reset it below.
+	}
+
+	previewWindow.location = 'about:blank';
+
+	const timeoutMs = 1000;
+	const intervalMs = 50;
+	const deadline = Date.now() + timeoutMs;
+	do {
+		await new Promise( ( resolve ) => setTimeout( resolve, intervalMs ) );
+		try {
+			return previewWindow.document;
+		} catch {
+			// Navigation to `about:blank` hasn't completed yet; keep polling.
+		}
+	} while ( Date.now() < deadline );
+
+	return null;
+}
+
+/**
+ * Writes the preview interstitial into the preview window, working around
+ * `Document-Isolation-Policy` (DIP) isolation.
+ *
+ * The interstitial is a progressive enhancement: if the document never becomes
+ * reachable we simply skip it, and the caller still navigates the preview to the
+ * real content.
+ *
+ * @param {Window} previewWindow The preview window/tab.
+ */
+async function writeInterstitialIntoPreviewWindow( previewWindow ) {
+	const previewDocument = await getPreviewDocument( previewWindow );
+	if ( previewDocument ) {
+		writeInterstitialMessage( previewDocument, buildInterstitialMarkup() );
+	}
+}
+
 /**
  * Renders a button that opens a new window or tab for the preview,
  * writes the interstitial message to this window, and then navigates
@@ -168,7 +234,7 @@ export default function PostPreviewButton( {
 		// https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus
 		previewWindow.focus();
 
-		writeInterstitialMessage( previewWindow.document );
+		await writeInterstitialIntoPreviewWindow( previewWindow );
 
 		const link = await __unstableSaveForPreview( { forceIsAutosaveable } );
 

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -10,14 +10,18 @@ import {
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
-import { isBlobURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
  */
-import { fetchMedia } from './media-util';
+import { unlock } from '../../lock-unlock';
+
+const { mediaSideloadFromUrlKey } = unlock( blockEditorPrivateApis );
 
 function flattenBlocks( blocks ) {
 	const result = [];
@@ -113,10 +117,13 @@ export default function MaybeUploadMediaPanel() {
 	const [ isUploading, setIsUploading ] = useState( false );
 	const [ isAnimating, setIsAnimating ] = useState( false );
 	const [ hadUploadError, setHadUploadError ] = useState( false );
-	const { editorBlocks, mediaUpload } = useSelect(
+	const { editorBlocks, mediaSideloadFromUrl } = useSelect(
 		( select ) => ( {
 			editorBlocks: select( blockEditorStore ).getBlocks(),
-			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
+			mediaSideloadFromUrl:
+				select( blockEditorStore ).getSettings()[
+					mediaSideloadFromUrlKey
+				],
 		} ),
 		[]
 	);
@@ -127,7 +134,7 @@ export default function MaybeUploadMediaPanel() {
 	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	if ( ! mediaUpload || ! blocksWithExternalMedia.length ) {
+	if ( ! mediaSideloadFromUrl || ! blocksWithExternalMedia.length ) {
 		return null;
 	}
 
@@ -178,32 +185,20 @@ export default function MaybeUploadMediaPanel() {
 		);
 
 		// Create an upload promise for each URL, that we can wait for in all
-		// blocks that make use of that media.
+		// blocks that make use of that media. The server sideloads each URL,
+		// so this works even when the editor is cross-origin isolated.
 		const uploadPromises = Object.fromEntries(
-			Object.entries( fetchMedia( [ ...mediaUrls ] ) ).map(
-				( [ url, filePromise ] ) => {
-					const uploadPromise = filePromise.then(
-						( blob ) =>
-							new Promise( ( resolve, reject ) => {
-								mediaUpload( {
-									filesList: [ blob ],
-									onFileChange: ( [ media ] ) => {
-										if ( isBlobURL( media.url ) ) {
-											return;
-										}
-
-										resolve( media );
-									},
-									onError() {
-										reject();
-									},
-								} );
-							} )
-					);
+			[ ...mediaUrls ].map( ( url ) => {
+				const uploadPromise = new Promise( ( resolve, reject ) => {
+					mediaSideloadFromUrl( {
+						url,
+						onSuccess: ( media ) => resolve( media ),
+						onError: () => reject(),
+					} );
+				} );
 
-					return [ url, uploadPromise ];
-				}
-			)
+				return [ url, uploadPromise ];
+			} )
 		);
 
 		// Wait for all blocks to be updated with library media.

package/src/components/post-publish-panel/style.scss

@@ -226,7 +226,7 @@
 		}
 
 		body.is-fullscreen-mode & {
-			top: 0;
+			top: var(--wp-admin--admin-bar--height, 0);
 		}
 
 		// Keep it open on focus to avoid conflict with navigate-regions animation.