diff --git a/lib/blocks.php b/lib/blocks.php index b92a656513714..5ded43de1bf73 100644 --- a/lib/blocks.php +++ b/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', diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index f3bc49d3d2497..6d54c96474c06 100644 --- a/packages/block-library/src/columns/block.json +++ b/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", diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 542bd32f3ae9f..4ad76fb4f8618 100644 --- a/packages/block-library/src/columns/edit.js +++ b/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 */ diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 76ce4d3c97c22..416dc5b20bbb1 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/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 }); } } diff --git a/packages/block-library/src/columns/index.php b/packages/block-library/src/columns/index.php new file mode 100644 index 0000000000000..67a928ad95c29 --- /dev/null +++ b/packages/block-library/src/columns/index.php @@ -0,0 +1,74 @@ +]+ 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' ); diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index dc744f46eb2db..21dcc91246d0f 100644 --- a/packages/block-library/src/columns/style.scss +++ b/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); } }