diff --git a/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js b/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
index d4bfd9f4a50af3..8bc2f13c276530 100644
--- a/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
+++ b/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
/**
* Internal dependencies
*/
@@ -10,6 +15,51 @@ export function GridVisualizer( { clientId } ) {
if ( ! blockElement ) {
return null;
}
+ return (
+
+
+
+ );
+}
+
+function GridVisualizerGrid( { blockElement } ) {
+ const [ gridInfo, setGridInfo ] = useState( () =>
+ getGridInfo( blockElement )
+ );
+ useEffect( () => {
+ const observers = [];
+ for ( const element of [ blockElement, ...blockElement.children ] ) {
+ const observer = new window.ResizeObserver( () => {
+ setGridInfo( getGridInfo( blockElement ) );
+ } );
+ observer.observe( element );
+ observers.push( observer );
+ }
+ return () => {
+ for ( const observer of observers ) {
+ observer.disconnect();
+ }
+ };
+ }, [ blockElement ] );
+ return (
+
+ { Array.from( { length: gridInfo.numItems }, ( _, i ) => (
+
+ ) ) }
+
+ );
+}
+
+function getGridInfo( blockElement ) {
const gridTemplateColumns = getComputedCSS(
blockElement,
'grid-template-columns'
@@ -21,30 +71,13 @@ export function GridVisualizer( { clientId } ) {
const numColumns = gridTemplateColumns.split( ' ' ).length;
const numRows = gridTemplateRows.split( ' ' ).length;
const numItems = numColumns * numRows;
- return (
-
-
- { Array.from( { length: numItems }, ( _, i ) => (
-
- ) ) }
-
-
- );
+ return {
+ numItems,
+ style: {
+ gridTemplateColumns,
+ gridTemplateRows,
+ gap: getComputedCSS( blockElement, 'gap' ),
+ padding: getComputedCSS( blockElement, 'padding' ),
+ },
+ };
}