[WIP] Columns: Add custom gutters via margin support and dynamic columns block

lib/blocks.php

@@ -53,6 +53,7 @@ function gutenberg_reregister_core_block_types() {
 				'block.php'                     => 'core/block',
 				'calendar.php'                  => 'core/calendar',
 				'categories.php'                => 'core/categories',
+				'columns.php'                   => 'core/columns',
 				'file.php'                      => 'core/file',
 				'latest-comments.php'           => 'core/latest-comments',
 				'latest-posts.php'              => 'core/latest-posts',

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

@@ -17,6 +17,10 @@
 		"color": {
 			"gradients": true,
 			"link": true
+		},
+		"spacing": {
+			"margin": [ "left" ],
+			"__experimentalSkipSerialization": true
 		}
 	},
 	"editorStyle": "wp-block-columns-editor",

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

@@ -53,7 +53,7 @@ function ColumnsEditContainer( {
 	updateColumns,
 	clientId,
 } ) {
-	const { verticalAlignment } = attributes;
+	const { style, verticalAlignment } = attributes;
 
 	const { count } = useSelect(
 		( select ) => {
@@ -68,8 +68,18 @@ function ColumnsEditContainer( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
+	const marginValues = style?.spacing?.margin;
+
+	const styles = {
+		[ `--wp-block-columns--margin-top` ]: marginValues?.top,
+		[ `--wp-block-columns--margin-right` ]: marginValues?.right,
+		[ `--wp-block-columns--margin-bottom` ]: marginValues?.bottom,
+		[ `--wp-block-columns--margin-left` ]: marginValues?.left,
+	};
+
 	const blockProps = useBlockProps( {
 		className: classes,
+		style: styles,
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
@@ -113,7 +123,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 		/**
 		 * Update all child Column blocks with a new vertical alignment setting
 		 * based on whatever alignment is passed in. This allows change to parent
-		 * to overide anything set on a individual column basis.
+		 * to override anything set on a individual column basis.
 		 *
 		 * @param {string} verticalAlignment the vertical alignment setting
 		 */

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

@@ -10,14 +10,14 @@
 @include break-small() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:nth-child(even) {
-		margin-left: $grid-unit-20 * 2;
+		margin-left: var(--wp-block-columns--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;
+		margin-left: var(--wp-block-columns--margin-left, #{ $grid-unit-20 * 2 });
 	}
 }
 

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

@@ -0,0 +1,74 @@
+<?php
+/**
+ * Server-side rendering of the `core/columns` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Dynamically renders the `core/columns` block.
+ *
+ * @param  array  $attributes The block attributes.
+ * @param  string $content    The saved block content.
+ *
+ * @return string The columns block markup.
+ */
+function render_block_core_columns( $attributes, $content ) {
+	$has_margins = ! empty( $attributes['style']['spacing']['margin'] );
+
+	if ( ! $has_margins ) {
+		return $content;
+	}
+
+	$css_variables = css_vars_for_block_core_columns( $attributes );
+
+	// Add CSS vars for margins. This is to allow CSS media queries to take into
+	// account the margins when setting flex-basis for the columns.
+	$match = preg_match( '/^(<[^>]+ style=".*?)(".*>.*)/', $content, $matches );
+
+	if ( $match ) {
+		// Style attribute is present, add CSS variables to it.
+		return $matches[1] . ' ' . $css_variables . $matches[2];
+	}
+
+	// No style present on root columns element. Add one with CSS vars.
+	$style = 'style="' . $css_variables . ' "';
+
+	return preg_replace( '/>/', $style . '$0', $content, 1 );
+}
+
+/**
+ * Builds CSS variables to be applied via inline styles for the columns block.
+ *
+ * @param array $attributes The Columns block attributes.
+ * @return string           CSS variables for use within inline styles.
+ */
+function css_vars_for_block_core_columns( $attributes ) {
+	$css_variables = array();
+	$margin_path   = array( 'style', 'spacing', 'margin' );
+	$margins       = _wp_array_get( $attributes, $margin_path, array() );
+
+	foreach ( $margins as $side => $value ) {
+		$css_variables[] = sprintf(
+			'--wp-block-columns--margin-%s:%s;',
+			$side,
+			$value
+		);
+	}
+
+	return implode( '', $css_variables );
+}
+
+/**
+ * Registers the `core/columns` block on the server.
+ */
+function register_block_core_columns() {
+	register_block_type_from_metadata(
+		__DIR__ . '/columns',
+		array(
+			'render_callback' => 'render_block_core_columns',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_columns' );

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

@@ -32,6 +32,7 @@
 
 .wp-block-column {
 	flex-grow: 1;
+	box-sizing: border-box;
 
 	@media (max-width: #{ ($break-small - 1) }) {
 		// Responsiveness: Show at most one columns on mobile. This must be
@@ -53,14 +54,14 @@
 			// 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-basis: calc(50% - (var(--wp-block-columns--margin-left, 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: 2em;
+			margin-left: var(--wp-block-columns--margin-left, 2em);
 		}
 	}
 
@@ -84,7 +85,7 @@
 
 		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
-			margin-left: 2em;
+			margin-left: var(--wp-block-columns--margin-left, 2em);
 		}
 	}