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

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.

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -27,30 +27,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  width: 100%;
-}
-
-.emotion-10>* {
-  min-width: 0;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -91,7 +67,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           <a
             class="components-external-link"
             href="https://wordpress.local/sample-page/"
-            rel="external noopener"
             target="_blank"
           >
             <span
@@ -163,6 +138,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
               target="_blank"
             >
               <span
+                class="style-visually-hidden"
                 data-visually-hidden=""
               >
                 (opens in a new tab)
@@ -199,9 +175,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
             data-wp-c16t="true"
             data-wp-component="HStack"
+            style="--wp-components-flex-align: flex-start; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: start;"
           >
             <span
               class="components-checkbox-control__input-container"
@@ -254,30 +231,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  width: 100%;
-}
-
-.emotion-10>* {
-  min-width: 0;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -318,7 +271,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           <a
             class="components-external-link"
             href="https://wordpress.local/sample-page/"
-            rel="external noopener"
             target="_blank"
           >
             <span
@@ -405,9 +357,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
             data-wp-c16t="true"
             data-wp-component="HStack"
+            style="--wp-components-flex-align: flex-start; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: start;"
           >
             <span
               class="components-checkbox-control__input-container"
@@ -450,30 +403,6 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
   margin-bottom: inherit;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  width: 100%;
-}
-
-.emotion-4>* {
-  min-width: 0;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -560,9 +489,10 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-4 emotion-5"
+            class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
             data-wp-c16t="true"
             data-wp-component="HStack"
+            style="--wp-components-flex-align: flex-start; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: start;"
           >
             <span
               class="components-checkbox-control__input-container"
@@ -605,30 +535,6 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
   margin-bottom: inherit;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  width: 100%;
-}
-
-.emotion-4>* {
-  min-width: 0;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -715,9 +621,10 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-4 emotion-5"
+            class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
             data-wp-c16t="true"
             data-wp-component="HStack"
+            style="--wp-components-flex-align: flex-start; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: start;"
           >
             <span
               class="components-checkbox-control__input-container"
@@ -804,30 +711,6 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   margin-bottom: inherit;
 }
 
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 0;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  width: 100%;
-}
-
-.emotion-10>* {
-  min-width: 0;
-}
-
 <div>
   <div
     class="editor-post-publish-panel"
@@ -894,9 +777,10 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
           class="components-base-control__field emotion-8 emotion-9"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
             data-wp-c16t="true"
             data-wp-component="HStack"
+            style="--wp-components-flex-align: flex-start; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: start;"
           >
             <span
               class="components-checkbox-control__input-container"

package/src/components/post-revisions-preview/revisions-slider.js

@@ -9,6 +9,7 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import { useMemo } from '@wordpress/element';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { Stack } from '@wordpress/ui';
+import { useFocusOnMount } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -64,6 +65,8 @@ function RevisionsSlider() {
 		useDispatch( editorStore )
 	);
 
+	const focusOnMountRef = useFocusOnMount( true );
+
 	const isLoading = ! rawRevisions;
 	const totalPages = Math.ceil( totalRevisions / perPage ) || 1;
 
@@ -132,7 +135,7 @@ function RevisionsSlider() {
 			<Spinner />
 		) : (
 			<RangeControl
-				__next40pxDefaultSize
+				ref={ focusOnMountRef }
 				aria-valuetext={ renderTooltipContent( selectedIndex ) }
 				className="editor-revisions-header__slider"
 				hideLabelFromVision

package/src/components/post-revisions-preview/test/block-diff.js

@@ -9,8 +9,8 @@ import {
 	serialize,
 } from '@wordpress/blocks';
 import { RichTextData } from '@wordpress/rich-text';
-import * as paragraphBlock from '@wordpress/block-library/src/paragraph';
-import * as groupBlock from '@wordpress/block-library/src/group';
+import * as paragraphBlock from '@wordpress/block-library/build-module/paragraph/index.mjs';
+import * as groupBlock from '@wordpress/block-library/build-module/group/index.mjs';
 
 /**
  * Internal dependencies