Block API: Add block visibility control support and UI

Author: t-hamano

docs/reference-guides/block-api/block-supports.md

@@ -174,6 +174,34 @@ attributes: {
 }
 ```
 
+## blockVisibility
+
+_**Note:** Since WordPress 6.9._
+
+-   Type: `boolean`
+-   Default value: `true`
+
+By default, a block can be hidden within the editor from the block "Options" dropdown or the block toolbar. To disable this behavior for a block, set `blockVisibility` to `false`.
+
+```js
+supports: {
+	// Don't allow the block to be hidden via the editor UI.
+	blockVisibility: false
+}
+```
+
+When a block is hidden, the state is stored in the block's `metadata` attribute:
+
+```js
+attributes: {
+	metadata: {
+		blockVisibility: false
+	}
+}
+```
+
+This only affects visibility in the frontend.
+
 ## className
 
 -   Type: `boolean`

docs/reference-guides/core-blocks.md

@@ -41,7 +41,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
@@ -540,7 +540,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
@@ -930,7 +930,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

lib/block-supports/block-visibility.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Block visibility block support flag.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Render nothing if the block is hidden.
+ *
+ * @param string $block_content The block content.
+ * @param array  $block         The block.
+ *
+ * @return string The block content.
+ */
+function gutenberg_render_block_visibility_support( $block_content, $block ) {
+	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 );

lib/load.php

@@ -152,6 +152,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';

packages/block-editor/src/components/block-list/block.js

@@ -705,6 +705,12 @@ function BlockListBlockProvider( props ) {
 				originalBlockClientId: isInvalid
 					? blocksWithSameName[ 0 ]
 					: false,
+				isHidden:
+					hasBlockSupport(
+						getBlockName( clientId ),
+						'blockVisibility',
+						true
+					) && attributes?.metadata?.blockVisibility === false,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -747,6 +753,7 @@ function BlockListBlockProvider( props ) {
 		className,
 		defaultClassName,
 		originalBlockClientId,
+		isHidden,
 	} = selectedProps;
 
 	// Users of the editor.BlockListBlock filter used to be able to
@@ -795,6 +802,7 @@ function BlockListBlockProvider( props ) {
 		originalBlockClientId,
 		themeSupportsLayout,
 		canMove,
+		isHidden,
 	};
 
 	// Here we separate between the props passed to BlockListBlock and any other

packages/block-editor/src/components/block-list/content.scss

@@ -183,6 +183,18 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 	}
 
+	// Block visibility.
+	&.is-hidden:not(.is-selected):not(.has-child-selected)::after {
+		bottom: 0;
+		content: "";
+		left: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+		background: repeating-linear-gradient(45deg, rgba($gray-300, 0.7) 0, rgba($gray-300, 0.7) 5px, transparent 5px, transparent 10px);
+	}
+
 	// Clear floats.
 	&[data-clear="true"] {
 		float: none;

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -102,6 +102,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		defaultClassName,
 		isSectionBlock,
 		canMove,
+		isHidden,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -127,6 +128,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	] );
 
 	const blockEditContext = useBlockEditContext();
+
 	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
 	const bindingsStyle =
 		hasBlockBindings && canBindBlock( name )
@@ -183,6 +185,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-editing-disabled': isEditingDisabled,
 				'has-editable-outline': hasEditableOutline,
 				'has-negative-margin': hasNegativeMargin,
+				'is-hidden': isHidden,
 				'is-content-locked-temporarily-editing-as-blocks':
 					isTemporarilyEditingAsBlocks,
 			},

packages/block-editor/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

packages/block-editor/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,
@@ -153,6 +155,7 @@ export function PrivateBlockToolbar( {
 			showSlots: ! _isZoomOut,
 			showGroupButtons: ! _isZoomOut,
 			showLockButtons: ! _isZoomOut,
+			showBlockVisibilityButton: ! _isZoomOut,
 			showSwitchSectionStyleButton:
 				_isZoomOut ||
 				( isNavigationModeEnabled &&
@@ -221,6 +224,12 @@ export function PrivateBlockToolbar( {
 						>
 							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
 								<BlockSwitcher clientIds={ blockClientIds } />
+								{ ! isMultiToolbar &&
+									showBlockVisibilityButton && (
+										<BlockVisibilityToolbar
+											clientId={ blockClientId }
+										/>
+									) }
 								{ ! isMultiToolbar &&
 									isDefaultEditingMode &&
 									showLockButtons && (

packages/block-editor/src/components/block-visibility/index.js

@@ -0,0 +1,3 @@
+export { default as BlockVisibilityMenuItem } from './menu-item';
+export { default as BlockVisibilityToolbar } from './toolbar';
+export { default as useBlockVisibility } from './use-block-visibility';