@wordpress/block-editor 15.4.1-next.f56bd8138.0 → 15.5.0

package/src/components/block-list/block.js

@@ -624,6 +624,7 @@ function BlockListBlockProvider( props ) {
 					? getBlockDefaultClassName( blockName )
 					: undefined,
 				blockTitle: blockType?.title,
+				isBlockHidden: attributes?.metadata?.blockVisibility === false,
 			};
 
 			// When in preview mode, we can avoid a lot of selection and
@@ -632,6 +633,9 @@ function BlockListBlockProvider( props ) {
 				return previewContext;
 			}
 
+			const { isBlockHidden: _isBlockHidden } = unlock(
+				select( blockEditorStore )
+			);
 			const _isSelected = isBlockSelected( clientId );
 			const canRemove = canRemoveBlock( clientId );
 			const canMove = canMoveBlock( clientId );
@@ -705,6 +709,7 @@ function BlockListBlockProvider( props ) {
 				originalBlockClientId: isInvalid
 					? blocksWithSameName[ 0 ]
 					: false,
+				isBlockHidden: _isBlockHidden( clientId ),
 			};
 		},
 		[ clientId, rootClientId ]
@@ -747,6 +752,7 @@ function BlockListBlockProvider( props ) {
 		className,
 		defaultClassName,
 		originalBlockClientId,
+		isBlockHidden,
 	} = selectedProps;
 
 	// Users of the editor.BlockListBlock filter used to be able to
@@ -795,8 +801,18 @@ function BlockListBlockProvider( props ) {
 		originalBlockClientId,
 		themeSupportsLayout,
 		canMove,
+		isBlockHidden,
 	};
 
+	if (
+		isBlockHidden &&
+		! isSelected &&
+		! isMultiSelected &&
+		! hasChildSelected
+	) {
+		return null;
+	}
+
 	// Here we separate between the props passed to BlockListBlock and any other
 	// information we selected for internal use. BlockListBlock is a filtered
 	// component and thus ALL the props are PUBLIC API.

package/src/components/block-list/content.scss

@@ -93,6 +93,25 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		}
 	}
 
