From d467dce5321dc2aec8249fac43e17bed04cf101b Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 26 Feb 2021 14:04:20 +1000 Subject: [PATCH 1/7] Add separator top/bottom margins without resizable box --- .../block-library/src/separator/block.json | 3 + packages/block-library/src/separator/edit.js | 41 +++++-- .../src/separator/edit.native.js | 48 ++++++++ .../block-library/src/separator/editor.scss | 10 +- packages/block-library/src/separator/save.js | 2 + .../src/separator/separator-settings.js | 97 +++++++++++++--- .../separator/separator-settings.native.js | 107 +++++++++++++++++- .../block-library/src/separator/shared.js | 72 ++++++++++++ .../src/horizontal-rule/index.native.js | 29 +++-- 9 files changed, 373 insertions(+), 36 deletions(-) create mode 100644 packages/block-library/src/separator/edit.native.js create mode 100644 packages/block-library/src/separator/shared.js diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json index 2983a93a86190..ef486f2217005 100644 --- a/packages/block-library/src/separator/block.json +++ b/packages/block-library/src/separator/block.json @@ -8,6 +8,9 @@ }, "customColor": { "type": "string" + }, + "style": { + "type": "object" } }, "supports": { diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index f611abde42a62..4af5efcb11e55 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -7,28 +7,49 @@ import classnames from 'classnames'; * WordPress dependencies */ import { HorizontalRule } from '@wordpress/components'; +import { View } from '@wordpress/primitives'; import { withColors, useBlockProps } from '@wordpress/block-editor'; + /** * Internal dependencies */ import SeparatorSettings from './separator-settings'; +import { MARGIN_CONSTRAINTS, parseUnit } from './shared'; + +function SeparatorEdit( props ) { + const { + color, + attributes: { style }, + } = props; + + const { top, bottom } = style?.spacing?.margin || {}; + const marginUnit = parseUnit( top || bottom ); + const blockProps = useBlockProps(); -function SeparatorEdit( { color, setColor, className } ) { return ( <> - + - + marginTop: top || MARGIN_CONSTRAINTS[ marginUnit ].min, + marginBottom: + bottom || MARGIN_CONSTRAINTS[ marginUnit ].min, + } } + /> + + ); } diff --git a/packages/block-library/src/separator/edit.native.js b/packages/block-library/src/separator/edit.native.js new file mode 100644 index 0000000000000..e42d73b663170 --- /dev/null +++ b/packages/block-library/src/separator/edit.native.js @@ -0,0 +1,48 @@ +/** + * WordPress dependencies + */ +import { HorizontalRule, useConvertUnitToMobile } from '@wordpress/components'; +import { withColors, useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import SeparatorSettings from './separator-settings'; +import { MARGIN_CONSTRAINTS, parseUnit } from './shared'; + +function SeparatorEdit( props ) { + const { + color, + attributes: { style }, + } = props; + + const { top, bottom } = style?.spacing?.margin || {}; + const marginUnit = parseUnit( top || bottom ); + + const convertedMarginTop = useConvertUnitToMobile( + parseFloat( top || 0 ) || MARGIN_CONSTRAINTS[ marginUnit ].min, + marginUnit + ); + + const convertedMarginBottom = useConvertUnitToMobile( + parseFloat( bottom || 0 ) || MARGIN_CONSTRAINTS[ marginUnit ].min, + marginUnit + ); + + return ( + <> + + + + ); +} + +export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit ); diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss index 24e940684279e..f8e155a43e6e8 100644 --- a/packages/block-library/src/separator/editor.scss +++ b/packages/block-library/src/separator/editor.scss @@ -1,5 +1,7 @@ -.block-editor-block-list__block[data-type="core/separator"] { - // Prevent margin collapsing so the area to select the separator is bigger. - padding-top: 0.1px; - padding-bottom: 0.1px; +.wp-block-separator-wrapper { + display: flex; + + .wp-block-separator { + width: 100%; + } } diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js index 67d489bd611c3..f913385b0b9e9 100644 --- a/packages/block-library/src/separator/save.js +++ b/packages/block-library/src/separator/save.js @@ -27,6 +27,8 @@ export default function separatorSave( { attributes } ) { const style = { backgroundColor: backgroundClass ? undefined : customColor, color: colorClass ? undefined : customColor, + marginBottom: attributes.style?.spacing?.margin?.bottom, + marginTop: attributes.style?.spacing?.margin?.top, }; return
; diff --git a/packages/block-library/src/separator/separator-settings.js b/packages/block-library/src/separator/separator-settings.js index 320cfc862b93b..a09374e84cda7 100644 --- a/packages/block-library/src/separator/separator-settings.js +++ b/packages/block-library/src/separator/separator-settings.js @@ -3,20 +3,91 @@ */ import { __ } from '@wordpress/i18n'; import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor'; +import { + PanelBody, + __experimentalUnitControl as UnitControl, +} from '@wordpress/components'; -const SeparatorSettings = ( { color, setColor } ) => ( - - { + const { style } = attributes; + const { top, bottom } = style?.spacing?.margin || {}; + + const topUnit = parseUnit( top ); + const bottomUnit = parseUnit( bottom ); + + const updateMargins = ( margins ) => { + setAttributes( { + style: { + ...style, + spacing: { + ...style?.spacing, + margin: margins, }, - ] } - > - -); + }, + } ); + }; + + const createHandleMarginChange = ( side ) => ( value ) => { + updateMargins( { + ...style?.spacing?.margin, + [ side ]: value, + } ); + }; + + const onUnitChange = ( unit ) => { + updateMargins( { + top: MARGIN_CONSTRAINTS[ unit ].default, + bottom: MARGIN_CONSTRAINTS[ unit ].default, + } ); + }; + + return ( + + + + + + + + ); +}; export default SeparatorSettings; diff --git a/packages/block-library/src/separator/separator-settings.native.js b/packages/block-library/src/separator/separator-settings.native.js index d2bdd8ef6443a..b85e4ad4b6a49 100644 --- a/packages/block-library/src/separator/separator-settings.native.js +++ b/packages/block-library/src/separator/separator-settings.native.js @@ -1,3 +1,106 @@ -// Mobile has no separator settings at this time, so render nothing -const SeparatorSettings = () => null; +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor'; +import { PanelBody, UnitControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { CSS_UNITS, MARGIN_CONSTRAINTS, parseUnit } from './shared'; + +const SeparatorSettings = ( { + color, + setColor, + attributes, + setAttributes, +} ) => { + const { style } = attributes; + const { top, bottom } = style?.spacing?.margin || {}; + + const topUnit = parseUnit( top ); + const bottomUnit = parseUnit( bottom ); + const topValue = top + ? parseFloat( top ) + : MARGIN_CONSTRAINTS[ topUnit ].min; + const bottomValue = bottom + ? parseFloat( bottom ) + : MARGIN_CONSTRAINTS[ bottomUnit ].min; + + const updateMargins = ( margins ) => { + setAttributes( { + style: { + ...style, + spacing: { + ...style?.spacing, + margin: margins, + }, + }, + } ); + }; + + const createHandleMarginChange = ( side, unit ) => ( value ) => { + updateMargins( { + ...style?.spacing?.margin, + [ side ]: `${ value }${ unit }`, + } ); + }; + + const onUnitChange = ( unit ) => { + // When setting the default on native the UnitControl input doesn't + // update with the new value. Instead of using MARGIN_CONSTRAINTS[ unit ].default + // The current value is going to be applied in the settings so the UI + // is at least consistent. + updateMargins( { + top: `${ topValue }${ unit }`, + bottom: `${ bottomValue }${ unit }`, + } ); + }; + + return ( + + + + + + + + ); +}; + export default SeparatorSettings; diff --git a/packages/block-library/src/separator/shared.js b/packages/block-library/src/separator/shared.js new file mode 100644 index 0000000000000..7f3ae05fdf090 --- /dev/null +++ b/packages/block-library/src/separator/shared.js @@ -0,0 +1,72 @@ +/** + * WordPress dependencies + */ +import { Platform } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +// Separator margin related constants. +export const MIN_PX_MARGIN = 15; +export const MIN_EM_MARGIN = 0.75; +export const MIN_REM_MARGIN = 0.7; +export const MAX_PX_MARGIN = 300; +export const MAX_EM_MARGIN = 20; +export const MAX_REM_MARGIN = 20; + +const isWeb = Platform.OS === 'web'; + +/** + * Available CSS units for specifying separator block margins. + */ +export const CSS_UNITS = [ + { value: 'px', label: isWeb ? 'px' : __( 'Pixels (px)' ), default: 0 }, + { + value: 'em', + label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ), + default: 0, + }, + { + value: 'rem', + label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ), + default: 0, + }, +]; + +/** + * Separator margin constraints for available CSS units. + */ +export const MARGIN_CONSTRAINTS = { + px: { + min: MIN_PX_MARGIN, + max: MAX_PX_MARGIN, + default: `${ MIN_PX_MARGIN }px`, + }, + em: { + min: MIN_EM_MARGIN, + max: MAX_EM_MARGIN, + default: '1em', + }, + rem: { + min: MIN_REM_MARGIN, + max: MAX_REM_MARGIN, + default: '1rem', + }, +}; + +/** + * Extracts CSS unit from string. + * + * @param { string } cssValue CSS string containing unit and value. + * @return { string } CSS unit. Defaults to 'px'. + */ +export const parseUnit = ( cssValue ) => { + if ( ! cssValue ) { + return 'px'; + } + + const matches = cssValue.trim().match( /[\d.\-+]*\s*([a-zA-Z]*)$/ ); + if ( ! matches ) { + return 'px'; + } + const [ , unit ] = matches; + return ( unit || 'px' ).toLowerCase(); +}; diff --git a/packages/primitives/src/horizontal-rule/index.native.js b/packages/primitives/src/horizontal-rule/index.native.js index 853b57e76d0c1..3d338ad7d4ba7 100644 --- a/packages/primitives/src/horizontal-rule/index.native.js +++ b/packages/primitives/src/horizontal-rule/index.native.js @@ -2,6 +2,7 @@ * External dependencies */ import Hr from 'react-native-hr'; +import { View } from 'react-native'; /** * WordPress dependencies @@ -13,16 +14,30 @@ import { withPreferredColorScheme } from '@wordpress/compose'; */ import styles from './styles.scss'; -const HR = ( { getStylesFromColorScheme, ...props } ) => { +const HR = ( { getStylesFromColorScheme, style, ...props } ) => { const lineStyle = getStylesFromColorScheme( styles.line, styles.lineDark ); + const customBackground = style?.backgroundColor + ? { backgroundColor: style.backgroundColor } + : {}; return ( -
+ +
+ ); }; From 9522d02026008d0e03596eaa0c9927bda835c886 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 1 Mar 2021 23:28:35 +1000 Subject: [PATCH 2/7] Fix issue setting default value when switching units --- .../separator/separator-settings.native.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/separator/separator-settings.native.js b/packages/block-library/src/separator/separator-settings.native.js index b85e4ad4b6a49..0f7295e486802 100644 --- a/packages/block-library/src/separator/separator-settings.native.js +++ b/packages/block-library/src/separator/separator-settings.native.js @@ -48,13 +48,9 @@ const SeparatorSettings = ( { }; const onUnitChange = ( unit ) => { - // When setting the default on native the UnitControl input doesn't - // update with the new value. Instead of using MARGIN_CONSTRAINTS[ unit ].default - // The current value is going to be applied in the settings so the UI - // is at least consistent. updateMargins( { - top: `${ topValue }${ unit }`, - bottom: `${ bottomValue }${ unit }`, + top: MARGIN_CONSTRAINTS[ unit ].default, + bottom: MARGIN_CONSTRAINTS[ unit ].default, } ); }; @@ -73,21 +69,25 @@ const SeparatorSettings = ( { From 45fb2faac71a7f114fa8ffbbf56b274e0223a15e Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 19 Mar 2021 17:35:26 +1000 Subject: [PATCH 3/7] Draft changes to BoxControl to allow opting out of sides --- .../src/separator/separator-settings.js | 59 +++------ .../src/box-control/all-input-control.js | 11 +- packages/components/src/box-control/index.js | 2 + .../src/box-control/input-controls.js | 116 ++++++++++++------ 4 files changed, 102 insertions(+), 86 deletions(-) diff --git a/packages/block-library/src/separator/separator-settings.js b/packages/block-library/src/separator/separator-settings.js index a09374e84cda7..6e4212fd0b0f2 100644 --- a/packages/block-library/src/separator/separator-settings.js +++ b/packages/block-library/src/separator/separator-settings.js @@ -5,52 +5,32 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor'; import { PanelBody, - __experimentalUnitControl as UnitControl, + __experimentalBoxControl as BoxControl, } from '@wordpress/components'; /** * Internal dependencies */ -import { CSS_UNITS, MARGIN_CONSTRAINTS, parseUnit } from './shared'; +import { CSS_UNITS } from './shared'; const SeparatorSettings = ( { color, setColor, - attributes, + attributes: { style }, setAttributes, } ) => { - const { style } = attributes; - const { top, bottom } = style?.spacing?.margin || {}; - - const topUnit = parseUnit( top ); - const bottomUnit = parseUnit( bottom ); - - const updateMargins = ( margins ) => { + const updateMargins = ( { top, bottom } ) => { setAttributes( { style: { ...style, spacing: { ...style?.spacing, - margin: margins, + margin: { top, bottom }, }, }, } ); }; - const createHandleMarginChange = ( side ) => ( value ) => { - updateMargins( { - ...style?.spacing?.margin, - [ side ]: value, - } ); - }; - - const onUnitChange = ( unit ) => { - updateMargins( { - top: MARGIN_CONSTRAINTS[ unit ].default, - bottom: MARGIN_CONSTRAINTS[ unit ].default, - } ); - }; - return ( - - diff --git a/packages/components/src/box-control/all-input-control.js b/packages/components/src/box-control/all-input-control.js index 1f1260898505d..8c2772b62988d 100644 --- a/packages/components/src/box-control/all-input-control.js +++ b/packages/components/src/box-control/all-input-control.js @@ -14,6 +14,7 @@ export default function AllInputControl( { onHoverOn = noop, onHoverOff = noop, values, + sides, ...props } ) { const allValue = getAllValue( values ); @@ -26,13 +27,15 @@ export default function AllInputControl( { onFocus( event, { side: 'all' } ); }; + const isSideDisabled = ( side ) => sides && sides[ side ] === false; + const handleOnChange = ( next ) => { const nextValues = { ...values }; - nextValues.top = next; - nextValues.bottom = next; - nextValues.left = next; - nextValues.right = next; + nextValues.top = isSideDisabled( 'top' ) ? values.top : next; + nextValues.right = isSideDisabled( 'right' ) ? values.right : next; + nextValues.bottom = isSideDisabled( 'bottom' ) ? values.bottom : next; + nextValues.left = isSideDisabled( 'left' ) ? values.left : next; onChange( nextValues ); }; diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js index 187e8f1021401..e5696133c6680 100644 --- a/packages/components/src/box-control/index.js +++ b/packages/components/src/box-control/index.js @@ -51,6 +51,7 @@ export default function BoxControl( { label = __( 'Box Control' ), values: valuesProp, units, + sides, } ) { const [ values, setValues ] = useControlledState( valuesProp, { fallback: DEFAULT_VALUES, @@ -107,6 +108,7 @@ export default function BoxControl( { onHoverOff: handleOnHoverOff, isLinked, units, + sides, values: inputValues, }; diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js index 0177052151273..81789d06ab5e3 100644 --- a/packages/components/src/box-control/input-controls.js +++ b/packages/components/src/box-control/input-controls.js @@ -10,12 +10,31 @@ import UnitControl from './unit-control'; import { LABELS } from './utils'; import { LayoutContainer, Layout } from './styles/box-control-styles'; +const getFirstLastAndOnlySides = ( sides ) => { + let first, last; + + [ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => { + if ( sides && sides[ side ] ) { + if ( ! first ) { + first = side; + } + + last = side; + } + } ); + + const only = first === last && first; + + return { first, last, only }; +}; + export default function BoxInputControls( { onChange = noop, onFocus = noop, onHoverOn = noop, onHoverOff = noop, values, + sides, ...props } ) { const createHandleOnFocus = ( side ) => ( event ) => { @@ -66,6 +85,9 @@ export default function BoxInputControls( { handleOnChange( nextValues ); }; + const isSideDisabled = ( side ) => sides && sides[ side ] === false; + const { first, last, only } = getFirstLastAndOnlySides( sides ); + return ( - - - - + { ! isSideDisabled( 'top' ) && ( + + ) } + { ! isSideDisabled( 'right' ) && ( + + ) } + { ! isSideDisabled( 'bottom' ) && ( + + ) } + { ! isSideDisabled( 'left' ) && ( + + ) } ); From a20a3bb641ea0dc99fab67eeeabf9d45001ad786 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 22 Mar 2021 10:23:02 +1000 Subject: [PATCH 4/7] Fix styling and layout for unlinked side input controls --- packages/components/src/box-control/input-controls.js | 7 +++++++ .../src/box-control/styles/box-control-styles.js | 1 + 2 files changed, 8 insertions(+) diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js index 81789d06ab5e3..85d47bb93d766 100644 --- a/packages/components/src/box-control/input-controls.js +++ b/packages/components/src/box-control/input-controls.js @@ -11,8 +11,15 @@ import { LABELS } from './utils'; import { LayoutContainer, Layout } from './styles/box-control-styles'; const getFirstLastAndOnlySides = ( sides ) => { + // Handle default config allowing all sides to be configured. + if ( ! sides ) { + return { first: 'top', last: 'left', only: undefined }; + } + let first, last; + // Check which sides have been opted-into to determine which are first, + // last & only. [ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => { if ( sides && sides[ side ] ) { if ( ! first ) { diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js index 78cf6ceb9a696..7d42aa42dcb18 100644 --- a/packages/components/src/box-control/styles/box-control-styles.js +++ b/packages/components/src/box-control/styles/box-control-styles.js @@ -40,6 +40,7 @@ export const Layout = styled( Flex )` position: relative; height: 100%; width: 100%; + justify-content: flex-start; `; const unitControlBorderRadiusStyles = ( { isFirst, isLast, isOnly } ) => { From 2d8eb636a31b24586d2515cd160390fc53a26ed1 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 22 Mar 2021 13:45:42 +1000 Subject: [PATCH 5/7] Prevent errors on UnitControl drag gesture --- packages/components/src/input-control/input-field.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js index 18044ee455ac9..f70bd01905290 100644 --- a/packages/components/src/input-control/input-field.js +++ b/packages/components/src/input-control/input-field.js @@ -155,6 +155,9 @@ function InputField( const dragGestureProps = useDrag( ( dragProps ) => { const { distance, dragging, event } = dragProps; + // The event is persisted to prevent errors in components using this + // to check if a modifier key was held while dragging. + event.persist(); if ( ! distance ) return; event.stopPropagation(); From 2e359e4226493f77d47f7e71bc70b889af5c2c1c Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 22 Mar 2021 17:38:43 +1000 Subject: [PATCH 6/7] Add box visualizer --- packages/block-library/src/separator/edit.js | 11 ++++++++++- .../src/separator/separator-settings.js | 12 ++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 4af5efcb11e55..8e951a4e1daa7 100644 --- a/packages/block-library/src/separator/edit.js +++ b/packages/block-library/src/separator/edit.js @@ -6,7 +6,10 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { HorizontalRule } from '@wordpress/components'; +import { + HorizontalRule, + __experimentalBoxControl as BoxControl, +} from '@wordpress/components'; import { View } from '@wordpress/primitives'; import { withColors, useBlockProps } from '@wordpress/block-editor'; @@ -16,6 +19,8 @@ import { withColors, useBlockProps } from '@wordpress/block-editor'; import SeparatorSettings from './separator-settings'; import { MARGIN_CONSTRAINTS, parseUnit } from './shared'; +const { __Visualizer: BoxControlVisualizer } = BoxControl; + function SeparatorEdit( props ) { const { color, @@ -35,6 +40,10 @@ function SeparatorEdit( props ) { 'wp-block-separator-wrapper' ) } > + { + setAttributes( { + style: { + ...style, + visualizers: { + margin: { top, bottom }, + }, + }, + } ); + }; + return ( From d93f2559587cdb78fea06b6fa5f461e97fe00ffb Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 23 Mar 2021 16:56:14 +1000 Subject: [PATCH 7/7] Update BoxControlIcon to reflect enabled sides --- packages/components/src/box-control/icon.js | 22 +++++++++++++------- packages/components/src/box-control/index.js | 2 +- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/components/src/box-control/icon.js b/packages/components/src/box-control/icon.js index 15249c01e4db1..e34ea1d326dee 100644 --- a/packages/components/src/box-control/icon.js +++ b/packages/components/src/box-control/icon.js @@ -15,12 +15,22 @@ const BASE_ICON_SIZE = 24; export default function BoxControlIcon( { size = 24, side = 'all', + sides, ...props } ) { - const top = getSide( side, 'top' ); - const right = getSide( side, 'right' ); - const bottom = getSide( side, 'bottom' ); - const left = getSide( side, 'left' ); + const isSideDisabled = ( value ) => sides && sides[ value ] === false; + const getSide = ( value ) => { + if ( isSideDisabled( value ) ) { + return false; + } + + return side === 'all' || side === value; + }; + + const top = getSide( 'top' ); + const right = getSide( 'right' ); + const bottom = getSide( 'bottom' ); + const left = getSide( 'left' ); // Simulates SVG Icon scaling const scale = size / BASE_ICON_SIZE; @@ -36,7 +46,3 @@ export default function BoxControlIcon( { ); } - -function getSide( side, value ) { - return side === 'all' || side === value; -} diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js index e5696133c6680..6e1f8be2f8157 100644 --- a/packages/components/src/box-control/index.js +++ b/packages/components/src/box-control/index.js @@ -137,7 +137,7 @@ export default function BoxControl( { - + { isLinked && (