From 29a52094ac50b143ca6972c773ed638190b4d86c Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 11 Oct 2024 12:28:27 +0200 Subject: [PATCH 1/2] Hide grid visualizer when template locked or block editing mode is not default --- .../block-editor/src/hooks/grid-visualizer.js | 33 ++++++++---- .../block-editor/src/hooks/layout-child.js | 53 +++++++++++++++++-- 2 files changed, 73 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/hooks/grid-visualizer.js b/packages/block-editor/src/hooks/grid-visualizer.js index 44102208c4d1d..1089eea48f12b 100644 --- a/packages/block-editor/src/hooks/grid-visualizer.js +++ b/packages/block-editor/src/hooks/grid-visualizer.js @@ -10,26 +10,41 @@ import { useSelect } from '@wordpress/data'; */ import { GridVisualizer, useGridLayoutSync } from '../components/grid'; import { store as blockEditorStore } from '../store'; +import { unlock } from '../lock-unlock'; function GridLayoutSync( props ) { useGridLayoutSync( props ); } function GridTools( { clientId, layout } ) { - const { isSelected, isDragging } = useSelect( ( select ) => { - const { isBlockSelected, isDraggingBlocks } = - select( blockEditorStore ); + const isVisible = useSelect( + ( select ) => { + const { + isBlockSelected, + isDraggingBlocks, + getTemplateLock, + getBlockEditingMode, + } = unlock( select( blockEditorStore ) ); - return { - isSelected: isBlockSelected( clientId ), - isDragging: isDraggingBlocks(), - }; - } ); + // These calls are purposely ordered from least expensive to most expensive. + // Hides the visualizer in cases where the user is not or cannot interact with it. + if ( + ( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) || + getTemplateLock( clientId ) || + getBlockEditingMode( clientId ) !== 'default' + ) { + return false; + } + + return true; + }, + [ clientId ] + ); return ( <> - { ( isSelected || isDragging ) && ( + { isVisible && ( ) } diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js index 558d5e2cc626b..ddce6c3b6f8a2 100644 --- a/packages/block-editor/src/hooks/layout-child.js +++ b/packages/block-editor/src/hooks/layout-child.js @@ -16,7 +16,7 @@ import { GridItemResizer, GridItemMovers, } from '../components/grid'; - +import { unlock } from '../lock-unlock'; // Used for generating the instance ID const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {}; @@ -175,9 +175,54 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) { isManualPlacement, } = parentLayout; - const rootClientId = useSelect( + if ( parentLayoutType !== 'grid' ) { + return null; + } + + return ( + + ); +} + +function GridTools( { + clientId, + style, + setAttributes, + allowSizingOnChildren, + isManualPlacement, + parentLayout, +} ) { + const { rootClientId, isVisible } = useSelect( ( select ) => { - return select( blockEditorStore ).getBlockRootClientId( clientId ); + const { + getBlockRootClientId, + getBlockEditingMode, + getTemplateLock, + } = unlock( select( blockEditorStore ) ); + + const _rootClientId = getBlockRootClientId( clientId ); + + if ( + getTemplateLock( _rootClientId ) || + getBlockEditingMode( _rootClientId ) !== 'default' + ) { + return { + rootClientId: _rootClientId, + isVisible: false, + }; + } + + return { + rootClientId: _rootClientId, + isVisible: true, + }; }, [ clientId ] ); @@ -185,7 +230,7 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) { // Use useState() instead of useRef() so that GridItemResizer updates when ref is set. const [ resizerBounds, setResizerBounds ] = useState(); - if ( parentLayoutType !== 'grid' ) { + if ( ! isVisible ) { return null; } From 43a50e66541c3af63938b7dcd8c530f3871e1923 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 11 Oct 2024 14:37:07 +0200 Subject: [PATCH 2/2] Remove unlocks --- packages/block-editor/src/hooks/grid-visualizer.js | 3 +-- packages/block-editor/src/hooks/layout-child.js | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/grid-visualizer.js b/packages/block-editor/src/hooks/grid-visualizer.js index 1089eea48f12b..26650c85ea509 100644 --- a/packages/block-editor/src/hooks/grid-visualizer.js +++ b/packages/block-editor/src/hooks/grid-visualizer.js @@ -10,7 +10,6 @@ import { useSelect } from '@wordpress/data'; */ import { GridVisualizer, useGridLayoutSync } from '../components/grid'; import { store as blockEditorStore } from '../store'; -import { unlock } from '../lock-unlock'; function GridLayoutSync( props ) { useGridLayoutSync( props ); @@ -24,7 +23,7 @@ function GridTools( { clientId, layout } ) { isDraggingBlocks, getTemplateLock, getBlockEditingMode, - } = unlock( select( blockEditorStore ) ); + } = select( blockEditorStore ); // These calls are purposely ordered from least expensive to most expensive. // Hides the visualizer in cases where the user is not or cannot interact with it. diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js index ddce6c3b6f8a2..7a8e039c68969 100644 --- a/packages/block-editor/src/hooks/layout-child.js +++ b/packages/block-editor/src/hooks/layout-child.js @@ -16,7 +16,7 @@ import { GridItemResizer, GridItemMovers, } from '../components/grid'; -import { unlock } from '../lock-unlock'; + // Used for generating the instance ID const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {}; @@ -205,7 +205,7 @@ function GridTools( { getBlockRootClientId, getBlockEditingMode, getTemplateLock, - } = unlock( select( blockEditorStore ) ); + } = select( blockEditorStore ); const _rootClientId = getBlockRootClientId( clientId );