diff --git a/packages/block-editor/src/hooks/grid-visualizer.js b/packages/block-editor/src/hooks/grid-visualizer.js
index 44102208c4d1d..26650c85ea509 100644
--- a/packages/block-editor/src/hooks/grid-visualizer.js
+++ b/packages/block-editor/src/hooks/grid-visualizer.js
@@ -16,20 +16,34 @@ function GridLayoutSync( props ) {
}
function GridTools( { clientId, layout } ) {
- const { isSelected, isDragging } = useSelect( ( select ) => {
- const { isBlockSelected, isDraggingBlocks } =
- select( blockEditorStore );
+ const isVisible = useSelect(
+ ( select ) => {
+ const {
+ isBlockSelected,
+ isDraggingBlocks,
+ getTemplateLock,
+ getBlockEditingMode,
+ } = 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 8beb50c1b8284..36510bafad5ee 100644
--- a/packages/block-editor/src/hooks/layout-child.js
+++ b/packages/block-editor/src/hooks/layout-child.js
@@ -172,9 +172,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,
+ } = select( blockEditorStore );
+
+ const _rootClientId = getBlockRootClientId( clientId );
+
+ if (
+ getTemplateLock( _rootClientId ) ||
+ getBlockEditingMode( _rootClientId ) !== 'default'
+ ) {
+ return {
+ rootClientId: _rootClientId,
+ isVisible: false,
+ };
+ }
+
+ return {
+ rootClientId: _rootClientId,
+ isVisible: true,
+ };
},
[ clientId ]
);
@@ -182,7 +227,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;
}