From cb8a35aa0d8f667f304a45c9412883abb318996f Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 15 Aug 2022 11:52:50 +0200 Subject: [PATCH 1/3] Site Logo: simplify, reuse, and fix a border radius issue. --- .../block-library/src/site-logo/editor.scss | 72 +++---------------- .../components/src/placeholder/style.scss | 40 ++++++++--- 2 files changed, 41 insertions(+), 71 deletions(-) diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index a6f38428864d43..dabc8fed570289 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -31,13 +31,8 @@ } // Provide special styling for the placeholder. +// @todo: this particular minimal style of placeholder could be componentized further. .wp-block-site-logo.wp-block-site-logo { - // Inherit border radius from style variations. - .components-placeholder, - .components-resizable-box__container { - border-radius: inherit; - } - // Match the default logo size. &.is-default-size .components-placeholder { height: 120px; @@ -46,10 +41,8 @@ // Style the placeholder. .components-placeholder { - display: flex; justify-content: center; align-items: center; - box-shadow: none; padding: 0; // Provide a minimum size for the placeholder, for when the logo is resized. @@ -66,52 +59,17 @@ display: none; } - // Position the spinner. - .components-placeholder__preview { - position: absolute; - top: $grid-unit-05; - right: $grid-unit-05; - bottom: $grid-unit-05; - left: $grid-unit-05; - background: rgba($white, 0.8); - display: flex; - align-items: center; - justify-content: center; - } - // Hide items. .components-drop-zone__content-text { display: none; } - // Draw the dashed outline. - // By setting the dashed border to currentColor, we ensure it's visible - // against any background color. - color: currentColor; - background: transparent; - &::before { - content: ""; - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border: $border-width dashed currentColor; - opacity: 0.4; - pointer-events: none; - - // Inherit border radius from style variations. - border-radius: inherit; - } - - // Style the upload button. .components-placeholder__fieldset { width: auto; } + // Style the upload button. .components-button.components-button { - color: inherit; padding: 0; display: flex; justify-content: center; @@ -120,26 +78,14 @@ height: $grid-unit-60; border-radius: 50%; position: relative; - visibility: hidden; - - // Animation. - background: transparent; - transition: all 0.1s linear; - @include reduce-motion("transition"); - } - - .components-button.components-button > svg { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); + border-style: solid; color: $white; - } - } - // Show upload button on block selection. - &.is-selected .components-button.components-button { - background: var(--wp-admin-theme-color); - border-color: var(--wp-admin-theme-color); - border-style: solid; - color: $white; - opacity: 1; - visibility: visible; + > svg { + color: inherit; + } + } } } diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 714c1570fe8f60..4997420ddaf806 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -26,13 +26,6 @@ background-color: $white; box-shadow: inset 0 0 0 $border-width $gray-900; outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode. - - &.has-illustration { - background: none; - border: none; - box-shadow: none; - min-width: 100px; - } } .components-placeholder__error, @@ -175,8 +168,39 @@ } } -// Style the placeholder illustration. + +/** + * Dashed style placeholders + */ + +// @todo +// These styles are only applied after the has-illustration gets added. +// This is mainly an issue in terms of Site Logo which has a brief flash of the square placeholder. +.components-placeholder.has-illustration { + color: inherit; + border-radius: inherit; + display: flex; + box-shadow: none; + background: none; + border: none; + min-width: 100px; + + // Show placeholder buttons on block selection. + .components-button { + visibility: hidden; + opacity: 0; + transition: opacity 0.1s linear; + @include reduce-motion("transition"); + } + + .is-selected > & .components-button { + opacity: 1; + visibility: visible; + } +} + .components-placeholder__illustration { + border-radius: inherit; border: $border-width dashed currentColor; box-sizing: border-box; position: absolute; From f0e7f281b24c2816dff53e3c6ad2441251e8fbeb Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 15 Aug 2022 12:29:17 +0200 Subject: [PATCH 2/3] Simplify for Featured Image. --- .../src/post-featured-image/editor.scss | 62 +++---------------- .../block-library/src/site-logo/editor.scss | 4 -- .../components/src/placeholder/style.scss | 16 +++-- 3 files changed, 20 insertions(+), 62 deletions(-) diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss index 07ed82bf8d64c4..40f9f6e47ce8d7 100644 --- a/packages/block-library/src/post-featured-image/editor.scss +++ b/packages/block-library/src/post-featured-image/editor.scss @@ -1,19 +1,11 @@ -// Give the featured image placeholder the appearance of a literal image placeholder. -// @todo: this CSS is similar to that of the Site Logo. That makes it an opportunity -// to create a new component for placeholders meant to inherit some theme styles. +// Provide special styling for the placeholder. +// @todo: this particular minimal style of placeholder could be componentized further. .wp-block-post-featured-image.wp-block-post-featured-image { - // Inherit border radius from style variations. - .components-placeholder, - .components-resizable-box__container { - border-radius: inherit; - } - // Style the placeholder. .wp-block-post-featured-image__placeholder, .components-placeholder { justify-content: center; align-items: center; - box-shadow: none; padding: 0; // Hide the upload button, as it's also available in the media library. @@ -21,32 +13,8 @@ display: none; } - // Position the spinner. - .components-placeholder__preview { - position: absolute; - top: $grid-unit-05; - right: $grid-unit-05; - bottom: $grid-unit-05; - left: $grid-unit-05; - background: rgba($white, 0.8); - display: flex; - align-items: center; - justify-content: center; - } - - // Draw the dashed outline. - // By setting the dashed border to currentColor, we ensure it's visible - // against any background color. - color: currentColor; - background: transparent; - // Style the upload button. - .components-placeholder__fieldset { - width: auto; - } - .components-button.components-button { - color: inherit; padding: 0; display: flex; justify-content: center; @@ -55,16 +23,14 @@ height: $grid-unit-60; border-radius: 50%; position: relative; - visibility: hidden; - - // Animation. - background: transparent; - transition: all 0.1s linear; - @include reduce-motion("transition"); - } - - .components-button.components-button > svg { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); + border-style: solid; color: $white; + + > svg { + color: inherit; + } } // Show default placeholder height when not resized. @@ -80,16 +46,6 @@ height: 100%; width: 100%; } - - // Show upload button on block selection. - &.is-selected .components-button.components-button { - background: var(--wp-admin-theme-color); - border-color: var(--wp-admin-theme-color); - border-style: solid; - color: $white; - opacity: 1; - visibility: visible; - } } div[data-type="core/post-featured-image"] { diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index dabc8fed570289..9bd8348ea385ec 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -64,10 +64,6 @@ display: none; } - .components-placeholder__fieldset { - width: auto; - } - // Style the upload button. .components-button.components-button { padding: 0; diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 4997420ddaf806..f79477b29487fa 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -105,11 +105,6 @@ width: 100%; } -.components-placeholder__preview img { - margin: 3%; - width: 50%; -} - .components-placeholder__fieldset .components-button { margin-right: $grid-unit-15; margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between. @@ -185,6 +180,10 @@ border: none; min-width: 100px; + .components-placeholder__fieldset { + width: auto; + } + // Show placeholder buttons on block selection. .components-button { visibility: hidden; @@ -199,6 +198,13 @@ } } +// Position the spinner. +// @todo these rules should ideally live with the spinner component itself. +.components-placeholder__preview { + display: flex; + justify-content: center; +} + .components-placeholder__illustration { border-radius: inherit; border: $border-width dashed currentColor; From bc071774b1ec21ee69e04f5b244806a6d62391cb Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 15 Aug 2022 12:38:21 +0200 Subject: [PATCH 3/3] Enable borders to be visible on placeholders. --- .../components/src/placeholder/style.scss | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index f79477b29487fa..faf9c4d95dbab8 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -177,7 +177,6 @@ display: flex; box-shadow: none; background: none; - border: none; min-width: 100px; .components-placeholder__fieldset { @@ -196,6 +195,10 @@ opacity: 1; visibility: visible; } + + // By painting the borders here, we enable them to be replaced by the Border control. + border: $border-width dashed currentColor; + overflow: hidden; } // Position the spinner. @@ -206,17 +209,15 @@ } .components-placeholder__illustration { - border-radius: inherit; - border: $border-width dashed currentColor; - box-sizing: border-box; + box-sizing: content-box; position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); width: 100%; height: 100%; stroke: currentColor; stroke-dasharray: 3; - opacity: 0.4; + border-width: inherit; + border-style: inherit; }