From 2dc4611527ad0842bdf57ea4851b763a2ded82f0 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 1 Sep 2021 10:36:37 -0400 Subject: [PATCH 1/3] Replace 1em and 2em with var(--wp--style--block-gap) appropriately --- packages/block-library/src/columns/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index aba4c99297a19..0eab669711046 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -43,14 +43,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% - calc(var(--wp--style--block-gap) / 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--style--block-gap); } } @@ -74,7 +74,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--style--block-gap); } } } @@ -95,7 +95,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--style--block-gap); } } } From 8fd8529587127a6f3bdd39a4ff102d2b52466fad Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 2 Sep 2021 21:08:04 -0400 Subject: [PATCH 2/3] Use var(--wp--style--block-gap) in editor styles for cols --- 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 bb84ad88a6623..ca9e93df4d726 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -12,14 +12,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--style--block-gap); } } @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--style--block-gap); } } From 98c551c3a02fc770ab28559b65f0392b03f0d33c Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Fri, 3 Sep 2021 10:54:22 -0400 Subject: [PATCH 3/3] Add 2em fallback --- packages/block-library/src/columns/editor.scss | 4 ++-- packages/block-library/src/columns/style.scss | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index ca9e93df4d726..de64661b46b4b 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -12,14 +12,14 @@ @include break-small() { .editor-styles-wrapper .block-editor-block-list__block.wp-block-column:nth-child(even) { - margin-left: var(--wp--style--block-gap); + 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); + margin-left: var(--wp--style--block-gap, 2em); } } diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 0eab669711046..acd1d713385bd 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -43,14 +43,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% - calc(var(--wp--style--block-gap) / 2)) !important; + 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); + margin-left: var(--wp--style--block-gap, 2em); } } @@ -74,7 +74,7 @@ // When columns are in a single row, add space before all except the first. &:not(:first-child) { - margin-left: var(--wp--style--block-gap); + margin-left: var(--wp--style--block-gap, 2em); } } } @@ -95,7 +95,7 @@ // When columns are in a single row, add space before all except the first. &:not(:first-child) { - margin-left: var(--wp--style--block-gap); + margin-left: var(--wp--style--block-gap, 2em); } } }