From 1be4f5c11e1b3820c5ec5c721a556d13d51c8999 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 25 Apr 2018 13:02:23 +0200 Subject: [PATCH 1/3] Try compensating nested blocks for block padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As we make more and more blocks support nested blocks, we need to think about a way for nested blocks to compensate for their block padding. That's the 14px that surrounds the block itself, and on which the 1px selected-block border is painted. If we don't, any block that goes from non-nested blocks to nested blocks will suddenly have an extra 14px amount of padding inside. This PR is an experiment to fix that, and adds compensation before and after any nested context. What's missing here is a fix for collapsing margins — otherwise the negative top and bottom margins will apply to the _parent_, not the nesting context. The way to fix this is to apply a padding to any context in which childrens margins should not collapse into the parent. This PR adds that to the blockquote block itself, but if we think the general approach in this PR has merit, then we should find a way to make this more generic. For example a block that has nested children, if it had a `has-children` classname, then we could simply add the padding to that. --- core-blocks/quote/editor.scss | 4 ++++ editor/components/block-list/style.scss | 11 ++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/core-blocks/quote/editor.scss b/core-blocks/quote/editor.scss index 926f5801f941b..1322abaaf9113 100644 --- a/core-blocks/quote/editor.scss +++ b/core-blocks/quote/editor.scss @@ -1,6 +1,10 @@ .wp-block-quote { margin: 0; + // compensate nested blocks for collapsing margins + padding-top: 1px; + padding-bottom: 1px; + cite { display: block; font-size: $default-font-size; diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 2f3e02146ef93..76e5b770e6ec8 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -111,10 +111,19 @@ padding-right: $block-side-ui-padding; } - // Don't add side padding for nested blocks, @todo see if this can be scoped better + // Don't add side padding for nested blocks, and compensate for block padding .editor-block-list__block & { + // compensate for side UI padding-left: 0; padding-right: 0; + + // compensate for block padding horizontally + margin-left: -$block-padding; + margin-right: -$block-padding; + + // compensate for block padding and collapsing margins vertically + margin-top: -$block-padding + 1px; + margin-top: -$block-padding + 1px; } } From 55fca8867f5ba3a2e1b602c245d5e6d555520b08 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 30 Apr 2018 12:25:47 +0200 Subject: [PATCH 2/3] Fix regression in columns. --- core-blocks/columns/editor.scss | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/core-blocks/columns/editor.scss b/core-blocks/columns/editor.scss index 87695cab379dc..6688f057ca73b 100644 --- a/core-blocks/columns/editor.scss +++ b/core-blocks/columns/editor.scss @@ -2,6 +2,9 @@ // This is sort of an experiment at making sure the editor looks as much like the end result as possible // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere .wp-block-columns .editor-block-list__layout { + margin-left: 0; + margin-right: 0; + &:first-child { margin-left: -$block-padding; } @@ -15,16 +18,6 @@ } } -// Wide: show no left/right margin on wide, so they stack with the column side UI -.editor-block-list__block[data-align="wide"] .wp-block-columns .editor-block-list__layout { - &:first-child { - margin-left: 0; - } - &:last-child { - margin-right: 0; - } -} - // 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 // @todo this could be revisited, by for example showing this margin only when the parent block was selected first From d08b459445defe4025f58860197a9c330d614f41 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 4 Jun 2018 08:23:00 +0200 Subject: [PATCH 3/3] Remove Quote specific styles. --- core-blocks/quote/editor.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/core-blocks/quote/editor.scss b/core-blocks/quote/editor.scss index 1322abaaf9113..926f5801f941b 100644 --- a/core-blocks/quote/editor.scss +++ b/core-blocks/quote/editor.scss @@ -1,10 +1,6 @@ .wp-block-quote { margin: 0; - // compensate nested blocks for collapsing margins - padding-top: 1px; - padding-bottom: 1px; - cite { display: block; font-size: $default-font-size;