Hide grid visualizer when grid is template locked or block editing mo…

…de is not default (WordPress#66065) Co-authored-by: talldan <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: bph <[email protected]> * Hide grid visualizer when template locked or block editing mode is not default * Remove unlocks
karthick-murugan · Nov 13, 2024 · e1ba37f · e1ba37f
1 parent 4b63801
commit e1ba37f
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 12 deletions.
diff --git 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 (
 		<>
 			<GridLayoutSync clientId={ clientId } />
-			{ ( isSelected || isDragging ) && (
+			{ isVisible && (
 				<GridVisualizer clientId={ clientId } parentLayout={ layout } />
 			) }
 		</>

diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js
@@ -175,17 +175,62 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
 		isManualPlacement,
 	} = parentLayout;
 
-	const rootClientId = useSelect(
+	if ( parentLayoutType !== 'grid' ) {
+		return null;
+	}
+
+	return (
+		<GridTools
+			clientId={ clientId }
+			style={ style }
+			setAttributes={ setAttributes }
+			allowSizingOnChildren={ allowSizingOnChildren }
+			isManualPlacement={ isManualPlacement }
+			parentLayout={ parentLayout }
+		/>
+	);
+}
+
+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 ]
 	);
 
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
 	const [ resizerBounds, setResizerBounds ] = useState();
 
-	if ( parentLayoutType !== 'grid' ) {
+	if ( ! isVisible ) {
 		return null;
 	}