From b0cb09cc2c3c5be35868a9b11d8500304ddb220d Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 4 May 2021 14:54:31 +1000 Subject: [PATCH 01/22] Rename panel to border --- packages/block-editor/src/hooks/border.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index d14633975a88a..a2efb898ddd49 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -46,7 +46,7 @@ export function BorderPanel( props ) { { isStyleSupported && } From a20bdea04096751b26578d8ad5e5b916ac0844d1 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 4 May 2021 14:57:19 +1000 Subject: [PATCH 02/22] Remove repetitious border copy in labels --- .../src/components/border-style-control/index.js | 2 +- packages/block-editor/src/hooks/border-color.js | 2 +- packages/block-editor/src/hooks/border-radius.js | 2 +- packages/block-editor/src/hooks/border-width.js | 2 +- packages/edit-site/src/components/sidebar/border-panel.js | 6 +++--- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/border-style-control/index.js b/packages/block-editor/src/components/border-style-control/index.js index c07e3962438e2..dfd277af8cbc7 100644 --- a/packages/block-editor/src/components/border-style-control/index.js +++ b/packages/block-editor/src/components/border-style-control/index.js @@ -50,7 +50,7 @@ export default function BorderStyleControl( { onChange, value } ) {
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js index 63e1941e17a2d..036ff345a8ccd 100644 --- a/packages/block-editor/src/hooks/border-color.js +++ b/packages/block-editor/src/hooks/border-color.js @@ -70,7 +70,7 @@ export function BorderColorEdit( props ) { return ( { return ( Date: Tue, 4 May 2021 15:02:37 +1000 Subject: [PATCH 03/22] Rearrange border controls to match CSS syntax order --- packages/block-editor/src/hooks/border.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index a2efb898ddd49..f3d8e5b1a95d5 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -49,10 +49,10 @@ export function BorderPanel( props ) { title={ __( 'Border' ) } initialOpen={ false } > - { isStyleSupported && } { isWidthSupported && } - { isRadiusSupported && } + { isStyleSupported && } { isColorSupported && } + { isRadiusSupported && } ); From 1231dac4031c0c8357ee8562eddfcf2fb8d0a61f Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 4 May 2021 15:37:29 +1000 Subject: [PATCH 04/22] Change border style to standard select control --- .../components/border-style-control/index.js | 46 ++++--------------- 1 file changed, 9 insertions(+), 37 deletions(-) diff --git a/packages/block-editor/src/components/border-style-control/index.js b/packages/block-editor/src/components/border-style-control/index.js index dfd277af8cbc7..eb85edb281cd0 100644 --- a/packages/block-editor/src/components/border-style-control/index.js +++ b/packages/block-editor/src/components/border-style-control/index.js @@ -1,37 +1,15 @@ /** * WordPress dependencies */ -import { CustomSelectControl } from '@wordpress/components'; +import { SelectControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -const DEFAULT_STYLE = { - key: 'default', - name: __( 'Default' ), - style: { borderStyle: undefined }, -}; - const BORDER_STYLES = [ - DEFAULT_STYLE, - { - key: 'none', - name: __( 'None' ), - style: { borderStyle: 'none' }, - }, - { - key: 'solid', - name: __( 'Solid' ), - style: { borderStyle: 'solid' }, - }, - { - key: 'dashed', - name: __( 'Dashed' ), - style: { borderStyle: 'dashed' }, - }, - { - key: 'dotted', - name: __( 'Dotted' ), - style: { borderStyle: 'dotted' }, - }, + { label: __( 'Default' ), value: undefined }, + { label: __( 'None' ), value: 'none' }, + { label: __( 'Solid' ), value: 'solid' }, + { label: __( 'Dashed' ), value: 'dashed' }, + { label: __( 'Dotted' ), value: 'dotted' }, ]; /** @@ -44,20 +22,14 @@ const BORDER_STYLES = [ * @return {WPElement} Custom border style select control. */ export default function BorderStyleControl( { onChange, value } ) { - const style = BORDER_STYLES.find( ( option ) => option.key === value ); - return (
- - selectedItem.key === 'default' - ? onChange( undefined ) - : onChange( selectedItem.key ) - } + value={ value } + onChange={ onChange } />
); From 8ed4bf11b1a6037cb82010a5ed9a327f1920679b Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 5 May 2021 16:00:06 +1000 Subject: [PATCH 05/22] Rearrange controls to match CSS order --- packages/block-editor/src/hooks/border.js | 8 ++++++-- packages/block-editor/src/hooks/border.scss | 9 +++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index f3d8e5b1a95d5..64872c5c470f0 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -49,8 +49,12 @@ export function BorderPanel( props ) { title={ __( 'Border' ) } initialOpen={ false } > - { isWidthSupported && } - { isStyleSupported && } + { ( isWidthSupported || isStyleSupported ) && ( +
+ { isWidthSupported && } + { isStyleSupported && } +
+ ) } { isColorSupported && } { isRadiusSupported && } diff --git a/packages/block-editor/src/hooks/border.scss b/packages/block-editor/src/hooks/border.scss index 61d75c5945463..6c859252afc34 100644 --- a/packages/block-editor/src/hooks/border.scss +++ b/packages/block-editor/src/hooks/border.scss @@ -1,4 +1,13 @@ .block-editor-hooks__border-controls { + .block-editor-hooks__border-controls-row { + display: flex; + justify-content: space-between; + + > * { + width: calc(50% - #{ $grid-unit-10 }); + } + } + .components-unit-control-wrapper { margin-bottom: $grid-unit-30; From 6500f689a3a1d228d1d24126d5f326e8e5884ce6 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 5 May 2021 16:01:16 +1000 Subject: [PATCH 06/22] Use segmented control for border style control --- .../components/border-style-control/icons.js | 30 ++++++++++++++ .../components/border-style-control/index.js | 41 +++++++++++++------ .../border-style-control/style.scss | 21 ++++++---- 3 files changed, 70 insertions(+), 22 deletions(-) create mode 100644 packages/block-editor/src/components/border-style-control/icons.js diff --git a/packages/block-editor/src/components/border-style-control/icons.js b/packages/block-editor/src/components/border-style-control/icons.js new file mode 100644 index 0000000000000..8af50413999a0 --- /dev/null +++ b/packages/block-editor/src/components/border-style-control/icons.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export const solidIcon = ( + + + +); + +export const dashedIcon = ( + + + +); + +export const dottedIcon = ( + + + +); diff --git a/packages/block-editor/src/components/border-style-control/index.js b/packages/block-editor/src/components/border-style-control/index.js index eb85edb281cd0..b3fd1d8fe6a9a 100644 --- a/packages/block-editor/src/components/border-style-control/index.js +++ b/packages/block-editor/src/components/border-style-control/index.js @@ -1,15 +1,18 @@ /** * WordPress dependencies */ -import { SelectControl } from '@wordpress/components'; +import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { dashedIcon, dottedIcon, solidIcon } from './icons'; + const BORDER_STYLES = [ - { label: __( 'Default' ), value: undefined }, - { label: __( 'None' ), value: 'none' }, - { label: __( 'Solid' ), value: 'solid' }, - { label: __( 'Dashed' ), value: 'dashed' }, - { label: __( 'Dotted' ), value: 'dotted' }, + { label: __( 'Solid' ), icon: solidIcon, value: 'solid' }, + { label: __( 'Dashed' ), icon: dashedIcon, value: 'dashed' }, + { label: __( 'Dotted' ), icon: dottedIcon, value: 'dotted' }, ]; /** @@ -24,13 +27,25 @@ const BORDER_STYLES = [ export default function BorderStyleControl( { onChange, value } ) { return (
- + { __( 'Style' ) } +
+ { BORDER_STYLES.map( ( borderStyle ) => ( +
); } 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 827f31bca718c..737103be1cd24 100644 --- a/packages/block-editor/src/components/border-style-control/style.scss +++ b/packages/block-editor/src/components/border-style-control/style.scss @@ -1,14 +1,17 @@ -.components-border-style-control__select { - margin-bottom: 24px; - - button { - width: 100%; +.components-border-style-control { + legend { + padding-bottom: $grid-unit-05; } - ul { - li, - li:last-child { - margin: 6px; + .components-border-style-control__buttons { + display: inline-flex; + margin-bottom: $grid-unit-30; + + .components-button.has-icon { + min-width: 30px; + height: 30px; + padding: 3px; + margin-right: $grid-unit-05; } } } From 9f01170ce9a0501bd6ca41cc0d22a493d9227663 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 5 May 2021 16:15:12 +1000 Subject: [PATCH 07/22] Fix doc block for border style control --- .../src/components/border-style-control/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/border-style-control/index.js b/packages/block-editor/src/components/border-style-control/index.js index b3fd1d8fe6a9a..ee3a936bc3291 100644 --- a/packages/block-editor/src/components/border-style-control/index.js +++ b/packages/block-editor/src/components/border-style-control/index.js @@ -18,11 +18,11 @@ const BORDER_STYLES = [ /** * Control to display border style options. * - * @param {Object} props Component props. - * @param {Object} props.onChange Handler for changing border style selection. - * @param {Object} props.value Currently selected border style value. + * @param {Object} props Component props. + * @param {Function} props.onChange Handler for changing border style selection. + * @param {string} props.value Currently selected border style value. * - * @return {WPElement} Custom border style select control. + * @return {WPElement} Custom border style segmented control. */ export default function BorderStyleControl( { onChange, value } ) { return ( From 665d006213e5d5ac9895e2610a7d07899335e36a Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 5 May 2021 20:55:01 +1000 Subject: [PATCH 08/22] Overhaul border radius control Allows individual control over corner radii. --- .../all-input-control.js | 37 +++++ .../components/border-radius-control/index.js | 93 +++++++++++ .../border-radius-control/input-controls.js | 60 +++++++ .../border-radius-control/linked-button.js | 27 ++++ .../border-radius-control/style.scss | 47 ++++++ .../components/border-radius-control/utils.js | 151 ++++++++++++++++++ packages/block-editor/src/components/index.js | 1 + .../block-editor/src/hooks/border-radius.js | 38 +---- packages/block-editor/src/style.scss | 1 + 9 files changed, 420 insertions(+), 35 deletions(-) create mode 100644 packages/block-editor/src/components/border-radius-control/all-input-control.js create mode 100644 packages/block-editor/src/components/border-radius-control/index.js create mode 100644 packages/block-editor/src/components/border-radius-control/input-controls.js create mode 100644 packages/block-editor/src/components/border-radius-control/linked-button.js create mode 100644 packages/block-editor/src/components/border-radius-control/style.scss create mode 100644 packages/block-editor/src/components/border-radius-control/utils.js diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js new file mode 100644 index 0000000000000..7fe5bc57d3442 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/all-input-control.js @@ -0,0 +1,37 @@ +/** + * External dependencies + */ +import { noop } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { getAllValue, isValuesMixed, isValuesDefined } from './utils'; + +export default function AllInputControl( { + onChange = noop, + values, + ...props +} ) { + const allValue = getAllValue( values ); + const hasValues = isValuesDefined( values ); + const isMixed = hasValues && isValuesMixed( values ); + const allPlaceholder = isMixed ? __( 'Mixed' ) : null; + + return ( + + ); +} diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js new file mode 100644 index 0000000000000..a7e202ff8ab94 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/index.js @@ -0,0 +1,93 @@ +/** + * WordPress dependencies + */ +import { + RangeControl, + __experimentalUseCustomUnits as useCustomUnits, +} from '@wordpress/components'; +import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import AllInputControl from './all-input-control'; +import InputControls from './input-controls'; +import LinkedButton from './linked-button'; +import { + DEFAULT_VALUES, + getAllValue, + getAllUnit, + isValuesDefined, + isValuesMixed, + parseUnit, +} from './utils'; + +export const MIN_BORDER_RADIUS_VALUE = 0; + +/** + * Control to display border radius options. + * + * @param {Object} props Component props. + * @param {Function} props.onChange Callback to handle onChange. + * @param {Object} props.values Border radius values. + * + * @return {WPElement} Custom border radius control. + */ +export default function BorderRadiusControl( { onChange, values } ) { + const [ isLinked, setIsLinked ] = useState( + ! isValuesDefined( values ) || ! isValuesMixed( values ) + ); + + const units = useCustomUnits( { + availableUnits: [ 'px', 'em', 'rem' ], + } ); + + const [ allValue ] = parseUnit( getAllValue( values ) ); + const unit = getAllUnit( values ); + const step = unit === 'px' ? 1 : 0.25; + + const toggleLinked = () => setIsLinked( ! isLinked ); + + const handleSliderChange = ( next ) => { + onChange( next !== undefined ? `${ next }${ unit }` : undefined ); + }; + + return ( +
+ { __( 'Radius' ) } +
+ { isLinked ? ( + <> + + + + ) : ( + + ) } + +
+
+ ); +} diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js new file mode 100644 index 0000000000000..74fb62db36192 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/input-controls.js @@ -0,0 +1,60 @@ +/** + * External dependencies + */ +import { noop } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; + +export default function BoxInputControls( { + onChange = noop, + values: valuesProp, + ...props +} ) { + const createHandleOnChange = ( corner ) => ( next ) => { + onChange( { ...values, [ corner ]: next } ); + }; + + // For backwards compatibility, handle possible flat string value. + const values = + typeof valuesProp !== 'string' + ? valuesProp + : { + topLeft: valuesProp, + topRight: valuesProp, + bottomLeft: valuesProp, + bottomRight: valuesProp, + }; + + return ( +
+ + + + +
+ ); +} diff --git a/packages/block-editor/src/components/border-radius-control/linked-button.js b/packages/block-editor/src/components/border-radius-control/linked-button.js new file mode 100644 index 0000000000000..c4c7527bb9d89 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/linked-button.js @@ -0,0 +1,27 @@ +/** + * WordPress dependencies + */ +import { Button, Tooltip } from '@wordpress/components'; +import { link, linkOff } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +export default function LinkedButton( { isLinked, ...props } ) { + const label = isLinked ? __( 'Unlink Radii' ) : __( 'Link Radii' ); + + return ( + + +