npm - @wordpress/block-editor - Versions diffs - 12.1.0 → 12.2.0 - Mend

@wordpress/block-editor 12.1.0 → 12.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (391) hide show

package/src/components/iframe/index.js CHANGED Viewed

@@ -13,6 +13,7 @@ import {
 	useMemo,
 	useReducer,
 	renderToString,
+	useEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -243,10 +244,16 @@ function Iframe( {
 	// 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 src = useMemo( () => {
+		const html = '<!doctype html>' + renderToString( styleAssets );
+		const blob = new window.Blob( [ html ], { type: 'text/html' } );
+		return URL.createObjectURL( blob );
 	}, [] );
+	useEffect( () => () => {
+		URL.revokeObjectURL( src );
+	} );
 	// 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
 	// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
@@ -260,15 +267,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,7 +286,7 @@ 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 &&

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;

package/src/components/inserter/quick-inserter.js CHANGED Viewed

@@ -32,7 +32,6 @@ export default function QuickInserter( {
 	isAppender,
 	prioritizePatterns,
 	selectBlockOnInsert,
-	orderInitialBlockItems,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -125,7 +124,6 @@ export default function QuickInserter( {
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
-					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			</div>

package/src/components/inserter/search-results.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { VisuallyHidden } from '@wordpress/components';
 import { useDebounce, useAsyncList } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
@@ -21,6 +22,8 @@ import useBlockTypesState from './hooks/use-block-types-state';
 import { searchBlockItems, searchItems } from './search-items';
 import InserterListbox from '../inserter-listbox';
 import { orderBy } from '../../utils/sorting';
+import { orderInserterBlockItems } from '../../utils/order-inserter-block-items';
+import { store as blockEditorStore } from '../../store';
 const INITIAL_INSERTER_RESULTS = 9;
 /**
@@ -46,10 +49,22 @@ function InserterSearchResults( {
 	shouldFocusBlock = true,
 	prioritizePatterns,
 	selectBlockOnInsert,
-	orderInitialBlockItems,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
+	const { prioritizedBlocks } = useSelect(
+		( select ) => {
+			const blockListSettings =
+				select( blockEditorStore ).getBlockListSettings( rootClientId );
+			return {
+				prioritizedBlocks:
+					blockListSettings?.prioritizedInserterBlocks || EMPTY_ARRAY,
+			};
+		},
+		[ rootClientId ]
+	);
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
 		onSelect,
 		rootClientId,
@@ -89,10 +104,16 @@ function InserterSearchResults( {
 		if ( maxBlockTypesToShow === 0 ) {
 			return [];
 		}
 		let orderedItems = orderBy( blockTypes, 'frecency', 'desc' );
-		if ( ! filterValue && orderInitialBlockItems ) {
-			orderedItems = orderInitialBlockItems( orderedItems );
+		if ( ! filterValue && prioritizedBlocks.length ) {
+			orderedItems = orderInserterBlockItems(
+				orderedItems,
+				prioritizedBlocks
+			);
 		}
 		const results = searchBlockItems(
 			orderedItems,
 			blockTypeCategories,
@@ -108,8 +129,8 @@ function InserterSearchResults( {
 		blockTypes,
 		blockTypeCategories,
 		blockTypeCollections,
-		maxBlockTypes,
-		orderInitialBlockItems,
+		maxBlockTypesToShow,
+		prioritizedBlocks,
 	] );
 	// Announce search results on change.
@@ -124,7 +145,12 @@ function InserterSearchResults( {
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
-	}, [ filterValue, debouncedSpeak ] );
+	}, [
+		filterValue,
+		debouncedSpeak,
+		filteredBlockTypes,
+		filteredBlockPatterns,
+	] );
 	const currentShownBlockTypes = useAsyncList( filteredBlockTypes, {
 		step: INITIAL_INSERTER_RESULTS,

package/src/components/list-view/appender.js CHANGED Viewed

@@ -4,7 +4,7 @@
 import { useInstanceId } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-import { forwardRef, useState, useEffect } from '@wordpress/element';
+import { forwardRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 /**
@@ -12,11 +12,12 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { useListViewContext } from './context';
 import Inserter from '../inserter';
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
-		const [ insertedBlock, setInsertedBlock ] = useState( null );
+		const { insertedBlock, setInsertedBlock } = useListViewContext();
 		const instanceId = useInstanceId( Appender );
 		const { hideInserter } = useSelect(

package/src/components/list-view/block-contents.js CHANGED Viewed

@@ -47,7 +47,8 @@ const ListViewBlockContents = forwardRef(
 			[ clientId ]
 		);
-		const { renderAdditionalBlockUI } = useListViewContext();
+		const { renderAdditionalBlockUI, insertedBlock, setInsertedBlock } =
+			useListViewContext();
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
@@ -66,7 +67,12 @@ const ListViewBlockContents = forwardRef(
 		return (
 			<>
-				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
+				{ renderAdditionalBlockUI &&
+					renderAdditionalBlockUI(
+						block,
+						insertedBlock,
+						setInsertedBlock
+					) }
 				<BlockDraggable clientIds={ draggableClientIds }>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton

package/src/components/list-view/block.js CHANGED Viewed

@@ -38,6 +38,7 @@ import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
+import { unlock } from '../../lock-unlock';
 function ListViewBlock( {
 	block: { clientId },
@@ -59,31 +60,13 @@ function ListViewBlock( {
 	const rowRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { isLocked, isContentLocked, canEdit } = useBlockLock( clientId );
-	const forceSelectionContentLock = useSelect(
-		( select ) => {
-			if ( isSelected ) {
-				return false;
-			}
-			if ( ! isContentLocked ) {
-				return false;
-			}
-			return select( blockEditorStore ).hasSelectedInnerBlock(
-				clientId,
-				true
-			);
-		},
-		[ isContentLocked, clientId, isSelected ]
-	);
+	const { isLocked, canEdit } = useBlockLock( clientId );
-	const canExpand = isContentLocked ? false : canEdit;
 	const isFirstSelectedBlock =
-		forceSelectionContentLock ||
-		( isSelected && selectedClientIds[ 0 ] === clientId );
+		isSelected && selectedClientIds[ 0 ] === clientId;
 	const isLastSelectedBlock =
-		forceSelectionContentLock ||
-		( isSelected &&
-			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
+		isSelected &&
+		selectedClientIds[ selectedClientIds.length - 1 ] === clientId;
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
@@ -97,15 +80,21 @@ function ListViewBlock( {
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]
 	);
-	// When a block hides its toolbar it also hides the block settings menu,
-	// since that menu is part of the toolbar in the editor canvas.
-	// List View respects this by also hiding the block settings menu.
-	const showBlockActions = hasBlockSupport(
-		blockName,
-		'__experimentalToolbar',
-		true
+	const blockEditingMode = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getBlockEditingMode(
+				clientId
+			),
+		[ clientId ]
 	);
+	const showBlockActions =
+		// When a block hides its toolbar it also hides the block settings menu,
+		// since that menu is part of the toolbar in the editor canvas.
+		// List View respects this by also hiding the block settings menu.
+		hasBlockSupport( blockName, '__experimentalToolbar', true ) &&
+		// Don't show the settings menu if block is disabled or content only.
+		blockEditingMode === 'default';
 	const instanceId = useInstanceId( ListViewBlock );
 	const descriptionId = `list-view-block-select-button__${ instanceId }`;
 	const blockPositionDescription = getBlockPositionDescription(
@@ -134,6 +123,8 @@ function ListViewBlock( {
 		collapse,
 		BlockSettingsMenu,
 		listViewInstanceId,
+		expandedState,
+		setInsertedBlock,
 	} = useListViewContext();
 	const hasSiblings = siblingBlockCount > 0;
@@ -203,7 +194,7 @@ function ListViewBlock( {
 	}
 	const classes = classnames( {
-		'is-selected': isSelected || forceSelectionContentLock,
+		'is-selected': isSelected,
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
 		'is-branch-selected': isBranchSelected,
@@ -247,14 +238,14 @@ function ListViewBlock( {
 			path={ path }
 			id={ `list-view-${ listViewInstanceId }-block-${ clientId }` }
 			data-block={ clientId }
-			data-expanded={ canExpand ? isExpanded : undefined }
+			data-expanded={ canEdit ? isExpanded : undefined }
 			ref={ rowRef }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
-				aria-selected={ !! isSelected || forceSelectionContentLock }
+				aria-selected={ !! isSelected }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
@@ -271,7 +262,7 @@ function ListViewBlock( {
 								currentlyEditingBlockInCanvas ? 0 : tabIndex
 							}
 							onFocus={ onFocus }
-							isExpanded={ canExpand ? isExpanded : undefined }
+							isExpanded={ canEdit ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
 							ariaLabel={ blockAriaLabel }
 							ariaDescribedBy={ descriptionId }
@@ -320,7 +311,7 @@ function ListViewBlock( {
 			{ showBlockActions && BlockSettingsMenu && (
 				<TreeGridCell
 					className={ listViewBlockSettingsClassName }
-					aria-selected={ !! isSelected || forceSelectionContentLock }
+					aria-selected={ !! isSelected }
 				>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsMenu
@@ -336,6 +327,9 @@ function ListViewBlock( {
 							} }
 							disableOpenOnArrowDown
 							__experimentalSelectBlock={ updateSelection }
+							expand={ expand }
+							expandedState={ expandedState }
+							setInsertedBlock={ setInsertedBlock }
 						/>
 					) }
 				</TreeGridCell>

package/src/components/list-view/branch.js CHANGED Viewed

@@ -109,13 +109,7 @@ function ListViewBranch( props ) {
 			if ( ! parentId ) {
 				return true;
 			}
-			const isContentLocked =
-				select( blockEditorStore ).getTemplateLock( parentId ) ===
-				'contentOnly';
-			const canEdit = select( blockEditorStore ).canEditBlock( parentId );
-			return isContentLocked ? false : canEdit;
+			return select( blockEditorStore ).canEditBlock( parentId );
 		},
 		[ parentId ]
 	);

package/src/components/list-view/index.js CHANGED Viewed

@@ -16,6 +16,7 @@ import {
 	useRef,
 	useReducer,
 	forwardRef,
+	useState,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -128,6 +129,9 @@ function ListViewComponent(
 	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 	const isMounted = useRef( false );
+	const [ insertedBlock, setInsertedBlock ] = useState( null );
 	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
 		firstSelectedBlockClientId: selectedClientIds[ 0 ],
 		setExpandedState,
@@ -212,6 +216,8 @@ function ListViewComponent(
 			BlockSettingsMenu,
 			listViewInstanceId: instanceId,
 			renderAdditionalBlockUI,
+			insertedBlock,
+			setInsertedBlock,
 		} ),
 		[
 			draggedClientIds,
@@ -221,11 +227,13 @@ function ListViewComponent(
 			BlockSettingsMenu,
 			instanceId,
 			renderAdditionalBlockUI,
+			insertedBlock,
+			setInsertedBlock,
 		]
 	);
-	// If there are no blocks to show, do not render the list view.
-	if ( ! clientIdsTree.length ) {
+	// If there are no blocks to show and we're not showing the appender, do not render the list view.
+	if ( ! clientIdsTree.length && ! showAppender ) {
 		return null;
 	}
@@ -264,18 +272,23 @@ function ListViewComponent(
 		</AsyncModeProvider>
 	);
 }
+// This is the private API for the ListView component.
+// It allows access to all props, not just the public ones.
 export const PrivateListView = forwardRef( ListViewComponent );
+// This is the public API for the ListView component.
+// We wrap the PrivateListView component to hide some props from the public API.
 export default forwardRef( ( props, ref ) => {
 	return (
 		<PrivateListView
 			ref={ ref }
 			{ ...props }
 			showAppender={ false }
-			blockSettingsMenu={ BlockSettingsDropdown }
 			rootClientId={ null }
 			onSelect={ null }
-			renderAdditionalBlockUICallback={ null }
+			renderAdditionalBlockUI={ null }
+			blockSettingsMenu={ undefined }
 		/>
 	);
 } );

package/src/components/list-view/style.scss CHANGED Viewed

@@ -123,7 +123,6 @@
 		border-radius: 0;
 	}
 	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
 	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
 	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
@@ -214,19 +213,17 @@
 		line-height: 0;
 		width: $button-size;
 		vertical-align: middle;
-		@include reduce-motion("transition");
 		> * {
-			will-change: opacity;
 			opacity: 0;
 		}
-		// Show on hover, visible, and show above to keep the hit area size.
+		// Show on hover, visible, when focused, and show above to keep the hit area size.
 		&:hover,
+		&:focus-within,
 		&.is-visible {
 			> * {
 				opacity: 1;
-				@include edit-post__fade-in-animation;
 			}
 		}

package/src/components/list-view/use-list-view-client-ids.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 export default function useListViewClientIds( { blocks, rootClientId } ) {
 	return useSelect(
@@ -16,14 +17,30 @@ export default function useListViewClientIds( { blocks, rootClientId } ) {
 				getDraggedBlockClientIds,
 				getSelectedBlockClientIds,
 				__unstableGetClientIdsTree,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
+			const removeDisabledBlocks = ( tree ) => {
+				return tree.flatMap( ( { clientId, innerBlocks, ...rest } ) => {
+					if ( getBlockEditingMode( clientId ) === 'disabled' ) {
+						return removeDisabledBlocks( innerBlocks );
+					}
+					return [
+						{
+							clientId,
+							innerBlocks: removeDisabledBlocks( innerBlocks ),
+							...rest,
+						},
+					];
+				} );
+			};
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
-				clientIdsTree: blocks
-					? blocks
-					: __unstableGetClientIdsTree( rootClientId ),
+				clientIdsTree: removeDisabledBlocks(
+					blocks ?? __unstableGetClientIdsTree( rootClientId )
+				),
 			};
 		},
 		[ blocks, rootClientId ]