@wordpress/block-editor 14.10.1 → 14.12.0

package/src/components/block-preview/style.scss

@@ -1,6 +1,6 @@
 // These rules ensure the preview scales smoothly regardless of the container size.
 .block-editor-block-preview__container {
-	// In the component, a top padding is provided as an inline style to provid an aspect-ratio.
+	// In the component, a top padding is provided as an inline style to provide an aspect-ratio.
 	// This positioning enables the content to sit on top of that padding to fit.
 	position: relative;
 

package/src/components/block-rename/modal.js

@@ -11,24 +11,44 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { store as blockEditorStore } from '../../store';
+import { useBlockDisplayInformation } from '..';
 import isEmptyString from './is-empty-string';
 
-export default function BlockRenameModal( {
-	blockName,
-	originalBlockName,
-	onClose,
-	onSave,
+export default function BlockRenameModal( { clientId, onClose } ) {
+	const [ editedBlockName, setEditedBlockName ] = useState();
+
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const { metadata } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+
+			return {
+				metadata: getBlockAttributes( clientId )?.metadata,
+			};
+		},
+		[ clientId ]
+	);
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const blockName = metadata?.name || '';
+	const originalBlockName = blockInformation?.title;
 	// Pattern Overrides is a WordPress-only feature but it also uses the Block Binding API.
 	// Ideally this should not be inside the block editor package, but we keep it here for simplicity.
-	hasOverridesWarning,
-} ) {
-	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
+	const hasOverridesWarning =
+		!! blockName &&
+		!! metadata?.bindings &&
+		Object.values( metadata.bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
+		);
 
-	const nameHasChanged = editedBlockName !== blockName;
+	const nameHasChanged =
+		editedBlockName !== undefined && editedBlockName !== blockName;
 	const nameIsOriginal = editedBlockName === originalBlockName;
 	const nameIsEmpty = isEmptyString( editedBlockName );
 
@@ -37,6 +57,8 @@ export default function BlockRenameModal( {
 	const autoSelectInputText = ( event ) => event.target.select();
 
 	const handleSubmit = () => {
+		const newName =
+			nameIsOriginal || nameIsEmpty ? undefined : editedBlockName;
 		const message =
 			nameIsOriginal || nameIsEmpty
 				? sprintf(
@@ -52,7 +74,12 @@ export default function BlockRenameModal( {
 
 		// Must be assertive to immediately announce change.
 		speak( message, 'assertive' );
-		onSave( editedBlockName );
+		updateBlockAttributes( [ clientId ], {
+			metadata: {
+				...metadata,
+				name: newName,
+			},
+		} );
 
 		// Immediate close avoids ability to hit save multiple times.
 		onClose();
@@ -81,7 +108,7 @@ export default function BlockRenameModal( {
 					<TextControl
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
-						value={ editedBlockName }
+						value={ editedBlockName ?? blockName }
 						label={ __( 'Name' ) }
 						help={
 							hasOverridesWarning
@@ -105,7 +132,8 @@ export default function BlockRenameModal( {
 
 						<Button
 							__next40pxDefaultSize
-							aria-disabled={ ! isNameValid }
+							accessibleWhenDisabled
+							disabled={ ! isNameValid }
 							variant="primary"
 							type="submit"
 						>

package/src/components/block-rename/rename-control.js

@@ -2,54 +2,17 @@
  * WordPress dependencies
  */
 import { MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { store as blockEditorStore } from '../../store';
-import { useBlockDisplayInformation } from '..';
-import isEmptyString from './is-empty-string';
 import BlockRenameModal from './modal';
 
 export default function BlockRenameControl( { clientId } ) {
 	const [ renamingBlock, setRenamingBlock ] = useState( false );
 
-	const { metadata } = useSelect(
-		( select ) => {
-			const { getBlockAttributes } = select( blockEditorStore );
-
-			const _metadata = getBlockAttributes( clientId )?.metadata;
-			return {
-				metadata: _metadata,
-			};
-		},
-		[ clientId ]
-	);
-
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const customName = metadata?.name;
-	const hasPatternOverrides =
-		!! customName &&
-		!! metadata?.bindings &&
-		Object.values( metadata.bindings ).some(
-			( binding ) => binding.source === 'core/pattern-overrides'
-		);
-
-	function onChange( newName ) {
-		updateBlockAttributes( [ clientId ], {
-			metadata: {
-				...metadata,
-				name: newName,
-			},
-		} );
-	}
-
-	const blockInformation = useBlockDisplayInformation( clientId );
-
 	return (
 		<>
 			<MenuItem
@@ -63,23 +26,8 @@ export default function BlockRenameControl( { clientId } ) {
 			</MenuItem>
 			{ renamingBlock && (
 				<BlockRenameModal
-					blockName={ customName || '' }
-					originalBlockName={ blockInformation?.title }
-					hasOverridesWarning={ hasPatternOverrides }
+					clientId={ clientId }
 					onClose={ () => setRenamingBlock( false ) }
-					onSave={ ( newName ) => {
-						// If the new value is the block's original name (e.g. `Group`)
-						// or it is an empty string then assume the intent is to reset
-						// the value. Therefore reset the metadata.
-						if (
-							newName === blockInformation?.title ||
-							isEmptyString( newName )
-						) {
-							newName = undefined;
-						}
-
-						onChange( newName );
-					} }
 				/>
 			) }
 		</>

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -26,17 +26,30 @@ import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import BlockParentSelectorMenuItem from './block-parent-selector-menu-item';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	placement: 'bottom-start',
 };
 
-function CopyMenuItem( { clientIds, onCopy, label, shortcut } ) {
+function CopyMenuItem( {
+	clientIds,
+	onCopy,
+	label,
+	shortcut,
+	eventType = 'copy',
+} ) {
 	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const notifyCopy = useNotifyCopy();
 	const ref = useCopyToClipboard(
 		() => serialize( getBlocksByClientId( clientIds ) ),
-		onCopy
+		() => {
+			if ( onCopy && eventType === 'copy' ) {
+				onCopy();
+			}
+			notifyCopy( eventType, clientIds );
+		}
 	);
 	const copyMenuItemLabel = label ? label : __( 'Copy' );
 	return (
@@ -305,6 +318,7 @@ export function BlockSettingsDropdown( {
 											clientIds={ clientIds }
 											onCopy={ onCopy }
 											label={ __( 'Copy styles' ) }
+											eventType="copyStyles"
 										/>
 										<MenuItem onClick={ onPasteStyles }>
 											{ __( 'Paste styles' ) }

package/src/components/block-styles/preview.native.js

@@ -33,7 +33,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
 
 	function onLayout() {
 		const columnsNum =
-			// To indicate scroll availabilty, there is a need to display additional half the column.
+			// To indicate scroll availability, there is a need to display additional half the column.
 			Math.floor( BottomSheet.getWidth() / MAX_ITEM_WIDTH ) + HALF_COLUMN;
 		setItemWidth( BottomSheet.getWidth() / columnsNum );
 	}

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

@@ -27,20 +27,20 @@ import BlockVariationTransformations from './block-variation-transformations';
  * @return {Record<string, Object[]>} The grouped block transformations.
  */
 function useGroupedTransforms( possibleBlockTransformations ) {
-	const priorityContentTranformationBlocks = {
+	const priorityContentTransformationBlocks = {
 		'core/paragraph': 1,
 		'core/heading': 2,
 		'core/list': 3,
 		'core/quote': 4,
 	};
 	const transformations = useMemo( () => {
-		const priorityTextTranformsNames = Object.keys(
-			priorityContentTranformationBlocks
+		const priorityTextTransformsNames = Object.keys(
+			priorityContentTransformationBlocks
 		);
 		const groupedPossibleTransforms = possibleBlockTransformations.reduce(
 			( accumulator, item ) => {
 				const { name } = item;
-				if ( priorityTextTranformsNames.includes( name ) ) {
+				if ( priorityTextTransformsNames.includes( name ) ) {
 					accumulator.priorityTextTransformations.push( item );
 				} else {
 					accumulator.restTransformations.push( item );
@@ -71,8 +71,8 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 	// Order the priority text transformations.
 	transformations.priorityTextTransformations.sort(
 		( { name: currentName }, { name: nextName } ) => {
-			return priorityContentTranformationBlocks[ currentName ] <
-				priorityContentTranformationBlocks[ nextName ]
+			return priorityContentTransformationBlocks[ currentName ] <
+				priorityContentTransformationBlocks[ nextName ]
 				? -1
 				: 1;
 		}
@@ -125,7 +125,7 @@ const BlockTransformationsMenu = ( {
 					/>
 				) }
 				{ priorityTextTransformations.map( ( item ) => (
-					<BlockTranformationItem
+					<BlockTransformationItem
 						key={ item.name }
 						item={ item }
 						onSelect={ onSelect }
@@ -151,7 +151,7 @@ function RestTransformationItems( {
 	setHoveredTransformItemName,
 } ) {
 	return restTransformations.map( ( item ) => (
-		<BlockTranformationItem
+		<BlockTransformationItem
 			key={ item.name }
 			item={ item }
 			onSelect={ onSelect }
@@ -160,7 +160,7 @@ function RestTransformationItems( {
 	) );
 }
 
-function BlockTranformationItem( {
+function BlockTransformationItem( {
 	item,
 	onSelect,
 	setHoveredTransformItemName,

package/src/components/block-switcher/block-variation-transformations.js

@@ -74,7 +74,7 @@ const BlockVariationTransformations = ( {
 				/>
 			) }
 			{ transformations?.map( ( item ) => (
-				<BlockVariationTranformationItem
+				<BlockVariationTransformationItem
 					key={ item.name }
 					item={ item }
 					onSelect={ onSelect }
@@ -85,7 +85,7 @@ const BlockVariationTransformations = ( {
 	);
 };
 
-function BlockVariationTranformationItem( {
+function BlockVariationTransformationItem( {
 	item,
 	onSelect,
 	setHoveredTransformItemName,

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

@@ -82,7 +82,7 @@ function BlockSwitcherDropdownMenuContents( {
 			);
 		}
 	}
-	// Simple block tranformation based on the `Block Transforms` API.
+	// Simple block transformation based on the `Block Transforms` API.
 	function onBlockTransform( name ) {
 		const newBlocks = switchToBlockType( blocks, name );
 		replaceBlocks( clientIds, newBlocks );

package/src/components/block-switcher/use-transformed-patterns.js

@@ -72,7 +72,7 @@ export const getPatternTransformedBlocks = (
 			// No need to loop through other pattern's blocks.
 			break;
 		}
-		// Bail eary if a selected block has not been matched.
+		// Bail early if a selected block has not been matched.
 		if ( ! isMatch ) {
 			return;
 		}

package/src/components/block-toolbar/index.native.js

@@ -14,7 +14,7 @@ import UngroupButton from '../ungroup-button';
 import { BlockSettingsButton } from '../block-settings';
 import { store as blockEditorStore } from '../../store';
 
-const REMOVE_EMPY_PARENT_BLOCKS = [
+const REMOVE_EMPTY_PARENT_BLOCKS = [
 	'core/buttons',
 	'core/columns',
 	'core/social-links',
@@ -69,7 +69,7 @@ export default function BlockToolbar( { anchorNodeRef } ) {
 		// have inner blocks, ideally we should match the behavior as in
 		// the Web editor and show a placeholder instead of removing the parent.
 		if (
-			REMOVE_EMPY_PARENT_BLOCKS.includes( parentBlockName ) &&
+			REMOVE_EMPTY_PARENT_BLOCKS.includes( parentBlockName ) &&
 			parentNumberOfInnerBlocks === 1
 		) {
 			removeBlock( rootClientId );

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -217,7 +217,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                         class="components-circular-option-picker__option-wrapper"
                       >
                         <button
-                          aria-label="Color: red"
+                          aria-label="red"
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option is-next-40px-default-size"
                           data-active-item="true"

package/src/components/colors-gradients/style.scss

@@ -111,6 +111,7 @@ $swatch-gap: 12px;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		max-width: calc(100% - ($button-size-next-default-40px + $grid-unit-05));
 	}
 }
 

package/src/components/colors-gradients/test/control.js

@@ -51,7 +51,7 @@ describe( 'ColorPaletteControl', () => {
 		).toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 2 );
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
@@ -80,7 +80,7 @@ describe( 'ColorPaletteControl', () => {
 		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 2 );
 	} );
 
 	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {

package/src/components/date-format-picker/index.js

@@ -14,7 +14,7 @@ import {
 } from '@wordpress/components';
 
 // So that we illustrate the different formats in the dropdown properly, show a date that is
-// somwhat recent, has a day greater than 12, and a month with more than three letters.
+// somewhat recent, has a day greater than 12, and a month with more than three letters.
 const exampleDate = new Date();
 exampleDate.setDate( 20 );
 exampleDate.setMonth( exampleDate.getMonth() - 3 );

package/src/components/duotone-control/style.scss

@@ -4,11 +4,11 @@ $swatch-size: 28px;
 $swatch-gap: 12px;
 
 $popover-width: 260px;
-$popover-padding: $grid-unit-20;
+$popover-padding: $grid-unit-10;
 
 $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
 
-.block-editor-duotone-control__popover {
+.block-editor-duotone-control__popover.components-popover {
 	> .components-popover__content {
 		padding: $popover-padding;
 		width: $popover-width;

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

@@ -144,10 +144,12 @@ export default function FiltersPanel( {
 		const duotonePreset = duotonePalette.find( ( { colors } ) => {
 			return colors === newValue;
 		} );
-		const settedValue = duotonePreset
+		const duotoneValue = duotonePreset
 			? `var:preset|duotone|${ duotonePreset.slug }`
 			: newValue;
-		onChange( setImmutably( value, [ 'filter', 'duotone' ], settedValue ) );
+		onChange(
+			setImmutably( value, [ 'filter', 'duotone' ], duotoneValue )
+		);
 	};
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );

package/src/components/global-styles/image-settings-panel.js

@@ -61,14 +61,14 @@ export default function ImageSettingsPanel( {
 					// "RESET" button ONLY when the user has explicitly set a value in the
 					// Global Styles.
 					hasValue={ () => !! value?.lightbox }
-					label={ __( 'Expand on click' ) }
+					label={ __( 'Enlarge on click' ) }
 					onDeselect={ resetLightbox }
 					isShownByDefault
 					panelId={ panelId }
 				>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Expand on click' ) }
+						label={ __( 'Enlarge on click' ) }
 						checked={ lightboxChecked }
 						onChange={ onChangeLightbox }
 					/>

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

@@ -585,7 +585,7 @@ describe( 'typography utils', () => {
 					'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px)',
 			},
 
-			// Equivalent custom config PHP unit tests in `test_should_covert_font_sizes_to_fluid_values()`.
+			// Equivalent custom config PHP unit tests in `test_should_convert_font_sizes_to_fluid_values()`.
 			{
 				message: 'should return clamp value using custom fluid config',
 				preset: {

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

@@ -1337,12 +1337,12 @@ export function processCSSNesting( css, blockSelector ) {
 			processedCSS += `:root :where(${ blockSelector }){${ part.trim() }}`;
 		} else {
 			// If the part contains braces, it's a nested CSS rule.
-			const splittedPart = part.replace( '}', '' ).split( '{' );
-			if ( splittedPart.length !== 2 ) {
+			const splitPart = part.replace( '}', '' ).split( '{' );
+			if ( splitPart.length !== 2 ) {
 				return;
 			}
 
-			const [ nestedSelector, cssValue ] = splittedPart;
+			const [ nestedSelector, cssValue ] = splitPart;
 
 			// Handle pseudo elements such as ::before, ::after, etc. Regex will also
 			// capture any leading combinator such as >, +, or ~, as well as spaces.

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

@@ -54,29 +54,18 @@ const GridVisualizerGrid = forwardRef(
 		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
 
 		useEffect( () => {
-			const observers = [];
-			for ( const element of [ gridElement, ...gridElement.children ] ) {
-				const observer = new window.ResizeObserver( () => {
-					setGridInfo( getGridInfo( gridElement ) );
-				} );
-				observer.observe( element );
-				observers.push( observer );
-			}
-
-			const mutationObserver = new window.MutationObserver( () => {
+			const resizeCallback = () =>
 				setGridInfo( getGridInfo( gridElement ) );
-			} );
-			mutationObserver.observe( gridElement, {
-				attributeFilter: [ 'style', 'class' ],
-				childList: true,
-				subtree: true,
-			} );
-			observers.push( mutationObserver );
-
+			// Both border-box and content-box are observed as they may change
+			// independently. This requires two observers because a single one
+			// can’t be made to monitor both on the same element.
+			const borderBoxSpy = new window.ResizeObserver( resizeCallback );
+			borderBoxSpy.observe( gridElement, { box: 'border-box' } );
+			const contentBoxSpy = new window.ResizeObserver( resizeCallback );
+			contentBoxSpy.observe( gridElement );
 			return () => {
-				for ( const observer of observers ) {
-					observer.disconnect();
-				}
+				borderBoxSpy.disconnect();
+				contentBoxSpy.disconnect();
 			};
 		}, [ gridElement ] );
 

package/src/components/grid/style.scss

@@ -20,6 +20,7 @@
 
 .block-editor-grid-visualizer__grid {
 	display: grid;
+	position: absolute;
 }
 
 .block-editor-grid-visualizer__cell {

package/src/components/grid/utils.js

@@ -187,10 +187,12 @@ export function getGridInfo( gridElement ) {
 			gridTemplateColumns,
 			gridTemplateRows,
 			gap: getComputedCSS( gridElement, 'gap' ),
-			paddingTop: `calc(${ paddingTop } + ${ borderTopWidth })`,
-			paddingRight: `calc(${ paddingRight } + ${ borderRightWidth })`,
-			paddingBottom: `calc(${ paddingBottom } + ${ borderBottomWidth })`,
-			paddingLeft: `calc(${ paddingLeft } + ${ borderLeftWidth })`,
+			inset: `
+				calc(${ paddingTop } + ${ borderTopWidth })
+				calc(${ paddingRight } + ${ borderRightWidth })
+				calc(${ paddingBottom } + ${ borderBottomWidth })
+				calc(${ paddingLeft } + ${ borderLeftWidth })
+			`,
 		},
 	};
 }

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

@@ -2,7 +2,7 @@ let compatibilityStyles = null;
 
 /**
  * Returns a list of stylesheets that target the editor canvas. A stylesheet is
- * considered targetting the editor a canvas if it contains the
+ * considered targeting the editor a canvas if it contains the
  * `editor-styles-wrapper`, `wp-block`, or `wp-block-*` class selectors.
  *
  * Ideally, this hook should be removed in the future and styles should be added

package/src/components/iframe/index.js

@@ -330,7 +330,7 @@ function Iframe( {
 			>
 				{ iframeDocument &&
 					createPortal(
-						// We want to prevent React events from bubbling throught the iframe
+						// We want to prevent React events from bubbling through the iframe
 						// we bubble these manually.
 						/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
 						<body

package/src/components/image-size-control/index.js

@@ -8,7 +8,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -137,7 +137,11 @@ export default function ImageSizeControl( {
 								<ToggleGroupControlOption
 									key={ scale }
 									value={ scale }
-									label={ `${ scale }%` }
+									label={ sprintf(
+										/* translators: Percentage value. */
+										__( '%d%%' ),
+										scale
+									) }
 								/>
 							);
 						} ) }

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

@@ -125,7 +125,7 @@ Template locking of `InnerBlocks` is similar to [Custom Post Type templates lock
 Template locking allows locking the `InnerBlocks` area for the current template.
 _Options:_
 
--   `contentOnly` — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overrideable by children.
+-   `contentOnly` — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overridable by children.
 -   `'all'` — prevents all operations. It is not possible to insert new blocks. Move existing blocks or delete them.
 -   `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
 -   `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )

package/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -57,7 +57,7 @@ export function PatternsFilter( {
 } ) {
 	// If the category is `myPatterns` then we need to set the source filter to `user`, but
 	// we do this by deriving from props rather than calling setPatternSourceFilter otherwise
-	// the user may be confused when switching to another category if the haven't explicity set
+	// the user may be confused when switching to another category if the haven't explicitly set
 	// this filter themselves.
 	const currentPatternSourceFilter =
 		category?.name === myPatternsCategory.name

package/src/components/inserter/menu.js

@@ -54,15 +54,17 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const isZoomOutMode = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
-		[]
-	);
-	const hasSectionRootClientId = useSelect(
-		( select ) =>
-			!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
-		[]
-	);
+	const { isZoomOutMode, hasSectionRootClientId } = useSelect( ( select ) => {
+		const { isZoomOut, getSectionRootClientId } = unlock(
+			select( blockEditorStore )
+		);
+
+		return {
+			isZoomOutMode: isZoomOut(),
+			hasSectionRootClientId: !! getSectionRootClientId(),
+		};
+	}, [] );
+
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );

package/src/components/inserter/reusable-blocks-tab.native.js

@@ -29,7 +29,7 @@ function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 		return filterInserterItems( inserterItems, { onlyReusable: true } );
 	}, [ inserterItems ] );
 
-	const sections = [ createInserterSection( { key: 'reuseable', items } ) ];
+	const sections = [ createInserterSection( { key: 'reusable', items } ) ];
 
 	return (
 		<BlockTypesList