Testing out an approach similar to the gallery block #38164

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/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,73 @@
+<?php
+
+/**
+ * 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 . ';}';
+	// Ideally styles should be loaded in the head, but blocks may be parsed
+	// after that, so loading in the footer for now.
+	// See https://core.trac.wordpress.org/ticket/53494.
+	add_action(
+		'wp_footer',
+		function () use ( $style ) {
+			echo '<style> ' . $style . '</style>';
+		}
+	);
+	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

@@ -43,9 +43,8 @@
 				// 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: if the columns block has a style.spacing.blockGap value of > var(--wp--style--block-gap, 2em) this effect will not show.
-				// What would make this particular definition more robust is if we could do the following dynamically: ( var(--wp--style--block-gap, 2em) + style.spacing.blockGap )
-				flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) / 2)) !important;
+				// 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;
 			}
 		}