From 89a9859e172914383f37fde2ffb25771aba1cac1 Mon Sep 17 00:00:00 2001 From: Marty Helmick Date: Wed, 21 Nov 2018 15:36:42 -0500 Subject: [PATCH 1/8] Remove unintentional right-margin on last odd-item. Looks like it wasn't intended to for the last column to have a `right-margin`, but the `:not(:last-child)` used here would only "not add" the margin. It didn't remove it if the column was odd numbered. This simplifies the logic and adds right and left margin to all columns but removes it from first-left and last-right. I also replaced the `flex: 1;` property with `flex-grow: 1;`. `flex: 1` is = to `flex-grow: 1; flex-shrink: 1; flex-basis: 0;` In this case `flex-shrink` keeps it's default value of `1` and `flex-basis` overwritten and is set to `100%` a couple lines after. So `flex-grow` is all we need. --- packages/block-library/src/columns/style.scss | 33 ++++++++----------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 90c61ea5acb0ff..0991c8a3b20a7d 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -10,18 +10,12 @@ } .wp-block-column { - flex: 1; + flex-grow: 1; margin-bottom: 1em; // Responsiveness: Show at most one columns on mobile. flex-basis: 100%; - // Beyond mobile, allow 2 columns. - @include break-small() { - flex-basis: 50%; - flex-grow: 0; - } - // Prevent the columns from growing wider than their distributed sizes. min-width: 0; @@ -29,22 +23,23 @@ word-break: break-word; // For back-compat. overflow-wrap: break-word; // New standard. - // Add space between 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. @include break-small() { - &:nth-child(odd) { - margin-right: $grid-size-large * 2; - } - &:nth-child(even) { - margin-left: $grid-size-large * 2; - } - &:not(:first-child) { - margin-left: $grid-size-large * 2; + // Beyond mobile, allow 2 columns. + flex-basis: 50%; + flex-grow: 0; + + // Add space between 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. + margin-right: $grid-size-large * 2; + margin-left: $grid-size-large * 2; + + &:first-child { + margin-left: 0; } - &:not(:last-child) { - margin-right: $grid-size-large * 2; + &:last-child { + margin-right: 0; } } } From ce9ff9ad3b749e51bd2e9e3aa05bb907cf761e9b Mon Sep 17 00:00:00 2001 From: Marty Helmick Date: Wed, 12 Dec 2018 12:41:04 -0500 Subject: [PATCH 2/8] update editor to match style.css column margin changes --- packages/block-library/src/columns/editor.scss | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 50b21f23523313..0fcada2b41dc4d 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -97,21 +97,15 @@ // This has to match the same padding applied in style.scss. // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. @include break-small() { - &:nth-child(odd) { - margin-right: $grid-size-large * 2; - } - &:nth-child(even) { - margin-left: $grid-size-large * 2; - } - } + margin-right: $grid-size-large * 2; + margin-left: $grid-size-large * 2; - @include break-small() { - &:not(:first-child) { - margin-left: $grid-size-large * 2; + &:first-child { + margin-left: 0; } - &:not(:last-child) { - margin-right: $grid-size-large * 2; + &:last-child { + margin-right: 0; } } } From 3930c4a29b94d960835581065ad941428a643c3b Mon Sep 17 00:00:00 2001 From: Marty Helmick Date: Thu, 13 Dec 2018 16:20:59 -0500 Subject: [PATCH 3/8] account for beginning and end margins with breakpoints --- packages/block-library/src/columns/style.scss | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 0991c8a3b20a7d..ceb4cf9f32b641 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -26,20 +26,21 @@ @include break-small() { // Beyond mobile, allow 2 columns. - flex-basis: 50%; + flex-basis: calc(50% - #{$grid-size-large}); flex-grow: 0; - // Add space between columns. Themes can customize this if they wish to work differently. + // Add space between the 2 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. - margin-right: $grid-size-large * 2; - margin-left: $grid-size-large * 2; - - &:first-child { - margin-left: 0; + &:nth-child(even) { + margin-left: $grid-size-large * 2; } + } + + @include break-medium() { - &:last-child { - margin-right: 0; + // When columns are in a single row, add space before all except the first. + &:not(:first-child) { + margin-left: $grid-size-large * 2; } } } From b28e9afbff968751781d5b78eb8aefbb7deaf138 Mon Sep 17 00:00:00 2001 From: Marty Helmick Date: Thu, 13 Dec 2018 16:34:53 -0500 Subject: [PATCH 4/8] update editor.css to match style.css --- packages/block-library/src/columns/editor.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 0fcada2b41dc4d..f9a6769f4361b4 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -89,7 +89,7 @@ // Beyond mobile, allow 2 columns. @include break-small() { - flex-basis: 50%; + flex-basis: calc(50% - #{$grid-size-large}); flex-grow: 0; } @@ -97,15 +97,15 @@ // This has to match the same padding applied in style.scss. // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. @include break-small() { - margin-right: $grid-size-large * 2; - margin-left: $grid-size-large * 2; - - &:first-child { - margin-left: 0; + &:nth-child(even) { + margin-left: $grid-size-large * 2; } + } - &:last-child { - margin-right: 0; + // When columns are in a single row, add space before all except the first. + @include break-medium() { + &:not(:first-child) { + margin-left: $grid-size-large * 2; } } } From ace6ef46394bc42ec65ab09d23302a8e750c89b7 Mon Sep 17 00:00:00 2001 From: Marty Helmick Date: Thu, 13 Dec 2018 16:54:20 -0500 Subject: [PATCH 5/8] account for editor block padding and the medium breakpoint --- packages/block-library/src/columns/editor.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index f9a6769f4361b4..ab796eb0c90701 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -35,7 +35,7 @@ // Responsiveness: Allow wrapping on mobile. flex-wrap: wrap; - @include break-small() { + @include break-medium() { flex-wrap: nowrap; } @@ -89,7 +89,7 @@ // Beyond mobile, allow 2 columns. @include break-small() { - flex-basis: calc(50% - #{$grid-size-large}); + flex-basis: calc(50% - #{$grid-size-large} - #{$block-padding * 1.5}); flex-grow: 0; } From 66ed0776401977a27c4c6de133d52fd0bcfb8187 Mon Sep 17 00:00:00 2001 From: Marty Helmick Date: Tue, 29 Jan 2019 13:40:51 -0500 Subject: [PATCH 6/8] remove whitespace --- 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 ceb4cf9f32b641..00322b0afe7997 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -35,7 +35,7 @@ margin-left: $grid-size-large * 2; } } - + @include break-medium() { // When columns are in a single row, add space before all except the first. From e8acfd027223188426902c5fd4815bb10804dfa6 Mon Sep 17 00:00:00 2001 From: Marty Helmick Date: Tue, 29 Jan 2019 17:14:28 -0500 Subject: [PATCH 7/8] account for negative margins added by the editor --- packages/block-library/src/columns/editor.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 010a547c3215bb..4df7a008cc1634 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -89,7 +89,7 @@ // Beyond mobile, allow 2 columns. @include break-small() { - flex-basis: calc(50% - #{$grid-size-large} - #{$block-padding * 1.5}); + flex-basis: calc(50% - (#{$grid-size-large * 2} + #{$block-padding})); flex-grow: 0; } @@ -98,14 +98,14 @@ // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. @include break-small() { &:nth-child(even) { - margin-left: $grid-size-large * 2; + margin-left: calc(#{$grid-size-large * 2} + #{$block-padding}); } } // When columns are in a single row, add space before all except the first. @include break-medium() { &:not(:first-child) { - margin-left: $grid-size-large * 2; + margin-left: calc(#{$grid-size-large * 2} + #{$block-padding}); } } } From 7f5fe9d2f5b16d885f3cbdd72805f31290b0ee61 Mon Sep 17 00:00:00 2001 From: Marty Helmick Date: Wed, 30 Jan 2019 15:25:47 -0500 Subject: [PATCH 8/8] correct flex-basis calculation for column width --- packages/block-library/src/columns/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 4df7a008cc1634..cadafcd2ef360b 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -89,7 +89,7 @@ // Beyond mobile, allow 2 columns. @include break-small() { - flex-basis: calc(50% - (#{$grid-size-large * 2} + #{$block-padding})); + flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2})); flex-grow: 0; }