From c127178a1c8e5600094a1ee46b3f467a2f801e40 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 25 Apr 2018 13:02:23 +0200 Subject: [PATCH] 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 | 6 +++++- editor/components/block-list/style.scss | 11 ++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/core-blocks/quote/editor.scss b/core-blocks/quote/editor.scss index e36feff5126ac..68eb9e9ca3806 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; } @@ -9,4 +13,4 @@ .wp-block-quote:not(.is-large) { border-left: 4px solid $black; padding-left: 1em; -} +} \ No newline at end of file diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 174bdf080298b..39cef9560e91a 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; } }