diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index b3965ceb6ff7a..a27d07b3854a2 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -8,6 +8,7 @@ import { Flex, FlexItem, RangeControl, + __experimentalNumberControl as NumberControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, @@ -200,6 +201,8 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) { value={ value } units={ units } min={ 0 } + label={ __( 'Minimum column width' ) } + hideLabelFromVision /> @@ -209,6 +212,8 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) { min={ 0 } max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 } withInputField={ false } + label={ __( 'Minimum column width' ) } + hideLabelFromVision /> @@ -221,18 +226,49 @@ function GridLayoutColumnsControl( { layout, onChange } ) { const { columnCount = 3 } = layout; return ( - - onChange( { - ...layout, - columnCount: value, - } ) - } - min={ 1 } - max={ 6 } - /> +
+ + { __( 'Columns' ) } + + + + { + /** + * If the input is cleared, avoid switching + * back to "Auto" by setting a value of "1". + */ + const validValue = value !== '' ? value : '1'; + onChange( { + ...layout, + columnCount: validValue, + } ); + } } + value={ columnCount } + min={ 1 } + label={ __( 'Columns' ) } + hideLabelFromVision + /> + + + + onChange( { + ...layout, + columnCount: value, + } ) + } + min={ 1 } + max={ 16 } + withInputField={ false } + label={ __( 'Columns' ) } + hideLabelFromVision + /> + + +
); } @@ -275,16 +311,16 @@ function GridLayoutTypeControl( { layout, onChange } ) { onChange={ onChangeType } isBlock={ true } > - + ); }