From 4611b99d18a6b2cfd7643a4271ff8148beee671a Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 15 Jan 2021 10:39:39 -0500 Subject: [PATCH 1/3] re-add child selected border styles --- .../src/template-part/editor.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index cfdf9b310fd8a..b58a859c91573 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -89,3 +89,21 @@ box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); } } + +// Ensures a border is present when a child block is selected. +.block-editor-block-list__block[data-type="core/template-part"] { + &.has-child-selected { + &::after { + top: $border-width; + bottom: $border-width; + left: $border-width; + right: $border-width; + border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius. + box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); + + .is-dark-theme & { + box-shadow: 0 0 0 $border-width-focus $dark-theme-focus; + } + } + } +} From f6ad445a8622d928494b3d2e3af2effd6cba9da0 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 15 Jan 2021 13:00:09 -0500 Subject: [PATCH 2/3] fix selected but not focused state --- .../src/template-part/editor.scss | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index b58a859c91573..02ba2bac567fd 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -92,6 +92,7 @@ // Ensures a border is present when a child block is selected. .block-editor-block-list__block[data-type="core/template-part"] { + &.is-selected, &.has-child-selected { &::after { top: $border-width; @@ -99,11 +100,27 @@ left: $border-width; right: $border-width; border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius. - box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); + } + } + &.is-selected { + &::after { + // 2px outside. + box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color); + // Show a light color for dark themes. .is-dark-theme & { box-shadow: 0 0 0 $border-width-focus $dark-theme-focus; } } } + + &.has-child-selected { + &::after { + box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); + + .is-dark-theme & { + box-shadow: 0 0 0 $border-width $dark-theme-focus; + } + } + } } From ef60c1126d4c2eb5f6aba2bf82c4990c4b0072d0 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 15 Jan 2021 16:56:37 -0500 Subject: [PATCH 3/3] use gray-900 --- .../src/template-part/editor.scss | 22 +------------------ 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 02ba2bac567fd..af52ef32a6772 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -100,27 +100,7 @@ left: $border-width; right: $border-width; border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius. - } - } - - &.is-selected { - &::after { - // 2px outside. - box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color); - // Show a light color for dark themes. - .is-dark-theme & { - box-shadow: 0 0 0 $border-width-focus $dark-theme-focus; - } - } - } - - &.has-child-selected { - &::after { - box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); - - .is-dark-theme & { - box-shadow: 0 0 0 $border-width $dark-theme-focus; - } + box-shadow: 0 0 0 $border-width $gray-900; } } }