From 1cad0e16c1fd8e46a57c861e69a86a4d3ee8bbd8 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 29 Sep 2020 18:41:01 +0300 Subject: [PATCH] Use `UnitControl` instead of `RangeControl` for column width (#24711) Co-authored-by: Nik Tsekouras Co-authored-by: Jon Q --- .../test/__snapshots__/index.js.snap | 2 +- packages/block-library/src/column/block.json | 4 +- .../block-library/src/column/deprecated.js | 50 +++++++++++++++++++ packages/block-library/src/column/edit.js | 31 +++++++----- packages/block-library/src/column/index.js | 2 + packages/block-library/src/column/save.js | 4 +- .../block-library/src/columns/variations.js | 14 +++--- .../src/input-control/input-base.js | 1 + .../styles/input-control-styles.js | 13 ++++- 9 files changed, 93 insertions(+), 28 deletions(-) create mode 100644 packages/block-library/src/column/deprecated.js diff --git a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap index 08c0a5a88f75b6..c885154f55d763 100644 --- a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render with required props 1`] = `"
Padding

Toggle between using the same value for all screen sizes or using a unique value per screen size.

All is used here for testing purposes to ensure we have access to details about the device.

"`; +exports[`Basic rendering should render with required props 1`] = `"
Padding

Toggle between using the same value for all screen sizes or using a unique value per screen size.

All is used here for testing purposes to ensure we have access to details about the device.

"`; diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json index bc8d16aa9601c2..0a4f951d1f7482 100644 --- a/packages/block-library/src/column/block.json +++ b/packages/block-library/src/column/block.json @@ -9,9 +9,7 @@ "type": "string" }, "width": { - "type": "number", - "min": 0, - "max": 100 + "type": "string" } }, "supports": { diff --git a/packages/block-library/src/column/deprecated.js b/packages/block-library/src/column/deprecated.js new file mode 100644 index 00000000000000..52d3f675df2997 --- /dev/null +++ b/packages/block-library/src/column/deprecated.js @@ -0,0 +1,50 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +const deprecated = [ + { + attributes: { + verticalAlignment: { + type: 'string', + }, + width: { + type: 'number', + min: 0, + max: 100, + }, + }, + migrate( attributes ) { + return { + ...attributes, + width: `${ attributes.width }%`, + }; + }, + save( { attributes } ) { + const { verticalAlignment, width } = attributes; + + const wrapperClasses = classnames( { + [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + let style; + if ( Number.isFinite( width ) ) { + style = { flexBasis: width + '%' }; + } + + return ( +
+ +
+ ); + }, + }, +]; + +export default deprecated; diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 9798a4b398340c..a14f37dc135547 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -13,7 +13,10 @@ import { InspectorControls, __experimentalUseBlockWrapperProps as useBlockWrapperProps, } from '@wordpress/block-editor'; -import { PanelBody, RangeControl } from '@wordpress/components'; +import { + PanelBody, + __experimentalUnitControl as UnitControl, +} from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -51,10 +54,9 @@ function ColumnEdit( { } ); }; - const hasWidth = Number.isFinite( width ); const blockWrapperProps = useBlockWrapperProps( { className: classes, - style: hasWidth ? { flexBasis: width + '%' } : undefined, + style: width ? { flexBasis: width } : undefined, } ); return ( @@ -67,20 +69,23 @@ function ColumnEdit( { - { + nextWidth = + 0 > parseFloat( nextWidth ) ? '0' : nextWidth; setAttributes( { width: nextWidth } ); } } - min={ 0 } - max={ 100 } - step={ 0.1 } - required - allowReset - placeholder={ - width === undefined ? __( 'Auto' ) : undefined - } + units={ [ + { value: '%', label: '%', default: '' }, + { value: 'px', label: 'px', default: '' }, + { value: 'em', label: 'em', default: '' }, + { value: 'rem', label: 'rem', default: '' }, + { value: 'vw', label: 'vw', default: '' }, + ] } /> diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js index b437c249a82e56..2297974e89fc40 100644 --- a/packages/block-library/src/column/index.js +++ b/packages/block-library/src/column/index.js @@ -7,6 +7,7 @@ import { column as icon } from '@wordpress/icons'; /** * Internal dependencies */ +import deprecated from './deprecated'; import edit from './edit'; import metadata from './block.json'; import save from './save'; @@ -21,4 +22,5 @@ export const settings = { description: __( 'A single column within a columns block.' ), edit, save, + deprecated, }; diff --git a/packages/block-library/src/column/save.js b/packages/block-library/src/column/save.js index d0dda9de3174b3..cba4f436c176fc 100644 --- a/packages/block-library/src/column/save.js +++ b/packages/block-library/src/column/save.js @@ -16,8 +16,8 @@ export default function save( { attributes } ) { } ); let style; - if ( Number.isFinite( width ) ) { - style = { flexBasis: width + '%' }; + if ( width ) { + style = { flexBasis: width }; } return ( diff --git a/packages/block-library/src/columns/variations.js b/packages/block-library/src/columns/variations.js index 31b58cc71893c0..68ce6583ed4b23 100644 --- a/packages/block-library/src/columns/variations.js +++ b/packages/block-library/src/columns/variations.js @@ -53,8 +53,8 @@ const variations = [ ), innerBlocks: [ - [ 'core/column', { width: 33.33 } ], - [ 'core/column', { width: 66.66 } ], + [ 'core/column', { width: '33.33%' } ], + [ 'core/column', { width: '66.66%' } ], ], scope: [ 'block' ], }, @@ -77,8 +77,8 @@ const variations = [ ), innerBlocks: [ - [ 'core/column', { width: 66.66 } ], - [ 'core/column', { width: 33.33 } ], + [ 'core/column', { width: '66.66%' } ], + [ 'core/column', { width: '33.33%' } ], ], scope: [ 'block' ], }, @@ -124,9 +124,9 @@ const variations = [ ), innerBlocks: [ - [ 'core/column', { width: 25 } ], - [ 'core/column', { width: 50 } ], - [ 'core/column', { width: 25 } ], + [ 'core/column', { width: '25%' } ], + [ 'core/column', { width: '50%' } ], + [ 'core/column', { width: '25%' } ], ], scope: [ 'block' ], }, diff --git a/packages/components/src/input-control/input-base.js b/packages/components/src/input-control/input-base.js index 5f0da486f9adb5..49ce733912b496 100644 --- a/packages/components/src/input-control/input-base.js +++ b/packages/components/src/input-control/input-base.js @@ -56,6 +56,7 @@ export function InputBase(