@wordpress/block-editor 15.23.0 → 16.0.1-next.v.202607070741.0

package/src/components/font-family/stories/index.story.jsx

@@ -49,6 +49,5 @@ export const Default = {
 				slug: 'system-font',
 			},
 		],
-		__next40pxDefaultSize: true,
 	},
 };

package/src/components/font-sizes/font-size-picker.js

@@ -19,7 +19,6 @@ function FontSizePicker( props ) {
 			{ ...props }
 			fontSizes={ fontSizes }
 			disableCustomFontSizes={ ! customFontSize }
-			__next40pxDefaultSize
 		/>
 	);
 }

package/src/components/global-styles/border-panel.js

@@ -279,7 +279,6 @@ export default function BorderPanel( {
 						popoverPlacement="left-start"
 						value={ border }
 						__experimentalIsRenderedInSidebar
-						size="__unstable-large"
 						hideLabelFromVision={ ! hasShadowControl }
 						label={ __( 'Border' ) }
 					/>

package/src/components/global-styles/dimensions-panel.js

@@ -544,7 +544,6 @@ export default function DimensionsPanel( {
 					panelId={ panelId }
 				>
 					<UnitControl
-						__next40pxDefaultSize
 						label={ __( 'Content width' ) }
 						labelPosition="top"
 						value={ contentSizeValue || '' }
@@ -571,7 +570,6 @@ export default function DimensionsPanel( {
 					panelId={ panelId }
 				>
 					<UnitControl
-						__next40pxDefaultSize
 						label={ __( 'Wide width' ) }
 						labelPosition="top"
 						value={ wideSizeValue || '' }
@@ -710,7 +708,6 @@ export default function DimensionsPanel( {
 							/>
 						) : (
 							<UnitControl
-								__next40pxDefaultSize
 								label={ __( 'Block spacing' ) }
 								min={ 0 }
 								onChange={ setGapValue }

package/src/components/global-styles/typography-panel.js

@@ -605,7 +605,6 @@ export default function TypographyPanel( {
 						fontFamilies={ fontFamilies }
 						value={ fontFamily }
 						onChange={ setFontFamily }
-						size="__unstable-large"
 					/>
 				</ToolsPanelItem>
 			) }
@@ -625,7 +624,6 @@ export default function TypographyPanel( {
 						disableCustomFontSizes={ disableCustomFontSizes }
 						withReset={ false }
 						withSlider
-						size="__unstable-large"
 					/>
 				</ToolsPanelItem>
 			) }
@@ -646,7 +644,6 @@ export default function TypographyPanel( {
 						hasFontStyles={ hasFontStyles }
 						hasFontWeights={ hasFontWeights }
 						fontFamilyFaces={ fontFamilyFaces }
-						size="__unstable-large"
 					/>
 				</ToolsPanelItem>
 			) }
@@ -663,7 +660,6 @@ export default function TypographyPanel( {
 						__unstableInputWidth="auto"
 						value={ lineHeight }
 						onChange={ setLineHeight }
-						size="__unstable-large"
 					/>
 				</ToolsPanelItem>
 			) }
@@ -679,7 +675,6 @@ export default function TypographyPanel( {
 					<LetterSpacingControl
 						value={ letterSpacing }
 						onChange={ setLetterSpacing }
-						size="__unstable-large"
 						__unstableInputWidth="auto"
 					/>
 				</ToolsPanelItem>
@@ -695,7 +690,6 @@ export default function TypographyPanel( {
 					<TextIndentControl
 						value={ textIndent }
 						onChange={ setTextIndentValue }
-						size="__unstable-large"
 						__unstableInputWidth="auto"
 						withSlider
 						hasBottomMargin={ isGlobalStyles }

package/src/components/height-control/index.js

@@ -164,7 +164,6 @@ export default function HeightControl( {
 						onChange={ onChange }
 						onUnitChange={ handleUnitChange }
 						min={ 0 }
-						size="__unstable-large"
 						label={ label }
 						hideLabelFromVision
 					/>
@@ -172,7 +171,6 @@ export default function HeightControl( {
 				<FlexItem isBlock>
 					<Spacer marginX={ 2 } marginBottom={ 0 }>
 						<RangeControl
-							__next40pxDefaultSize
 							value={ customRangeValue }
 							min={ 0 }
 							max={

package/src/components/html-element-control/index.js

@@ -88,7 +88,6 @@ export default function HTMLElementControl( {
 	return (
 		<VStack spacing={ 2 } className="block-editor-html-element-control">
 			<SelectControl
-				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ modifiedOptions }
 				value={ tagName }

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 && (
@@ -127,7 +126,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

@@ -17,11 +17,13 @@ import { unlock } from '../../../lock-unlock';
  * 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.
+ * @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 {InserterMediaItem[]} The media results.
  */
-export function useMediaResults( category, query = {} ) {
+export function useMediaResults( category, query = {}, refreshKey ) {
 	const [ mediaList, setMediaList ] = useState();
 	const [ isLoading, setIsLoading ] = useState( false );
 	// We need to keep track of the last request made because
@@ -32,25 +34,70 @@ 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();
 	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.
+			// 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( [] );
+			}
+			lastQueryKeyRef.current = key;
+			lastFetchRef.current = category.fetch;
 			const _media = await category.fetch?.( query );
-			if ( key === lastRequestRef.current ) {
+			if ( request === lastRequestRef.current ) {
 				setMediaList( _media );
 				setIsLoading( false );
 			}
 		} )();
-	}, [ category.name, ...Object.values( query ) ] );
+	}, [
+		category.name,
+		category.fetch,
+		...Object.values( query ),
+		refreshKey,
+	] );
 	return { mediaList, isLoading };
 }
 
+/**
+ * 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 ) {
 	const [ categories, setCategories ] = useState( [] );
 
@@ -110,7 +157,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 +168,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>