WordPress · t-hamano · Oct 1, 2025 · Aug 8, 2025 · Aug 15, 2025 · Aug 15, 2025
diff --git a/backport-changelog/6.9/10110.md b/backport-changelog/6.9/10110.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/10110
+
+* https://github.com/WordPress/gutenberg/pull/71203
@@ -39,7 +39,7 @@ Displays an accordion header. ([Source](https://github.com/WordPress/gutenberg/t
 -	**Experimental:** true
 -	**Category:** design
 -	**Parent:** core/accordion-content
--	**Supports:** anchor, color (background, gradients, text), interactivity, shadow, spacing (padding), typography (fontSize), ~~align~~
+-	**Supports:** anchor, color (background, gradients, text), interactivity, shadow, spacing (padding), typography (fontSize), ~~align~~, ~~blockVisibility~~
 -	**Attributes:** iconPosition, level, levelOptions, openByDefault, showIcon, title
 
 ## Accordion Panel
@@ -50,7 +50,7 @@ Displays an accordion panel. ([Source](https://github.com/WordPress/gutenberg/tr
 -	**Experimental:** true
 -	**Category:** design
 -	**Parent:** core/accordion-content
--	**Supports:** color (background, gradients, text), interactivity, layout, shadow, spacing (blockGap, padding), typography (fontSize, lineHeight)
+-	**Supports:** color (background, gradients, text), interactivity, layout, shadow, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~blockVisibility~~
 -	**Attributes:** allowedBlocks, isSelected, openByDefault, templateLock
 
 ## Archives
@@ -86,7 +86,7 @@ Reuse this design across your site. ([Source](https://github.com/WordPress/guten
 
 -	**Name:** core/block
 -	**Category:** reusable
--	**Supports:** interactivity (clientNavigation), ~~customClassName~~, ~~html~~, ~~inserter~~, ~~renaming~~
+-	**Supports:** interactivity (clientNavigation), ~~blockVisibility~~, ~~customClassName~~, ~~html~~, ~~inserter~~, ~~renaming~~
 -	**Attributes:** content, ref
 
 ## Button
@@ -585,7 +585,7 @@ Show a block pattern. ([Source](https://github.com/WordPress/gutenberg/tree/trun
 
 -	**Name:** core/pattern
 -	**Category:** theme
--	**Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~, ~~renaming~~
+-	**Supports:** interactivity (clientNavigation), ~~blockVisibility~~, ~~html~~, ~~inserter~~, ~~renaming~~
 -	**Attributes:** slug
 
 ## Author
@@ -975,7 +975,7 @@ Edit the different global regions of your site, like the header, footer, sidebar
 
 -	**Name:** core/template-part
 -	**Category:** theme
--	**Supports:** align, interactivity (clientNavigation), ~~html~~, ~~renaming~~, ~~reusable~~
+-	**Supports:** align, interactivity (clientNavigation), ~~blockVisibility~~, ~~html~~, ~~renaming~~, ~~reusable~~
 -	**Attributes:** area, slug, tagName, theme
 
 ## Term Description

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Block visibility block support flag.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Render nothing if the block is hidden.
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ * @return string                Filtered block content.
+ */
+function gutenberg_render_block_visibility_support( $block_content, $block ) {
+	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+
+	if ( ! $block_type || ! block_has_support( $block_type, 'blockVisibility', true ) ) {
+		return $block_content;
+	}
+
+	if ( isset( $block['attrs']['metadata']['blockVisibility'] ) && false === $block['attrs']['metadata']['blockVisibility'] ) {
+		return '';
+	}
+
+	return $block_content;
+}
+
+if ( function_exists( 'wp_render_block_visibility_support' ) ) {
+	remove_filter( 'render_block', 'wp_render_block_visibility_support' );
+}
+add_filter( 'render_block', 'gutenberg_render_block_visibility_support', 10, 2 );
@@ -162,6 +162,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/block-supports/background.php';
 require __DIR__ . '/block-supports/block-style-variations.php';
 require __DIR__ . '/block-supports/aria-label.php';
+require __DIR__ . '/block-supports/block-visibility.php';
 
 // Data views.
 require_once __DIR__ . '/experimental/data-views.php';

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

@@ -187,6 +187,13 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	&[data-clear="true"] {
 		float: none;
 	}
+
+	// Hidden blocks.
+	// In order for the block toolbar to render correctly, blocks cannot be hidden.
+	// Instead, use styles to visually hide blocks.
+	&.is-block-hidden {
+		visibility: hidden !important;
+	}
 }
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline) {

@@ -101,6 +101,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		defaultClassName,
 		isSectionBlock,
 		canMove,
+		isBlockHidden,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -183,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,

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

@@ -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 && (

@@ -0,0 +1,2 @@
+export { default as BlockVisibilityMenuItem } from './menu-item';
+export { default as BlockVisibilityToolbar } from './toolbar';
@@ -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>
+	);
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		https://github.com/WordPress/wordpress-develop/pull/10110

		* https://github.com/WordPress/gutenberg/pull/71203
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as BlockVisibilityMenuItem } from './menu-item';
		export { default as BlockVisibilityToolbar } from './toolbar';