Block Visibility: Centralize modal state in block-editor store

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

@@ -45,6 +45,7 @@ function selector( select ) {
 		isTyping,
 		isDragging,
 		isZoomOut,
+		getViewportModalClientIds,
 	} = unlock( select( blockEditorStore ) );
 
 	const clientId =
@@ -56,6 +57,7 @@ function selector( select ) {
 		isTyping: isTyping(),
 		isZoomOutMode: isZoomOut(),
 		isDragging: isDragging(),
+		viewportModalClientIds: getViewportModalClientIds(),
 	};
 }
 
@@ -73,10 +75,14 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode, isDragging } =
-		useSelect( selector, [] );
-	const [ visibilityModalClientIds, setVisibilityModalClientIds ] =
-		useState( null );
+	const {
+		clientId,
+		hasFixedToolbar,
+		isTyping,
+		isZoomOutMode,
+		isDragging,
+		viewportModalClientIds,
+	} = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const {
 		getBlocksByClientId,
@@ -108,6 +114,8 @@ export default function BlockTools( {
 		moveBlocksDown,
 		expandBlock,
 		stopEditingContentOnlySection,
+		showViewportModal,
+		hideViewportModal,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
@@ -248,7 +256,7 @@ export default function BlockTools( {
 				}
 
 				// Open the visibility breakpoints modal.
-				setVisibilityModalClientIds( clientIds );
+				showViewportModal( clientIds );
 			}
 		}
 
@@ -321,10 +329,10 @@ export default function BlockTools( {
 					onClose={ () => setRenamingBlockClientId( null ) }
 				/>
 			) }
-			{ visibilityModalClientIds && (
+			{ viewportModalClientIds && (
 				<BlockVisibilityModal
-					clientIds={ visibilityModalClientIds }
-					onClose={ () => setVisibilityModalClientIds( null ) }
+					clientIds={ viewportModalClientIds }
+					onClose={ hideViewportModal }
 				/>
 			) }
 		</div>

packages/block-editor/src/components/block-visibility/viewport-menu-item.js

@@ -3,19 +3,16 @@
  */
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
-import { BlockVisibilityModal } from './';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 export default function BlockVisibilityViewportMenuItem( { clientIds } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { areBlocksHiddenAnywhere, shortcut } = useSelect(
 		( select ) => {
 			const { isBlockHiddenAnywhere } = unlock(
@@ -34,20 +31,13 @@ export default function BlockVisibilityViewportMenuItem( { clientIds } ) {
 		},
 		[ clientIds ]
 	);
+	const { showViewportModal } = unlock( useDispatch( blockEditorStore ) );
 	return (
-		<>
-			<MenuItem
-				onClick={ () => setIsModalOpen( true ) }
-				shortcut={ shortcut }
-			>
-				{ areBlocksHiddenAnywhere ? __( 'Show' ) : __( 'Hide' ) }
-			</MenuItem>
-			{ isModalOpen && (
-				<BlockVisibilityModal
-					clientIds={ clientIds }
-					onClose={ () => setIsModalOpen( false ) }
-				/>
-			) }
-		</>
+		<MenuItem
+			onClick={ () => showViewportModal( clientIds ) }
+			shortcut={ shortcut }
+		>
+			{ areBlocksHiddenAnywhere ? __( 'Show' ) : __( 'Hide' ) }
+		</MenuItem>
 	);
 }

packages/block-editor/src/components/block-visibility/viewport-toolbar.js

@@ -3,21 +3,19 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
 import { seen, unseen } from '@wordpress/icons';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { BlockVisibilityModal } from './';
 import { unlock } from '../../lock-unlock';
 
 export default function BlockVisibilityViewportToolbar( { clientIds } ) {
 	const hasBlockVisibilityButtonShownRef = useRef( false );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { canToggleBlockVisibility, areBlocksHiddenAnywhere } = useSelect(
 		( select ) => {
 			const { getBlocksByClientId, getBlockName, isBlockHiddenAnywhere } =
@@ -39,6 +37,7 @@ export default function BlockVisibilityViewportToolbar( { clientIds } ) {
 
 		[ clientIds ]
 	);
+	const blockEditorDispatch = useDispatch( blockEditorStore );
 
 	/*
 	 * If the block visibility button has been shown, we don't want to
@@ -60,28 +59,19 @@ export default function BlockVisibilityViewportToolbar( { clientIds } ) {
 		return null;
 	}
 
+	const { showViewportModal } = unlock( blockEditorDispatch );
+
 	return (
-		<>
-			<ToolbarGroup className="block-editor-block-visibility-toolbar">
-				<ToolbarButton
-					disabled={ ! canToggleBlockVisibility }
-					icon={ areBlocksHiddenAnywhere ? unseen : seen }
-					label={
-						areBlocksHiddenAnywhere
-							? __( 'Hidden' )
-							: __( 'Visible' )
-					}
-					onClick={ () => setIsModalOpen( true ) }
-					aria-expanded={ isModalOpen }
-					aria-haspopup={ ! isModalOpen ? 'dialog' : undefined }
-				/>
-			</ToolbarGroup>
-			{ isModalOpen && (
-				<BlockVisibilityModal
-					clientIds={ clientIds }
-					onClose={ () => setIsModalOpen( false ) }
-				/>
-			) }
-		</>
+		<ToolbarGroup className="block-editor-block-visibility-toolbar">
+			<ToolbarButton
+				disabled={ ! canToggleBlockVisibility }
+				icon={ areBlocksHiddenAnywhere ? unseen : seen }
+				label={
+					areBlocksHiddenAnywhere ? __( 'Hidden' ) : __( 'Visible' )
+				}
+				onClick={ () => showViewportModal( clientIds ) }
+				aria-haspopup="dialog"
+			/>
+		</ToolbarGroup>
 	);
 }

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

@@ -54,7 +54,7 @@ import { useBlockRename, BlockRenameModal } from '../block-rename';
 import AriaReferencedText from './aria-referenced-text';
 import { unlock } from '../../lock-unlock';
 import usePasteStyles from '../use-paste-styles';
-import { useBlockVisibility, BlockVisibilityModal } from '../block-visibility';
+import { useBlockVisibility } from '../block-visibility';
 import { deviceTypeKey } from '../../store/private-keys';
 import { BLOCK_VISIBILITY_VIEWPORTS } from '../block-visibility/constants';
 
@@ -83,8 +83,6 @@ function ListViewBlock( {
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ settingsAnchorRect, setSettingsAnchorRect ] = useState();
 	const [ isRenameModalOpen, setIsRenameModalOpen ] = useState( false );
-	const [ visibilityModalClientIds, setVisibilityModalClientIds ] =
-		useState( null );
 	const { isLocked } = useBlockLock( clientId );
 
 	const isFirstSelectedBlock =
@@ -101,6 +99,7 @@ function ListViewBlock( {
 		removeBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
+		showViewportModal,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	const debouncedToggleBlockHighlight = useDebounce(
@@ -414,7 +413,7 @@ function ListViewBlock( {
 			}
 
 			// Open the visibility breakpoints modal.
-			setVisibilityModalClientIds( blocksToUpdate );
+			showViewportModal( blocksToUpdate );
 		} else if ( isMatch( 'core/block-editor/rename', event ) ) {
 			const { blocksToUpdate } = getBlocksToUpdate();
 			const isContentOnly =
@@ -721,12 +720,6 @@ function ListViewBlock( {
 					) }
 				</TreeGridCell>
 			) }
-			{ visibilityModalClientIds && (
-				<BlockVisibilityModal
-					clientIds={ visibilityModalClientIds }
-					onClose={ () => setVisibilityModalClientIds( null ) }
-				/>
-			) }
 			{ isRenameModalOpen && (
 				<BlockRenameModal
 					clientId={ clientId }

packages/block-editor/src/components/use-block-commands/index.js

@@ -16,13 +16,16 @@ import {
 	plus as add,
 	group,
 	ungroup,
+	seen,
+	unseen,
 } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const getTransformCommands = () =>
 	function useTransformCommands() {
@@ -157,19 +160,21 @@ const getQuickActionsCommands = () =>
 			getBlockRootClientId,
 			getBlocksByClientId,
 			canRemoveBlocks,
-		} = useSelect( blockEditorStore );
+			isBlockHiddenAnywhere,
+		} = unlock( useSelect( blockEditorStore ) );
 		const { getDefaultBlockName, getGroupingBlockName } =
 			useSelect( blocksStore );
 
 		const blocks = getBlocksByClientId( clientIds );
 
+		const blockEditorDispatch = useDispatch( blockEditorStore );
 		const {
 			removeBlocks,
 			replaceBlocks,
 			duplicateBlocks,
 			insertAfterBlock,
 			insertBeforeBlock,
-		} = useDispatch( blockEditorStore );
+		} = blockEditorDispatch;
 
 		const onGroup = () => {
 			if ( ! blocks.length ) {
@@ -204,6 +209,7 @@ const getQuickActionsCommands = () =>
 			return { isLoading: false, commands: [] };
 		}
 
+		const { showViewportModal } = unlock( blockEditorDispatch );
 		const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 		const canInsertDefaultBlock = canInsertBlockType(
 			getDefaultBlockName(),
@@ -283,6 +289,23 @@ const getQuickActionsCommands = () =>
 			} );
 		}
 
+		const supportsVisibility = blocks.every(
+			( block ) =>
+				!! block && hasBlockSupport( block.name, 'visibility', true )
+		);
+
+		if ( supportsVisibility ) {
+			const hasHiddenBlock = clientIds.some( ( id ) =>
+				isBlockHiddenAnywhere( id )
+			);
+			commands.push( {
+				name: 'toggle-visibility',
+				label: hasHiddenBlock ? __( 'Show' ) : __( 'Hide' ),
+				callback: () => showViewportModal( clientIds ),
+				icon: hasHiddenBlock ? seen : unseen,
+			} );
+		}
+
 		return {
 			isLoading: false,
 			commands: commands.map( ( command ) => ( {

packages/block-editor/src/store/private-actions.js

@@ -475,3 +475,28 @@ export function closeListViewContentPanel() {
 		type: 'CLOSE_LIST_VIEW_CONTENT_PANEL',
 	};
 }
+
+/**
+ * Returns an action object used to open the viewport modal
+ * for the given client IDs.
+ *
+ * @param {string[]} clientIds Client IDs of blocks to configure viewport settings for.
+ * @return {Object} Action object.
+ */
+export function showViewportModal( clientIds ) {
+	return {
+		type: 'SHOW_VIEWPORT_MODAL',
+		clientIds,
+	};
+}
+
+/**
+ * Returns an action object used to close the viewport modal.
+ *
+ * @return {Object} Action object.
+ */
+export function hideViewportModal() {
+	return {
+		type: 'HIDE_VIEWPORT_MODAL',
+	};
+}

packages/block-editor/src/store/private-selectors.js

@@ -988,3 +988,15 @@ export function isListViewPanelOpened( state, clientId ) {
 export function getListViewExpandRevision( state ) {
 	return state.listViewExpandRevision || 0;
 }
+
+/**
+ * Returns the client IDs for the viewport modal, or null if
+ * the modal is not open.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string[]|null} Client IDs for the visibility modal, or null.
+ */
+export function getViewportModalClientIds( state ) {
+	return state.viewportModalClientIds;
+}

packages/block-editor/src/store/reducer.js

@@ -1502,6 +1502,25 @@ export function isSelectionEnabled( state = true, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the client IDs for the viewport modal,
+ * or null if the modal is not open.
+ *
+ * @param {string[]|null} state  Current state.
+ * @param {Object}        action Dispatched action.
+ *
+ * @return {string[]|null} Client IDs for the viewport modal.
+ */
+export function viewportModalClientIds( state = null, action ) {
+	switch ( action.type ) {
+		case 'SHOW_VIEWPORT_MODAL':
+			return action.clientIds;
+		case 'HIDE_VIEWPORT_MODAL':
+			return null;
+	}
+	return state;
+}
+
 /**
  * Reducer returning the data needed to display a prompt when certain blocks
  * are removed, or `false` if no such prompt is requested.
@@ -2220,6 +2239,7 @@ const combinedReducers = combineReducers( {
 	lastBlockInserted,
 	editedContentOnlySection,
 	blockVisibility,
+	viewportModalClientIds,
 	blockEditingModes,
 	styleOverrides,
 	removalPromptData,