From 41712fa1243d3bdb106f804b45f68493e5d2a220 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 9 Jul 2021 11:46:09 +1000 Subject: [PATCH 1/3] Add support for border units Also fixes misalignment of border width UnitControl select caused by incorrect line height on style component legend. --- lib/class-wp-theme-json-gutenberg.php | 1 + .../src/components/border-radius-control/index.js | 5 ++++- .../src/components/border-style-control/style.scss | 1 + packages/block-editor/src/hooks/border-width.js | 2 +- 4 files changed, 7 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 92bd630ad2fff..1f5b6fbc9e514 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -82,6 +82,7 @@ class WP_Theme_JSON_Gutenberg { 'customRadius' => null, 'customStyle' => null, 'customWidth' => null, + 'units' => null, ), 'color' => array( 'custom' => null, diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js index 7d5233d5cabe6..11b63a76346c1 100644 --- a/packages/block-editor/src/components/border-radius-control/index.js +++ b/packages/block-editor/src/components/border-radius-control/index.js @@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n'; import AllInputControl from './all-input-control'; import InputControls from './input-controls'; import LinkedButton from './linked-button'; +import useSetting from '../use-setting'; import { getAllValue, getAllUnit, @@ -49,7 +50,9 @@ export default function BorderRadiusControl( { onChange, values } ) { ! hasDefinedValues( values ) || ! hasMixedValues( values ) ); - const units = useCustomUnits( { availableUnits: [ 'px', 'em', 'rem' ] } ); + const units = useCustomUnits( { + availableUnits: useSetting( 'border.units' ) || [ 'px', 'em', 'rem' ], + } ); const unit = getAllUnit( values ); const unitConfig = units.find( ( item ) => item.value === unit ); const step = unitConfig?.step || 1; diff --git a/packages/block-editor/src/components/border-style-control/style.scss b/packages/block-editor/src/components/border-style-control/style.scss index 737103be1cd24..d8232bd40bb55 100644 --- a/packages/block-editor/src/components/border-style-control/style.scss +++ b/packages/block-editor/src/components/border-style-control/style.scss @@ -1,5 +1,6 @@ .components-border-style-control { legend { + line-height: 1.2; padding-bottom: $grid-unit-05; } diff --git a/packages/block-editor/src/hooks/border-width.js b/packages/block-editor/src/hooks/border-width.js index 88c4976925980..4ba8fe5c2aff4 100644 --- a/packages/block-editor/src/hooks/border-width.js +++ b/packages/block-editor/src/hooks/border-width.js @@ -45,7 +45,7 @@ export const BorderWidthEdit = ( props ) => { }; const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ], + availableUnits: useSetting( 'border.units' ) || [ 'px', 'em', 'rem' ], } ); return ( From 289a0644c7f6dcfe292827c89adfccb0b2d95f34 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 12 Jul 2021 11:08:58 +1000 Subject: [PATCH 2/3] Switch to spacing.units --- lib/class-wp-theme-json-gutenberg.php | 1 - .../block-editor/src/components/border-radius-control/index.js | 2 +- packages/block-editor/src/hooks/border-width.js | 2 +- packages/edit-site/src/components/sidebar/border-panel.js | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 1f5b6fbc9e514..92bd630ad2fff 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -82,7 +82,6 @@ class WP_Theme_JSON_Gutenberg { 'customRadius' => null, 'customStyle' => null, 'customWidth' => null, - 'units' => null, ), 'color' => array( 'custom' => null, diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js index 11b63a76346c1..a0688cfb6c87f 100644 --- a/packages/block-editor/src/components/border-radius-control/index.js +++ b/packages/block-editor/src/components/border-radius-control/index.js @@ -51,7 +51,7 @@ export default function BorderRadiusControl( { onChange, values } ) { ); const units = useCustomUnits( { - availableUnits: useSetting( 'border.units' ) || [ 'px', 'em', 'rem' ], + availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ], } ); const unit = getAllUnit( values ); const unitConfig = units.find( ( item ) => item.value === unit ); diff --git a/packages/block-editor/src/hooks/border-width.js b/packages/block-editor/src/hooks/border-width.js index 4ba8fe5c2aff4..88c4976925980 100644 --- a/packages/block-editor/src/hooks/border-width.js +++ b/packages/block-editor/src/hooks/border-width.js @@ -45,7 +45,7 @@ export const BorderWidthEdit = ( props ) => { }; const units = useCustomUnits( { - availableUnits: useSetting( 'border.units' ) || [ 'px', 'em', 'rem' ], + availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ], } ); return ( diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js index 85f36bc10253e..e7d5c801ff935 100644 --- a/packages/edit-site/src/components/sidebar/border-panel.js +++ b/packages/edit-site/src/components/sidebar/border-panel.js @@ -69,7 +69,7 @@ export default function BorderPanel( { setStyle, } ) { const units = useCustomUnits( { - availableUnits: [ 'px', 'em', 'rem' ], + availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ], } ); // Border width. From e16527c1fbaa571c3a83bfd934d76a0fc89b0ca1 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 13 Jul 2021 17:34:22 +1000 Subject: [PATCH 3/3] Handle empty units config --- .../block-editor/src/components/border-radius-control/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js index a0688cfb6c87f..02b05f2fb2e82 100644 --- a/packages/block-editor/src/components/border-radius-control/index.js +++ b/packages/block-editor/src/components/border-radius-control/index.js @@ -54,7 +54,7 @@ export default function BorderRadiusControl( { onChange, values } ) { availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ], } ); const unit = getAllUnit( values ); - const unitConfig = units.find( ( item ) => item.value === unit ); + const unitConfig = units && units.find( ( item ) => item.value === unit ); const step = unitConfig?.step || 1; const [ allValue ] = parseUnit( getAllValue( values ) );