Columns: Try adding a columnsOnTablet attribute to control tablet breakpoint

docs/reference-guides/core-blocks.md

@@ -105,7 +105,7 @@ Display content in multiple columns, with blocks added to each column. ([Source]
 -	**Name:** core/columns
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), ~~html~~
--	**Attributes:** isStackedOnMobile, verticalAlignment
+-	**Attributes:** columnsOnTablet, isStackedOnMobile, verticalAlignment
 
 ## Comment Author Avatar (deprecated)
 

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

@@ -7,6 +7,10 @@
 	"description": "Display content in multiple columns, with blocks added to each column.",
 	"textdomain": "default",
 	"attributes": {
+		"columnsOnTablet": {
+			"type": "number",
+			"default": 1
+		},
 		"verticalAlignment": {
 			"type": "string"
 		},

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

@@ -59,7 +59,11 @@ function ColumnsEditContainer( {
 	updateColumns,
 	clientId,
 } ) {
-	const { isStackedOnMobile, verticalAlignment } = attributes;
+	const {
+		columnsOnTablet,
+		isStackedOnMobile,
+		verticalAlignment,
+	} = attributes;
 
 	const { count } = useSelect(
 		( select ) => {
@@ -73,6 +77,7 @@ function ColumnsEditContainer( {
 	const classes = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
+		[ `tablet-columns-${ columnsOnTablet || 1 }` ]: !! isStackedOnMobile,
 	} );
 
 	const blockProps = useBlockProps( {
@@ -108,6 +113,17 @@ function ColumnsEditContainer( {
 							) }
 						</Notice>
 					) }
+					{ isStackedOnMobile && (
+						<RangeControl
+							label={ __( 'Columns at tablet screen sizes' ) }
+							value={ columnsOnTablet || 1 }
+							onChange={ ( value ) =>
+								setAttributes( { columnsOnTablet: value } )
+							}
+							min={ 1 }
+							max={ count } // Ensure user can't select more columns than there are.
+						/>
+					) }
 					<ToggleControl
 						label={ __( 'Stack on mobile' ) }
 						checked={ isStackedOnMobile }

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

@@ -9,11 +9,16 @@ import classnames from 'classnames';
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { isStackedOnMobile, verticalAlignment } = attributes;
+	const {
+		columnsOnTablet,
+		isStackedOnMobile,
+		verticalAlignment,
+	} = attributes;
 
 	const className = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
+		[ `tablet-columns-${ columnsOnTablet || 1 }` ]: !! isStackedOnMobile,
 	} );
 
 	const blockProps = useBlockProps.save( { className } );

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

@@ -29,29 +29,46 @@
 		align-items: flex-end;
 	}
 
-	&:not(.is-not-stacked-on-mobile) > .wp-block-column {
-		@media (max-width: #{ ($break-medium - 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;
+	&:not(.is-not-stacked-on-mobile) {
+		@media (max-width: #{ ($break-small - 1) }) {
+			> .wp-block-column {
+				// 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 (tablet), allow specific number of columns.
+		@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
+
+			@for $i from 1 through 6 {
+				&.tablet-columns-#{ $i } {
+					> .wp-block-column {
+						// width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));
+						flex-basis: calc((100% / #{ $i }) - calc(var(--wp--style--block-gap, 2em) + var(--wp--style--unstable-columns-gap, 0em) / 2)) !important;
+					}
+				}
+			}
 		}
 
 		// 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;
+			> .wp-block-column {
+				// 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;
+				}
 			}
 		}
 	}