diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
index 6d6d0ae92979b4..9b2dd4e96e0bb6 100644
--- 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( {
- {
- setAttributes( { width: nextWidth } );
+ {
+ setAttributes( {
+ width:
+ nextValue === 'manual'
+ ? toWidthPrecision( 100 / totalColumns )
+ : undefined,
+ } );
} }
- min={ 0 }
- max={ 100 }
- step={ 0.1 }
- required
- allowReset
/>
-
+ { hasExplicitWidth && (
+ <>
+ {
+ setAttributes( { width: nextWidth } );
+ } }
+ min={ 0 }
+ max={ 100 }
+ step={ 0.1 }
+ required
+ />
+
+ >
+ ) }
{
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 ) => {