@wordpress/block-editor 15.12.0 → 15.12.2-next.v.0

package/src/components/block-inspector/index.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
+	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { __unstableMotion as motion } from '@wordpress/components';
@@ -24,6 +25,7 @@ import BlockStyles from '../block-styles';
 import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
+import InspectorControlsLastItem from '../inspector-controls/last-item';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
@@ -145,30 +147,29 @@ function BlockInspector() {
 				renderedBlockClientId
 			);
 
-			// Temporary workaround for issue #71991
-			// Exclude Navigation block children from Content sidebar until proper
-			// drill-down experience is implemented (see #65699)
-			// This prevents a poor UX where all Nav block sub-items are shown
-			// when the parent block is in contentOnly mode.
-			// Build a Set of all navigation block descendants for efficient lookup
-			const navigationDescendants = new Set();
+			// Exclude items from the content tab that are already present in the
+			// List View tab.
+			const listViewDescendants = new Set();
 			descendants.forEach( ( clientId ) => {
-				if ( getBlockName( clientId ) === 'core/navigation' ) {
-					const navChildren = getClientIdsOfDescendants( clientId );
-					navChildren.forEach( ( childId ) =>
-						navigationDescendants.add( childId )
+				const blockName = getBlockName( clientId );
+				// Navigation block doesn't have List View block support, but
+				// it does have a custom implementation that is shown within
+				// patterns, so it's included in this condition.
+				if (
+					blockName === 'core/navigation' ||
+					hasBlockSupport( blockName, 'listView' )
+				) {
+					const listViewChildren =
+						getClientIdsOfDescendants( clientId );
+					listViewChildren.forEach( ( childId ) =>
+						listViewDescendants.add( childId )
 					);
 				}
 			} );
 
 			return descendants.filter( ( current ) => {
-				// Exclude navigation block children
-				if ( navigationDescendants.has( current ) ) {
-					return false;
-				}
-
 				return (
-					getBlockName( current ) !== 'core/list-item' &&
+					! listViewDescendants.has( current ) &&
 					getBlockEditingMode( current ) === 'contentOnly'
 				);
 			} );
@@ -369,6 +370,7 @@ const BlockInspectorSingleBlock = ( {
 					) }
 				</>
 			) }
+			<InspectorControlsLastItem.Slot />
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);

package/src/components/block-removal-warning-modal/index.js

@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	Modal,
 	Button,
+	CheckboxControl,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -17,6 +19,7 @@ import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 export function BlockRemovalWarningModal( { rules } ) {
+	const [ confirmed, setConfirmed ] = useState( false );
 	const { clientIds, selectPrevious, message } = useSelect( ( select ) =>
 		unlock( select( blockEditorStore ) ).getRemovalPromptData()
 	);
@@ -36,10 +39,20 @@ export function BlockRemovalWarningModal( { rules } ) {
 		};
 	}, [ rules, setBlockRemovalRules ] );
 
+	// Reset confirmed state when modal opens with new content.
+	useEffect( () => {
+		setConfirmed( false );
+	}, [ clientIds ] );
+
 	if ( ! message ) {
 		return;
 	}
 
+	const isStructured = typeof message === 'object' && message !== null;
+	const description = isStructured ? message.description : message;
+	const requireConfirmation = isStructured && message.requireConfirmation;
+	const isRemoveDisabled = requireConfirmation && ! confirmed;
+
 	const onConfirmRemoval = () => {
 		privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
 		clearBlockRemovalPrompt();
@@ -47,27 +60,50 @@ export function BlockRemovalWarningModal( { rules } ) {
 
 	return (
 		<Modal
-			title={ __( 'Be careful!' ) }
+			title={ __( 'Confirm deletion' ) }
 			onRequestClose={ clearBlockRemovalPrompt }
 			size="medium"
 		>
-			<p>{ message }</p>
-			<HStack justify="right">
-				<Button
-					variant="tertiary"
-					onClick={ clearBlockRemovalPrompt }
-					__next40pxDefaultSize
-				>
-					{ __( 'Cancel' ) }
-				</Button>
-				<Button
-					variant="primary"
-					onClick={ onConfirmRemoval }
-					__next40pxDefaultSize
-				>
-					{ __( 'Delete' ) }
-				</Button>
-			</HStack>
+			<VStack spacing={ 4 }>
+				<div>
+					<p>{ description }</p>
+					{ isStructured &&
+						( message.warning || message.subtext ) && (
+							<p>
+								{ message.warning && (
+									<strong>{ message.warning }</strong>
+								) }
+								{ message.warning && message.subtext && ' ' }
+								{ message.subtext }
+							</p>
+						) }
+				</div>
+				{ requireConfirmation && (
+					<CheckboxControl
+						label={ __( 'I understand the consequences' ) }
+						checked={ confirmed }
+						onChange={ setConfirmed }
+					/>
+				) }
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ clearBlockRemovalPrompt }
+						__next40pxDefaultSize
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ onConfirmRemoval }
+						disabled={ isRemoveDisabled }
+						accessibleWhenDisabled
+						__next40pxDefaultSize
+					>
+						{ __( 'Delete' ) }
+					</Button>
+				</HStack>
+			</VStack>
 		</Modal>
 	);
 }

