From 9c109ced57fe7fce78f42c6580aef21e86b1bfb2 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 8 Apr 2021 16:53:04 +1000 Subject: [PATCH 1/8] Update padding block support for configurable sides This includes the addition of spacing.js which is a slight refactor so the padding support is no longer an ad-hoc addition within style.js and matches the approach with colors, typography, borders etc. --- packages/block-editor/src/hooks/padding.js | 30 +++++-- packages/block-editor/src/hooks/spacing.js | 85 +++++++++++++++++++ packages/block-editor/src/hooks/style.js | 18 +--- packages/block-editor/src/hooks/test/style.js | 4 + .../src/components/sidebar/spacing-panel.js | 74 +++++++++++----- 5 files changed, 172 insertions(+), 39 deletions(-) create mode 100644 packages/block-editor/src/hooks/spacing.js diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index 113da0a5bfcce5..b75b7c2df8dfc0 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -9,11 +9,11 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; /** * Internal dependencies */ +import useEditorFeature from '../components/use-editor-feature'; +import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing'; import { cleanEmptyObject } from './utils'; import { useCustomUnits } from '../components/unit-control'; -export const SPACING_SUPPORT_KEY = 'spacing'; - const isWeb = Platform.OS === 'web'; const CSS_UNITS = [ { @@ -43,11 +43,28 @@ const CSS_UNITS = [ }, ]; -const hasPaddingSupport = ( blockName ) => { - const spacingSupport = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); - return spacingSupport && spacingSupport.padding !== false; +/** + * Determines if there is padding support. + * + * @param {string|Object} blockType Block name or Block Type object. + * @return {boolean} Whether there is support. + */ +const hasPaddingSupport = ( blockType ) => { + const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY ); + return !! ( true === support || support?.padding ); }; +/** + * Custom hook that checks if padding settings have been disabled. + * + * @param {string} name The name of the block. + * @return {boolean} Whether padding setting is disabled. + */ +export function useIsPaddingDisabled( { name: blockName } = {} ) { + const isDisabled = ! useEditorFeature( 'spacing.customPadding' ); + return ! hasPaddingSupport( blockName ) || isDisabled; +} + /** * Inspector control panel containing the padding related configuration * @@ -63,6 +80,7 @@ export function PaddingEdit( props ) { } = props; const units = useCustomUnits( CSS_UNITS ); + const sides = useCustomSides( blockName, 'padding' ); if ( ! hasPaddingSupport( blockName ) ) { return null; @@ -72,6 +90,7 @@ export function PaddingEdit( props ) { const newStyle = { ...style, spacing: { + ...style?.spacing, padding: next, }, }; @@ -102,6 +121,7 @@ export function PaddingEdit( props ) { onChange={ onChange } onChangeShowVisualizer={ onChangeShowVisualizer } label={ __( 'Padding' ) } + sides={ sides } units={ units } /> diff --git a/packages/block-editor/src/hooks/spacing.js b/packages/block-editor/src/hooks/spacing.js new file mode 100644 index 00000000000000..da7cc6e921ce1d --- /dev/null +++ b/packages/block-editor/src/hooks/spacing.js @@ -0,0 +1,85 @@ +/** + * WordPress dependencies + */ +import { getBlockSupport } from '@wordpress/blocks'; +import { Platform } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { PaddingEdit, useIsPaddingDisabled } from './padding'; +import SpacingPanelControl from '../components/spacing-panel-control'; + +export const SPACING_SUPPORT_KEY = 'spacing'; + +/** + * Inspector controls for spacing support. + * + * @param {Object} props Block props. + * @return {WPElement} Inspector controls for spacing support features. + */ +export function SpacingPanel( props ) { + const isDisabled = useIsSpacingDisabled( props ); + const isSupported = hasSpacingSupport( props.name ); + + if ( isDisabled || ! isSupported ) { + return null; + } + + return ( + + + + ); +} + +/** + * Determine whether there is block support for padding. + * + * @param {string} blockName Block name. + * @return {boolean} Whether there is support. + */ +export function hasSpacingSupport( blockName ) { + if ( Platform.OS !== 'web' ) { + return false; + } + + const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); + + return !! ( true === support || support?.padding ); +} + +/** + * Determines whether spacing support has been disabled. + * + * @param {Object} props Block properties. + * @return {boolean} If spacing support is completely disabled. + */ +const useIsSpacingDisabled = ( props = {} ) => { + const paddingDisabled = useIsPaddingDisabled( props ); + + return paddingDisabled; +}; + +/** + * Custom hook to retrieve which padding/margin is supported + * e.g. top, right, bottom or left. + * + * Sides are opted into by default. It is only if a specific side is set to + * false that it is omitted. + * + * @param {string} blockName Block name. + * @param {string} feature The feature custom sides relate to e.g. padding or margins. + * @return {Object} Sides supporting custom margin. + */ +export function useCustomSides( blockName, feature ) { + const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); + + // Return empty config when setting is boolean as theme isn't setting + // arbitrary sides. + if ( typeof support[ feature ] === 'boolean' ) { + return {}; + } + + return support[ feature ]; +} diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index b1c7239b2d791d..8bbd8dba1e5fcd 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -20,8 +20,7 @@ import { createHigherOrderComponent } from '@wordpress/compose'; import { BORDER_SUPPORT_KEY, BorderPanel } from './border'; import { COLOR_SUPPORT_KEY, ColorEdit } from './color'; import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography'; -import { SPACING_SUPPORT_KEY, PaddingEdit } from './padding'; -import SpacingPanelControl from '../components/spacing-panel-control'; +import { SPACING_SUPPORT_KEY, SpacingPanel } from './spacing'; const styleSupportKeys = [ ...TYPOGRAPHY_SUPPORT_KEYS, @@ -140,7 +139,7 @@ export function addSaveProps( props, blockType, attributes ) { } /** - * Filters registered block settings to extand the block edit wrapper + * Filters registered block settings to extend the block edit wrapper * to apply the desired styles and classnames properly. * * @param {Object} settings Original block settings @@ -173,23 +172,12 @@ export function addEditProps( settings ) { */ export const withBlockControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const { name: blockName } = props; - - const hasSpacingSupport = hasBlockSupport( - blockName, - SPACING_SUPPORT_KEY - ); - return [ , , , , - hasSpacingSupport && ( - - - - ), + , ]; }, 'withToolbarControls' diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js index 0cd3c70d9f2b64..b6bd98eb56da6b 100644 --- a/packages/block-editor/src/hooks/test/style.js +++ b/packages/block-editor/src/hooks/test/style.js @@ -23,6 +23,9 @@ describe( 'getInlineStyles', () => { style: 'dotted', color: '#21759b', }, + spacing: { + padding: { top: '10px' }, + }, } ) ).toEqual( { backgroundColor: 'black', @@ -33,6 +36,7 @@ describe( 'getInlineStyles', () => { color: 'red', lineHeight: 1.5, fontSize: 10, + paddingTop: '10px', } ); } ); } ); diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index 0afcf1344f8979..7cdf9723bd7b16 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -7,6 +7,7 @@ import { __experimentalBoxControl as BoxControl, PanelBody, } from '@wordpress/components'; +import { getBlockSupport } from '@wordpress/blocks'; /** * Internal dependencies @@ -42,7 +43,13 @@ const CSS_UNITS = [ }, ]; -export function useHasSpacingPanel( { supports, name } ) { +export function useHasSpacingPanel( context ) { + const hasPadding = useHasPadding( context ); + + return hasPadding; +} + +export function useHasPadding( { name, supports } ) { return ( useEditorFeature( 'spacing.customPadding', name ) && supports.includes( 'padding' ) @@ -65,29 +72,58 @@ function useCustomUnits( { units, contextName } ) { return usedUnits.length === 0 ? false : usedUnits; } -export default function SpacingPanel( { - context: { name }, - getStyle, - setStyle, -} ) { +function useCustomSides( blockName, feature ) { + const support = getBlockSupport( blockName, 'spacing' ); + + // Return empty config when setting is boolean as theme isn't setting + // arbitrary sides. + if ( typeof support[ feature ] === 'boolean' ) { + return {}; + } + + return support[ feature ]; +} + +function filterValuesBySides( values, sides ) { + if ( Object.entries( sides ).length === 0 ) { + // If no custom side configuration all sides are opted into by default. + return values; + } + + // Only include sides opted into within filtered values. + return Object.keys( sides ) + .filter( ( side ) => sides[ side ] ) + .reduce( + ( filtered, side ) => ( { ...filtered, [ side ]: values[ side ] } ), + {} + ); +} + +export default function SpacingPanel( { context, getStyle, setStyle } ) { + const { name } = context; + const showPaddingControl = useHasPadding( context ); const units = useCustomUnits( { contextName: name, units: CSS_UNITS } ); + const paddingValues = getStyle( name, 'padding' ); - const setPaddingValues = ( { top, right, bottom, left } ) => { - setStyle( name, 'padding', { - top: top || paddingValues?.top, - right: right || paddingValues?.right, - bottom: bottom || paddingValues?.bottom, - left: left || paddingValues?.left, - } ); + const paddingSides = useCustomSides( name, 'padding' ); + + const setPaddingValues = ( newPaddingValues ) => { + const padding = filterValuesBySides( newPaddingValues, paddingSides ); + setStyle( name, 'padding', padding ); }; + return ( - + { showPaddingControl && ( + + ) } ); } From 589368efce3e83f882e0e781e63f8808d6bd7a50 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 9 Apr 2021 13:22:48 +1000 Subject: [PATCH 2/8] Update padding support to use array sides config --- packages/block-editor/src/hooks/spacing.js | 5 ++-- .../src/components/sidebar/spacing-panel.js | 30 ++++++++++++------- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/hooks/spacing.js b/packages/block-editor/src/hooks/spacing.js index da7cc6e921ce1d..1e1295cb7fafd1 100644 --- a/packages/block-editor/src/hooks/spacing.js +++ b/packages/block-editor/src/hooks/spacing.js @@ -75,10 +75,9 @@ const useIsSpacingDisabled = ( props = {} ) => { export function useCustomSides( blockName, feature ) { const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); - // Return empty config when setting is boolean as theme isn't setting - // arbitrary sides. + // Skip when setting is boolean as theme isn't setting arbitrary sides. if ( typeof support[ feature ] === 'boolean' ) { - return {}; + return; } return support[ feature ]; diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index 7cdf9723bd7b16..3d1b95f5768b0b 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -8,11 +8,13 @@ import { PanelBody, } from '@wordpress/components'; import { getBlockSupport } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import { useEditorFeature } from '../editor/utils'; +import { store as editSiteStore } from '../../store'; const isWeb = Platform.OS === 'web'; const CSS_UNITS = [ @@ -75,28 +77,25 @@ function useCustomUnits( { units, contextName } ) { function useCustomSides( blockName, feature ) { const support = getBlockSupport( blockName, 'spacing' ); - // Return empty config when setting is boolean as theme isn't setting - // arbitrary sides. + // Skip when setting is boolean as theme isn't setting arbitrary sides. if ( typeof support[ feature ] === 'boolean' ) { - return {}; + return; } return support[ feature ]; } function filterValuesBySides( values, sides ) { - if ( Object.entries( sides ).length === 0 ) { + if ( ! sides ) { // If no custom side configuration all sides are opted into by default. return values; } // Only include sides opted into within filtered values. - return Object.keys( sides ) - .filter( ( side ) => sides[ side ] ) - .reduce( - ( filtered, side ) => ( { ...filtered, [ side ]: values[ side ] } ), - {} - ); + const filteredValues = {}; + sides.forEach( ( side ) => ( filteredValues[ side ] = values[ side ] ) ); + + return filteredValues; } export default function SpacingPanel( { context, getStyle, setStyle } ) { @@ -105,6 +104,15 @@ export default function SpacingPanel( { context, getStyle, setStyle } ) { const units = useCustomUnits( { contextName: name, units: CSS_UNITS } ); const paddingValues = getStyle( name, 'padding' ); + const themePaddingValues = useSelect( + ( select ) => { + const baseStyles = select( editSiteStore ).getSettings() + .__experimentalGlobalStylesBaseStyles; + return baseStyles?.styles?.[ name ]?.spacing?.padding; + }, + [ name ] + ); + const paddingSides = useCustomSides( name, 'padding' ); const setPaddingValues = ( newPaddingValues ) => { @@ -121,7 +129,7 @@ export default function SpacingPanel( { context, getStyle, setStyle } ) { label={ __( 'Padding' ) } sides={ paddingSides } units={ units } - resetToInitialValues + resetValues={ themePaddingValues } /> ) } From e962dcddd1cbcee04e2aa1377d1ac1159c0dd61c Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 9 Apr 2021 16:37:47 +1000 Subject: [PATCH 3/8] Make selector for theme spacing values more generic --- .../src/components/sidebar/spacing-panel.js | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index 3d1b95f5768b0b..68c0f3fa075a36 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -98,21 +98,24 @@ function filterValuesBySides( values, sides ) { return filteredValues; } -export default function SpacingPanel( { context, getStyle, setStyle } ) { - const { name } = context; - const showPaddingControl = useHasPadding( context ); - const units = useCustomUnits( { contextName: name, units: CSS_UNITS } ); - - const paddingValues = getStyle( name, 'padding' ); - const themePaddingValues = useSelect( +function useThemeValues( name, feature ) { + return useSelect( ( select ) => { const baseStyles = select( editSiteStore ).getSettings() .__experimentalGlobalStylesBaseStyles; - return baseStyles?.styles?.[ name ]?.spacing?.padding; + return baseStyles?.styles?.[ name ]?.spacing?.[ feature ]; }, - [ name ] + [ name, feature ] ); +} +export default function SpacingPanel( { context, getStyle, setStyle } ) { + const { name } = context; + const showPaddingControl = useHasPadding( context ); + const units = useCustomUnits( { contextName: name, units: CSS_UNITS } ); + + const paddingValues = getStyle( name, 'padding' ); + const themePaddingValues = useThemeValues( name, 'padding' ); const paddingSides = useCustomSides( name, 'padding' ); const setPaddingValues = ( newPaddingValues ) => { From 5a2bf1fcdcae8ca3f5782e29a9d89d6ad307f06a Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 19 Apr 2021 19:06:03 +1000 Subject: [PATCH 4/8] Use hasPaddingSupport from padding hook --- packages/block-editor/src/hooks/padding.js | 4 ++-- packages/block-editor/src/hooks/spacing.js | 10 ++++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index b75b7c2df8dfc0..e366ed4de53dc9 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -49,10 +49,10 @@ const CSS_UNITS = [ * @param {string|Object} blockType Block name or Block Type object. * @return {boolean} Whether there is support. */ -const hasPaddingSupport = ( blockType ) => { +export function hasPaddingSupport( blockType ) { const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY ); return !! ( true === support || support?.padding ); -}; +} /** * Custom hook that checks if padding settings have been disabled. diff --git a/packages/block-editor/src/hooks/spacing.js b/packages/block-editor/src/hooks/spacing.js index 1e1295cb7fafd1..c90b756eb87ea9 100644 --- a/packages/block-editor/src/hooks/spacing.js +++ b/packages/block-editor/src/hooks/spacing.js @@ -7,7 +7,11 @@ import { Platform } from '@wordpress/element'; /** * Internal dependencies */ -import { PaddingEdit, useIsPaddingDisabled } from './padding'; +import { + PaddingEdit, + hasPaddingSupport, + useIsPaddingDisabled, +} from './padding'; import SpacingPanelControl from '../components/spacing-panel-control'; export const SPACING_SUPPORT_KEY = 'spacing'; @@ -44,9 +48,7 @@ export function hasSpacingSupport( blockName ) { return false; } - const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); - - return !! ( true === support || support?.padding ); + return hasPaddingSupport( blockName ); } /** From d3588eaf7e15ae597a65c5965da39da1dd7b54bd Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 22 Apr 2021 15:37:32 +1000 Subject: [PATCH 5/8] Update block supports api readme --- .../reference-guides/block-api/block-supports.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 8409d8a2d37933..06b635b426c8e6 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -329,16 +329,28 @@ supports: { - Type: `Object` - Default value: null - Subproperties: - - `padding`: type `boolean`, default value `false` + - `padding`: type `boolean` or `array`, default value `false` This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values, if [the theme declares support](/docs/how-to-guides/themes/theme-support.md##cover-block-padding). ```js supports: { - padding: true, // Enable padding color UI control. + spacing: { + padding: true, // Enable padding UI control. + } } ``` When the block declares support for a specific spacing property, the attributes definition is extended to include the `style` attribute. - `style`: attribute of `object` type with no default assigned. This is added when `padding` support is declared. It stores the custom values set by the user. + +```js +supports: { + spacing: { + padding: [ 'top', 'bottom' ], // Enable padding for arbitrary 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. \ No newline at end of file From 2567acfb8f5519ff4bb6d8322d03bb0203bb1ad3 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 23 Apr 2021 17:13:38 +1000 Subject: [PATCH 6/8] Unset padding values instead of resetting to theme values --- .../src/components/sidebar/spacing-panel.js | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index 68c0f3fa075a36..9afc31e0d9fa25 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -8,13 +8,11 @@ import { PanelBody, } from '@wordpress/components'; import { getBlockSupport } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import { useEditorFeature } from '../editor/utils'; -import { store as editSiteStore } from '../../store'; const isWeb = Platform.OS === 'web'; const CSS_UNITS = [ @@ -98,24 +96,12 @@ function filterValuesBySides( values, sides ) { return filteredValues; } -function useThemeValues( name, feature ) { - return useSelect( - ( select ) => { - const baseStyles = select( editSiteStore ).getSettings() - .__experimentalGlobalStylesBaseStyles; - return baseStyles?.styles?.[ name ]?.spacing?.[ feature ]; - }, - [ name, feature ] - ); -} - export default function SpacingPanel( { context, getStyle, setStyle } ) { const { name } = context; const showPaddingControl = useHasPadding( context ); const units = useCustomUnits( { contextName: name, units: CSS_UNITS } ); const paddingValues = getStyle( name, 'padding' ); - const themePaddingValues = useThemeValues( name, 'padding' ); const paddingSides = useCustomSides( name, 'padding' ); const setPaddingValues = ( newPaddingValues ) => { @@ -132,7 +118,6 @@ export default function SpacingPanel( { context, getStyle, setStyle } ) { label={ __( 'Padding' ) } sides={ paddingSides } units={ units } - resetValues={ themePaddingValues } /> ) } From 5d1b856b72a59558b67a1761e4fda75cad3ae4cb Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 29 Apr 2021 15:22:03 +1000 Subject: [PATCH 7/8] Reuse useCustomSides from block editor hooks --- packages/block-editor/src/hooks/index.js | 1 + packages/block-editor/src/index.js | 1 + .../src/components/sidebar/spacing-panel.js | 13 +------------ 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 88348034c62fc7..cba612627441ed 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -11,4 +11,5 @@ import './font-size'; import './border-color'; import './layout'; +export { useCustomSides } from './spacing'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index a5604c367c0252..de553871bcba10 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -10,6 +10,7 @@ import './hooks'; export { getColorClassesAndStyles as __experimentalGetColorClassesAndStyles, useColorProps as __experimentalUseColorProps, + useCustomSides as __experimentalUseCustomSides, } from './hooks'; export * from './components'; export * from './utils'; diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index 9afc31e0d9fa25..f8c4e2053b5dd5 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -7,7 +7,7 @@ import { __experimentalBoxControl as BoxControl, PanelBody, } from '@wordpress/components'; -import { getBlockSupport } from '@wordpress/blocks'; +import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor'; /** * Internal dependencies @@ -72,17 +72,6 @@ function useCustomUnits( { units, contextName } ) { return usedUnits.length === 0 ? false : usedUnits; } -function useCustomSides( blockName, feature ) { - const support = getBlockSupport( blockName, 'spacing' ); - - // Skip when setting is boolean as theme isn't setting arbitrary sides. - if ( typeof support[ feature ] === 'boolean' ) { - return; - } - - return support[ feature ]; -} - function filterValuesBySides( values, sides ) { if ( ! sides ) { // If no custom side configuration all sides are opted into by default. From a3497f9b3104bc8f5a7ad7679e3974db99ff94b5 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 29 Apr 2021 15:57:50 +1000 Subject: [PATCH 8/8] Inline SpacingControlPanel subcomponents directly --- .../components/spacing-panel-control/index.js | 23 ------------------- packages/block-editor/src/hooks/spacing.js | 14 +++++++---- 2 files changed, 9 insertions(+), 28 deletions(-) delete mode 100644 packages/block-editor/src/components/spacing-panel-control/index.js diff --git a/packages/block-editor/src/components/spacing-panel-control/index.js b/packages/block-editor/src/components/spacing-panel-control/index.js deleted file mode 100644 index aafdbb94151d27..00000000000000 --- a/packages/block-editor/src/components/spacing-panel-control/index.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { PanelBody } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import InspectorControls from '../inspector-controls'; -import useEditorFeature from '../use-editor-feature'; - -export default function SpacingPanelControl( { children, ...props } ) { - const isSpacingEnabled = useEditorFeature( 'spacing.customPadding' ); - - if ( ! isSpacingEnabled ) return null; - - return ( - - { children } - - ); -} diff --git a/packages/block-editor/src/hooks/spacing.js b/packages/block-editor/src/hooks/spacing.js index c90b756eb87ea9..1566f3015f39c0 100644 --- a/packages/block-editor/src/hooks/spacing.js +++ b/packages/block-editor/src/hooks/spacing.js @@ -1,18 +1,20 @@ /** * WordPress dependencies */ -import { getBlockSupport } from '@wordpress/blocks'; +import { PanelBody } from '@wordpress/components'; import { Platform } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { getBlockSupport } from '@wordpress/blocks'; /** * Internal dependencies */ +import InspectorControls from '../components/inspector-controls'; import { PaddingEdit, hasPaddingSupport, useIsPaddingDisabled, } from './padding'; -import SpacingPanelControl from '../components/spacing-panel-control'; export const SPACING_SUPPORT_KEY = 'spacing'; @@ -31,9 +33,11 @@ export function SpacingPanel( props ) { } return ( - - - + + + + + ); }