@wordpress/block-editor 12.1.0 → 12.3.0

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

@@ -20,17 +20,16 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
  * @property {?string|?number}               size  A default font size.
  * @property {string}                        name  A font size name, displayed in the UI.
  * @property {string}                        slug  A font size slug
- * @property {boolean|FluidPreset|undefined} fluid A font size slug
+ * @property {boolean|FluidPreset|undefined} fluid Specifies the minimum and maximum font size value of a fluid font size.
  */
 
 /**
  * @typedef {Object} TypographySettings
- * @property {?string|?number} size              A default font size.
- * @property {?string}         minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
- * @property {?string}         maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
- * @property {?number}         scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
- * @property {?number}         minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
- * @property {?string}         minFontSize       The smallest a calculated font size may be. Optional.
+ * @property {?string} minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
+ * @property {?string} maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
+ * @property {?number} scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @property {?string} minFontSize       The smallest a calculated font size may be. Optional.
  */
 
 /**
@@ -38,38 +37,29 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
  * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
  *
  * @param {Preset}                     preset
- * @param {Object}                     typographySettings
- * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
+ * @param {Object}                     typographyOptions
+ * @param {boolean|TypographySettings} typographyOptions.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
  *
  * @return {string|*} A font-size value or the value of preset.size.
  */
