DRY MarginVisualizer + PaddingVisualizer -> SpacingVisualizer

packages/block-editor/src/hooks/dimensions.js

@@ -19,8 +19,7 @@ import {
 	DimensionsPanel as StylesDimensionsPanel,
 	useHasDimensionsPanel,
 } from '../components/global-styles';
-import { MarginVisualizer } from './margin';
-import { PaddingVisualizer } from './padding';
+import { MarginVisualizer, PaddingVisualizer } from './spacing-visualizer';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 import { cleanEmptyObject, shouldSkipSerialization } from './utils';

packages/block-editor/src/hooks/margin.js → packages/block-editor/src/hooks/spacing-visualizer.js

@@ -6,6 +6,7 @@ import {
 	useRef,
 	useLayoutEffect,
 	useEffect,
+	useReducer,
 } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
@@ -15,57 +16,36 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 import BlockPopoverCover from '../components/block-popover/cover';
 import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
-function getComputedCSS( element, property ) {
-	return element.ownerDocument.defaultView
-		.getComputedStyle( element )
-		.getPropertyValue( property );
-}
-
-export function MarginVisualizer( { clientId, value, forceShow } ) {
+function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
 	const blockElement = useBlockElement( clientId );
-	const [ style, setStyle ] = useState();
-
-	const margin = value?.spacing?.margin;
+	const [ style, updateStyle ] = useReducer( () =>
+		computeStyle( blockElement )
+	);
 
 	useLayoutEffect( () => {
 		if ( ! blockElement ) {
 			return;
 		}
-		// It's not sufficient to read the computed padding value when value.spacing.padding
-		// changes as useEffect may run before the browser recomputes CSS and paints, and,
-		// unlike padding, there's no way to observe when the margin changes using ResizeObserver.
-		// We therefore combine useLayoutEffect and two rAF calls to ensure that we read the margin
-		// after the current paint but before the next paint.
+		// It's not sufficient to read the computed spacing value when value.spacing changes as
+		// useEffect may run before the browser recomputes CSS. We therefore combine
+		// useLayoutEffect and two rAF calls to ensure that we read the spacing after the current
+		// paint but before the next paint.
+		// See https://github.com/WordPress/gutenberg/pull/59227.
 		window.requestAnimationFrame( () =>
-			window.requestAnimationFrame( () => {
-				const top = getComputedCSS( blockElement, 'margin-top' );
-				const right = getComputedCSS( blockElement, 'margin-right' );
-				const bottom = getComputedCSS( blockElement, 'margin-bottom' );
-				const left = getComputedCSS( blockElement, 'margin-left' );
-				setStyle( {
-					borderTopWidth: top,
-					borderRightWidth: right,
-					borderBottomWidth: bottom,
-					borderLeftWidth: left,
-					top: top ? `-${ top }` : 0,
-					right: right ? `-${ right }` : 0,
-					bottom: bottom ? `-${ bottom }` : 0,
-					left: left ? `-${ left }` : 0,
-				} );
-			} )
+			window.requestAnimationFrame( updateStyle )
 		);
-	}, [ blockElement, margin ] );
+	}, [ blockElement, value ] );
 
-	const previousMargin = useRef( margin );
+	const previousValue = useRef( value );
 	const [ isActive, setIsActive ] = useState( false );
 
 	useEffect( () => {
-		if ( isShallowEqual( margin, previousMargin.current ) || forceShow ) {
+		if ( isShallowEqual( value, previousValue.current ) || forceShow ) {
 			return;
 		}
 
 		setIsActive( true );
-		previousMargin.current = margin;
+		previousValue.current = value;
 
 		const timeout = setTimeout( () => {
 			setIsActive( false );
@@ -75,7 +55,7 @@ export function MarginVisualizer( { clientId, value, forceShow } ) {
 			setIsActive( false );
 			clearTimeout( timeout );
 		};
-	}, [ margin, forceShow ] );
+	}, [ value, forceShow ] );
 
 	if ( ! isActive && ! forceShow ) {
 		return null;
@@ -86,7 +66,61 @@ export function MarginVisualizer( { clientId, value, forceShow } ) {
 			clientId={ clientId }
 			__unstablePopoverSlot="block-toolbar"
 		>
-			<div className="block-editor__padding-visualizer" style={ style } />
+			<div className="block-editor__spacing-visualizer" style={ style } />
 		</BlockPopoverCover>
 	);
 }
+
+function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}
+
+export function MarginVisualizer( { clientId, value, forceShow } ) {
+	return (
+		<SpacingVisualizer
+			clientId={ clientId }
+			value={ value?.spacing?.margin }
+			computeStyle={ ( blockElement ) => {
+				const top = getComputedCSS( blockElement, 'margin-top' );
+				const right = getComputedCSS( blockElement, 'margin-right' );
+				const bottom = getComputedCSS( blockElement, 'margin-bottom' );
+				const left = getComputedCSS( blockElement, 'margin-left' );
+				return {
+					borderTopWidth: top,
+					borderRightWidth: right,
+					borderBottomWidth: bottom,
+					borderLeftWidth: left,
+					top: top ? `-${ top }` : 0,
+					right: right ? `-${ right }` : 0,
+					bottom: bottom ? `-${ bottom }` : 0,
+					left: left ? `-${ left }` : 0,
+				};
+			} }
+			forceShow={ forceShow }
+		/>
+	);
+}
+
+export function PaddingVisualizer( { clientId, value, forceShow } ) {
+	return (
+		<SpacingVisualizer
+			clientId={ clientId }
+			value={ value?.spacing?.padding }
+			computeStyle={ ( blockElement ) => ( {
+				borderTopWidth: getComputedCSS( blockElement, 'padding-top' ),
+				borderRightWidth: getComputedCSS(
+					blockElement,
+					'padding-right'
+				),
+				borderBottomWidth: getComputedCSS(
+					blockElement,
+					'padding-bottom'
+				),
+				borderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),
+			} ) }
+			forceShow={ forceShow }
+		/>
+	);
+}

packages/block-editor/src/hooks/padding.scss → packages/block-editor/src/hooks/spacing.scss

@@ -1,4 +1,4 @@
-.block-editor__padding-visualizer {
+.block-editor__spacing-visualizer {
 	position: absolute;
 	top: 0;
 	bottom: 0;

packages/block-editor/src/style.scss

@@ -52,8 +52,8 @@
 @import "./hooks/color.scss";
 @import "./hooks/dimensions.scss";
 @import "./hooks/layout.scss";
-@import "./hooks/padding.scss";
 @import "./hooks/position.scss";
+@import "./hooks/spacing.scss";
 @import "./hooks/typography.scss";
 
 @import "./components/block-toolbar/style.scss";