Grid Visualizer: Improve observation logic (#68230)

* Grid Visualizer: Improve observation logic

* Add `class` to `attributeFilter`

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

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();

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 })`,
 		},
 	};
 }