From c3ae5dc04cc873a3002b768a7574d73a56d2c53a Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Tue, 3 Aug 2021 10:31:29 -0700 Subject: [PATCH 01/10] Add support for axial sides to padding block support --- packages/block-editor/src/hooks/padding.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index e481946e3defc0..fad533262fe4e8 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -96,6 +96,9 @@ export function PaddingEdit( props ) { ], } ); const sides = useCustomSides( blockName, 'padding' ); + const splitOnAxis = + sides && + ( sides.includes( 'horizontal' ) || sides.includes( 'vertical' ) ); if ( useIsPaddingDisabled( props ) ) { return null; @@ -139,6 +142,7 @@ export function PaddingEdit( props ) { sides={ sides } units={ units } allowReset={ false } + splitOnAxis={ splitOnAxis } /> ), From 421350d94cc676d2782a378d7c5588e4df933480 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Tue, 3 Aug 2021 10:31:59 -0700 Subject: [PATCH 02/10] Update button to support general and axial padding only --- packages/block-library/src/button/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index d954cc3c40e991..524b4b5334c452 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -68,7 +68,7 @@ "reusable": false, "spacing": { "__experimentalSkipSerialization": true, - "padding": true + "padding": [ "horizontal", "vertical" ] }, "__experimentalBorder": { "radius": true, From cb0127a85a2bdede42b23a692d89fa7061898efa Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Tue, 3 Aug 2021 10:54:21 -0700 Subject: [PATCH 03/10] Update docs --- docs/reference-guides/block-api/block-supports.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 1be449255d2da0..851cfd29b80043 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -585,4 +585,4 @@ supports: { } ``` -A spacing property may define an array of allowable sides that can be configured. When arbitrary sides are defined only UI controls for those sides are displayed. +A spacing property may define an array of allowable sides that can be configured. When arbitrary sides are defined only UI controls for those sides are displayed. Axial sides are defined with the `vertical` and `horizontal` terms, and display a single UI control for each axial pair (for example, `vertical` controls both the top and bottom sides). From b0b5d896d5956e9f20de378d76c1c33d09b0bbad Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Tue, 3 Aug 2021 10:55:13 -0700 Subject: [PATCH 04/10] Enable axial support for margin block support --- packages/block-editor/src/hooks/margin.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index 7e89049b40846b..28189bfa863bbf 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -96,6 +96,9 @@ export function MarginEdit( props ) { ], } ); const sides = useCustomSides( blockName, 'margin' ); + const splitOnAxis = + sides && + ( sides.includes( 'horizontal' ) || sides.includes( 'vertical' ) ); if ( useIsMarginDisabled( props ) ) { return null; @@ -139,6 +142,7 @@ export function MarginEdit( props ) { sides={ sides } units={ units } allowReset={ false } + splitOnAxis={ splitOnAxis } /> ), From 248cbfa8163f146f82196a51a360f20fd0456e40 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Wed, 4 Aug 2021 12:37:05 -0700 Subject: [PATCH 05/10] Warn against invalid sides configuration and disable support If a spacing support is configured with an invalid mix of axial and individual sides, log a warning and disable the feature. If only one feature is invalidly configured, this does not affect the other; eg if padding is configured incorrectly but margin is not, padding is disabled but margins will continue to work. --- packages/block-editor/src/hooks/dimensions.js | 30 +++++++++++++++++++ packages/block-editor/src/hooks/margin.js | 14 ++++++--- packages/block-editor/src/hooks/padding.js | 14 ++++++--- 3 files changed, 50 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 8351676640b177..44568963532f12 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -30,6 +30,8 @@ import { import { cleanEmptyObject } from './utils'; export const SPACING_SUPPORT_KEY = 'spacing'; +export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ]; +export const AXIAL_SIDES = [ 'vertical', 'horizontal' ]; /** * Inspector controls for dimensions support. @@ -152,3 +154,31 @@ export function useCustomSides( blockName, feature ) { return support[ feature ]; } + +/** + * Custom hook to determine whether the sides configured in the + * block support are valid. A spacing property cannot declare + * support for a mix of axial and individual sides. + * + * @param {string} blockName Block name. + * @param {string} feature The feature custom sides relate to e.g. padding or margins. + * + * @return {boolean} If the feature has a valid configuration of sides. + */ +export function useIsDimensionsSupportValid( blockName, feature ) { + const sides = useCustomSides( blockName, feature ); + + if ( + sides && + sides.some( ( side ) => ALL_SIDES.includes( side ) ) && + sides.some( ( side ) => AXIAL_SIDES.includes( side ) ) + ) { + // eslint-disable-next-line no-console + console.warn( + `The ${ feature } support for the "${ blockName }" block can not be configured to support both axial and arbitrary sides.` + ); + return false; + } + + return true; +} diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index 28189bfa863bbf..1dfe87c96ca7dc 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -13,7 +13,12 @@ import { * Internal dependencies */ import useSetting from '../components/use-setting'; -import { SPACING_SUPPORT_KEY, useCustomSides } from './dimensions'; +import { + AXIAL_SIDES, + SPACING_SUPPORT_KEY, + useCustomSides, + useIsDimensionsSupportValid, +} from './dimensions'; import { cleanEmptyObject } from './utils'; /** @@ -69,7 +74,9 @@ export function resetMargin( { attributes = {}, setAttributes } ) { */ export function useIsMarginDisabled( { name: blockName } = {} ) { const isDisabled = ! useSetting( 'spacing.customMargin' ); - return ! hasMarginSupport( blockName ) || isDisabled; + const isInvalid = ! useIsDimensionsSupportValid( blockName, 'margin' ); + + return ! hasMarginSupport( blockName ) || isDisabled || isInvalid; } /** @@ -97,8 +104,7 @@ export function MarginEdit( props ) { } ); const sides = useCustomSides( blockName, 'margin' ); const splitOnAxis = - sides && - ( sides.includes( 'horizontal' ) || sides.includes( 'vertical' ) ); + sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) ); if ( useIsMarginDisabled( props ) ) { return null; diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index fad533262fe4e8..717c69a401e60b 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -13,7 +13,12 @@ import { * Internal dependencies */ import useSetting from '../components/use-setting'; -import { SPACING_SUPPORT_KEY, useCustomSides } from './dimensions'; +import { + AXIAL_SIDES, + SPACING_SUPPORT_KEY, + useCustomSides, + useIsDimensionsSupportValid, +} from './dimensions'; import { cleanEmptyObject } from './utils'; /** @@ -69,7 +74,9 @@ export function resetPadding( { attributes = {}, setAttributes } ) { */ export function useIsPaddingDisabled( { name: blockName } = {} ) { const isDisabled = ! useSetting( 'spacing.customPadding' ); - return ! hasPaddingSupport( blockName ) || isDisabled; + const isInvalid = ! useIsDimensionsSupportValid( blockName, 'padding' ); + + return ! hasPaddingSupport( blockName ) || isDisabled || isInvalid; } /** @@ -97,8 +104,7 @@ export function PaddingEdit( props ) { } ); const sides = useCustomSides( blockName, 'padding' ); const splitOnAxis = - sides && - ( sides.includes( 'horizontal' ) || sides.includes( 'vertical' ) ); + sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) ); if ( useIsPaddingDisabled( props ) ) { return null; From 3541b6e44c257d4c7938c51090845267cd77c508 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Wed, 4 Aug 2021 12:48:24 -0700 Subject: [PATCH 06/10] Update docs --- docs/reference-guides/block-api/block-supports.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 851cfd29b80043..2e3e972e52037f 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -585,4 +585,4 @@ supports: { } ``` -A spacing property may define an array of allowable sides that can be configured. When arbitrary sides are defined only UI controls for those sides are displayed. Axial sides are defined with the `vertical` and `horizontal` terms, and display a single UI control for each axial pair (for example, `vertical` controls both the top and bottom sides). +A spacing property may define an array of allowable sides that can be configured. When arbitrary sides are defined only UI controls for those sides are displayed. Axial sides are defined with the `vertical` and `horizontal` terms, and display a single UI control for each axial pair (for example, `vertical` controls both the top and bottom sides). A spacing property may support arbitrary individual sides **or** axial sides, but not a mix of both. From bc5ff485e103e9d28f82b0f29169947a797bb0a6 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Wed, 4 Aug 2021 13:09:06 -0700 Subject: [PATCH 07/10] Clearer hook name --- packages/block-editor/src/hooks/dimensions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 44568963532f12..dd2493e3370d3a 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -148,7 +148,7 @@ export function useCustomSides( blockName, feature ) { const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); // Skip when setting is boolean as theme isn't setting arbitrary sides. - if ( typeof support[ feature ] === 'boolean' ) { + if ( typeof support?.[ feature ] === 'boolean' ) { return; } @@ -157,7 +157,7 @@ export function useCustomSides( blockName, feature ) { /** * Custom hook to determine whether the sides configured in the - * block support are valid. A spacing property cannot declare + * block support are valid. A dimension property cannot declare * support for a mix of axial and individual sides. * * @param {string} blockName Block name. From fb26fd65e9f48fe0803e4d9dce8d43cecf089c22 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Wed, 4 Aug 2021 13:51:13 -0700 Subject: [PATCH 08/10] Check that support is defined in useCustomSides Previously the hook was only used if the feature was known to be supported. Now that it is used in checking the spacing configuration, it is possible for `support` to be undefined here. --- packages/block-editor/src/hooks/dimensions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index dd2493e3370d3a..697955670b497e 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -148,7 +148,7 @@ export function useCustomSides( blockName, feature ) { const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); // Skip when setting is boolean as theme isn't setting arbitrary sides. - if ( typeof support?.[ feature ] === 'boolean' ) { + if ( ! support || typeof support[ feature ] === 'boolean' ) { return; } From 48724db457c0c1af7bfdba11200093e25c53049f Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Fri, 6 Aug 2021 13:11:56 -0700 Subject: [PATCH 09/10] Update global styles panel --- .../components/sidebar/dimensions-panel.js | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/dimensions-panel.js b/packages/edit-site/src/components/sidebar/dimensions-panel.js index 4f19f7e19cae6d..05b4aadd2d5bf0 100644 --- a/packages/edit-site/src/components/sidebar/dimensions-panel.js +++ b/packages/edit-site/src/components/sidebar/dimensions-panel.js @@ -15,6 +15,8 @@ import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block */ import { useSetting } from '../editor/utils'; +const AXIAL_SIDES = [ 'horizontal', 'vertical' ]; + export function useHasDimensionsPanel( context ) { const hasPadding = useHasPadding( context ); const hasMargin = useHasMargin( context ); @@ -42,7 +44,17 @@ function filterValuesBySides( values, sides ) { // Only include sides opted into within filtered values. const filteredValues = {}; - sides.forEach( ( side ) => ( filteredValues[ side ] = values[ side ] ) ); + sides.forEach( ( side ) => { + if ( side === 'vertical' ) { + filteredValues.top = values.top; + filteredValues.bottom = values.bottom; + } + if ( side === 'horizontal' ) { + filteredValues.left = values.left; + filteredValues.right = values.right; + } + filteredValues[ side ] = values[ side ]; + } ); return filteredValues; } @@ -78,6 +90,9 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) { const paddingValues = splitStyleValue( getStyle( name, 'padding' ) ); const paddingSides = useCustomSides( name, 'padding' ); + const isAxialPadding = + paddingSides && + paddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) ); const setPaddingValues = ( newPaddingValues ) => { const padding = filterValuesBySides( newPaddingValues, paddingSides ); @@ -89,6 +104,9 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) { const marginValues = splitStyleValue( getStyle( name, 'margin' ) ); const marginSides = useCustomSides( name, 'margin' ); + const isAxialMargin = + marginSides && + marginSides.some( ( side ) => AXIAL_SIDES.includes( side ) ); const setMarginValues = ( newMarginValues ) => { const margin = filterValuesBySides( newMarginValues, marginSides ); @@ -123,6 +141,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) { sides={ paddingSides } units={ units } allowReset={ false } + splitOnAxis={ isAxialPadding } /> ) } @@ -140,6 +159,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) { sides={ marginSides } units={ units } allowReset={ false } + splitOnAxis={ isAxialMargin } /> ) } From fddeb7e45f16d8fbaf56882b14d1b140f6943f87 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Wed, 11 Aug 2021 10:47:05 -0700 Subject: [PATCH 10/10] Make padding a default control for the button block --- packages/block-library/src/button/block.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 524b4b5334c452..569ecc47fd0e72 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -68,7 +68,10 @@ "reusable": false, "spacing": { "__experimentalSkipSerialization": true, - "padding": [ "horizontal", "vertical" ] + "padding": [ "horizontal", "vertical" ], + "__experimentalDefaultControls": { + "padding": true + } }, "__experimentalBorder": { "radius": true,