From a16d114014f70c0e037277772caa39db37883a08 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Tue, 21 Oct 2025 09:26:51 -0500
Subject: [PATCH 1/2] Don't subscribe dimensions panel to store if it's
 disabled

---
 packages/block-editor/src/hooks/dimensions.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index ffa4048b7740e3..941bf645413743 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -71,9 +71,15 @@ function DimensionsInspectorControl( { children, resetAllFilter } ) {
 export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasDimensionsPanel( settings );
 	const value = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
-		[ clientId ]
+		( select ) => {
+			// Early return to avoid subscription when disabled
+			if ( ! isEnabled ) {
+				return undefined;
+			}
+			return select( blockEditorStore ).getBlockAttributes( clientId )
+				?.style;
+		},
+		[ clientId, isEnabled ]
 	);
 	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
 	const onChange = ( newStyle ) => {

From fd1560a70c2307cb6a91fcbc167b71cd703eee9a Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 29 Oct 2025 12:47:16 -0500
Subject: [PATCH 2/2] Perf: Only mount SpacingVisualizers when actively
 visualizing

Previously, PaddingVisualizer and MarginVisualizer components were always mounted whenever a block supported spacing, causing MutationObservers to run continuously and trigger re-renders on every canvas hover.

Now only mounts visualizers when actively hovering padding/margin controls (visualizedProperty is set), preventing unnecessary MutationObserver overhead.

Also adds useEffect to force style computation on mount to ensure correct dimensions display when visualizer first appears.
---
 packages/block-editor/src/hooks/dimensions.js | 30 ++++++++++---------
 .../src/hooks/spacing-visualizer.js           | 10 ++++++-
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 941bf645413743..e1206c12645552 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -116,20 +116,22 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 				defaultControls={ defaultControls }
 				onVisualize={ setVisualizedProperty }
 			/>
-			{ !! settings?.spacing?.padding && (
-				<PaddingVisualizer
-					forceShow={ visualizedProperty === 'padding' }
-					clientId={ clientId }
-					value={ value }
-				/>
-			) }
-			{ !! settings?.spacing?.margin && (
-				<MarginVisualizer
-					forceShow={ visualizedProperty === 'margin' }
-					clientId={ clientId }
-					value={ value }
-				/>
-			) }
+			{ !! settings?.spacing?.padding &&
+				visualizedProperty === 'padding' && (
+					<PaddingVisualizer
+						forceShow={ visualizedProperty === 'padding' }
+						clientId={ clientId }
+						value={ value }
+					/>
+				) }
+			{ !! settings?.spacing?.margin &&
+				visualizedProperty === 'margin' && (
+					<MarginVisualizer
+						forceShow={ visualizedProperty === 'margin' }
+						clientId={ clientId }
+						value={ value }
+					/>
+				) }
 		</>
 	);
 }
diff --git a/packages/block-editor/src/hooks/spacing-visualizer.js b/packages/block-editor/src/hooks/spacing-visualizer.js
index 0a058a70be4789..f144857b45f00c 100644
--- a/packages/block-editor/src/hooks/spacing-visualizer.js
+++ b/packages/block-editor/src/hooks/spacing-visualizer.js
@@ -16,7 +16,15 @@ function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
 		computeStyle( blockElement )
 	);
 
-	// It's not sufficient to read the block’s computed style when `value` changes because
+	// Force style computation when forceShow becomes true (e.g., when hovering control)
+	// to ensure visualizer displays correct dimensions on first render.
+	useEffect( () => {
+		if ( blockElement && forceShow ) {
+			updateStyle();
+		}
+	}, [ blockElement, forceShow ] );
+
+	// It's not sufficient to read the block's computed style when `value` changes because
 	// the effect would run before the block’s style has updated. Thus observing mutations
 	// to the block’s attributes is used to trigger updates to the visualizer’s styles.
 	useEffect( () => {