Only show grid when selected or dragging

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

@@ -3,16 +3,41 @@
  */
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { GridVisualizer, useGridLayoutSync } from '../components/grid';
+import { store as blockEditorStore } from '../store';
 
 function GridLayoutSync( props ) {
 	useGridLayoutSync( props );
 }
 
+function GridTools( { clientId, layout } ) {
+	const { isSelected, isDragging } = useSelect( ( select ) => {
+		const { isBlockSelected, isDraggingBlocks } =
+			select( blockEditorStore );
+
+		return {
+			isSelected: isBlockSelected( clientId ),
+			isDragging: isDraggingBlocks(),
+		};
+	} );
+
+	if ( ! isSelected && ! isDragging ) {
+		return null;
+	}
+
+	return (
+		<>
+			<GridVisualizer clientId={ clientId } parentLayout={ layout } />
+			<GridLayoutSync clientId={ clientId } />
+		</>
+	);
+}
+
 const addGridVisualizerToBlockEdit = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		if (
@@ -24,12 +49,10 @@ const addGridVisualizerToBlockEdit = createHigherOrderComponent(
 
 		return (
 			<>
-				<GridVisualizer
+				<GridTools
 					clientId={ props.clientId }
-					parentLayout={ props.attributes.layout }
+					layout={ props.attributes.layout }
 				/>
-				<GridLayoutSync clientId={ props.clientId } />
-
 				<BlockEdit { ...props } />
 			</>
 		);