From 6f63dc315ed864b3007b9ba8b6e8892f249039cb Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 18 Mar 2020 18:19:57 +0100 Subject: [PATCH] Try: Nicer block footprint for social links. (#20978) * Try: Nicer block footprint for social links. * Address feedback --- .../src/social-links/editor.scss | 38 ++++--------------- 1 file changed, 7 insertions(+), 31 deletions(-) diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 65779b881cf83..878bd952a1186 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -15,41 +15,10 @@ // @todo: eventually we may add a feature that lets a parent container absorb the block UI of a child block. // When that happens, leverage that instead of the following overrides. [data-type="core/social-links"] { - // 1. Reset margins on immediate innerblocks container. - .wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout { - margin-left: 0; - margin-right: 0; - } - - // 2. Remove paddings on subsequent immediate children. .wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block { - width: auto; - padding-left: 0; - padding-right: 0; - margin-left: 0; - margin-right: 0; margin-top: 0; margin-bottom: 0; } - - // 3. Minimize the block outlines. - .wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block::before { - border-right: none; - border-top: none; - border-bottom: none; - } - - // 4. Remove the dashed outlines for child blocks. - &.is-selected .wp-block-social-links .block-editor-block-list__block::before, - &.has-child-selected .wp-block-social-links .block-editor-block-list__block::before { - border-color: transparent !important; // !important used to keep the selector from growing any more complex. - } - - // Hide the mover. - // Hide the sibling inserter. - .wp-block-social-links .block-editor-block-list__insertion-point { // Needs specificity. - display: none; - } } // Polish the Appender. @@ -114,3 +83,10 @@ // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } + +// To ensure a better selection footprint when editing, attach the margin to the block container. +// @todo: This can very probably be removed entirely when this block receives a lighter DOM. +.is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block[data-type="core/social-link"].is-selected::after, +.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/social-link"]:not([contenteditable]):focus::after { + right: 8px; +}