Block Library: Show Columns block range control only when "Manual" width

WordPress · Feb 7, 2020 · 92b8fd4 · 92b8fd4
1 parent e25b28b
commit 92b8fd4
Showing 1 changed file with 56 additions and 13 deletions.
diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
@@ -12,11 +12,21 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { PanelBody, RangeControl, Notice } from '@wordpress/components';
+import {
+	PanelBody,
+	RangeControl,
+	RadioControl,
+	Notice,
+} from '@wordpress/components';
 import { withDispatch, withSelect, useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { toWidthPrecision } from '../columns/utils';
+
 /**
  * Component which renders a notice if the sum total width of columns of the
  * root block (the Columns parent) are all explicitly assigned and not equal
@@ -73,8 +83,10 @@ function ColumnEdit( {
 	className,
 	updateAlignment,
 	hasChildBlocks,
+	totalColumns,
 } ) {
 	const { verticalAlignment, width } = attributes;
+	const hasExplicitWidth = width !== undefined;
 
 	const classes = classnames( className, 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
@@ -90,19 +102,46 @@ function ColumnEdit( {
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Column settings' ) }>
-					<RangeControl
-						label={ __( 'Percentage width' ) }
-						value={ width || '' }
-						onChange={ ( nextWidth ) => {
-							setAttributes( { width: nextWidth } );
+					<RadioControl
+						label={ __( 'Width' ) }
+						selected={ hasExplicitWidth ? 'manual' : 'auto' }
+						options={ [
+							{
+								label: __(
+									'Automatically adjust to occupy available space'
+								),
+								value: 'auto',
+							},
+							{
+								label: __( 'Manual width' ),
+								value: 'manual',
+							},
+						] }
+						onChange={ ( nextValue ) => {
+							setAttributes( {
+								width:
+									nextValue === 'manual'
+										? toWidthPrecision( 100 / totalColumns )
+										: undefined,
+							} );
 						} }
-						min={ 0 }
-						max={ 100 }
-						step={ 0.1 }
-						required
-						allowReset
 					/>
-					<InvalidWidthNotice clientId={ clientId } />
+					{ hasExplicitWidth && (
+						<>
+							<RangeControl
+								label={ __( 'Percentage width' ) }
+								value={ width }
+								onChange={ ( nextWidth ) => {
+									setAttributes( { width: nextWidth } );
+								} }
+								min={ 0 }
+								max={ 100 }
+								step={ 0.1 }
+								required
+							/>
+							<InvalidWidthNotice clientId={ clientId } />
+						</>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			<InnerBlocks
@@ -120,10 +159,14 @@ function ColumnEdit( {
 export default compose(
 	withSelect( ( select, ownProps ) => {
 		const { clientId } = ownProps;
-		const { getBlockOrder } = select( 'core/block-editor' );
+		const { getBlockOrder, getBlockRootClientId } = select(
+			'core/block-editor'
+		);
 
 		return {
 			hasChildBlocks: getBlockOrder( clientId ).length > 0,
+			totalColumns: getBlockOrder( getBlockRootClientId( clientId ) )
+				.length,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, registry ) => {