@wordpress/block-editor 12.26.0 → 13.0.0

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

@@ -21,6 +21,7 @@ import {
 	ROOT_BLOCK_SELECTOR,
 	ROOT_CSS_PROPERTIES_SELECTOR,
 	scopeSelector,
+	scopeFeatureSelectors,
 	appendToSelector,
 	getBlockStyleVariationSelector,
 } from './utils';
@@ -33,8 +34,8 @@ import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
-import BlockContext from '../block-context';
 import { unlock } from '../../lock-unlock';
+import { setThemeFileUris } from './theme-file-uri-utils';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -44,6 +45,7 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
 	spacing: 'spacing',
 	typography: 'typography',
 };
+const { kebabCase } = unlock( componentsPrivateApis );
 
 function compileStyleValue( uncompiledValue ) {
 	const VARIABLE_REFERENCE_PREFIX = 'var:';
@@ -69,8 +71,6 @@ function compileStyleValue( uncompiledValue ) {
  * @return {Array<Object>} An array of style declarations.
  */
 function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
-
 	return PRESET_METADATA.reduce(
 		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
 			const presetByOrigin = getValueFromObjectPath(
@@ -115,8 +115,6 @@ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
  * @return {string} CSS declarations for the preset classes.
  */
 function getPresetsClasses( blockSelector = '*', blockPresets = {} ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
-
 	return PRESET_METADATA.reduce(
 		( declarations, { path, cssVarInfix, classes } ) => {
 			if ( ! classes ) {
@@ -181,7 +179,6 @@ function getPresetsSvgFilters( blockPresets = {} ) {
 }
 
 function flattenTree( input = {}, prefix, token ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	let result = [];
 	Object.keys( input ).forEach( ( key ) => {
 		const newKey = prefix + kebabCase( key.replace( '/', '-' ) );
@@ -313,7 +310,7 @@ const getFeatureDeclarations = ( selectors, styles ) => {
  *
  * @param {Object}  tree                A theme.json tree containing layout definitions.
  *
- * @param {boolean} isTemplate          Whether the entity being edited is a full template or a pattern.
+ * @param {boolean} disableRootPadding  Whether to force disable the root padding styles.
  * @return {Array} An array of style declarations.
  */
 export function getStylesDeclarations(
@@ -321,9 +318,8 @@ export function getStylesDeclarations(
 	selector = '',
 	useRootPaddingAlign,
 	tree = {},
-	isTemplate = true
+	disableRootPadding = false
 ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = Object.entries( STYLE_PROPERTY ).reduce(
 		(
@@ -398,7 +394,7 @@ export function getStylesDeclarations(
 		// Don't output padding properties if padding variables are set or if we're not editing a full template.
 		if (
 			isRoot &&
-			( useRootPaddingAlign || ! isTemplate ) &&
+			( useRootPaddingAlign || disableRootPadding ) &&
 			rule.key.startsWith( 'padding' )
 		) {
 			return;
@@ -527,10 +523,10 @@ export function getLayoutStyles( {
 							} else {
 								combinedSelector =
 									selector === ROOT_BLOCK_SELECTOR
-										? `:where(.${ className })${
+										? `.${ className }${
 												spacingStyle?.selector || ''
 										  }`
-										: `:where(${ selector }-${ className })${
+										: `${ selector }-${ className }${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -651,14 +647,104 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 
 			if ( node?.variations ) {
 				const variations = {};
-				Object.keys( node.variations ).forEach( ( variation ) => {
-					variations[ variation ] = pickStyleKeys(
-						node.variations[ variation ]
-					);
-				} );
+				Object.entries( node.variations ).forEach(
+					( [ variationName, variation ] ) => {
+						variations[ variationName ] =
+							pickStyleKeys( variation );
+
+						const variationSelector =
+							blockSelectors[ blockName ]
+								.styleVariationSelectors?.[ variationName ];
+
+						// Process the variation's inner element styles.
+						// This comes before the inner block styles so the
+						// element styles within the block type styles take
+						// precedence over these.
+						Object.entries( variation?.elements ?? {} ).forEach(
+							( [ element, elementStyles ] ) => {
+								if ( elementStyles && ELEMENTS[ element ] ) {
+									nodes.push( {
+										styles: elementStyles,
+										selector: scopeSelector(
+											variationSelector,
+											ELEMENTS[ element ]
+										),
+									} );
+								}
+							}
+						);
+
+						// Process the variations inner block type styles.
+						Object.entries( variation?.blocks ?? {} ).forEach(
+							( [
+								variationBlockName,
+								variationBlockStyles,
+							] ) => {
+								const variationBlockSelector = scopeSelector(
+									variationSelector,
+									blockSelectors[ variationBlockName ]
+										.selector
+								);
+								const variationDuotoneSelector = scopeSelector(
+									variationSelector,
+									blockSelectors[ variationBlockName ]
+										.duotoneSelector
+								);
+								const variationFeatureSelectors =
+									scopeFeatureSelectors(
+										variationSelector,
+										blockSelectors[ variationBlockName ]
+											.featureSelectors
+									);
+
+								nodes.push( {
+									selector: variationBlockSelector,
+									duotoneSelector: variationDuotoneSelector,
+									featureSelectors: variationFeatureSelectors,
+									fallbackGapValue:
+										blockSelectors[ variationBlockName ]
+											.fallbackGapValue,
+									hasLayoutSupport:
+										blockSelectors[ variationBlockName ]
+											.hasLayoutSupport,
+									styles: pickStyleKeys(
+										variationBlockStyles
+									),
+								} );
+
+								// Process element styles for the inner blocks
+								// of the variation.
+								Object.entries(
+									variationBlockStyles.elements ?? {}
+								).forEach(
+									( [
+										variationBlockElement,
+										variationBlockElementStyles,
+									] ) => {
+										if (
+											variationBlockElementStyles &&
+											ELEMENTS[ variationBlockElement ]
+										) {
+											nodes.push( {
+												styles: variationBlockElementStyles,
+												selector: scopeSelector(
+													variationBlockSelector,
+													ELEMENTS[
+														variationBlockElement
+													]
+												),
+											} );
+										}
+									}
+								);
+							}
+						);
+					}
+				);
 				blockStyles.variations = variations;
 			}
-			if ( blockStyles && blockSelectors?.[ blockName ]?.selector ) {
+
+			if ( blockSelectors?.[ blockName ]?.selector ) {
 				nodes.push( {
 					duotoneSelector:
 						blockSelectors[ blockName ].duotoneSelector,
@@ -776,7 +862,7 @@ export const toStyles = (
 	hasBlockGapSupport,
 	hasFallbackGapSupport,
 	disableLayoutStyles = false,
-	isTemplate = true,
+	disableRootPadding = false,
 	styleOptions = undefined
 ) => {
 	// These allow opting out of certain sets of styles.
@@ -820,19 +906,18 @@ export const toStyles = (
 		 */
 		ruleset += ':where(body) {margin: 0;';
 
-		// Root padding styles should only be output for full templates, not patterns or template parts.
-		if ( options.rootPadding && useRootPaddingAlign && isTemplate ) {
+		// Root padding styles should be output for full templates, patterns and template parts.
+		if ( options.rootPadding && useRootPaddingAlign ) {
 			/*
 			 * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
 			 * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
 			 */
 			ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }
 				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }
-				.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-				.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
+				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				`;
 		}
 
 		ruleset += '}';
@@ -861,12 +946,56 @@ export const toStyles = (
 						( [ cssSelector, declarations ] ) => {
 							if ( declarations.length ) {
 								const rules = declarations.join( ';' );
-								ruleset += `:where(${ cssSelector }){${ rules };}`;
+								ruleset += `:root :where(${ cssSelector }){${ rules };}`;
 							}
 						}
 					);
 				}
 
+				// Process duotone styles.
+				if ( duotoneSelector ) {
+					const duotoneStyles = {};
+					if ( styles?.filter ) {
+						duotoneStyles.filter = styles.filter;
+						delete styles.filter;
+					}
+					const duotoneDeclarations =
+						getStylesDeclarations( duotoneStyles );
+					if ( duotoneDeclarations.length ) {
+						ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
+							';'
+						) };}`;
+					}
+				}
+
+				// Process blockGap and layout styles.
+				if (
+					! disableLayoutStyles &&
+					( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
+				) {
+					ruleset += getLayoutStyles( {
+						style: styles,
+						selector,
+						hasBlockGapSupport,
+						hasFallbackGapSupport,
+						fallbackGapValue,
+					} );
+				}
+
+				// Process the remaining block styles (they use either normal block class or __experimentalSelector).
+				const styleDeclarations = getStylesDeclarations(
+					styles,
+					selector,
+					useRootPaddingAlign,
+					tree,
+					disableRootPadding
+				);
+				if ( styleDeclarations?.length ) {
+					ruleset += `:root :where(${ selector }){${ styleDeclarations.join(
+						';'
+					) };}`;
+				}
+
 				if ( styleVariationSelectors ) {
 					Object.entries( styleVariationSelectors ).forEach(
 						( [ styleVariationName, styleVariationSelector ] ) => {
@@ -893,7 +1022,7 @@ export const toStyles = (
 													);
 												const rules =
 													declarations.join( ';' );
-												ruleset += `${ cssSelector }{${ rules };}`;
+												ruleset += `:root :where(${ cssSelector }){${ rules };}`;
 											}
 										}
 									);
@@ -908,7 +1037,7 @@ export const toStyles = (
 										tree
 									);
 								if ( styleVariationDeclarations.length ) {
-									ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
+									ruleset += `:root :where(${ styleVariationSelector }){${ styleVariationDeclarations.join(
 										';'
 									) };}`;
 								}
@@ -917,50 +1046,6 @@ export const toStyles = (
 					);
 				}
 
-				// Process duotone styles.
-				if ( duotoneSelector ) {
-					const duotoneStyles = {};
-					if ( styles?.filter ) {
-						duotoneStyles.filter = styles.filter;
-						delete styles.filter;
-					}
-					const duotoneDeclarations =
-						getStylesDeclarations( duotoneStyles );
-					if ( duotoneDeclarations.length ) {
-						ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
-							';'
-						) };}`;
-					}
-				}
-
-				// Process blockGap and layout styles.
-				if (
-					! disableLayoutStyles &&
-					( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
-				) {
-					ruleset += getLayoutStyles( {
-						style: styles,
-						selector,
-						hasBlockGapSupport,
-						hasFallbackGapSupport,
-						fallbackGapValue,
-					} );
-				}
-
-				// Process the remaining block styles (they use either normal block class or __experimentalSelector).
-				const declarations = getStylesDeclarations(
-					styles,
-					selector,
-					useRootPaddingAlign,
-					tree,
-					isTemplate
-				);
-				if ( declarations?.length ) {
-					ruleset += `:where(${ selector }){${ declarations.join(
-						';'
-					) };}`;
-				}
-
 				// Check for pseudo selector in `styles` and handle separately.
 				const pseudoSelectorStyles = Object.entries( styles ).filter(
 					( [ key ] ) => key.startsWith( ':' )
@@ -976,7 +1061,7 @@ export const toStyles = (
 								return;
 							}
 
-							// `selector` maybe provided in a form
+							// `selector` may be provided in a form
 							// where block level selectors have sub element
 							// selectors appended to them as a comma separated
 							// string.
@@ -1019,13 +1104,13 @@ export const toStyles = (
 			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
 		ruleset =
 			ruleset +
-			`:where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
+			`:root :where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
 		ruleset =
 			ruleset +
-			':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
+			':root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
 		ruleset =
 			ruleset +
-			':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
+			':root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
 	}
 
 	if ( options.presets ) {
@@ -1080,7 +1165,11 @@ const getSelectorsConfig = ( blockType, rootSelector ) => {
 	return config;
 };
 
-export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
+export const getBlockSelectors = (
+	blockTypes,
+	getBlockStyles,
+	variationInstanceId
+) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
@@ -1110,16 +1199,19 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 
 		const blockStyleVariations = getBlockStyles( name );
 		const styleVariationSelectors = {};
-		if ( blockStyleVariations?.length ) {
-			blockStyleVariations.forEach( ( variation ) => {
-				const styleVariationSelector = getBlockStyleVariationSelector(
-					variation.name,
-					selector
-				);
-				styleVariationSelectors[ variation.name ] =
-					styleVariationSelector;
-			} );
-		}
+		blockStyleVariations?.forEach( ( variation ) => {
+			const variationSuffix = variationInstanceId
+				? `-${ variationInstanceId }`
+				: '';
+			const variationName = `${ variation.name }${ variationSuffix }`;
+			const styleVariationSelector = getBlockStyleVariationSelector(
+				variationName,
+				selector
+			);
+
+			styleVariationSelectors[ variationName ] = styleVariationSelector;
+		} );
+
 		// For each block support feature add any custom selectors.
 		const featureSelectors = getSelectorsConfig( blockType, selector );
 
@@ -1132,8 +1224,7 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 			hasLayoutSupport,
 			name,
 			selector,
-			styleVariationSelectors: Object.keys( styleVariationSelectors )
-				.length
+			styleVariationSelectors: blockStyleVariations?.length
 				? styleVariationSelectors
 				: undefined,
 		};
@@ -1186,7 +1277,7 @@ export function processCSSNesting( css, blockSelector ) {
 		const isRootCss = ! part.includes( '{' );
 		if ( isRootCss ) {
 			// If the part doesn't contain braces, it applies to the root level.
-			processedCSS += `${ blockSelector }{${ part.trim() }}`;
+			processedCSS += `:root :where(${ blockSelector }){${ part.trim() }}`;
 		} else {
 			// If the part contains braces, it's a nested CSS rule.
 			const splittedPart = part.replace( '}', '' ).split( '{' );
@@ -1199,7 +1290,7 @@ export function processCSSNesting( css, blockSelector ) {
 				? scopeSelector( blockSelector, nestedSelector )
 				: appendToSelector( blockSelector, nestedSelector );
 
-			processedCSS += `${ combinedSelector }{${ cssValue.trim() }}`;
+			processedCSS += `:root :where(${ combinedSelector }){${ cssValue.trim() }}`;
 		}
 	} );
 	return processedCSS;
@@ -1212,11 +1303,20 @@ export function processCSSNesting( css, blockSelector ) {
  * The use case for a custom config is to generate bespoke styles
  * and settings for previews, or other out-of-editor experiences.
  *
- * @param {Object} mergedConfig Global styles configuration.
+ * @param {Object}  mergedConfig       Global styles configuration.
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
  * @return {Array} Array of stylesheets and settings.
  */
-export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
+export function useGlobalStylesOutputWithConfig(
+	mergedConfig = {},
+	disableRootPadding
+) {
 	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
+	mergedConfig = setThemeFileUris(
+		mergedConfig,
+		mergedConfig?._links?.[ 'wp:theme-file' ]
+	);
 	const hasBlockGapSupport = blockGap !== null;
 	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
 	const disableLayoutStyles = useSelect( ( select ) => {
@@ -1224,10 +1324,6 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 		return !! getSettings().disableLayoutStyles;
 	} );
 
-	const blockContext = useContext( BlockContext );
-
-	const isTemplate = blockContext?.templateSlug !== undefined;
-
 	const { getBlockStyles } = useSelect( blocksStore );
 
 	return useMemo( () => {
@@ -1252,7 +1348,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			hasBlockGapSupport,
 			hasFallbackGapSupport,
 			disableLayoutStyles,
-			isTemplate
+			disableRootPadding
 		);
 		const svgs = toSvgFilters( updatedConfig, blockSelectors );
 
@@ -1299,7 +1395,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 		hasFallbackGapSupport,
 		mergedConfig,
 		disableLayoutStyles,
-		isTemplate,
+		disableRootPadding,
 		getBlockStyles,
 	] );
 }
@@ -1307,9 +1403,11 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 /**
  * Returns the global styles output based on the current state of global styles config loaded in the editor context.
  *
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
  * @return {Array} Array of stylesheets and settings.
  */
-export function useGlobalStylesOutput() {
+export function useGlobalStylesOutput( disableRootPadding = false ) {
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
-	return useGlobalStylesOutputWithConfig( mergedConfig );
+	return useGlobalStylesOutputWithConfig( mergedConfig, disableRootPadding );
 }

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

@@ -64,7 +64,13 @@ const GridVisualizerGrid = forwardRef( ( { blockElement }, ref ) => {
 			style={ gridInfo.style }
 		>
 			{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (
-				<div key={ i } className="block-editor-grid-visualizer__item" />
+				<div
+					key={ i }
+					className="block-editor-grid-visualizer__item"
+					style={ {
+						boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ gridInfo.currentColor } 20%, #0000)`,
+					} }
+				/>
 			) ) }
 		</div>
 	);
@@ -84,6 +90,7 @@ function getGridInfo( blockElement ) {
 	const numItems = numColumns * numRows;
 	return {
 		numItems,
+		currentColor: getComputedCSS( blockElement, 'color' ),
 		style: {
 			gridTemplateColumns,
 			gridTemplateRows,

package/src/components/grid-visualizer/style.scss

@@ -13,7 +13,8 @@
 }
 
 .block-editor-grid-visualizer__item {
-	border: $border-width dashed $gray-300;
+	outline: 1px solid transparent;
+	border-radius: $radius-block-ui;
 }
 
 .block-editor-grid-item-resizer {

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

@@ -156,7 +156,7 @@ export default function HeightControl( {
 						onChange={ onChange }
 						onUnitChange={ handleUnitChange }
 						min={ 0 }
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						label={ label }
 						hideLabelFromVision
 					/>

package/src/components/iframe/content.scss

@@ -1,3 +1,7 @@
+.block-editor-iframe__body {
+	position: relative;
+}
+
 .block-editor-iframe__container {
 	width: 100%;
 	height: 100%;

package/src/components/index.native.js

@@ -71,6 +71,12 @@ export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
 export { default as UnsupportedBlockDetails } from './unsupported-block-details';
+export {
+	useGlobalStyles,
+	getGlobalStyles,
+	getColorsAndGradients,
+	useMobileGlobalStylesColors,
+} from './global-styles/use-global-styles-context';
 
 export {
 	BottomSheetSettings,
@@ -78,6 +84,7 @@ export {
 	blockSettingsScreens,
 } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
+export { default as AudioPlayer } from './audio-player';
 
 export {
 	getSpacingPresetCssVar,

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
@@ -69,7 +69,6 @@ export default function useNestedSettingsUpdate(
 	// Instead of adding a useSelect mapping here, please add to the useSelect
 	// mapping in InnerBlocks! Every subscription impacts performance.
 
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 	const registry = useRegistry();
 
 	// Implementors often pass a new array on every render,
@@ -155,21 +154,16 @@ export default function useNestedSettingsUpdate(
 		// we batch all the updatedBlockListSettings in a single "data" batch
 		// which results in a single re-render.
 		if ( ! pendingSettingsUpdates.get( registry ) ) {
-			pendingSettingsUpdates.set( registry, [] );
+			pendingSettingsUpdates.set( registry, {} );
 		}
-		pendingSettingsUpdates
-			.get( registry )
-			.push( [ clientId, newSettings ] );
+		pendingSettingsUpdates.get( registry )[ clientId ] = newSettings;
 		window.queueMicrotask( () => {
-			if ( pendingSettingsUpdates.get( registry )?.length ) {
-				registry.batch( () => {
-					pendingSettingsUpdates
-						.get( registry )
-						.forEach( ( args ) => {
-							updateBlockListSettings( ...args );
-						} );
-					pendingSettingsUpdates.set( registry, [] );
-				} );
+			const settings = pendingSettingsUpdates.get( registry );
+			if ( Object.keys( settings ).length ) {
+				const { updateBlockListSettings } =
+					registry.dispatch( blockEditorStore );
+				updateBlockListSettings( settings );
+				pendingSettingsUpdates.set( registry, {} );
 			}
 		} );
 	}, [
@@ -183,7 +177,6 @@ export default function useNestedSettingsUpdate(
 		__experimentalDirectInsert,
 		captureToolbars,
 		orientation,
-		updateBlockListSettings,
 		layout,
 		registry,
 	] );

package/src/components/inner-blocks/warning-max-depth-exceeded.native.js

@@ -89,7 +89,7 @@ const WarningMaxDepthExceeded = ( { clientId } ) => {
 		<TouchableWithoutFeedback
 			disabled={ ! isSelected }
 			accessibilityLabel={ __( 'Warning message' ) }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={ __( 'Tap here to show more details.' ) }
 			onPress={ () => setShowDetails( true ) }
 		>

package/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -31,7 +31,7 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	return (
 		<Heading
 			level={ 2 }
-			lineHeight={ '48px' }
+			lineHeight="48px"
 			className="block-editor-block-patterns-explorer__search-results-count"
 		>
 			{ sprintf(