+
+	// Hidden blocks.
+	// In order for the block toolbar to render correctly, blocks cannot be hidden.
+	// Instead, use styles to visually hide blocks.
+	.block-editor-block-list__block.is-block-hidden {
+		visibility: hidden;
+		overflow: hidden;
+		height: 0;
+		border: none !important;
+		padding: 0 !important;
+	}
+
+	&.is-layout-flex:not(.is-vertical) > .is-block-hidden {
+		width: 0;
+		height: auto;
+		align-self: stretch;
+		white-space: nowrap !important;
+	}
+
 	// Re-enable it on components inside.
 	[class^="components-"] {
 		user-select: text;

package/src/components/block-list/use-block-props/index.js

@@ -29,7 +29,6 @@ import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
-import { canBindBlock } from '../../../utils/block-bindings';
 import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
 
 /**
@@ -102,6 +101,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		defaultClassName,
 		isSectionBlock,
 		canMove,
+		isBlockHidden,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -128,14 +128,13 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 
 	const blockEditContext = useBlockEditContext();
 	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
-	const bindingsStyle =
-		hasBlockBindings && canBindBlock( name )
-			? {
-					'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
-					'--wp-admin-theme-color--rgb':
-						'var(--wp-block-synced-color--rgb)',
-			  }
-			: {};
+	const bindingsStyle = hasBlockBindings
+		? {
+				'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
+				'--wp-admin-theme-color--rgb':
+					'var(--wp-block-synced-color--rgb)',
+		  }
+		: {};
 
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
@@ -185,6 +184,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'has-negative-margin': hasNegativeMargin,
 				'is-content-locked-temporarily-editing-as-blocks':
 					isTemporarilyEditingAsBlocks,
+				'is-block-hidden': isBlockHidden,
 			},
 			className,
 			props.className,

package/src/components/block-settings-menu-controls/index.js

@@ -6,6 +6,7 @@ import {
 	MenuGroup,
 	__experimentalStyleProvider as StyleProvider,
 } from '@wordpress/components';
+import { hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -20,13 +21,20 @@ import { store as blockEditorStore } from '../../store';
 import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 import { ModifyContentLockMenuItem } from '../content-lock';
 import { BlockRenameControl, useBlockRename } from '../block-rename';
+import { BlockVisibilityMenuItem } from '../block-visibility';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
-	const { selectedBlocks, selectedClientIds, isContentOnly } = useSelect(
+	const {
+		selectedBlocks,
+		selectedClientIds,
+		isContentOnly,
+		canToggleSelectedBlocksVisibility,
+	} = useSelect(
 		( select ) => {
 			const {
+				getBlocksByClientId,
 				getBlockNamesByClientId,
 				getSelectedBlockClientIds,
 				getBlockEditingMode,
@@ -38,6 +46,11 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				selectedClientIds: ids,
 				isContentOnly:
 					getBlockEditingMode( ids[ 0 ] ) === 'contentOnly',
+				canToggleSelectedBlocksVisibility: getBlocksByClientId(
+					ids
+				).every( ( block ) =>
+					hasBlockSupport( block.name, 'blockVisibility', true )
+				),
 			};
 		},
 		[ clientIds ]
@@ -49,6 +62,8 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 		selectedClientIds.length === 1 && canLock && ! isContentOnly;
 	const showRenameButton =
 		selectedClientIds.length === 1 && canRename && ! isContentOnly;
+	const showVisibilityButton =
+		canToggleSelectedBlocksVisibility && ! isContentOnly;
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
@@ -93,6 +108,11 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
+						{ showVisibilityButton && (
+							<BlockVisibilityMenuItem
+								clientIds={ selectedClientIds }
+							/>
+						) }
 						{ fills }
 						{ selectedClientIds.length === 1 && (
 							<ModifyContentLockMenuItem

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

@@ -28,6 +28,7 @@ import BlockControls from '../block-controls';
 import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
+import { BlockVisibilityToolbar } from '../block-visibility';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowHoveredOrFocusedGestures } from './utils';
@@ -73,6 +74,7 @@ export function PrivateBlockToolbar( {
 		showSlots,
 		showGroupButtons,
 		showLockButtons,
+		showBlockVisibilityButton,
 		showSwitchSectionStyleButton,
 		hasFixedToolbar,
 		isNavigationMode,
@@ -163,6 +165,7 @@ export function PrivateBlockToolbar( {
 			showSlots: ! _isZoomOut,
 			showGroupButtons: ! _isZoomOut,
 			showLockButtons: ! _isZoomOut,
+			showBlockVisibilityButton: ! _isZoomOut,
 			showSwitchSectionStyleButton: _showSwitchSectionStyleButton,
 			hasFixedToolbar: getSettings().hasFixedToolbar,
 			isNavigationMode: isNavigationModeEnabled,
@@ -227,6 +230,12 @@ export function PrivateBlockToolbar( {
 						>
 							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 								<BlockSwitcher clientIds={ blockClientIds } />
+								{ isDefaultEditingMode &&
+									showBlockVisibilityButton && (
+										<BlockVisibilityToolbar
+											clientIds={ blockClientIds }
+										/>
+									) }
 								{ ! isMultiToolbar &&
 									isDefaultEditingMode &&
 									showLockButtons && (

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

@@ -0,0 +1,2 @@
+export { default as BlockVisibilityMenuItem } from './menu-item';
+export { default as BlockVisibilityToolbar } from './toolbar';

package/src/components/block-visibility/menu-item.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
+import { seen, unseen } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { cleanEmptyObject } from '../../hooks/utils';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockVisibilityMenuItem( { clientIds } ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const blocks = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlocksByClientId( clientIds );
+		},
+		[ clientIds ]
+	);
+
+	const hasHiddenBlock = blocks.some(
+		( block ) => block.attributes.metadata?.blockVisibility === false
+	);
+
+	const toggleBlockVisibility = () => {
+		const attributesByClientId = Object.fromEntries(
+			blocks?.map( ( { clientId, attributes } ) => [
+				clientId,
+				{
+					metadata: cleanEmptyObject( {
+						...attributes?.metadata,
+						blockVisibility: hasHiddenBlock ? undefined : false,
+					} ),
+				},
+			] )
+		);
+		updateBlockAttributes( clientIds, attributesByClientId, {
+			uniqueByBlock: true,
+		} );
+	};
+
+	return (
+		<MenuItem
+			icon={ hasHiddenBlock ? seen : unseen }
+			onClick={ toggleBlockVisibility }
+		>
+			{ hasHiddenBlock ? __( 'Show' ) : __( 'Hide' ) }
+		</MenuItem>
+	);
+}

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

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useRef, useEffect } from '@wordpress/element';
+import { seen, unseen } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { cleanEmptyObject } from '../../hooks/utils';
+
+export default function BlockVisibilityToolbar( { clientIds } ) {
+	const { blocks, canToggleBlockVisibility } = useSelect(
+		( select ) => {
+			const { getBlockName, getBlocksByClientId } =
+				select( blockEditorStore );
+			const _blocks = getBlocksByClientId( clientIds );
+			return {
+				blocks: _blocks,
+				canToggleBlockVisibility: _blocks.every( ( { clientId } ) =>
+					hasBlockSupport(
+						getBlockName( clientId ),
+						'blockVisibility',
+						true
+					)
+				),
+			};
+		},
+		[ clientIds ]
+	);
+
+	const hasHiddenBlock = blocks.some(
+		( block ) => block.attributes.metadata?.blockVisibility === false
+	);
+
+	const hasBlockVisibilityButtonShownRef = useRef( false );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	// If the block visibility button has been shown, we don't want to
+	// remove it from the toolbar until the toolbar is rendered again
+	// without it. Removing it beforehand can cause focus loss issues.
+	// It needs to return focus from whence it came, and to do that,
+	// we need to leave the button in the toolbar.
+	useEffect( () => {
+		if ( hasHiddenBlock ) {
+			hasBlockVisibilityButtonShownRef.current = true;
+		}
+	}, [ hasHiddenBlock ] );
+
+	if ( ! hasHiddenBlock && ! hasBlockVisibilityButtonShownRef.current ) {
+		return null;
+	}
+
+	const toggleBlockVisibility = () => {
+		const attributesByClientId = Object.fromEntries(
+			blocks?.map( ( { clientId, attributes } ) => [
+				clientId,
+				{
+					metadata: cleanEmptyObject( {
+						...attributes?.metadata,
+						blockVisibility: hasHiddenBlock ? undefined : false,
+					} ),
+				},
+			] )
+		);
+		updateBlockAttributes( clientIds, attributesByClientId, {
+			uniqueByBlock: true,
+		} );
+	};
+
+	return (
+		<>
+			<ToolbarGroup className="block-editor-block-lock-toolbar">
+				<ToolbarButton
+					disabled={ ! canToggleBlockVisibility }
+					icon={ hasHiddenBlock ? unseen : seen }
+					label={ hasHiddenBlock ? __( 'Hidden' ) : __( 'Visible' ) }
+					onClick={ toggleBlockVisibility }
+				/>
+			</ToolbarGroup>
+		</>
+	);
+}

package/src/components/inspector-controls-tabs/index.js

@@ -6,6 +6,7 @@ import {
 	Tooltip,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useSelect } from '@wordpress/data';
 
@@ -43,9 +44,40 @@ export default function InspectorControlsTabs( {
 		? TAB_LIST_VIEW.name
 		: undefined;
 
+	const [ selectedTabId, setSelectedTabId ] = useState(
+		initialTabName ?? tabs[ 0 ]?.name
+	);
+
+	// When the active tab is not amongst the available `tabs`, it indicates
+	// the list of tabs was changed dynamically with the active one being
+	// removed. Set the active tab back to the first tab.
+	useEffect( () => {
+		// Skip this behavior if `initialTabName` is supplied. In the navigation
+		// block, the list view tab isn't present in `tabs` initially. The early
+		// return here prevents the dynamic behavior that follows from overriding
+		// `initialTabName`.
+		if ( initialTabName ) {
+			return;
+		}
+
+		if ( tabs?.length && selectedTabId ) {
+			const activeTab = tabs.find(
+				( tab ) => tab.name === selectedTabId
+			);
+			if ( ! activeTab ) {
+				setSelectedTabId( tabs[ 0 ].name );
+			}
+		}
+	}, [ tabs, selectedTabId, initialTabName ] );
+
 	return (
 		<div className="block-editor-block-inspector__tabs">
-			<Tabs defaultTabId={ initialTabName } key={ clientId }>
+			<Tabs
+				defaultTabId={ initialTabName }
+				selectedTabId={ selectedTabId }
+				onSelect={ setSelectedTabId }
+				key={ clientId }
+			>
 				<Tabs.TabList>
 					{ tabs.map( ( tab ) =>
 						showIconLabels ? (

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

@@ -488,7 +488,7 @@ function LinkControl( {
 						className="block-editor-link-control__search-submit"
 						aria-disabled={ isDisabled }
 					>
-						{ __( 'Save' ) }
+						{ __( 'Apply' ) }
 					</Button>
 				</HStack>
 			) }

package/src/components/link-control/test/index.js

@@ -795,7 +795,7 @@ describe( 'Manual link entry', () => {
 				}
 
 				const submitButton = screen.queryByRole( 'button', {
-					name: 'Save',
+					name: 'Apply',
 				} );
 
 				// Verify the submission UI is disabled.
@@ -1035,7 +1035,7 @@ describe( 'Link submission', () => {
 		expect( createSubmitButton ).not.toBeInTheDocument();
 
 		const editSubmitButton = screen.getByRole( 'button', {
-			name: 'Save',
+			name: 'Apply',
 		} );
 
 		expect( editSubmitButton ).toBeVisible();
@@ -2033,7 +2033,7 @@ describe( 'Addition Settings UI', () => {
 
 		// check that the "Apply" button is disabled by default.
 		const submitButton = screen.queryByRole( 'button', {
-			name: 'Save',
+			name: 'Apply',
 		} );
 
 		expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' );
@@ -2489,7 +2489,7 @@ describe( 'Controlling link title text', () => {
 		expect( textInput ).toHaveValue( textValue );
 
 		const submitButton = screen.queryByRole( 'button', {
-			name: 'Save',
+			name: 'Apply',
 		} );
 
 		await user.click( submitButton );

package/src/components/list-view/block-select-button.js

@@ -12,9 +12,10 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
+import { Icon, lockSmall as lock, pinSmall, unseen } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
+import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -27,6 +28,7 @@ import { useBlockLock } from '../block-lock';
 import useListViewImages from './use-list-view-images';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+
 const { Badge } = unlock( componentsPrivateApis );
 
 function ListViewBlockSelectButton(
@@ -53,15 +55,31 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const { isContentOnly } = useSelect(
-		( select ) => ( {
-			isContentOnly:
-				select( blockEditorStore ).getBlockEditingMode( clientId ) ===
-				'contentOnly',
-		} ),
-		[ clientId ]
-	);
+	const { canToggleBlockVisibility, isBlockHidden, isContentOnly } =
+		useSelect(
+			( select ) => {
+				const { getBlockName } = select( blockEditorStore );
+				const { isBlockHidden: _isBlockHidden } = unlock(
+					select( blockEditorStore )
+				);
+				return {
+					canToggleBlockVisibility: hasBlockSupport(
+						getBlockName( clientId ),
+						'blockVisibility',
+						true
+					),
+					isBlockHidden: _isBlockHidden( clientId ),
+					isContentOnly:
+						select( blockEditorStore ).getBlockEditingMode(
+							clientId
+						) === 'contentOnly',
+				};
+			},
+			[ clientId ]
+		);
 	const shouldShowLockIcon = isLocked && ! isContentOnly;
+	const shouldShowBlockVisibilityIcon =
+		canToggleBlockVisibility && isBlockHidden;
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
@@ -147,6 +165,11 @@ function ListViewBlockSelectButton(
 						) ) }
 					</span>
 				) : null }
+				{ shouldShowBlockVisibilityIcon && (
+					<span className="block-editor-list-view-block-select-button__block-visibility">
+						<Icon icon={ unseen } />
+					</span>
+				) }
 				{ shouldShowLockIcon && (
 					<span className="block-editor-list-view-block-select-button__lock">
 						<Icon icon={ lock } />

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

@@ -119,20 +119,25 @@ function ListViewBlock( {
 
 	const pasteStyles = usePasteStyles();
 
-	const { block, blockName, allowRightClickOverrides } = useSelect(
-		( select ) => {
-			const { getBlock, getBlockName, getSettings } =
-				select( blockEditorStore );
-
-			return {
-				block: getBlock( clientId ),
-				blockName: getBlockName( clientId ),
-				allowRightClickOverrides:
-					getSettings().allowRightClickOverrides,
-			};
-		},
-		[ clientId ]
-	);
+	const { block, blockName, allowRightClickOverrides, isBlockHidden } =
+		useSelect(
+			( select ) => {
+				const { getBlock, getBlockName, getSettings } =
+					select( blockEditorStore );
+				const { isBlockHidden: _isBlockHidden } = unlock(
+					select( blockEditorStore )
+				);
+
+				return {
+					block: getBlock( clientId ),
+					blockName: getBlockName( clientId ),
+					allowRightClickOverrides:
+						getSettings().allowRightClickOverrides,
+					isBlockHidden: _isBlockHidden( clientId ),
+				};
+			},
+			[ clientId ]
+		);
 
 	const showBlockActions =
 		// When a block hides its toolbar it also hides the block settings menu,
@@ -484,6 +489,10 @@ function ListViewBlock( {
 		isLocked
 	);
 
+	const blockVisibilityDescription = isBlockHidden
+		? __( 'Block is hidden.' )
+		: null;
+
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = clsx(
@@ -581,6 +590,7 @@ function ListViewBlock( {
 							{ [
 								blockPositionDescription,
 								blockPropertiesDescription,
+								blockVisibilityDescription,
 							]
 								.filter( Boolean )
 								.join( ' ' ) }

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

@@ -412,6 +412,7 @@
 		color: $white;
 	}
 
+	.block-editor-list-view-block-select-button__block-visibility,
 	.block-editor-list-view-block-select-button__lock,
 	.block-editor-list-view-block-select-button__sticky {
 		line-height: 0;

package/src/components/media-replace-flow/test/index.js

@@ -119,7 +119,7 @@ describe( 'General media replace flow', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Save',
+				name: 'Apply',
 			} )
 		);
 

package/src/components/rich-text/index.js

@@ -39,7 +39,6 @@ import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
-import { canBindBlock } from '../../utils/block-bindings';
 import BlockContext from '../block-context';
 
 export const keyboardShortcutContext = createContext();
@@ -177,9 +176,14 @@ export function RichTextWrapper(
 
 	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
+			const { __experimentalBlockBindingsSupportedAttributes } =
+				select( blockEditorStore ).getSettings();
+
 			if (
 				! blockBindings?.[ identifier ] ||
-				! canBindBlock( blockName )
+				! (
+					blockName in __experimentalBlockBindingsSupportedAttributes
+				)
 			) {
 				return {};
 			}

package/src/components/use-block-drop-zone/index.js

@@ -9,6 +9,7 @@ import {
 } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 import {
+	hasBlockSupport,
 	isUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock,
 	store as blocksStore,
 } from '@wordpress/blocks';
@@ -410,7 +411,19 @@ export default function useBlockDropZone( {
 					return;
 				}
 
-				const blocks = getBlocks( targetRootClientId );
+				const blocks = getBlocks( targetRootClientId )
+					// Filter out blocks that are hidden
+					.filter( ( block ) => {
+						return ! (
+							hasBlockSupport(
+								block.name,
+								'blockVisibility',
+								true
+							) &&
+							block.attributes?.metadata?.blockVisibility ===
+								false
+						);
+					} );
 
 				// The block list is empty, don't show the insertion point but still allow dropping.
 				if ( blocks.length === 0 ) {