Improve grid visualizer resize observation (WordPress#68842)

* Obviate mutation observer with resize observer for border-box * Use `inset` to place visualizer instead of `padding` * Omit children from resize observation Co-authored-by: t-hamano <[email protected]>
shimotmk · Jan 27, 2025 · 2abe6fa · 2abe6fa
1 parent c8a8df3
commit 2abe6fa
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js
@@ -54,29 +54,18 @@ const GridVisualizerGrid = forwardRef(
 		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
 
 		useEffect( () => {
-			const observers = [];
-			for ( const element of [ gridElement, ...gridElement.children ] ) {
-				const observer = new window.ResizeObserver( () => {
-					setGridInfo( getGridInfo( gridElement ) );
-				} );
-				observer.observe( element );
-				observers.push( observer );
-			}
-
-			const mutationObserver = new window.MutationObserver( () => {
+			const resizeCallback = () =>
 				setGridInfo( getGridInfo( gridElement ) );
-			} );
-			mutationObserver.observe( gridElement, {
-				attributeFilter: [ 'style', 'class' ],
-				childList: true,
-				subtree: true,
-			} );
-			observers.push( mutationObserver );
-
+			// Both border-box and content-box are observed as they may change
+			// independently. This requires two observers because a single one
+			// can’t be made to monitor both on the same element.
+			const borderBoxSpy = new window.ResizeObserver( resizeCallback );
+			borderBoxSpy.observe( gridElement, { box: 'border-box' } );
+			const contentBoxSpy = new window.ResizeObserver( resizeCallback );
+			contentBoxSpy.observe( gridElement );
 			return () => {
-				for ( const observer of observers ) {
-					observer.disconnect();
-				}
+				borderBoxSpy.disconnect();
+				contentBoxSpy.disconnect();
 			};
 		}, [ gridElement ] );
 

diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss
@@ -20,6 +20,7 @@
 
 .block-editor-grid-visualizer__grid {
 	display: grid;
+	position: absolute;
 }
 
 .block-editor-grid-visualizer__cell {

diff --git a/packages/block-editor/src/components/grid/utils.js b/packages/block-editor/src/components/grid/utils.js
@@ -187,10 +187,12 @@ export function getGridInfo( gridElement ) {
 			gridTemplateColumns,
 			gridTemplateRows,
 			gap: getComputedCSS( gridElement, 'gap' ),
-			paddingTop: `calc(${ paddingTop } + ${ borderTopWidth })`,
-			paddingRight: `calc(${ paddingRight } + ${ borderRightWidth })`,
-			paddingBottom: `calc(${ paddingBottom } + ${ borderBottomWidth })`,
-			paddingLeft: `calc(${ paddingLeft } + ${ borderLeftWidth })`,
+			inset: `
+				calc(${ paddingTop } + ${ borderTopWidth })
+				calc(${ paddingRight } + ${ borderRightWidth })
+				calc(${ paddingBottom } + ${ borderBottomWidth })
+				calc(${ paddingLeft } + ${ borderLeftWidth })
+			`,
 		},
 	};
 }