WIP

packages/block-library/src/columns/block.json

@@ -12,6 +12,9 @@
 		"isStackedOnMobile": {
 			"type": "boolean",
 			"default": true
+		},
+		"columnMinWidth": {
+			"type": "string"
 		}
 	},
 	"supports": {

packages/block-library/src/columns/edit.js

@@ -13,6 +13,7 @@ import {
 	PanelBody,
 	RangeControl,
 	ToggleControl,
+	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 
 import {
@@ -22,6 +23,7 @@ import {
 	BlockVerticalAlignmentToolbar,
 	__experimentalBlockVariationPicker,
 	useBlockProps,
+	__experimentalUnitControl as UnitControl,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
@@ -59,7 +61,7 @@ function ColumnsEditContainer( {
 	updateColumns,
 	clientId,
 } ) {
-	const { isStackedOnMobile, verticalAlignment } = attributes;
+	const { isStackedOnMobile, verticalAlignment, columnMinWidth } = attributes;
 
 	const { count } = useSelect(
 		( select ) => {
@@ -84,6 +86,10 @@ function ColumnsEditContainer( {
 		renderAppender: false,
 	} );
 
+	const units = useCustomUnits( {
+		availableUnits: [ '%', 'px', 'em', 'rem', 'vw' ],
+	} );
+
 	return (
 		<>
 			<BlockControls>
@@ -117,6 +123,23 @@ function ColumnsEditContainer( {
 							} )
 						}
 					/>
+					{ isStackedOnMobile && (
+						<UnitControl
+							label={ __( 'Columns minimum width' ) }
+							description={ __(
+								'Minimum width for columns is used to determine how columns will stack when the viewport size changes.'
+							) }
+							labelPosition="edge"
+							__unstableInputWidth="80px"
+							onChange={ ( value ) => {
+								setAttributes( {
+									columnMinWidth: value,
+								} );
+							} }
+							value={ columnMinWidth }
+							units={ units }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />
@@ -277,6 +300,10 @@ const ColumnsEdit = ( props ) => {
 		? ColumnsEditContainerWrapper
 		: Placeholder;
 
+	props.style = props?.attributes?.columnMinWidth
+		? `--wp--columns-min-width:${ props.attributes.columnMinWidth }`
+		: null;
+
 	return <Component { ...props } />;
 };
 

packages/block-library/src/columns/editor.scss

@@ -6,21 +6,6 @@
 	margin-right: 0;
 }
 
-// To do: remove horizontal margin override by the editor.
-@include break-small() {
-	.editor-styles-wrapper
-	.block-editor-block-list__block.wp-block-column:nth-child(even) {
-		margin-left: $grid-unit-20 * 2;
-	}
-}
-
-@include break-medium() {
-	.editor-styles-wrapper
-	.block-editor-block-list__block.wp-block-column:not(:first-child) {
-		margin-left: $grid-unit-20 * 2;
-	}
-}
-
 // Individual columns do not have top and bottom margins on the frontend.
 // So we make the editor match that.
 // Needs specificity.

packages/block-library/src/columns/save.js

@@ -9,15 +9,20 @@ import classnames from 'classnames';
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { isStackedOnMobile, verticalAlignment } = attributes;
+	const { isStackedOnMobile, verticalAlignment, columnMinWidth } = attributes;
 
 	const className = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
 
+	const styles =
+		columnMinWidth && isStackedOnMobile
+			? `--wp--columns-min-width:${ columnMinWidth };`
+			: null;
+
 	return (
-		<div { ...useBlockProps.save( { className } ) }>
+		<div { ...useBlockProps.save( { className } ) } style={ styles }>
 			<InnerBlocks.Content />
 		</div>
 	);

packages/block-library/src/columns/style.scss

@@ -5,10 +5,7 @@
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;
-
-	@include break-medium() {
-		flex-wrap: nowrap;
-	}
+	gap: 1.75em 2em;
 
 	&.has-background {
 		padding: $block-bg-padding--v $block-bg-padding--h;
@@ -30,74 +27,11 @@
 	}
 
 	&:not(.is-not-stacked-on-mobile) > .wp-block-column {
-		@media (max-width: #{ ($break-small - 1) }) {
-			// Responsiveness: Show at most one columns on mobile. This must be
-			// important since the Column assigns its own width as an inline style.
-			flex-basis: 100% !important;
-		}
-
-		// Between mobile and large viewports, allow 2 columns.
-		@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
-			// Only add two column styling if there are two or more columns
-			&:not(:only-child) {
-				// As with mobile styles, this must be important since the Column
-				// assigns its own width as an inline style, which should take effect
-				// starting at `break-medium`.
-				flex-basis: calc(50% - 1em) !important;
-				flex-grow: 0;
-			}
-
-			// Add space between the multiple columns. Themes can customize this if they wish to work differently.
-			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
-			&:nth-child(even) {
-				margin-left: 2em;
-			}
-		}
-
-		// At large viewports, show all columns horizontally.
-		@include break-medium() {
-			// Available space should be divided equally amongst columns without an
-			// assigned width. This is achieved by assigning a flex basis that is
-			// consistent (equal), would not cause the sum total of column widths to
-			// exceed 100%, and which would cede to a column with an assigned width.
-			// The `flex-grow` allows columns to maximally and equally occupy space
-			// remaining after subtracting the space occupied by columns with
-			// explicit widths (if any exist).
-			flex-basis: 0;
-			flex-grow: 1;
-
-			// Columns with an explicitly-assigned width should maintain their
-			// `flex-basis` width and not grow.
-			&[style*="flex-basis"] {
-				flex-grow: 0;
-			}
-
-			// When columns are in a single row, add space before all except the first.
-			&:not(:first-child) {
-				margin-left: 2em;
-			}
-		}
+		min-width: var(--wp--columns-min-width, min-content);
 	}
 
 	&.is-not-stacked-on-mobile {
 		flex-wrap: nowrap;
-
-		> .wp-block-column {
-			// Available space should be divided equally amongst columns.
-			flex-basis: 0;
-			flex-grow: 1;
-
-			// Columns with an explicitly-assigned width should maintain their
-			// `flex-basis` width and not grow.
-			&[style*="flex-basis"] {
-				flex-grow: 0;
-			}
-
-			// When columns are in a single row, add space before all except the first.
-			&:not(:first-child) {
-				margin-left: 2em;
-			}
-		}
 	}
 }