Hide grid visualiser if the grid block is hidden (#74963)

Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

Author: tellthemachines

packages/block-editor/src/hooks/grid-visualizer.js

@@ -10,19 +10,24 @@ import { useSelect } from '@wordpress/data';
  */
 import { GridVisualizer, useGridLayoutSync } from '../components/grid';
 import { store as blockEditorStore } from '../store';
+import useBlockVisibility from '../components/block-visibility/use-block-visibility';
+import { deviceTypeKey } from '../store/private-keys';
+import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
 
 function GridLayoutSync( props ) {
 	useGridLayoutSync( props );
 }
 
 function GridTools( { clientId, layout } ) {
-	const isVisible = useSelect(
+	const { isVisible, blockVisibility, deviceType } = useSelect(
 		( select ) => {
 			const {
 				isBlockSelected,
 				isDraggingBlocks,
 				getTemplateLock,
 				getBlockEditingMode,
+				getBlockAttributes,
+				getSettings,
 			} = select( blockEditorStore );
 
 			// These calls are purposely ordered from least expensive to most expensive.
@@ -32,18 +37,32 @@ function GridTools( { clientId, layout } ) {
 				getTemplateLock( clientId ) ||
 				getBlockEditingMode( clientId ) !== 'default'
 			) {
-				return false;
+				return { isVisible: false };
 			}
 
-			return true;
+			const attributes = getBlockAttributes( clientId );
+			const settings = getSettings();
+
+			return {
+				isVisible: true,
+				blockVisibility: attributes?.metadata?.blockVisibility,
+				deviceType:
+					settings?.[ deviceTypeKey ]?.toLowerCase() ||
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+			};
 		},
 		[ clientId ]
 	);
 
+	const { isBlockCurrentlyHidden } = useBlockVisibility( {
+		blockVisibility,
+		deviceType,
+	} );
+
 	return (
 		<>
 			<GridLayoutSync clientId={ clientId } />
-			{ isVisible && (
+			{ isVisible && ! isBlockCurrentlyHidden && (
 				<GridVisualizer clientId={ clientId } parentLayout={ layout } />
 			) }
 		</>

packages/block-editor/src/hooks/layout-child.js

@@ -16,6 +16,9 @@ import {
 	GridItemResizer,
 	GridItemMovers,
 } from '../components/grid';
+import useBlockVisibility from '../components/block-visibility/use-block-visibility';
+import { deviceTypeKey } from '../store/private-keys';
+import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
 
 // Used for generating the instance ID
 const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
@@ -199,12 +202,20 @@ function GridTools( {
 	isManualPlacement,
 	parentLayout,
 } ) {
-	const { rootClientId, isVisible } = useSelect(
+	const {
+		rootClientId,
+		isVisible,
+		parentBlockVisibility,
+		blockBlockVisibility,
+		deviceType,
+	} = useSelect(
 		( select ) => {
 			const {
 				getBlockRootClientId,
 				getBlockEditingMode,
 				getTemplateLock,
+				getBlockAttributes,
+				getSettings,
 			} = select( blockEditorStore );
 
 			const _rootClientId = getBlockRootClientId( clientId );
@@ -219,21 +230,46 @@ function GridTools( {
 				};
 			}
 
+			const parentAttributes = getBlockAttributes( _rootClientId );
+			const blockAttributes = getBlockAttributes( clientId );
+			const settings = getSettings();
+
 			return {
 				rootClientId: _rootClientId,
 				isVisible: true,
+				parentBlockVisibility:
+					parentAttributes?.metadata?.blockVisibility,
+				blockBlockVisibility:
+					blockAttributes?.metadata?.blockVisibility,
+				deviceType:
+					settings?.[ deviceTypeKey ]?.toLowerCase() ||
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
 			};
 		},
 		[ clientId ]
 	);
 
+	const { isBlockCurrentlyHidden: isParentBlockCurrentlyHidden } =
+		useBlockVisibility( {
+			blockVisibility: parentBlockVisibility,
+			deviceType,
+		} );
+
+	const { isBlockCurrentlyHidden: isBlockItselfCurrentlyHidden } =
+		useBlockVisibility( {
+			blockVisibility: blockBlockVisibility,
+			deviceType,
+		} );
+
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
 	const [ resizerBounds, setResizerBounds ] = useState();
 
-	if ( ! isVisible ) {
+	if ( ! isVisible || isParentBlockCurrentlyHidden ) {
 		return null;
 	}
 
+	const showResizer = allowSizingOnChildren && ! isBlockItselfCurrentlyHidden;
+
 	function updateLayout( layout ) {
 		setAttributes( {
 			style: {
@@ -253,7 +289,7 @@ function GridTools( {
 				contentRef={ setResizerBounds }
 				parentLayout={ parentLayout }
 			/>
-			{ allowSizingOnChildren && (
+			{ showResizer && (
 				<GridItemResizer
 					clientId={ clientId }
 					// Don't allow resizing beyond the grid visualizer.