WIP - Auto-wrapping columns (no breakpoints)

docs/reference-guides/core-blocks.md

@@ -51,7 +51,7 @@ Prompt visitors to take action with a group of button-style links.
 -	**Name:** core/buttons
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, spacing (blockGap, margin)
--	**Attributes:** 
+-	**Attributes:**
 
 ## Calendar
 
@@ -96,7 +96,7 @@ Display content in multiple columns, with blocks added to each column.
 -	**Name:** core/columns
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), ~~html~~
--	**Attributes:** isStackedOnMobile, verticalAlignment
+-	**Attributes:** isStackedOnMobile, verticalAlignment, verticalAlignment
 
 ## Comment Author Avatar
 
@@ -159,7 +159,7 @@ Contains the block elements used to render a comment, like the title, date, auth
 -	**Name:** core/comment-template
 -	**Category:** design
 -	**Supports:** align, ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Comments Pagination
 
@@ -186,7 +186,7 @@ Displays a list of page numbers for comments pagination.
 -	**Name:** core/comments-pagination-numbers
 -	**Category:** theme
 -	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Comments Query Loop
 
@@ -393,7 +393,7 @@ Separate your content into a multi-page experience.
 -	**Name:** core/nextpage
 -	**Category:** design
 -	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Page List
 
@@ -483,7 +483,7 @@ Displays the contents of a post or page.
 -	**Name:** core/post-content
 -	**Category:** theme
 -	**Supports:** align (full, wide), ~~html~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Post Date
 
@@ -528,7 +528,7 @@ Contains the block elements used to render a post, like the title, date, feature
 -	**Name:** core/post-template
 -	**Category:** design
 -	**Supports:** align, ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Post Terms
 
@@ -600,7 +600,7 @@ Displays a list of page numbers for pagination
 -	**Name:** core/query-pagination-numbers
 -	**Category:** design
 -	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Attributes:**
 
 ## Previous Page
 

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

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

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

@@ -13,6 +13,8 @@ import {
 	PanelBody,
 	RangeControl,
 	ToggleControl,
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 
 import {
@@ -59,7 +61,7 @@ function ColumnsEditContainer( {
 	updateColumns,
 	clientId,
 } ) {
-	const { isStackedOnMobile, verticalAlignment } = attributes;
+	const { isStackedOnMobile, verticalAlignment, columnMinWidth } = attributes;
 
 	const { count } = useSelect(
 		( select ) => {
@@ -83,6 +85,9 @@ function ColumnsEditContainer( {
 		orientation: 'horizontal',
 		renderAppender: false,
 	} );
+	const units = useCustomUnits( {
+		availableUnits: [ '%', 'px', 'em', 'rem', 'vw' ],
+	} );
 
 	return (
 		<>
@@ -117,6 +122,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 } />
@@ -276,8 +298,15 @@ const ColumnsEdit = ( props ) => {
 	const Component = hasInnerBlocks
 		? ColumnsEditContainerWrapper
 		: Placeholder;
+	const style = `--wp--columns-min-width:${
+		props?.attributes?.columnMinWidth || '200px'
+	}`;
+	const propsWithStyle = {
+		...props,
+		style,
+	};
 
-	return <Component { ...props } />;
+	return <Component { ...propsWithStyle } />;
 };
 
 export default ColumnsEdit;

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

@@ -8,21 +8,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: var(--wp--style--block-gap, 2em);
-	}
-}
-
-@include break-medium() {
-	.editor-styles-wrapper
-	.block-editor-block-list__block.wp-block-column:not(:first-child) {
-		margin-left: var(--wp--style--block-gap, 2em);
-	}
-}
-
 // Individual columns do not have top and bottom margins on the frontend.
 // So we make the editor match that.
 // We use :where to provide minimum specificity, so that intentional margins,

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

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { useInnerBlocksProps, 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,
@@ -18,6 +18,9 @@ export default function save( { attributes } ) {
 
 	const blockProps = useBlockProps.save( { className } );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
-
-	return <div { ...innerBlocksProps } />;
+	const styles =
+		columnMinWidth && isStackedOnMobile
+			? `--wp--columns-min-width:${ columnMinWidth };`
+			: null;
+	return <div { ...innerBlocksProps } style={ styles } />;
 }

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;
 
 	/**
 	* All Columns Alignment
@@ -26,53 +23,7 @@
 	}
 
 	&: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% - calc(var(--wp--style--block-gap, 2em) / 2)) !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: var(--wp--style--block-gap, 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: var(--wp--style--block-gap, 2em);
-			}
-		}
+		min-width: var(--wp--columns-min-width, min-content);
 	}
 
 	&.is-not-stacked-on-mobile {