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

package/src/components/dimensions-tool/width-height-tool.js

@@ -79,7 +79,6 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ width }
 					onChange={ onDimensionChange( 'width' ) }
-					size="__unstable-large"
 				/>
 			</ToolsPanelItem>
 			<ToolsPanelItem
@@ -98,7 +97,6 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ height }
 					onChange={ onDimensionChange( 'height' ) }
-					size="__unstable-large"
 				/>
 			</ToolsPanelItem>
 		</>

package/src/components/font-appearance-control/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { CustomSelectControl } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -40,8 +39,12 @@ const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
  */
 export default function FontAppearanceControl( props ) {
 	const {
-		/** Start opting into the larger default height that will become the default size in a future version. */
-		__next40pxDefaultSize = false,
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+		 */
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		onChange,
 		hasFontStyles = true,
 		hasFontWeights = true,
@@ -148,27 +151,11 @@ export default function FontAppearanceControl( props ) {
 		);
 	};
 
-	if (
-		! __next40pxDefaultSize &&
-		( otherProps.size === undefined || otherProps.size === 'default' )
-	) {
-		deprecated(
-			`36px default size for wp.blockEditor.__experimentalFontAppearanceControl`,
-			{
-				since: '6.8',
-				version: '7.1',
-				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-			}
-		);
-	}
-
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
 				{ ...otherProps }
 				className="components-font-appearance-control"
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__shouldNotWarnDeprecated36pxSize
 				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }

package/src/components/font-family/README.md

@@ -28,7 +28,6 @@ const MyFontFamilyControl = () => {
 			onChange={ ( newFontFamily ) => {
 				setFontFamily( newFontFamily );
 			} }
-			__next40pxDefaultSize
 		/>
 	);
 };
@@ -74,11 +73,3 @@ The current font family value.
 - Default: ''
 
 The rest of the props are passed down to the underlying `<SelectControl />` instance.
-
-#### `__next40pxDefaultSize`
-
-- Type: `boolean`
-- Required: No
-- Default: `false`
-
-Start opting into the larger default height that will become the default size in a future version.

package/src/components/font-family/index.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { CustomSelectControl } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -16,8 +15,12 @@ import { __ } from '@wordpress/i18n';
 import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {
-	/** Start opting into the larger default height that will become the default size in a future version. */
-	__next40pxDefaultSize = false,
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 */
+	__next40pxDefaultSize: _next40pxDefaultSize,
 	value = '',
 	onChange,
 	fontFamilies,
@@ -45,26 +48,10 @@ export default function FontFamilyControl( {
 		} ) ),
 	];
 
-	if (
-		! __next40pxDefaultSize &&
-		( props.size === undefined || props.size === 'default' )
-	) {
-		deprecated(
-			`36px default size for wp.blockEditor.__experimentalFontFamilyControl`,
-			{
-				since: '6.8',
-				version: '7.1',
-				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-			}
-		);
-	}
-
 	const selectedValue =
 		options.find( ( option ) => option.key === value ) ?? '';
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font' ) }
 			value={ selectedValue }
 			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }

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,