package/src/components/block-switcher/block-transformations-menu.native.js

@@ -33,6 +33,7 @@ const BlockTransformationsMenu = ( {
 		const blocksThatSplitWhenTransformed = {
 			'core/list': [ 'core/paragraph', 'core/heading' ],
 			'core/quote': [ 'core/paragraph' ],
+			'core/pullquote': [ 'core/paragraph' ],
 		};
 
 		return possibleTransformations.map( ( item ) => {

package/src/components/block-toolbar/test/__snapshots__/block-toolbar-menu.native.js.snap

@@ -68,12 +68,10 @@ exports[`Block Actions Menu block options duplicates a block 1`] = `
 <!-- /wp:heading -->"
 `;
 
-exports[`Block Actions Menu block options transforms a Paragraph block into a Quote block 1`] = `
-"<!-- wp:quote -->
-<blockquote class="wp-block-quote"><!-- wp:paragraph -->
-<p>Hello!</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
+exports[`Block Actions Menu block options transforms a Paragraph block into a Pullquote block 1`] = `
+"<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>Hello!</p></blockquote></figure>
+<!-- /wp:pullquote -->
 
 <!-- wp:spacer -->
 <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

package/src/components/block-toolbar/test/block-toolbar-menu.native.js

@@ -357,7 +357,7 @@ describe( 'Block Actions Menu', () => {
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
-		it( 'transforms a Paragraph block into a Quote block', async () => {
+		it( 'transforms a Paragraph block into a Pullquote block', async () => {
 			const screen = await initializeEditor();
 			const { getByLabelText, getByRole } = screen;
 
@@ -397,7 +397,7 @@ describe( 'Block Actions Menu', () => {
 			expect( headerTitle ).toBeVisible();
 
 			// Tap on the Transform block button
-			fireEvent.press( getByLabelText( /Quote/ ) );
+			fireEvent.press( getByLabelText( /Pullquote/ ) );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );

package/src/components/block-visibility/use-block-visibility.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useViewportMatch } from '@wordpress/compose';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,7 +14,7 @@ import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
  * @param {Object}         options                 Parameters to avoid extra store subscriptions.
  * @param {Object|boolean} options.blockVisibility Block visibility metadata.
  * @param {string}         options.deviceType      Current device type ('desktop', 'tablet', 'mobile').
- * @return {Object} Object with `isBlockCurrentlyHidden` and `currentViewport` boolean properties.
+ * @return {Object} Object with `isBlockCurrentlyHidden` (boolean) and `currentViewport` (string) properties.
  */
 export default function useBlockVisibility( options = {} ) {
 	const {
@@ -31,37 +30,23 @@ export default function useBlockVisibility( options = {} ) {
 	 * 1. Device type override (Mobile/Tablet) - uses device type to determine viewport
 	 * 2. Actual window size (Desktop mode) - uses viewport detection
 	 */
-	const currentViewport = useMemo( () => {
-		if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.key ) {
-			return BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
-		}
-		if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.key ) {
-			return BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
-		}
-		if ( ! isLargerThanMobile ) {
-			return BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
-		}
-		if ( isLargerThanMobile && ! isLargerThanTablet ) {
-			return BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
-		}
-		return BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
-	}, [ deviceType, isLargerThanMobile, isLargerThanTablet ] );
+	let currentViewport;
+	if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.key ) {
+		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
+	} else if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.key ) {
+		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
+	} else if ( ! isLargerThanMobile ) {
+		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
+	} else if ( isLargerThanMobile && ! isLargerThanTablet ) {
+		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
+	} else {
+		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
+	}
 
 	// Determine if block is currently hidden.
-	const isBlockCurrentlyHidden = useMemo( () => {
-		if ( blockVisibility === false ) {
-			return true;
-		}
+	const isBlockCurrentlyHidden =
+		blockVisibility === false ||
+		blockVisibility?.viewport?.[ currentViewport ] === false;
 
-		if ( blockVisibility?.viewport?.[ currentViewport ] === false ) {
-			return true;
-		}
-
-		return false;
-	}, [ blockVisibility, currentViewport ] );
-
-	return {
-		isBlockCurrentlyHidden,
-		currentViewport,
-	};
+	return { isBlockCurrentlyHidden, currentViewport };
 }

package/src/components/global-styles/hooks.js

@@ -100,6 +100,7 @@ export function useSettingsForBlockElement(
 			'textAlign',
 			'textTransform',
 			'textDecoration',
+			'textIndent',
 			'writingMode',
 		].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
@@ -110,6 +111,15 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
+		// Text indent needs explicit handling since it may not be in parent settings.
+		if ( supportedStyles.includes( 'textIndent' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				textIndent:
+					updatedSettings.typography?.textIndent ?? 'subsequent',
+			};
+		}
+
 		// The column-count style is named text column to reduce confusion with
 		// the columns block and manage expectations from the support.
 		// See: https://github.com/WordPress/gutenberg/pull/33587

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

@@ -7,6 +7,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	Notice,
+	ToggleControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -22,6 +23,7 @@ import LetterSpacingControl from '../letter-spacing-control';
 import TextAlignmentControl from '../text-alignment-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
+import TextIndentControl from '../text-indent-control';
 import WritingModeControl from '../writing-mode-control';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
@@ -42,6 +44,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasTextAlign = useHasTextAlignmentControl( settings );
 	const hasTextTransform = useHasTextTransformControl( settings );
 	const hasTextDecoration = useHasTextDecorationControl( settings );
+	const hasTextIndent = useHasTextIndentControl( settings );
 	const hasWritingMode = useHasWritingModeControl( settings );
 	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
@@ -55,6 +58,7 @@ export function useHasTypographyPanel( settings ) {
 		hasTextTransform ||
 		hasFontSize ||
 		hasTextDecoration ||
+		hasTextIndent ||
 		hasWritingMode ||
 		hasTextColumns
 	);
@@ -118,6 +122,10 @@ function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
+function useHasTextIndentControl( settings ) {
+	return settings?.typography?.textIndent;
+}
+
 /**
  * Concatenate all the font sizes into a single list for the font size picker.
  *
@@ -169,6 +177,7 @@ const DEFAULT_CONTROLS = {
 	textAlign: true,
 	textTransform: true,
 	textDecoration: true,
+	textIndent: true,
 	writingMode: true,
 	textColumns: true,
 };
@@ -181,6 +190,7 @@ export default function TypographyPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
+	isGlobalStyles = false,
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -358,6 +368,48 @@ export default function TypographyPanel( {
 	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
 	const resetLetterSpacing = () => setLetterSpacing( undefined );
 
+	// Text Indent
+	const hasTextIndentControl = useHasTextIndentControl( settings );
+	const textIndent = decodeValue( inheritedValue?.typography?.textIndent );
+
+	// Get the setting value - can be 'subsequent' (default), 'all', or false.
+	// The setting determines which CSS selector is used for the text-indent style.
+	const textIndentSetting = settings?.typography?.textIndent ?? 'subsequent';
+	const isTextIndentAll = textIndentSetting === 'all';
+
+	const setTextIndentValue = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'textIndent' ],
+				newValue || undefined
+			)
+		);
+	};
+
+	const onToggleTextIndentAll = ( newValue ) => {
+		// Toggle between 'all' and 'subsequent' for the setting.
+		// Include the settings change so it can be handled atomically by the parent.
+		onChange( {
+			...value,
+			settings: {
+				typography: {
+					textIndent: newValue ? 'all' : 'subsequent',
+				},
+			},
+		} );
+	};
+
+	const hasTextIndent = () => !! value?.typography?.textIndent;
+	const resetTextIndent = () => {
+		onChange(
+			setImmutably( value, [ 'typography', 'textIndent' ], undefined )
+		);
+	};
+	const textIndentHelp = isTextIndentAll
+		? __( 'Indents the first line of all paragraphs.' )
+		: __( 'Indents the first line of each paragraph after the first one.' );
+
 	// Text Columns
 	const hasTextColumnsControl = useHasTextColumnsControl( settings );
 	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
@@ -490,7 +542,6 @@ export default function TypographyPanel( {
 			) }
 			{ hasAppearanceControl && (
 				<ToolsPanelItem
-					className="single-column"
 					label={ appearanceControlLabel }
 					hasValue={ hasFontAppearance }
 					onDeselect={ resetFontAppearance }
@@ -544,6 +595,32 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasTextIndentControl && (
+				<ToolsPanelItem
+					label={ __( 'Line indent' ) }
+					hasValue={ hasTextIndent }
+					onDeselect={ resetTextIndent }
+					isShownByDefault={ defaultControls.textIndent }
+					panelId={ panelId }
+				>
+					<TextIndentControl
+						value={ textIndent }
+						onChange={ setTextIndentValue }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+						withSlider
+						hasBottomMargin={ isGlobalStyles }
+					/>
+					{ isGlobalStyles && (
+						<ToggleControl
+							label={ __( 'Indent all paragraphs' ) }
+							checked={ isTextIndentAll }
+							onChange={ onToggleTextIndentAll }
+							help={ textIndentHelp }
+						/>
+					) }
+				</ToolsPanelItem>
+			) }
 			{ hasTextColumnsControl && (
 				<ToolsPanelItem
 					className="single-column"

package/src/components/grid/grid-visualizer.js

@@ -15,13 +15,18 @@ import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
  */
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
-import { range, GridRect, getGridInfo } from './utils';
+import { range, GridRect, getGridInfo, getGridItemRect } from './utils';
 import { store as blockEditorStore } from '../../store';
 import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
 import ButtonBlockAppender from '../button-block-appender';
 import { unlock } from '../../lock-unlock';
 
-export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
+export function GridVisualizer( {
+	clientId,
+	contentRef,
+	parentLayout,
+	childGridClientId,
+} ) {
 	const isDistractionFree = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().isDistractionFree,
@@ -42,17 +47,31 @@ export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
 			gridElement={ gridElement }
 			isManualGrid={ isManualGrid }
 			ref={ contentRef }
+			childGridClientId={ childGridClientId }
 		/>
 	);
 }
 
 const GridVisualizerGrid = forwardRef(
-	( { gridClientId, gridElement, isManualGrid }, ref ) => {
+	( { gridClientId, gridElement, isManualGrid, childGridClientId }, ref ) => {
 		const [ gridInfo, setGridInfo ] = useState( () =>
 			getGridInfo( gridElement )
 		);
 		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
 
+		// Get the element for the child grid block so we can
+		// compute its position and hide overlapping visualizer cells.
+		const childGridElement = useBlockElement( childGridClientId );
+
+		// Compute the child grid block's rect from its position in the grid.
+		// This works for both manual and non-manual grids.
+		const childGridRect = useMemo( () => {
+			if ( ! childGridElement ) {
+				return null;
+			}
+			return getGridItemRect( childGridElement );
+		}, [ childGridElement ] );
+
 		useEffect( () => {
 			const resizeCallback = () =>
 				setGridInfo( getGridInfo( gridElement ) );
@@ -101,14 +120,13 @@ const GridVisualizerGrid = forwardRef(
 						<ManualGridVisualizer
 							gridClientId={ gridClientId }
 							gridInfo={ gridInfo }
+							childGridRect={ childGridRect }
 						/>
 					) : (
-						Array.from( { length: gridInfo.numItems }, ( _, i ) => (
-							<GridVisualizerCell
-								key={ i }
-								color={ gridInfo.currentColor }
-							/>
-						) )
+						<AutoGridVisualizer
+							gridInfo={ gridInfo }
+							childGridRect={ childGridRect }
+						/>
 					) }
 				</div>
 			</BlockPopoverCover>
@@ -116,7 +134,27 @@ const GridVisualizerGrid = forwardRef(
 	}
 );
 
-function ManualGridVisualizer( { gridClientId, gridInfo } ) {
+function AutoGridVisualizer( { gridInfo, childGridRect } ) {
+	return range( 1, gridInfo.numRows ).map( ( row ) =>
+		range( 1, gridInfo.numColumns ).map( ( column ) => {
+			// Don't render visualizer cells for a selected child block
+			// that is itself a grid, so that only the child's grid
+			// visualizer is visible.
+			let color = gridInfo.currentColor;
+			if ( childGridRect?.contains( column, row ) ) {
+				color = 'transparent';
+			}
+			return (
+				<GridVisualizerCell
+					key={ `${ row }-${ column }` }
+					color={ color }
+				/>
+			);
+		} )
+	);
+}
+
+function ManualGridVisualizer( { gridClientId, gridInfo, childGridRect } ) {
 	const [ highlightedRect, setHighlightedRect ] = useState( null );
 
 	const gridItemStyles = useSelect(
@@ -155,6 +193,14 @@ function ManualGridVisualizer( { gridClientId, gridInfo } ) {
 
 	return range( 1, gridInfo.numRows ).map( ( row ) =>
 		range( 1, gridInfo.numColumns ).map( ( column ) => {
+			// Don't render visualizer cells for a selected child block
+			// that is itself a grid, so that only the child's grid
+			// visualizer is visible.
+			const isChildGridCell = childGridRect?.contains( column, row );
+			let color = gridInfo.currentColor;
+			if ( isChildGridCell ) {
+				color = 'transparent';
+			}
 			const isCellOccupied = occupiedRects.some( ( rect ) =>
 				rect.contains( column, row )
 			);
@@ -163,10 +209,10 @@ function ManualGridVisualizer( { gridClientId, gridInfo } ) {
 			return (
 				<GridVisualizerCell
 					key={ `${ row }-${ column }` }
-					color={ gridInfo.currentColor }
+					color={ color }
 					className={ isHighlighted && 'is-highlighted' }
 				>
-					{ isCellOccupied ? (
+					{ isCellOccupied && ! isChildGridCell ? (
 						<GridVisualizerDropZone
 							column={ column }
 							row={ row }

package/src/components/iframe/index.js

@@ -14,7 +14,12 @@ import {
 	useEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useRefEffect,
+	useDisabled,
+	useViewportMatch,
+} from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
@@ -26,6 +31,8 @@ import { getCompatibilityStyles } from './get-compatibility-styles';
 import { useScaleCanvas } from './use-scale-canvas';
 import { store as blockEditorStore } from '../../store';
 
+const ViewportWidthProvider = useViewportMatch.__experimentalWidthProvider;
+
 function bubbleEvent( event, Constructor, frame ) {
 	const init = {};
 
@@ -227,6 +234,7 @@ function Iframe( {
 	const {
 		contentResizeListener,
 		containerResizeListener,
+		containerWidth,
 		isZoomedOut,
 		scaleContainerWidth,
 	} = useScaleCanvas( {
@@ -347,7 +355,9 @@ function Iframe( {
 						>
 							{ contentResizeListener }
 							<StyleProvider document={ iframeDocument }>
-								{ children }
+								<ViewportWidthProvider value={ containerWidth }>
+									{ children }
+								</ViewportWidthProvider>
 							</StyleProvider>
 						</body>,
 						iframeDocument.documentElement

package/src/components/iframe/use-scale-canvas.js

@@ -484,6 +484,7 @@ export function useScaleCanvas( {
 	return {
 		isZoomedOut,
 		scaleContainerWidth,
+		containerWidth,
 		contentResizeListener,
 		containerResizeListener,
 	};

package/src/components/inserter/menu.native.js

@@ -129,6 +129,7 @@ function InserterMenu( {
 				insertionIndex,
 				destinationRootClientId,
 				true,
+				0,
 				{ source: 'inserter_menu' }
 			);
 		},