@wordpress/block-editor 15.23.0 → 16.0.0

package/src/components/iframe/content.scss

@@ -18,8 +18,8 @@
 	}
 
 	&.zoom-out-animation {
-		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
-		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0);
+		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0px);
+		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0px);
 		$overflow-behavior: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
 
 		position: fixed;
@@ -34,7 +34,7 @@
 
 	&.is-zoomed-out {
 		$scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
-		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0);
+		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0px);
 		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
 		$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
 		$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);

package/src/components/image-editor/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { ImageCropperProvider } from '@wordpress/image-cropper';
 
 /**
@@ -15,6 +16,22 @@ import ZoomDropdown from './zoom-dropdown';
 import RotationButton from './rotation-button';
 import FormControls from './form-controls';
 
+/**
+ * @deprecated since 7.1. The Media Editor modal is now the default crop
+ * experience for core blocks. This component (exported as
+ * `__experimentalImageEditor`) will be removed in a future major release.
+ *
+ * @param {Object}   root0                 Component props.
+ * @param {number}   root0.id              Media attachment ID.
+ * @param {string}   root0.url             Media URL.
+ * @param {number}   root0.width           Rendered image width.
+ * @param {number}   root0.height          Rendered image height.
+ * @param {number}   root0.naturalHeight   Natural image height.
+ * @param {number}   root0.naturalWidth    Natural image width.
+ * @param {Function} root0.onSaveImage     Callback to save image attributes.
+ * @param {Function} root0.onFinishEditing Callback when editing finishes.
+ * @param {Object}   root0.borderProps     Border classes and styles.
+ */
 export default function ImageEditor( {
 	id,
 	url,
@@ -26,6 +43,11 @@ export default function ImageEditor( {
 	onFinishEditing,
 	borderProps,
 } ) {
+	deprecated( 'wp.blockEditor.__experimentalImageEditor', {
+		since: '7.1',
+		hint: 'The Media Editor modal is now the default crop experience for core blocks. This component will be removed in a future major release.',
+	} );
+
 	return (
 		<ImageCropperProvider>
 			<ImageEditingProvider

package/src/components/image-editor/zoom-dropdown.js

@@ -34,7 +34,6 @@ export default function ZoomDropdown() {
 			renderContent={ () => (
 				<DropdownContentWrapper paddingSize="medium">
 					<RangeControl
-						__next40pxDefaultSize
 						label={ __( 'Zoom' ) }
 						min={ MIN_ZOOM }
 						max={ MAX_ZOOM }

package/src/components/image-size-control/index.js

@@ -96,7 +96,6 @@ export default function ImageSizeControl( {
 					options={ imageSizeOptions }
 					onChange={ onChangeImage }
 					help={ imageSizeHelp }
-					size="__unstable-large"
 				/>
 			) }
 			{ isResizable && (
@@ -109,7 +108,6 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'width', value )
 							}
-							size="__unstable-large"
 						/>
 						<NumberControl
 							label={ __( 'Height' ) }
@@ -118,7 +116,6 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'height', value )
 							}
-							size="__unstable-large"
 						/>
 					</HStack>
 					<ToggleGroupControl
@@ -127,7 +124,6 @@ export default function ImageSizeControl( {
 						onChange={ handleUpdateDimensions }
 						value={ selectedValue }
 						isBlock
-						__next40pxDefaultSize
 					>
 						{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
 							return (

package/src/components/inner-content/index.js

@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createPortal,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import { safeHTML } from '@wordpress/dom';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockListBlock from '../block-list/block';
+import { LayoutProvider } from '../block-list/layout';
+
+const SLOT_TAG_NAME = 'wp-inner-block-slot';
+
+// The static markup surrounding the inner blocks is arbitrary HTML the block
+// editor doesn't manage, so it provides no layout context: no alignments are
+// available to the inner blocks.
+const LAYOUT = { type: 'default', alignments: [] };
+
+/**
+ * Renders the static HTML fragments of a block with the `innerContent`
+ * support, mounting each inner block at the position of its `null`
+ * placeholder within the static markup.
+ *
+ * Unlike `InnerBlocks`, the rendered blocks are not a contiguous list: they
+ * live at arbitrary positions inside markup the block editor doesn't manage.
+ * The static fragments are sanitized with `safeHTML` before being injected
+ * into the canvas — the same treatment block save content receives elsewhere
+ * in the editor — and the inner blocks are portalled into placeholder
+ * elements. Inner blocks are locked: they can be edited in place but not
+ * moved, removed, or added to.
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.clientId Client ID of the block whose inner content
+ *                                should be rendered.
+ */
+export default function InnerContent( { clientId } ) {
+	const { innerContent, order, selectedClientIds } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockOrder, getSelectedBlockClientIds } =
+				select( blockEditorStore );
+			return {
+				innerContent: getBlock( clientId )?.innerContent,
+				order: getBlockOrder( clientId ),
+				selectedClientIds: getSelectedBlockClientIds(),
+			};
+		},
+		[ clientId ]
+	);
+	const html = useMemo( () => {
+		let slotIndex = 0;
+		return ( innerContent ?? [] )
+			.map( ( item ) =>
+				item === null
+					? `<${ SLOT_TAG_NAME } data-slot-index="${ slotIndex++ }" style="display: contents"></${ SLOT_TAG_NAME }>`
+					: item
+			)
+			.join( '' );
+	}, [ innerContent ] );
+
+	const containerRef = useRef();
+	const [ slots, setSlots ] = useState( [] );
+
+	useLayoutEffect( () => {
+		const container = containerRef.current;
+
+		// Sanitize before injecting into the canvas: `safeHTML` removes
+		// `<script>` elements and inline event handlers, matching how block
+		// save content is rendered elsewhere in the editor.
+		container.innerHTML = safeHTML( html );
+
+		setSlots(
+			Array.from( container.querySelectorAll( SLOT_TAG_NAME ) ).sort(
+				( a, b ) =>
+					Number( a.dataset.slotIndex ) -
+					Number( b.dataset.slotIndex )
+			)
+		);
+	}, [ html ] );
+
+	return (
+		<LayoutProvider value={ LAYOUT }>
+			<div
+				ref={ containerRef }
+				className="block-editor-inner-content"
+				style={ { display: 'contents' } }
+			/>
+			{ order.map( ( childClientId, index ) =>
+				slots[ index ]
+					? createPortal(
+							// Render the selected block synchronously, as the block list does.
+							<AsyncModeProvider
+								value={
+									! selectedClientIds.includes(
+										childClientId
+									)
+								}
+							>
+								<BlockListBlock
+									rootClientId={ clientId }
+									clientId={ childClientId }
+								/>
+							</AsyncModeProvider>,
+							slots[ index ],
+							childClientId
+					  )
+					: null
+			) }
+		</LayoutProvider>
+	);
+}

package/src/components/inner-content/test/index.js

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import InnerContent from '../';
+import { BlockEditorProvider } from '../../provider';
+
+const BLOCK_NAME = 'core/html';
+
+// These tests inspect the raw injected DOM to verify the static markup is
+// sanitized before being added to the editor canvas, so direct node access is
+// intentional.
+/* eslint-disable testing-library/no-node-access, testing-library/no-container, testing-library/render-result-naming-convention */
+
+function renderWithInnerContent( innerContent ) {
+	const block = createBlock( BLOCK_NAME, {}, [], innerContent );
+	const { container } = render(
+		<BlockEditorProvider value={ [ block ] }>
+			<InnerContent clientId={ block.clientId } />
+		</BlockEditorProvider>
+	);
+	return container.querySelector( '.block-editor-inner-content' );
+}
+
+describe( 'InnerContent', () => {
+	beforeAll( () => {
+		registerBlockType( BLOCK_NAME, {
+			apiVersion: 3,
+			title: 'Custom HTML',
+			category: 'text',
+			save: () => null,
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( BLOCK_NAME );
+	} );
+
+	it( 'renders the static fragments into the canvas', () => {
+		const root = renderWithInnerContent( [
+			'<div class="banner"><h1>Static heading</h1></div>',
+		] );
+
+		expect( root.querySelector( 'h1' ) ).toHaveTextContent(
+			'Static heading'
+		);
+	} );
+
+	it( 'strips script elements from the static fragments', () => {
+		const root = renderWithInnerContent( [
+			'<div><script>window.__innerContentRan = true;</script>Safe</div>',
+		] );
+
+		expect( root.querySelector( 'script' ) ).toBeNull();
+		expect( root ).toHaveTextContent( 'Safe' );
+	} );
+
+	it( 'strips inline event handlers from the static fragments', () => {
+		const root = renderWithInnerContent( [
+			'<button onclick="alert(1)">Click</button>',
+		] );
+
+		expect( root.querySelector( '[onclick]' ) ).toBeNull();
+		expect( root.querySelector( 'button' ) ).toHaveTextContent( 'Click' );
+	} );
+} );
+
+/* eslint-enable testing-library/no-node-access, testing-library/no-container, testing-library/render-result-naming-convention */

package/src/components/inserter/hooks/use-block-types-state.js

@@ -54,7 +54,14 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 
 	const onSelectItem = useCallback(
 		(
-			{ name, initialAttributes, innerBlocks, syncStatus, content },
+			{
+				name,
+				initialAttributes,
+				innerBlocks,
+				innerContent,
+				syncStatus,
+				content,
+			},
 			shouldFocusBlock
 		) => {
 			const destinationClientId = getClosestAllowedInsertionPoint(
@@ -85,7 +92,8 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 					: createBlock(
 							name,
 							initialAttributes,
-							createBlocksFromInnerBlocksTemplate( innerBlocks )
+							createBlocksFromInnerBlocksTemplate( innerBlocks ),
+							innerContent
 					  );
 			onInsert(
 				insertedBlock,

package/src/components/inserter/media-tab/hooks.js

@@ -12,17 +12,41 @@ import { unlock } from '../../../lock-unlock';
 
 /** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */
 /** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */
+/** @typedef {import('../../../store/actions').InserterMediaResponse} InserterMediaResponse */
+
+/**
+ * Normalizes the result of a media category's `fetch`, which may be either a
+ * plain array of media items or an `InserterMediaResponse` carrying pagination
+ * totals. Sources that don't report totals leave them `undefined`, which is how
+ * the panel knows to hide the pager.
+ *
+ * @param {InserterMediaItem[]|InserterMediaResponse|undefined} result The raw `fetch` result.
+ * @return {{ mediaItems: InserterMediaItem[], totalItems: number|undefined, totalPages: number|undefined }} The normalized result.
+ */
+function normalizeFetchResult( result ) {
+	if ( Array.isArray( result ) ) {
+		return { mediaItems: result };
+	}
+	return {
+		mediaItems: result?.mediaItems ?? [],
+		totalItems: result?.totalItems,
+		totalPages: result?.totalPages,
+	};
+}
 
 /**
  * Fetches media items based on the provided category.
  * Each media category is responsible for providing a `fetch` function.
  *
- * @param {Object}               category The media category to fetch results for.
- * @param {InserterMediaRequest} query    The query args to use for the request.
- * @return {InserterMediaItem[]} The media results.
+ * @param {Object}               category   The media category to fetch results for.
+ * @param {InserterMediaRequest} query      The query args to use for the request.
+ * @param {any}                  refreshKey Optional value that, when changed, forces
+ *                                          a refetch (e.g. after attaching/detaching).
+ * @return {{ mediaList: InserterMediaItem[], isLoading: boolean, totalItems: number|undefined, totalPages: number|undefined }} The media results and paging totals.
  */
-export function useMediaResults( category, query = {} ) {
+export function useMediaResults( category, query = {}, refreshKey ) {
 	const [ mediaList, setMediaList ] = useState();
+	const [ totals, setTotals ] = useState( {} );
 	const [ isLoading, setIsLoading ] = useState( false );
 	// We need to keep track of the last request made because
 	// multiple request can be fired without knowing the order
@@ -32,23 +56,93 @@ export function useMediaResults( category, query = {} ) {
 	// requests, but we don't for now as it involves adding support
 	// for this to `core-data` package.
 	const lastRequestRef = useRef();
+	const lastQueryKeyRef = useRef();
+	const lastFetchRef = useRef();
+	const lastSourceRef = useRef();
 	useEffect( () => {
 		( async () => {
 			const key = JSON.stringify( {
 				category: category.name,
 				...query,
 			} );
-			lastRequestRef.current = key;
+			// Unique token so identical-query refreshes can't apply stale results.
+			const request = {};
+			lastRequestRef.current = request;
 			setIsLoading( true );
-			setMediaList( [] ); // Empty the previous results.
-			const _media = await category.fetch?.( query );
-			if ( key === lastRequestRef.current ) {
-				setMediaList( _media );
+			// Only clear the previous results when the category source or query
+			// changes, not on a manual refresh (a `refreshKey` bump after
+			// attach/detach). Keeping them lets the panel dim the existing grid
+			// during the refetch instead of blanking it.
+			if (
+				lastQueryKeyRef.current !== key ||
+				lastFetchRef.current !== category.fetch
+			) {
+				setMediaList( [] );
+			}
+			// Reset paging totals only when the source (category or its `fetch`)
+			// changes, so switching to an array-returning source doesn't leave a
+			// stale pager showing. A mere page change keeps the previous totals,
+			// which is what holds the footer mounted while the next page loads.
+			if (
+				lastSourceRef.current !== category.name ||
+				lastFetchRef.current !== category.fetch
+			) {
+				setTotals( {} );
+			}
+			lastQueryKeyRef.current = key;
+			lastFetchRef.current = category.fetch;
+			lastSourceRef.current = category.name;
+			// Omit the default first page so sources that forward the query to a
+			// strict external API don't receive an unexpected `page` arg.
+			const { page, ...queryWithoutPage } = query;
+			const fetchQuery = page > 1 ? query : queryWithoutPage;
+			const { mediaItems, totalItems, totalPages } = normalizeFetchResult(
+				await category.fetch?.( fetchQuery )
+			);
+			if ( request === lastRequestRef.current ) {
+				// Set together so the grid and the pager never disagree.
+				setMediaList( mediaItems );
+				setTotals( { totalItems, totalPages } );
 				setIsLoading( false );
 			}
 		} )();
-	}, [ category.name, ...Object.values( query ) ] );
-	return { mediaList, isLoading };
+	}, [
+		category.name,
+		category.fetch,
+		...Object.values( query ),
+		refreshKey,
+	] );
+	return {
+		mediaList,
+		isLoading,
+		totalItems: totals.totalItems,
+		totalPages: totals.totalPages,
+	};
+}
+
+/**
+ * Delays surfacing a loading state until a request has been in flight for
+ * `delay` ms, so brief operations (e.g. a quick attach/detach refetch) don't
+ * flash a loading indicator at all. Mirrors the DataViews `useDelayedLoading`
+ * hook.
+ *
+ * @param {boolean} isLoading Whether a request is currently in flight.
+ * @param {number}  delay     Milliseconds to wait before showing the loader.
+ * @return {boolean} Whether the loading state should be shown yet.
+ */
+export function useDelayedLoading( isLoading, delay = 400 ) {
+	const [ showLoading, setShowLoading ] = useState( false );
+	useEffect( () => {
+		if ( ! isLoading ) {
+			return undefined;
+		}
+		const timeout = setTimeout( () => setShowLoading( true ), delay );
+		return () => {
+			clearTimeout( timeout );
+			setShowLoading( false );
+		};
+	}, [ isLoading, delay ] );
+	return showLoading;
 }
 
 export function useMediaCategories( rootClientId ) {
@@ -97,9 +191,10 @@ export function useMediaCategories( rootClientId ) {
 						}
 						let results = [];
 						try {
-							results = await category.fetch( {
-								per_page: 1,
-							} );
+							const { mediaItems } = normalizeFetchResult(
+								await category.fetch( { per_page: 1 } )
+							);
+							results = mediaItems;
 						} catch {
 							// If the request fails, we shallow the error and just don't show
 							// the category, in order to not break the media tab.
@@ -110,7 +205,9 @@ export function useMediaCategories( rootClientId ) {
 			);
 			// We need to filter out categories that don't have any media items or
 			// whose corresponding block type is not allowed to be inserted, based
-			// on the category's `mediaType`.
+			// on the category's `mediaType`. A category that provides an
+			// `emptyMessage` stays in the list even when empty, so it can show
+			// that message (e.g. Attachments, to expose its "Attach" action).
 			const canInsertMediaType = {
 				image: canInsertImage,
 				video: canInsertVideo,
@@ -119,7 +216,8 @@ export function useMediaCategories( rootClientId ) {
 			inserterMediaCategories.forEach( ( category ) => {
 				if (
 					canInsertMediaType[ category.mediaType ] &&
-					categoriesHaveMedia.get( category.name )
+					( categoriesHaveMedia.get( category.name ) ||
+						category.emptyMessage )
 				) {
 					_categories.push( category );
 				}

package/src/components/inserter/media-tab/media-list.js

@@ -13,6 +13,7 @@ function MediaList( {
 	mediaList,
 	category,
 	onClick,
+	onDetach,
 	label = __( 'Media List' ),
 } ) {
 	return (
@@ -27,6 +28,7 @@ function MediaList( {
 					media={ media }
 					category={ category }
 					onClick={ onClick }
+					onDetach={ onDetach }
 				/>
 			) ) }
 		</Composite>