Grid Visualizer: Improve observation logic (#68230)

* Grid Visualizer: Improve observation logic * Add `class` to `attributeFilter` Co-authored-by: t-hamano <[email protected]> Co-authored-by: talldan <[email protected]>
WordPress · Dec 23, 2024 · 813c24b · 813c24b · github-actions · Dec 23, 2024
1 parent b73c95d
commit 813c24b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js
@@ -62,6 +62,17 @@ const GridVisualizerGrid = forwardRef(
 				observer.observe( element );
 				observers.push( observer );
 			}
+
+			const mutationObserver = new window.MutationObserver( () => {
+				setGridInfo( getGridInfo( gridElement ) );
+			} );
+			mutationObserver.observe( gridElement, {
+				attributeFilter: [ 'style', 'class' ],
+				childList: true,
+				subtree: true,
+			} );
+			observers.push( mutationObserver );
+
 			return () => {
 				for ( const observer of observers ) {
 					observer.disconnect();

diff --git a/packages/block-editor/src/components/grid/utils.js b/packages/block-editor/src/components/grid/utils.js
@@ -160,6 +160,21 @@ export function getGridInfo( gridElement ) {
 		gridElement,
 		'grid-template-rows'
 	);
+	const borderTopWidth = getComputedCSS( gridElement, 'border-top-width' );
+	const borderRightWidth = getComputedCSS(
+		gridElement,
+		'border-right-width'
+	);
+	const borderBottomWidth = getComputedCSS(
+		gridElement,
+		'border-bottom-width'
+	);
+	const borderLeftWidth = getComputedCSS( gridElement, 'border-left-width' );
+	const paddingTop = getComputedCSS( gridElement, 'padding-top' );
+	const paddingRight = getComputedCSS( gridElement, 'padding-right' );
+	const paddingBottom = getComputedCSS( gridElement, 'padding-bottom' );
+	const paddingLeft = getComputedCSS( gridElement, 'padding-left' );
+
 	const numColumns = gridTemplateColumns.split( ' ' ).length;
 	const numRows = gridTemplateRows.split( ' ' ).length;
 	const numItems = numColumns * numRows;
@@ -172,7 +187,10 @@ export function getGridInfo( gridElement ) {
 			gridTemplateColumns,
 			gridTemplateRows,
 			gap: getComputedCSS( gridElement, 'gap' ),
-			padding: getComputedCSS( gridElement, 'padding' ),
+			paddingTop: `calc(${ paddingTop } + ${ borderTopWidth })`,
+			paddingRight: `calc(${ paddingRight } + ${ borderRightWidth })`,
+			paddingBottom: `calc(${ paddingBottom } + ${ borderBottomWidth })`,
+			paddingLeft: `calc(${ paddingLeft } + ${ borderLeftWidth })`,
 		},
 	};
 }