From c1e2c3d2262863954a12632064e69015babe0ad4 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 11 Feb 2020 09:43:18 -0500 Subject: [PATCH 1/4] Block Library: Columns: Fix equal column growth for unassigned-width columns --- packages/block-library/src/columns/editor.scss | 17 ++++++++++++----- packages/block-library/src/columns/style.scss | 17 ++++++++++++----- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index b62b3f62215143..98cce85f3f9b3c 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -66,14 +66,21 @@ // Responsiveness: Show at most one columns on mobile. flex-basis: 100%; + // Beyond mobile, allow columns. @include break-small() { + // Available space should be divided equally amongst columns + // without an assigned width. This is achieved by assigning a + // flex basis that is consistent (equal), would not cause the + // sum total of column widths to exceed 100%, and which would + // cede to a column with an assigned width. The `flex-grow` + // allows columns to maximally and equally occupy space + // remaining after subtracting the space occupied by columns + // with explicit widths (if any exist). flex-grow: 1; - flex-basis: auto; + flex-basis: 0; - // Beyond mobile, allow columns. Columns with an explicitly- - // assigned width should maintain their `flex-basis` width and - // not grow. All other blocks should automatically inherit the - // `flex-grow` to occupy the available space. + // Columns with an explicitly-assigned width should maintain + // their `flex-basis` width and not grow. &[data-has-explicit-width] { flex-grow: 0; } diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index b32377cc3522eb..244767f08874e2 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -30,12 +30,19 @@ word-break: break-word; // For back-compat. overflow-wrap: break-word; // New standard. + // Beyond mobile, allow columns. @include break-small() { - - // Beyond mobile, allow columns. Columns with an explicitly-assigned - // width should maintain their `flex-basis` width and not grow. All - // other blocks should automatically inherit the `flex-grow` to occupy - // the available space. + // Available space should be divided equally amongst columns without an + // assigned width. This is achieved by assigning a flex basis that is + // consistent (equal), would not cause the sum total of column widths to + // exceed 100%, and which would cede to a column with an assigned width. + // The inherited `flex-grow` allows columns to maximally and equally + // occupy space remaining after subtracting the space occupied by + // columns with explicit widths (if any exist). + flex-basis: 0; + + // Columns with an explicitly-assigned width should maintain their + // `flex-basis` width and not grow. &[style] { flex-grow: 0; } From de572c9a842da05b49defe4203de27b44463f555 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 11 Feb 2020 10:51:06 -0500 Subject: [PATCH 2/4] Block Library: Columns: Restore mid-range viewport styles --- .../block-library/src/columns/editor.scss | 10 +++++-- packages/block-library/src/columns/style.scss | 28 +++++++++++-------- 2 files changed, 24 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 98cce85f3f9b3c..a085c37b30c67c 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -66,8 +66,14 @@ // Responsiveness: Show at most one columns on mobile. flex-basis: 100%; - // Beyond mobile, allow columns. + // Between mobile and large viewports, allow 2 columns. @include break-small() { + flex-basis: calc(50% - (#{$grid-size-large})); + flex-grow: 0; + } + + // At large viewports, show all columns horizontally. + @include break-medium() { // Available space should be divided equally amongst columns // without an assigned width. This is achieved by assigning a // flex basis that is consistent (equal), would not cause the @@ -76,8 +82,8 @@ // allows columns to maximally and equally occupy space // remaining after subtracting the space occupied by columns // with explicit widths (if any exist). - flex-grow: 1; flex-basis: 0; + flex-grow: 1; // Columns with an explicitly-assigned width should maintain // their `flex-basis` width and not grow. diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 244767f08874e2..ca3a732b78e9be 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -32,14 +32,27 @@ // Beyond mobile, allow columns. @include break-small() { + flex-basis: calc(50% - #{$grid-size-large}); + 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: $grid-size-large * 2; + } + } + + // At large viewports, show all columns horizontally. + @include break-medium() { // Available space should be divided equally amongst columns without an // assigned width. This is achieved by assigning a flex basis that is // consistent (equal), would not cause the sum total of column widths to // exceed 100%, and which would cede to a column with an assigned width. - // The inherited `flex-grow` allows columns to maximally and equally - // occupy space remaining after subtracting the space occupied by - // columns with explicit widths (if any exist). + // The `flex-grow` allows columns to maximally and equally occupy space + // remaining after subtracting the space occupied by columns with + // explicit widths (if any exist). flex-basis: 0; + flex-grow: 1; // Columns with an explicitly-assigned width should maintain their // `flex-basis` width and not grow. @@ -47,15 +60,6 @@ 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: $grid-size-large * 2; - } - } - - @include break-medium() { - // When columns are in a single row, add space before all except the first. &:not(:first-child) { margin-left: $grid-size-large * 2; From a8c09b422d3293b0e211807ff57ed8217bec7a11 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 11 Feb 2020 11:04:24 -0500 Subject: [PATCH 3/4] Block Library: Columns: Keep margin resets in mid-range viewports Reference from prior to #19515 : https://github.com/WordPress/gutenberg/blob/7997bf66490bab0f6984a114c22ad125f04b9e89/packages/block-library/src/columns/editor.scss#L69-L75 --- packages/block-library/src/columns/editor.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index a085c37b30c67c..df272d55d360f1 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -70,6 +70,8 @@ @include break-small() { flex-basis: calc(50% - (#{$grid-size-large})); flex-grow: 0; + margin-left: 0; + margin-right: 0; } // At large viewports, show all columns horizontally. @@ -90,9 +92,6 @@ &[data-has-explicit-width] { flex-grow: 0; } - - margin-left: 0; - margin-right: 0; } // Add space between columns. Themes can customize this if they wish to work differently. From 6513be97b9fca8179c17a6738a5f9692f7746c57 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 11 Feb 2020 11:05:40 -0500 Subject: [PATCH 4/4] Block Library: Columns: Update comment to reference mid-range 2 columns --- packages/block-library/src/columns/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index ca3a732b78e9be..4eae6afb078554 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -30,7 +30,7 @@ word-break: break-word; // For back-compat. overflow-wrap: break-word; // New standard. - // Beyond mobile, allow columns. + // Between mobile and large viewports, allow 2 columns. @include break-small() { flex-basis: calc(50% - #{$grid-size-large}); flex-grow: 0;