diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
index a0f3cdcf65393..b88e72e8da699 100644
--- a/packages/block-library/src/column/edit.js
+++ b/packages/block-library/src/column/edit.js
@@ -18,8 +18,9 @@ import {
} from '@wordpress/block-editor';
import {
__experimentalUseCustomUnits as useCustomUnits,
- PanelBody,
__experimentalUnitControl as UnitControl,
+ __experimentalToolsPanel as ToolsPanel,
+ __experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { sprintf, __ } from '@wordpress/i18n';
@@ -30,19 +31,32 @@ function ColumnInspectorControls( { width, setAttributes } ) {
availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
} );
return (
-
- {
+ setAttributes( { width: undefined } );
+ } }
+ >
+ width !== undefined }
label={ __( 'Width' ) }
- __unstableInputWidth="calc(50% - 8px)"
- __next40pxDefaultSize
- value={ width || '' }
- onChange={ ( nextWidth ) => {
- nextWidth = 0 > parseFloat( nextWidth ) ? '0' : nextWidth;
- setAttributes( { width: nextWidth } );
- } }
- units={ units }
- />
-
+ onDeselect={ () => setAttributes( { width: undefined } ) }
+ isShownByDefault
+ >
+ {
+ nextWidth =
+ 0 > parseFloat( nextWidth ) ? '0' : nextWidth;
+ setAttributes( { width: nextWidth } );
+ } }
+ units={ units }
+ />
+
+
);
}