Grid interactivity: Show grid visualizer when block inspector is clos…

…ed (#61429)

* Grid interactivity: Show grid visualizer when block inspector is closed

* Hide grid visualizer when distraction free mode is enabled

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

@@ -2,19 +2,28 @@
  * WordPress dependencies
  */
 import { useState, useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
+import { store as blockEditorStore } from '../../store';
 import { getComputedCSS } from './utils';
 
 export function GridVisualizer( { clientId } ) {
+	const isDistractionFree = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().isDistractionFree,
+		[]
+	);
 	const blockElement = useBlockElement( clientId );
-	if ( ! blockElement ) {
+
+	if ( isDistractionFree || ! blockElement ) {
 		return null;
 	}
+
 	return (
 		<BlockPopoverCover
 			className="block-editor-grid-visualizer"

packages/block-editor/src/layouts/grid.js

@@ -68,7 +68,6 @@ export default {
 	inspectorControls: function GridLayoutInspectorControls( {
 		layout = {},
 		onChange,
-		clientId,
 		layoutBlockSupport = {},
 	} ) {
 		const { allowSizingOnChildren = false } = layoutBlockSupport;
@@ -90,14 +89,14 @@ export default {
 						onChange={ onChange }
 					/>
 				) }
-				{ window.__experimentalEnableGridInteractivity && (
-					<GridVisualizer clientId={ clientId } />
-				) }
 			</>
 		);
 	},
-	toolBarControls: function GridLayoutToolbarControls() {
-		return null;
+	toolBarControls: function GridLayoutToolbarControls( { clientId } ) {
+		if ( ! window.__experimentalEnableGridInteractivity ) {
+			return null;
+		}
+		return <GridVisualizer clientId={ clientId } />;
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
@@ -136,7 +135,7 @@ export default {
 		} else if ( minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
-				`container-type: inline-size`
+				'container-type: inline-size'
 			);
 		}