Columns block: reinstate tablet 2 col stacking

lib/blocks.php

@@ -20,7 +20,6 @@ function gutenberg_reregister_core_block_types() {
 				'freeform',
 				'code',
 				'column',
-				'columns',
 				'comments',
 				'group',
 				'heading',
@@ -51,6 +50,7 @@ function gutenberg_reregister_core_block_types() {
 				'calendar.php'                     => 'core/calendar',
 				'categories.php'                   => 'core/categories',
 				'cover.php'                        => 'core/cover',
+				'columns.php'                      => 'core/columns',
 				'comment-author-avatar.php'        => 'core/comment-author-avatar',
 				'comment-author-name.php'          => 'core/comment-author-name',
 				'comment-content.php'              => 'core/comment-content',

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

@@ -59,6 +59,14 @@
 			}
 		}
 	},
+	"styles": [
+		{
+			"name": "regular",
+			"label": "Default",
+			"isDefault": true
+		},
+		{ "name": "tablet-stack", "label": "Tablet stack" }
+	],
 	"editorStyle": "wp-block-columns-editor",
 	"style": "wp-block-columns"
 }

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

@@ -30,6 +30,7 @@ import {
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
 } from '@wordpress/blocks';
+import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -40,6 +41,7 @@ import {
 	getRedistributedColumnWidths,
 	toWidthPrecision,
 } from './utils';
+import GapStyles from './gap-styles';
 
 /**
  * Allowed blocks constant is passed to InnerBlocks precisely as specified here.
@@ -92,6 +94,12 @@ function ColumnsEditContainer( {
 					value={ verticalAlignment }
 				/>
 			</BlockControls>
+			{ Platform.isWeb && (
+				<GapStyles
+					blockGap={ attributes.style?.spacing?.blockGap }
+					clientId={ clientId }
+				/>
+			) }
 			<InspectorControls>
 				<PanelBody>
 					<RangeControl

packages/block-library/src/columns/gap-styles.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockList } from '@wordpress/block-editor';
+import { useContext, createPortal } from '@wordpress/element';
+
+export default function GapStyles( { blockGap, clientId } ) {
+	const styleElement = useContext( BlockList.__unstableElementContext );
+
+	if ( ! blockGap ) {
+		return null;
+	}
+
+	// Check for the possibility of split block gap values. See: https://github.com/WordPress/gutenberg/pull/37736.
+	const gapValue = typeof blockGap === 'string' ? blockGap : blockGap?.left;
+
+	if ( ! gapValue ) {
+		return null;
+	}
+
+	const gap = `#block-${ clientId } { 
+		--wp--style--unstable-columns-gap: ${ gapValue };
+	}`;
+
+	const GapStyle = () => {
+		return <style>{ gap }</style>;
+	};
+
+	return gap && styleElement
+		? createPortal( <GapStyle />, styleElement )
+		: null;
+}

packages/block-library/src/columns/index.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * Server-side rendering of the `core/columns` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Adds a style tag for the --wp--style--unstable-columns-gap var.
+ *
+ * The Columns block requires the block's spacing blockGap value in order to calculate the 2 column offset in tablet viewport.
+ *
+ * @param array  $attributes Attributes of the block being rendered.
+ * @param string $content Content of the block being rendered.
+ * @return string The content of the block being rendered.
+ */
+function block_core_columns_render( $attributes, $content ) {
+	$gap_value = _wp_array_get( $attributes, array( 'style', 'spacing', 'blockGap' ), null );
+
+	if ( ! $gap_value ) {
+		return $content;
+	}
+
+	// Skip if gap value contains unsupported characters.
+	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
+	// because we only want to match against the value, not the CSS attribute.
+	if ( is_array( $gap_value ) ) {
+		foreach ( $gap_value as $key => $value ) {
+			$gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
+		}
+	} else {
+		$gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
+	}
+
+	// The gap value can be a string value or a split top/left value. For the columns we want `left` which equates to gap-column.
+	// See: https://github.com/WordPress/gutenberg/pull/37736.
+	if ( is_array( $gap_value ) ) {
+		$gap_value = isset( $gap_value['left'] ) ? $gap_value['left'] : null;
+	}
+
+	if ( ! $gap_value ) {
+		return $content;
+	}
+
+	$class   = wp_unique_id( 'wp-block-columns-' );
+	$content = preg_replace(
+		'/' . preg_quote( 'class="', '/' ) . '/',
+		'class="' . $class . ' ',
+		$content,
+		1
+	);
+
+	$style = '.' . $class . '{ --wp--style--unstable-columns-gap: ' . $gap_value . ';}';
+	gutenberg_enqueue_block_support_styles( $style, 11 );
+	return $content;
+}
+
+/**
+ * Registers the `core/columns` block on server.
+ */
+function register_block_core_columns() {
+	register_block_type_from_metadata(
+		__DIR__ . '/columns',
+		array(
+			'render_callback' => 'block_core_columns_render',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_columns' );

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

@@ -56,6 +56,23 @@
 		}
 	}
 
+	&.is-style-tablet-stack:not(.is-not-stacked-on-mobile) > .wp-block-column {
+		@media (max-width: #{ ($break-small - 1) }) {
+			flex-basis: 100% !important;
+		}
+		// Between mobile and large viewports (tablet), 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`.
+				// Note: to calculate the offset we have to add the root block gap value with any block support spacing value (stored in --wp--style--unstable-columns-gap).
+				flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) + var(--wp--style--unstable-columns-gap, 0em) / 2)) !important;
+			}
+		}
+	}
+
 	&.is-not-stacked-on-mobile {
 		flex-wrap: nowrap !important;