From 33eca620b8ee20896124c87597c98f6e0168e51e Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 29 Mar 2023 13:47:05 +0800 Subject: [PATCH 1/3] Fix padding visualizer accuracy - Use the computed CSS value instead of the non-computed value - Add a small transition to smooth out the delay in resizing --- packages/block-editor/src/hooks/padding.js | 72 +++++++++++++++----- packages/block-editor/src/hooks/padding.scss | 1 + 2 files changed, 55 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index ea463b13132a13..6b106f4b3c48d0 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -1,34 +1,70 @@ /** * WordPress dependencies */ -import { useState, useRef, useEffect, useMemo } from '@wordpress/element'; +import { + useState, + useRef, + useEffect, + useLayoutEffect, +} from '@wordpress/element'; import isShallowEqual from '@wordpress/is-shallow-equal'; /** * Internal dependencies */ import BlockPopover from '../components/block-popover'; -import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils'; +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 PaddingVisualizer( { clientId, attributes, forceShow } ) { - const padding = attributes?.style?.spacing?.padding; - const style = useMemo( () => { - return { - borderTopWidth: padding?.top - ? getSpacingPresetCssVar( padding?.top ) - : 0, - borderRightWidth: padding?.right - ? getSpacingPresetCssVar( padding?.right ) - : 0, - borderBottomWidth: padding?.bottom - ? getSpacingPresetCssVar( padding?.bottom ) - : 0, - borderLeftWidth: padding?.left - ? getSpacingPresetCssVar( padding?.left ) - : 0, + const blockElement = useBlockElement( clientId ); + const [ style, setStyle ] = useState(); + + useLayoutEffect( () => { + if ( ! blockElement ) { + return; + } + + let resizeObserver; + const blockView = blockElement?.ownerDocument?.defaultView; + + if ( blockView.ResizeObserver ) { + resizeObserver = new blockView.ResizeObserver( () => { + setStyle( { + borderTopWidth: getComputedCSS( + blockElement, + 'padding-top' + ), + borderRightWidth: getComputedCSS( + blockElement, + 'padding-right' + ), + borderBottomWidth: getComputedCSS( + blockElement, + 'padding-bottom' + ), + borderLeftWidth: getComputedCSS( + blockElement, + 'padding-left' + ), + } ); + } ); + resizeObserver.observe( blockElement ); + } + + return () => { + if ( resizeObserver ) { + resizeObserver.disconnect(); + } }; - }, [ padding ] ); + }, [ blockElement ] ); + const padding = attributes?.style?.spacing?.padding; const [ isActive, setIsActive ] = useState( false ); const valueRef = useRef( padding ); const timeoutRef = useRef(); diff --git a/packages/block-editor/src/hooks/padding.scss b/packages/block-editor/src/hooks/padding.scss index dbb99919881893..713eaef3368c3e 100644 --- a/packages/block-editor/src/hooks/padding.scss +++ b/packages/block-editor/src/hooks/padding.scss @@ -9,4 +9,5 @@ border-style: solid; pointer-events: none; box-sizing: border-box; + transition: border 0.1s; } From ab2c84dd45436c004f2db84d8294d5a667a4cc39 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 29 Mar 2023 14:11:13 +0800 Subject: [PATCH 2/3] First attempt to use computed values --- packages/block-editor/src/hooks/margin.js | 57 +++++++++++--------- packages/block-editor/src/hooks/padding.scss | 2 +- 2 files changed, 32 insertions(+), 27 deletions(-) diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index b93616ba32599f..bdf5cabea6a9df 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -1,43 +1,48 @@ /** * WordPress dependencies */ -import { useMemo, useRef, useState, useEffect } from '@wordpress/element'; +import { useState, useRef, useEffect } from '@wordpress/element'; import isShallowEqual from '@wordpress/is-shallow-equal'; /** * Internal dependencies */ import BlockPopover from '../components/block-popover'; -import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils'; +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, attributes, forceShow } ) { + const blockElement = useBlockElement( clientId ); + const [ style, setStyle ] = useState(); + const margin = attributes?.style?.spacing?.margin; - const style = useMemo( () => { - const marginTop = margin?.top - ? getSpacingPresetCssVar( margin?.top ) - : 0; - const marginRight = margin?.right - ? getSpacingPresetCssVar( margin?.right ) - : 0; - const marginBottom = margin?.bottom - ? getSpacingPresetCssVar( margin?.bottom ) - : 0; - const marginLeft = margin?.left - ? getSpacingPresetCssVar( margin?.left ) - : 0; + useEffect( () => { + if ( ! blockElement ) { + return; + } - return { - borderTopWidth: marginTop, - borderRightWidth: marginRight, - borderBottomWidth: marginBottom, - borderLeftWidth: marginLeft, - top: marginTop ? `calc(${ marginTop } * -1)` : 0, - right: marginRight ? `calc(${ marginRight } * -1)` : 0, - bottom: marginBottom ? `calc(${ marginBottom } * -1)` : 0, - left: marginLeft ? `calc(${ marginLeft } * -1)` : 0, - }; - }, [ margin ] ); + 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, + } ); + }, [ blockElement, margin ] ); const [ isActive, setIsActive ] = useState( false ); const valueRef = useRef( margin ); diff --git a/packages/block-editor/src/hooks/padding.scss b/packages/block-editor/src/hooks/padding.scss index 713eaef3368c3e..a14bccf68f0b0d 100644 --- a/packages/block-editor/src/hooks/padding.scss +++ b/packages/block-editor/src/hooks/padding.scss @@ -9,5 +9,5 @@ border-style: solid; pointer-events: none; box-sizing: border-box; - transition: border 0.1s; + transition: border 0.3s; } From cb0f4c029064a86f323db5569eb623cf7d015688 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 29 Mar 2023 14:20:11 +0800 Subject: [PATCH 3/3] Simplify padding visualizer to instead listen to padding attribute changes --- packages/block-editor/src/hooks/padding.js | 52 +++++--------------- packages/block-editor/src/hooks/padding.scss | 1 - 2 files changed, 11 insertions(+), 42 deletions(-) diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index 6b106f4b3c48d0..f451f2cb4262ea 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -1,12 +1,7 @@ /** * WordPress dependencies */ -import { - useState, - useRef, - useEffect, - useLayoutEffect, -} from '@wordpress/element'; +import { useState, useRef, useEffect } from '@wordpress/element'; import isShallowEqual from '@wordpress/is-shallow-equal'; /** @@ -25,46 +20,21 @@ export function PaddingVisualizer( { clientId, attributes, forceShow } ) { const blockElement = useBlockElement( clientId ); const [ style, setStyle ] = useState(); - useLayoutEffect( () => { + const padding = attributes?.style?.spacing?.padding; + + useEffect( () => { if ( ! blockElement ) { return; } - let resizeObserver; - const blockView = blockElement?.ownerDocument?.defaultView; - - if ( blockView.ResizeObserver ) { - resizeObserver = new blockView.ResizeObserver( () => { - setStyle( { - borderTopWidth: getComputedCSS( - blockElement, - 'padding-top' - ), - borderRightWidth: getComputedCSS( - blockElement, - 'padding-right' - ), - borderBottomWidth: getComputedCSS( - blockElement, - 'padding-bottom' - ), - borderLeftWidth: getComputedCSS( - blockElement, - 'padding-left' - ), - } ); - } ); - resizeObserver.observe( blockElement ); - } + setStyle( { + borderTopWidth: getComputedCSS( blockElement, 'padding-top' ), + borderRightWidth: getComputedCSS( blockElement, 'padding-right' ), + borderBottomWidth: getComputedCSS( blockElement, 'padding-bottom' ), + borderLeftWidth: getComputedCSS( blockElement, 'padding-left' ), + } ); + }, [ blockElement, padding ] ); - return () => { - if ( resizeObserver ) { - resizeObserver.disconnect(); - } - }; - }, [ blockElement ] ); - - const padding = attributes?.style?.spacing?.padding; const [ isActive, setIsActive ] = useState( false ); const valueRef = useRef( padding ); const timeoutRef = useRef(); diff --git a/packages/block-editor/src/hooks/padding.scss b/packages/block-editor/src/hooks/padding.scss index a14bccf68f0b0d..dbb99919881893 100644 --- a/packages/block-editor/src/hooks/padding.scss +++ b/packages/block-editor/src/hooks/padding.scss @@ -9,5 +9,4 @@ border-style: solid; pointer-events: none; box-sizing: border-box; - transition: border 0.3s; }