From beac04352ff7954f88417fedf1c336b4c82494d8 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 29 Sep 2020 15:35:39 -0700 Subject: [PATCH 1/3] use computed style to set default border-radius of buttons --- packages/block-library/src/button/edit.js | 33 ++++++++++++++--------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index c7832ec756420..74d319e2f90a9 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -41,22 +41,29 @@ import getColorAndStyleProps from './color-props'; const NEW_TAB_REL = 'noreferrer noopener'; const MIN_BORDER_RADIUS_VALUE = 0; const MAX_BORDER_RADIUS_VALUE = 50; -const INITIAL_BORDER_RADIUS_POSITION = 5; const EMPTY_ARRAY = []; -function BorderPanel( { borderRadius = '', setAttributes } ) { - const initialBorderRadius = borderRadius; - const setBorderRadius = useCallback( - ( newBorderRadius ) => { - if ( newBorderRadius === undefined ) - setAttributes( { - borderRadius: initialBorderRadius, - } ); - else setAttributes( { borderRadius: newBorderRadius } ); - }, - [ setAttributes ] +let computedBorderRadius; +document.addEventListener( 'readystatechange', () => { + // returns early until styles are loaded + if ( document.readyState !== 'complete' ) return; + const sample = document.createElement( 'a' ); + sample.className = 'wp-block-button__link'; + const wrapper = document.createElement( 'div' ); + wrapper.className = 'editor-styles-wrapper'; + wrapper.hidden = true; + wrapper.appendChild( sample ); + document.body.appendChild( wrapper ); + computedBorderRadius = parseFloat( + window.getComputedStyle( sample ).getPropertyValue( 'border-radius' ) ); + document.body.removeChild( wrapper ); +} ); + +function BorderPanel( { borderRadius = '', setAttributes } ) { + const setBorderRadius = ( value ) => + setAttributes( { borderRadius: value } ); return ( From 40e9213b12259b42fbd474fa5e5b9d15f3df9d0c Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Sat, 20 Feb 2021 22:49:57 -0800 Subject: [PATCH 2/3] Use more robust approach that accounts for block style variations --- packages/block-library/src/button/edit.js | 61 +++++++++++++++-------- 1 file changed, 39 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 74d319e2f90a9..93e98e8e734c7 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useCallback, useState } from '@wordpress/element'; +import { useCallback, useState, useEffect, useRef } from '@wordpress/element'; import { Button, ButtonGroup, @@ -44,34 +44,17 @@ const MAX_BORDER_RADIUS_VALUE = 50; const EMPTY_ARRAY = []; -let computedBorderRadius; -document.addEventListener( 'readystatechange', () => { - // returns early until styles are loaded - if ( document.readyState !== 'complete' ) return; - const sample = document.createElement( 'a' ); - sample.className = 'wp-block-button__link'; - const wrapper = document.createElement( 'div' ); - wrapper.className = 'editor-styles-wrapper'; - wrapper.hidden = true; - wrapper.appendChild( sample ); - document.body.appendChild( wrapper ); - computedBorderRadius = parseFloat( - window.getComputedStyle( sample ).getPropertyValue( 'border-radius' ) - ); - document.body.removeChild( wrapper ); -} ); - -function BorderPanel( { borderRadius = '', setAttributes } ) { +function BorderPanel( { radius = '', revertRadius, setAttributes } ) { const setBorderRadius = ( value ) => setAttributes( { borderRadius: value } ); return ( @@ -240,6 +223,36 @@ function ButtonEdit( props ) { const colorProps = getColorAndStyleProps( attributes, colors, true ); const blockProps = useBlockProps(); + const [ computedBorderRadius, setComputedBorderRadius ] = useState(); + const refBorderSettings = useRef( { + element: null, + variant: null, + } ); + // Updates computedBorderRadius if the style variant has changed + useEffect( () => { + const variant = /\bis-style-[^\s]+/.exec( blockProps.className )?.[ 0 ]; + const { current } = refBorderSettings; + if ( variant !== current.variant || ! computedBorderRadius ) { + const hasOwnValue = current.element.style.borderRadius !== ''; + let ownValue; + if ( hasOwnValue ) { + ownValue = current.element.style.borderRadius; + current.element.style.borderRadius = ''; + } + setComputedBorderRadius( + parseFloat( + current.element.ownerDocument.defaultView + .getComputedStyle( current.element ) + .getPropertyValue( 'border-radius' ) + ) + ); + if ( hasOwnValue ) { + current.element.style.borderRadius = ownValue; + } + current.variant = variant; + } + }, [ blockProps.className ] ); + return ( <> @@ -278,6 +291,9 @@ function ButtonEdit( props ) { onReplace={ onReplace } onMerge={ mergeBlocks } identifier="text" + ref={ ( ref ) => + ( refBorderSettings.current.element = ref ) + } /> Date: Sun, 21 Feb 2021 18:40:38 -0800 Subject: [PATCH 3/3] Avoid handling compound values since the UI will not accomadate them --- packages/block-library/src/button/edit.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 93e98e8e734c7..60d220ca64c9c 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -239,13 +239,13 @@ function ButtonEdit( props ) { ownValue = current.element.style.borderRadius; current.element.style.borderRadius = ''; } - setComputedBorderRadius( - parseFloat( - current.element.ownerDocument.defaultView - .getComputedStyle( current.element ) - .getPropertyValue( 'border-radius' ) - ) - ); + let value = current.element.ownerDocument.defaultView + .getComputedStyle( current.element ) + .getPropertyValue( 'border-radius' ); + // if it's a compound value (has a space) it's not suitable for the + // single input of the UI so an empty string is preferable + value = value.indexOf( ' ' ) !== -1 ? '' : parseFloat( value ); + setComputedBorderRadius( value ); if ( hasOwnValue ) { current.element.style.borderRadius = ownValue; }