-export function getTypographyFontSizeValue( preset, typographySettings ) {
+export function getTypographyFontSizeValue( preset, typographyOptions ) {
 	const { size: defaultSize } = preset;
 
-	/*
-	 * Catches falsy values and 0/'0'.
-	 * Fluid calculations cannot be performed on 0.
-	 */
-	if ( ! defaultSize || '0' === defaultSize ) {
-		return defaultSize;
-	}
-
-	if (
-		! typographySettings?.fluid ||
-		( typeof typographySettings?.fluid === 'object' &&
-			Object.keys( typographySettings.fluid ).length === 0 )
-	) {
+	if ( ! isFluidTypographyEnabled( typographyOptions ) ) {
 		return defaultSize;
 	}
-
-	// A font size has explicitly bypassed fluid calculations.
-	if ( false === preset?.fluid ) {
+	/*
+	 * Checks whether a font size has explicitly bypassed fluid calculations.
+	 * Also catches falsy values and 0/'0'.
+	 * Fluid calculations cannot be performed on `0`.
+	 */
+	if ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {
 		return defaultSize;
 	}
 
 	const fluidTypographySettings =
-		typeof typographySettings?.fluid === 'object'
-			? typographySettings?.fluid
+		typeof typographyOptions?.fluid === 'object'
+			? typographyOptions?.fluid
 			: {};
 
 	const fluidFontSizeValue = getComputedFluidTypographyValue( {
@@ -77,6 +67,7 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 		maximumFontSize: preset?.fluid?.max,
 		fontSize: defaultSize,
 		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+		maximumViewPortWidth: fluidTypographySettings?.maxViewPortWidth,
 	} );
 
 	if ( !! fluidFontSizeValue ) {
@@ -85,3 +76,37 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 
 	return defaultSize;
 }
+
+function isFluidTypographyEnabled( typographySettings ) {
+	const fluidSettings = typographySettings?.fluid;
+	return (
+		true === fluidSettings ||
+		( fluidSettings &&
+			typeof fluidSettings === 'object' &&
+			Object.keys( fluidSettings ).length > 0 )
+	);
+}
+
+/**
+ * Returns fluid typography settings from theme.json setting object.
+ *
+ * @param {Object} settings            Theme.json settings
+ * @param {Object} settings.typography Theme.json typography settings
+ * @param {Object} settings.layout     Theme.json layout settings
+ * @return {TypographySettings} Fluid typography settings
+ */
+export function getFluidTypographyOptionsFromSettings( settings ) {
+	const typographySettings = settings?.typography;
+	const layoutSettings = settings?.layout;
+	return isFluidTypographyEnabled( typographySettings ) &&
+		layoutSettings?.wideSize
+		? {
+				fluid: {
+					maxViewPortWidth: layoutSettings.wideSize,
+					...typographySettings.fluid,
+				},
+		  }
+		: {
+				fluid: typographySettings?.fluid,
+		  };
+}

package/src/components/global-styles/use-global-styles-output.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty, kebabCase, set } from 'lodash';
+import { get, kebabCase, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -22,7 +22,10 @@ import { getCSSRules } from '@wordpress/style-engine';
  */
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
-import { getTypographyFontSizeValue } from './typography-utils';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
 import { PresetDuotoneFilter } from '../duotone/components';
@@ -398,7 +401,7 @@ export function getStylesDeclarations(
 			 */
 			ruleValue = getTypographyFontSizeValue(
 				{ size: ruleValue },
-				tree?.settings?.typography
+				getFluidTypographyOptionsFromSettings( tree?.settings )
 			);
 		}
 
@@ -448,7 +451,11 @@ export function getLayoutStyles( {
 		Object.values( tree.settings.layout.definitions ).forEach(
 			( { className, name, spacingStyles } ) => {
 				// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
-				if ( ! hasBlockGapSupport && 'flex' !== name ) {
+				if (
+					! hasBlockGapSupport &&
+					'flex' !== name &&
+					'grid' !== name
+				) {
 					return;
 				}
 
@@ -685,7 +692,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 	// Top-level.
 	const presets = pickPresets( tree.settings );
 	const custom = tree.settings?.custom;
-	if ( ! isEmpty( presets ) || custom ) {
+	if ( Object.keys( presets ).length > 0 || custom ) {
 		nodes.push( {
 			presets,
 			custom,
@@ -698,7 +705,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 		( [ blockName, node ] ) => {
 			const blockPresets = pickPresets( node );
 			const blockCustom = node.custom;
-			if ( ! isEmpty( blockPresets ) || blockCustom ) {
+			if ( Object.keys( blockPresets ).length > 0 || blockCustom ) {
 				nodes.push( {
 					presets: blockPresets,
 					custom: blockCustom,
@@ -964,7 +971,7 @@ export const toStyles = (
 		}
 
 		const classes = getPresetsClasses( selector, presets );
-		if ( ! isEmpty( classes ) ) {
+		if ( classes.length > 0 ) {
 			ruleset += classes;
 		}
 	} );
@@ -980,7 +987,10 @@ export function toSvgFilters( tree, blockSelectors ) {
 }
 
 const getSelectorsConfig = ( blockType, rootSelector ) => {
-	if ( ! isEmpty( blockType?.selectors ) ) {
+	if (
+		blockType?.selectors &&
+		Object.keys( blockType.selectors ).length > 0
+	) {
 		return blockType.selectors;
 	}
 

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

@@ -7,7 +7,10 @@ import fastDeepEqual from 'fast-deep-equal/es6';
 /**
  * Internal dependencies
  */
-import { getTypographyFontSizeValue } from './typography-utils';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from './typography-utils';
 
 /* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
@@ -73,8 +76,11 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'typography', 'fontSizes' ],
-		valueFunc: ( preset, { typography: typographySettings } ) =>
-			getTypographyFontSizeValue( preset, typographySettings ),
+		valueFunc: ( preset, settings ) =>
+			getTypographyFontSizeValue(
+				preset,
+				getFluidTypographyOptionsFromSettings( settings )
+			),
 		valueKey: 'size',
 		cssVarInfix: 'font-size',
 		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],

package/src/components/iframe/index.js

@@ -12,7 +12,7 @@ import {
 	forwardRef,
 	useMemo,
 	useReducer,
-	renderToString,
+	useEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -104,7 +104,6 @@ async function loadScript( head, { id, src } ) {
 function Iframe( {
 	contentRef,
 	children,
-	head,
 	tabIndex = 0,
 	scale = 1,
 	frameSize = 0,
@@ -121,12 +120,7 @@ function Iframe( {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const styles = useParsedAssets( assets?.styles );
-	const styleIds = styles.map( ( style ) => style.id );
 	const compatStyles = useCompatibilityStyles();
-	const neededCompatStyles = compatStyles.filter(
-		( style ) => ! styleIds.includes( style.id )
-	);
 	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -138,15 +132,11 @@ function Iframe( {
 		function preventFileDropDefault( event ) {
 			event.preventDefault();
 		}
-		function setDocumentIfReady() {
+		function onLoad() {
 			const { contentDocument, ownerDocument } = node;
-			const { readyState, documentElement } = contentDocument;
+			const { documentElement } = contentDocument;
 			iFrameDocument = contentDocument;
 
-			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
-				return false;
-			}
-
 			bubbleEvents( contentDocument );
 			setIframeDocument( contentDocument );
 			clearerRef( documentElement );
@@ -164,9 +154,24 @@ function Iframe( {
 			);
 
 			contentDocument.dir = ownerDocument.dir;
-			documentElement.removeChild( contentDocument.head );
 			documentElement.removeChild( contentDocument.body );
 
+			for ( const compatStyle of compatStyles ) {
+				if ( contentDocument.getElementById( compatStyle.id ) ) {
+					continue;
+				}
+
+				contentDocument.head.appendChild(
+					compatStyle.cloneNode( true )
+				);
+
+				// eslint-disable-next-line no-console
+				console.warn(
+					`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,
+					compatStyle
+				);
+			}
+
 			iFrameDocument.addEventListener(
 				'dragover',
 				preventFileDropDefault,
@@ -177,14 +182,12 @@ function Iframe( {
 				preventFileDropDefault,
 				false
 			);
-			return true;
 		}
 
-		// Document set with srcDoc is not immediately ready.
-		node.addEventListener( 'load', setDocumentIfReady );
+		node.addEventListener( 'load', onLoad );
 
 		return () => {
-			node.removeEventListener( 'load', setDocumentIfReady );
+			node.removeEventListener( 'load', onLoad );
 			iFrameDocument?.removeEventListener(
 				'dragover',
 				preventFileDropDefault
@@ -215,37 +218,25 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
+		headRef,
 	] );
 
-	const styleAssets = (
-		<>
-			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
-			{ [ ...styles, ...neededCompatStyles ].map(
-				( { tagName, href, id, rel, media, textContent } ) => {
-					const TagName = tagName.toLowerCase();
-
-					if ( TagName === 'style' ) {
-						return (
-							<TagName { ...{ id } } key={ id }>
-								{ textContent }
-							</TagName>
-						);
-					}
-
-					return (
-						<TagName { ...{ href, id, rel, media } } key={ id } />
-					);
-				}
-			) }
-		</>
-	);
-
 	// Correct doctype is required to enable rendering in standards
 	// mode. Also preload the styles to avoid a flash of unstyled
 	// content.
-	const srcDoc = useMemo( () => {
-		return '<!doctype html>' + renderToString( styleAssets );
-	}, [] );
+	const html =
+		'<!doctype html>' +
+		'<style>html{height:auto!important;}body{margin:0}</style>' +
+		( assets?.styles ?? '' );
+
+	const [ src, cleanup ] = useMemo( () => {
+		const _src = URL.createObjectURL(
+			new window.Blob( [ html ], { type: 'text/html' } )
+		);
+		return [ _src, () => URL.revokeObjectURL( _src ) ];
+	}, [ html ] );
+
+	useEffect( () => cleanup, [ cleanup ] );
 
 	// We need to counter the margin created by scaling the iframe. If the scale
 	// is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the
@@ -260,15 +251,18 @@ function Iframe( {
 				style={ {
 					...props.style,
 					height: expand ? contentHeight : props.style?.height,
-					marginTop: scale
-						? -marginFromScaling + frameSize
-						: props.style?.marginTop,
-					marginBottom: scale
-						? -marginFromScaling + frameSize
-						: props.style?.marginBottom,
-					transform: scale
-						? `scale( ${ scale } )`
-						: props.style?.transform,
+					marginTop:
+						scale !== 1
+							? -marginFromScaling + frameSize
+							: props.style?.marginTop,
+					marginBottom:
+						scale !== 1
+							? -marginFromScaling + frameSize
+							: props.style?.marginBottom,
+					transform:
+						scale !== 1
+							? `scale( ${ scale } )`
+							: props.style?.transform,
 					transition: 'all .3s',
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
@@ -276,30 +270,24 @@ function Iframe( {
 				// Correct doctype is required to enable rendering in standards
 				// mode. Also preload the styles to avoid a flash of unstyled
 				// content.
-				srcDoc={ srcDoc }
+				src={ src }
 				title={ __( 'Editor canvas' ) }
 			>
 				{ iframeDocument &&
 					createPortal(
-						<>
-							<head ref={ headRef }>
-								{ styleAssets }
-								{ head }
-							</head>
-							<body
-								ref={ bodyRef }
-								className={ classnames(
-									'block-editor-iframe__body',
-									'editor-styles-wrapper',
-									...bodyClasses
-								) }
-							>
-								{ contentResizeListener }
-								<StyleProvider document={ iframeDocument }>
-									{ children }
-								</StyleProvider>
-							</body>
-						</>,
+						<body
+							ref={ bodyRef }
+							className={ classnames(
+								'block-editor-iframe__body',
+								'editor-styles-wrapper',
+								...bodyClasses
+							) }
+						>
+							{ contentResizeListener }
+							<StyleProvider document={ iframeDocument }>
+								{ children }
+							</StyleProvider>
+						</body>,
 						iframeDocument.documentElement
 					) }
 			</iframe>

package/src/components/iframe/use-compatibility-styles.js

@@ -38,12 +38,6 @@ export function useCompatibilityStyles() {
 					return accumulator;
 				}
 
-				// Generally, ignore inline styles. We add inline styles belonging to a
-				// stylesheet later, which may or may not match the selectors.
-				if ( ownerNode.tagName !== 'LINK' ) {
-					return accumulator;
-				}
-
 				// Don't try to add the reset styles, which were removed as a dependency
 				// from `edit-blocks` for the iframe since we don't need to reset admin
 				// styles.
@@ -76,20 +70,42 @@ export function useCompatibilityStyles() {
 				}
 
 				if ( matchFromRules( cssRules ) ) {
-					// Display warning once we have a way to add style dependencies to the editor.
-					// See: https://github.com/WordPress/gutenberg/pull/37466.
-					accumulator.push( ownerNode.cloneNode( true ) );
+					const isInline = ownerNode.tagName === 'STYLE';
 
-					// Add inline styles belonging to the stylesheet.
-					const inlineCssId = ownerNode.id.replace(
-						'-css',
-						'-inline-css'
-					);
-					const inlineCssElement =
-						document.getElementById( inlineCssId );
+					if ( isInline ) {
+						// If the current target is inline,
+						// it could be a dependency of an existing stylesheet.
+						// Look for that dependency and add it BEFORE the current target.
+						const mainStylesCssId = ownerNode.id.replace(
+							'-inline-css',
+							'-css'
+						);
+						const mainStylesElement =
+							document.getElementById( mainStylesCssId );
+						if ( mainStylesElement ) {
+							accumulator.push(
+								mainStylesElement.cloneNode( true )
+							);
+						}
+					}
+
+					accumulator.push( ownerNode.cloneNode( true ) );
 
-					if ( inlineCssElement ) {
-						accumulator.push( inlineCssElement.cloneNode( true ) );
+					if ( ! isInline ) {
+						// If the current target is not inline,
+						// we still look for inline styles that could be relevant for the current target.
+						// If they exist, add them AFTER the current target.
+						const inlineStylesCssId = ownerNode.id.replace(
+							'-css',
+							'-inline-css'
+						);
+						const inlineStylesElement =
+							document.getElementById( inlineStylesCssId );
+						if ( inlineStylesElement ) {
+							accumulator.push(
+								inlineStylesElement.cloneNode( true )
+							);
+						}
 					}
 				}
 

package/src/components/inner-blocks/README.md

@@ -180,3 +180,8 @@ For example, a button block, deeply nested in several levels of block `X` that u
 
 -   **Type:** `Function`
 -   **Default:** - `undefined`. The placeholder is an optional function that can be passed in to be a rendered component placed in front of the appender. This can be used to represent an example state prior to any blocks being placed. See the Social Links for an implementation example.
+
+### `prioritizedInserterBlocks`
+
+-   **Type:** `Array`
+-   **Default:** - `undefined`. Determines which block types should be shown in the block inserter. For example, when inserting a block within the Navigation block we specify `core/navigation-link` and `core/navigation-link/page` as these are the most commonly used inner blocks. `prioritizedInserterBlocks` takes an array of the form {blockName}/{variationName}, where {variationName} is optional.

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

@@ -45,6 +45,7 @@ function UncontrolledInnerBlocks( props ) {
 	const {
 		clientId,
 		allowedBlocks,
+		prioritizedInserterBlocks,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		template,
@@ -62,6 +63,7 @@ function UncontrolledInnerBlocks( props ) {
 	useNestedSettingsUpdate(
 		clientId,
 		allowedBlocks,
+		prioritizedInserterBlocks,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		templateLock,

package/src/components/inner-blocks/index.native.js

@@ -17,7 +17,6 @@ import useBlockContext from './use-block-context';
  * Internal dependencies
  */
 import BlockList from '../block-list';
-import BlockListCompact from '../block-list/block-list-compact';
 import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { BlockContextProvider } from '../block-context';
@@ -73,9 +72,13 @@ function UncontrolledInnerBlocks( props ) {
 	const {
 		clientId,
 		allowedBlocks,
+		prioritizedInserterBlocks,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
 		template,
 		templateLock,
 		templateInsertUpdatesSelection,
+		__experimentalCaptureToolbars: captureToolbars,
 		orientation,
 		renderAppender,
 		renderFooterAppender,
@@ -92,12 +95,21 @@ function UncontrolledInnerBlocks( props ) {
 		blockWidth,
 		__experimentalLayout: layout = defaultLayout,
 		gridProperties,
-		useCompactList,
 	} = props;
 
 	const context = useBlockContext( clientId );
 
-	useNestedSettingsUpdate( clientId, allowedBlocks, templateLock );
+	useNestedSettingsUpdate(
+		clientId,
+		allowedBlocks,
+		prioritizedInserterBlocks,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
+		templateLock,
+		captureToolbars,
+		orientation,
+		layout
+	);
 
 	useInnerBlockTemplateSync(
 		clientId,
@@ -106,12 +118,10 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
-	const BlockListComponent = useCompactList ? BlockListCompact : BlockList;
-
 	return (
 		<LayoutProvider value={ layout }>
 			<BlockContextProvider value={ context }>
-				<BlockListComponent
+				<BlockList
 					marginVertical={ marginVertical }
 					marginHorizontal={ marginHorizontal }
 					rootClientId={ clientId }

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -25,6 +25,7 @@ const pendingSettingsUpdates = new WeakMap();
  * @param {string}               clientId                   The client ID of the block to update.
  * @param {string[]}             allowedBlocks              An array of block names which are permitted
  *                                                          in inner blocks.
+ * @param {string[]}             prioritizedInserterBlocks  Block names and/or block variations to be prioritized in the inserter, in the format {blockName}/{variationName}.
  * @param {?WPDirectInsertBlock} __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ].
  * @param {?Function|boolean}    __experimentalDirectInsert If a default block should be inserted directly by the
  *                                                          appender.
@@ -40,6 +41,7 @@ const pendingSettingsUpdates = new WeakMap();
 export default function useNestedSettingsUpdate(
 	clientId,
 	allowedBlocks,
+	prioritizedInserterBlocks,
 	__experimentalDefaultBlock,
 	__experimentalDirectInsert,
 	templateLock,
@@ -64,13 +66,27 @@ export default function useNestedSettingsUpdate(
 		[ clientId ]
 	);
 
-	// Memoize as inner blocks implementors often pass a new array on every
-	// render.
-	const _allowedBlocks = useMemo( () => allowedBlocks, allowedBlocks );
+	// Memoize allowedBlocks and prioritisedInnerBlocks based on the contents
+	// of the arrays. Implementors often pass a new array on every render,
+	// and the contents of the arrays are just strings, so the entire array
+	// can be passed as dependencies.
+
+	const _allowedBlocks = useMemo(
+		() => allowedBlocks,
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		allowedBlocks
+	);
+
+	const _prioritizedInserterBlocks = useMemo(
+		() => prioritizedInserterBlocks,
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		prioritizedInserterBlocks
+	);
 
 	useLayoutEffect( () => {
 		const newSettings = {
 			allowedBlocks: _allowedBlocks,
+			prioritizedInserterBlocks: _prioritizedInserterBlocks,
 			templateLock:
 				templateLock === undefined || parentLock === 'contentOnly'
 					? parentLock
@@ -130,6 +146,7 @@ export default function useNestedSettingsUpdate(
 		clientId,
 		blockListSettings,
 		_allowedBlocks,
+		_prioritizedInserterBlocks,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		templateLock,

package/src/components/inserter/index.js

@@ -150,7 +150,6 @@ class PrivateInserter extends Component {
 			prioritizePatterns,
 			onSelectOrClose,
 			selectBlockOnInsert,
-			orderInitialBlockItems,
 		} = this.props;
 
 		if ( isQuick ) {
@@ -174,7 +173,6 @@ class PrivateInserter extends Component {
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
-					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			);
 		}
@@ -426,13 +424,7 @@ export const ComposedPrivateInserter = compose( [
 ] )( PrivateInserter );
 
 const Inserter = forwardRef( ( props, ref ) => {
-	return (
-		<ComposedPrivateInserter
-			ref={ ref }
-			{ ...props }
-			orderInitialBlockItems={ undefined }
-		/>
-	);
+	return <ComposedPrivateInserter ref={ ref } { ...props } />;
 } );
 
 export default Inserter;