From f67b630c1691fd394ff3c9321e8312545f0f3c77 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 11 Jun 2019 09:54:00 +0200 Subject: [PATCH] Fix horizontal scrollbar on full-wide blocks with nesting. This fixes #15192. This PR fixes two issues: 1. There was an issue, probably rebase related, where the columns block had CSS to prevent horizontal scrollbars when fullwide, but which didn't work anymore. I simply fixed the selector again. 2. The recent merge of the clickthrough PR failed to take into account fullwide blocks with nesting, and caused a horizontal scrollbar due to the overlay extending beyond the canvas. To test this PR, please verify that full wide alignments work as intended. You can test columns, image, embed, media & text. Please also verify that blocks with nesting work as intended, both in fullwide and not wide situations. --- .../block-editor/src/components/inner-blocks/style.scss | 8 ++++++++ packages/block-library/src/columns/editor.scss | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss index 61ed91c42ac02..ff8e4b9adbe96 100644 --- a/packages/block-editor/src/components/inner-blocks/style.scss +++ b/packages/block-editor/src/components/inner-blocks/style.scss @@ -1,3 +1,5 @@ +// Add clickable overlay to blocks with nesting. +// This makes it easy to select all layers of the block. .block-editor-inner-blocks.has-overlay { &::after { content: ""; @@ -9,3 +11,9 @@ z-index: z-index(".block-editor-inner-blocks.has-overlay::after"); } } + +// On fullwide blocks, don't go beyond the canvas. +[data-align="full"] > .editor-block-list__block-edit > [data-block] .has-overlay::after { + right: 0; + left: 0; +} diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index f8780b91ebab5..6e9e2e6065911 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -21,7 +21,7 @@ // Fullwide: show margin left/right to ensure there's room for the side UI. // This is not a 1:1 preview with the front-end where these margins would presumably be zero. -.editor-block-list__block[data-align="full"] [data-type="core/columns"][data-align="full"] .wp-block-columns > .editor-inner-blocks { +[data-type="core/columns"][data-align="full"] .wp-block-columns > .editor-inner-blocks { padding-left: $block-padding; padding-right: $block-padding;