WordPress
diff --git a/Collapse file: backport-changelog/6.9/10110.md
‎backport-changelog/6.9/10110.md‎
Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
Display the source diff
Display the rich diff b/Collapse file: backport-changelog/6.9/10110.md
‎backport-changelog/6.9/10110.md‎
Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
Display the source diff
Display the rich diff
diff --git a/Collapse file: docs/reference-guides/core-blocks.md
‎docs/reference-guides/core-blocks.md‎
Copy file name to clipboard
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff b/Collapse file: docs/reference-guides/core-blocks.md
‎docs/reference-guides/core-blocks.md‎
Copy file name to clipboard
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
diff --git a/Collapse file: lib/block-supports/block-visibility.php
‎lib/block-supports/block-visibility.php‎
Copy file name to clipboard
+32Lines changed: 32 additions & 0 deletions b/Collapse file: lib/block-supports/block-visibility.php
‎lib/block-supports/block-visibility.php‎
Copy file name to clipboard
+32Lines changed: 32 additions & 0 deletions
diff --git a/Collapse file: lib/load.php
‎lib/load.php‎
Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions b/Collapse file: lib/load.php
‎lib/load.php‎
Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions
diff --git a/Collapse file: packages/block-editor/src/components/block-list/block.js
‎packages/block-editor/src/components/block-list/block.js‎
Copy file name to clipboard
+16Lines changed: 16 additions & 0 deletions b/Collapse file: packages/block-editor/src/components/block-list/block.js
‎packages/block-editor/src/components/block-list/block.js‎
Copy file name to clipboard
+16Lines changed: 16 additions & 0 deletions
diff --git a/Collapse file: packages/block-editor/src/components/block-list/content.scss
‎packages/block-editor/src/components/block-list/content.scss‎
Copy file name to clipboard
+19Lines changed: 19 additions & 0 deletions b/Collapse file: packages/block-editor/src/components/block-list/content.scss
‎packages/block-editor/src/components/block-list/content.scss‎
Copy file name to clipboard
+19Lines changed: 19 additions & 0 deletions
diff --git a/Collapse file: packages/block-editor/src/components/block-list/use-block-props/index.js
‎packages/block-editor/src/components/block-list/use-block-props/index.js‎
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions b/Collapse file: packages/block-editor/src/components/block-list/use-block-props/index.js
‎packages/block-editor/src/components/block-list/use-block-props/index.js‎
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
diff --git a/Collapse file: packages/block-editor/src/components/block-settings-menu-controls/index.js
‎packages/block-editor/src/components/block-settings-menu-controls/index.js‎
Copy file name to clipboard
+21-1Lines changed: 21 additions & 1 deletion b/Collapse file: packages/block-editor/src/components/block-settings-menu-controls/index.js
‎packages/block-editor/src/components/block-settings-menu-controls/index.js‎
Copy file name to clipboard
+21-1Lines changed: 21 additions & 1 deletion
diff --git a/Collapse file: packages/block-editor/src/components/block-toolbar/index.js
‎packages/block-editor/src/components/block-toolbar/index.js‎
Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions b/Collapse file: packages/block-editor/src/components/block-toolbar/index.js
‎packages/block-editor/src/components/block-toolbar/index.js‎
Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions
diff --git a/Collapse file: packages/block-editor/src/components/block-visibility/index.js
‎packages/block-editor/src/components/block-visibility/index.js‎
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions b/Collapse file: packages/block-editor/src/components/block-visibility/index.js
‎packages/block-editor/src/components/block-visibility/index.js‎
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
@@ -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.
 
@@ -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;
 
@@ -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';
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+https://github.com/WordPress/wordpress-develop/pull/10110`
	`2`	`+`
	`3`	`+* https://github.com/WordPress/gutenberg/pull/71203`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { default as BlockVisibilityMenuItem } from './menu-item';`
	`2`	`+export { default as BlockVisibilityToolbar } from './toolbar';`