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 3c1a1341153a7..1716d202741b8 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 494214858bf42..321319d46c9c4 100644 --- a/packages/block-library/src/column/block.json +++ b/packages/block-library/src/column/block.json @@ -10,7 +10,9 @@ "type": "string" }, "width": { - "type": "string" + "type": "number", + "min": 0, + "max": 100 } }, "supports": { diff --git a/packages/block-library/src/column/deprecated.js b/packages/block-library/src/column/deprecated.js deleted file mode 100644 index 52d3f675df299..0000000000000 --- a/packages/block-library/src/column/deprecated.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * 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 70e1e669bf511..68ea515c13106 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -14,10 +14,7 @@ import { useBlockProps, __experimentalUseInnerBlocksProps as useInnerBlocksProps, } from '@wordpress/block-editor'; -import { - PanelBody, - __experimentalUnitControl as UnitControl, -} from '@wordpress/components'; +import { PanelBody, RangeControl } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -55,9 +52,10 @@ function ColumnEdit( { } ); }; + const hasWidth = Number.isFinite( width ); const blockProps = useBlockProps( { className: classes, - style: width ? { flexBasis: width } : undefined, + style: hasWidth ? { flexBasis: width + '%' } : undefined, } ); const innerBlocksProps = useInnerBlocksProps( blockProps, { templateLock: false, @@ -76,23 +74,20 @@ function ColumnEdit( { - { - nextWidth = - 0 > parseFloat( nextWidth ) ? '0' : nextWidth; setAttributes( { width: nextWidth } ); } } - units={ [ - { value: '%', label: '%', default: '' }, - { value: 'px', label: 'px', default: '' }, - { value: 'em', label: 'em', default: '' }, - { value: 'rem', label: 'rem', default: '' }, - { value: 'vw', label: 'vw', default: '' }, - ] } + min={ 0 } + max={ 100 } + step={ 0.1 } + required + allowReset + placeholder={ + width === undefined ? __( 'Auto' ) : undefined + } /> diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js index 2297974e89fc4..b437c249a82e5 100644 --- a/packages/block-library/src/column/index.js +++ b/packages/block-library/src/column/index.js @@ -7,7 +7,6 @@ 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'; @@ -22,5 +21,4 @@ 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 ff9e9f418db4c..bb5a3765203d1 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 ( width ) { - style = { flexBasis: width }; + if ( Number.isFinite( width ) ) { + style = { flexBasis: width + '%' }; } return ( diff --git a/packages/block-library/src/columns/variations.js b/packages/block-library/src/columns/variations.js index 68ce6583ed4b2..31b58cc71893c 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 49ce733912b49..5f0da486f9adb 100644 --- a/packages/components/src/input-control/input-base.js +++ b/packages/components/src/input-control/input-base.js @@ -56,7 +56,6 @@ export function InputBase(