From d9cb56caff47c320bb6efff1c50f541aa0cb45cc Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 6 Jan 2022 08:07:52 +1100 Subject: [PATCH] Columns: Avoid using CSS variables for block gap styles (#37436) * Initial commit Co-authored-by: Ramon * Fix vertical alignment issue, try to find a compromise with tablet viewport sizes * Remove tablet break * Hide the layout controls so that we can reconcile the discrepancies between layout support styles and columns stack on mobile styles. The layout controls are not shown on trunk, and there is some confusion between multiple lines wrap (layout) vs stack on mobile (columns) options. In order to override the layout support flex-wrap styles, we do need `!important` on our wrap/nowrap declarations. * Update style.scss Reverting break-small change * Reinstate blockGap support for the columns block. Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: Ben Dwyer --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/columns/block.json | 10 +++++ .../block-library/src/columns/editor.scss | 15 ------- packages/block-library/src/columns/style.scss | 40 ++++--------------- 4 files changed, 19 insertions(+), 48 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 4266df31b1ef00..f62f5c6e3f1869 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -95,7 +95,7 @@ Display content in multiple columns, with blocks added to each column. - **Name:** core/columns - **Category:** design -- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), ~~html~~ +- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), ~~html~~ - **Attributes:** isStackedOnMobile, verticalAlignment ## Comment Author Avatar diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index c556d90a0d2d25..4481afdb82a4b9 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -24,11 +24,21 @@ "link": true }, "spacing": { + "blockGap": true, "margin": [ "top", "bottom" ], "padding": true, "__experimentalDefaultControls": { "padding": true } + }, + "__experimentalLayout": { + "allowSwitching": false, + "allowInheriting": false, + "allowEditing": false, + "default": { + "type": "flex", + "flexWrap": "nowrap" + } } }, "editorStyle": "wp-block-columns-editor", diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 66a0bd337175e5..c34e65576e4f48 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -8,21 +8,6 @@ margin-right: 0; } -// To do: remove horizontal margin override by the editor. -@include break-small() { - .editor-styles-wrapper - .block-editor-block-list__block.wp-block-column:nth-child(even) { - margin-left: var(--wp--style--block-gap, 2em); - } -} - -@include break-medium() { - .editor-styles-wrapper - .block-editor-block-list__block.wp-block-column:not(:first-child) { - margin-left: var(--wp--style--block-gap, 2em); - } -} - // Individual columns do not have top and bottom margins on the frontend. // So we make the editor match that. // We use :where to provide minimum specificity, so that intentional margins, diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 8a120282f0da09..eb7e7d18072044 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -4,12 +4,16 @@ box-sizing: border-box; // Responsiveness: Allow wrapping on mobile. - flex-wrap: wrap; + flex-wrap: wrap !important; @include break-medium() { - flex-wrap: nowrap; + flex-wrap: nowrap !important; } + // Ensure full vertical column stretch when alignment is not set. + // This overrides the Layout block support's default align-items setting of `center`. + align-items: initial !important; + /** * All Columns Alignment */ @@ -26,30 +30,12 @@ } &:not(.is-not-stacked-on-mobile) > .wp-block-column { - @media (max-width: #{ ($break-small - 1) }) { + @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; } - // Between mobile and large viewports, 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`. - flex-basis: calc(50% - calc(var(--wp--style--block-gap, 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: var(--wp--style--block-gap, 2em); - } - } - // At large viewports, show all columns horizontally. @include break-medium() { // Available space should be divided equally amongst columns without an @@ -67,16 +53,11 @@ &[style*="flex-basis"] { flex-grow: 0; } - - // When columns are in a single row, add space before all except the first. - &:not(:first-child) { - margin-left: var(--wp--style--block-gap, 2em); - } } } &.is-not-stacked-on-mobile { - flex-wrap: nowrap; + flex-wrap: nowrap !important; > .wp-block-column { // Available space should be divided equally amongst columns. @@ -88,11 +69,6 @@ &[style*="flex-basis"] { flex-grow: 0; } - - // When columns are in a single row, add space before all except the first. - &:not(:first-child) { - margin-left: var(--wp--style--block-gap, 2em); - } } } }