diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index bb84ad88a6623..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: $grid-unit-20 * 2; + 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: $grid-unit-20 * 2; + 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 aba4c99297a19..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% - 1em) !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: 2em; + 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: 2em; + 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: 2em; + margin-left: var(--wp--style--block-gap, 2em); } } }