From 057a5de15710263a87974112b3980237ce45ef12 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 24 Jul 2024 14:55:17 +1000 Subject: [PATCH 1/7] Update design, remove unnecessary mixin --- packages/base-styles/_mixins.scss | 16 ---------------- .../button-block-appender/content.scss | 2 +- packages/block-library/src/group/editor.scss | 2 +- .../block-library/src/navigation/editor.scss | 1 - packages/components/src/placeholder/style.scss | 13 +++++++++++-- 5 files changed, 13 insertions(+), 21 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 506d12af84b2f..69735d75aac71 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -162,22 +162,6 @@ } } -@mixin placeholder-style() { - border-radius: $radius-block-ui; - - &::before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - background: currentColor; - opacity: 0.1; - } -} - /** * Allows users to opt-out of animations via OS-level preferences. */ diff --git a/packages/block-editor/src/components/button-block-appender/content.scss b/packages/block-editor/src/components/button-block-appender/content.scss index 87243ea927182..4e3f32b3f4ffc 100644 --- a/packages/block-editor/src/components/button-block-appender/content.scss +++ b/packages/block-editor/src/components/button-block-appender/content.scss @@ -52,7 +52,7 @@ left: 0; pointer-events: none; border: $border-width dashed currentColor; - @include placeholder-style(); + border-radius: $radius-block-ui; } .block-editor-inserter { diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss index a2926c89ae802..041a2f9f884e8 100644 --- a/packages/block-library/src/group/editor.scss +++ b/packages/block-library/src/group/editor.scss @@ -43,7 +43,7 @@ pointer-events: none; min-height: $grid-unit-60 - $border-width - $border-width; border: $border-width dashed currentColor; - @include placeholder-style(); + border-radius: $radius-block-ui; } // Let the parent be selectable in the placeholder area. diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index c62cbe9614c91..b279dc08cfe6e 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -287,7 +287,6 @@ $color-control-label-height: 20px; left: 0; pointer-events: none; border: $border-width dashed currentColor; - @include placeholder-style(); // Inherit border radius from style variations. border-radius: inherit; diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 0e9bfa0f86a0c..d925927f4a9e5 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -183,8 +183,17 @@ } } - // By painting the borders here, we enable them to be replaced by the Border control. - @include placeholder-style(); + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + background: $gray-900; + opacity: 0.7; + } overflow: hidden; .is-selected & { From eac916084592c58956cc639bbd04b3184fd9c5a7 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 24 Jul 2024 15:11:23 +1000 Subject: [PATCH 2/7] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index aa11a7c90e263..2da09f130169d 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -23,6 +23,7 @@ - `CheckboxControl`: Slightly reduced footprint. Make label treatment, focus styles, and spacing consistent with `ToggleControl` and `RadioControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)). - `RadioControl`: Slightly reduced footprint. Make label treatment, focus styles, and spacing consistent with `ToggleControl` and `CheckboxControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)). - `FormToggle`: Update spacing and appearance to adhere to 4px baseline, slightly reducing footprint. Make label treatment and focus styles consistent with `RadioControl` and `CheckboxControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)). +- `Placeholder`: New styling when using `hasIllustration` prop ([#63885](https://github.com/WordPress/gutenberg/pull/63885)). ### Internal From 08b1547d1d5db37ad80af5aac36553996ca3f597 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 24 Jul 2024 12:43:25 +0100 Subject: [PATCH 3/7] Overlay styles --- packages/block-library/src/image/editor.scss | 2 ++ packages/components/src/placeholder/style.scss | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 6aaa8e7491ed5..56b7c25611739 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -67,6 +67,8 @@ figure.wp-block-image:not(.wp-block) { top: 50%; left: 50%; transform: translate(-50%, -50%); + margin: 0; + z-index: 2; } } diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index d925927f4a9e5..bda5496a924df 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -191,8 +191,9 @@ bottom: 0; left: 0; pointer-events: none; - background: $gray-900; - opacity: 0.7; + background: rgba($white, 0.8); + z-index: 1; + backdrop-filter: blur(4px); } overflow: hidden; From 238422392fb55ca171a2eb8158249138f3417952 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Thu, 25 Jul 2024 11:40:24 +1000 Subject: [PATCH 4/7] Remove z-index --- packages/block-library/src/image/editor.scss | 1 - packages/components/src/placeholder/style.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 56b7c25611739..0c7f613c140c8 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -68,7 +68,6 @@ figure.wp-block-image:not(.wp-block) { left: 50%; transform: translate(-50%, -50%); margin: 0; - z-index: 2; } } diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index bda5496a924df..9251072fa2fde 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -192,7 +192,6 @@ left: 0; pointer-events: none; background: rgba($white, 0.8); - z-index: 1; backdrop-filter: blur(4px); } From 635782daa676cf60deeb38f8b431b52a14cb23b0 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 26 Jul 2024 11:10:23 +0100 Subject: [PATCH 5/7] Remove blur --- packages/components/src/placeholder/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 9251072fa2fde..4d9bbdcc280a0 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -192,7 +192,6 @@ left: 0; pointer-events: none; background: rgba($white, 0.8); - backdrop-filter: blur(4px); } overflow: hidden; From b54c3230b96f5d2ffba19f213f1941058b5260f5 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Tue, 30 Jul 2024 15:11:58 +1000 Subject: [PATCH 6/7] Only apply white placeholder styling when there is a spinner on top --- packages/block-library/src/image/editor.scss | 6 ++++++ packages/components/CHANGELOG.md | 2 +- packages/components/src/placeholder/style.scss | 3 ++- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 0c7f613c140c8..911fd82e3db24 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -74,6 +74,12 @@ figure.wp-block-image:not(.wp-block) { // Shown while image is being uploded but cannot be previewed. .wp-block-image__placeholder { aspect-ratio: 4 / 3; + + // Make placeholder background white so that you can see the spinner on top of it. + &.has-illustration::before { + background: $white; + opacity: 0.8; + } } // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image. diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2da09f130169d..a4bab1f67d3b5 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -23,7 +23,6 @@ - `CheckboxControl`: Slightly reduced footprint. Make label treatment, focus styles, and spacing consistent with `ToggleControl` and `RadioControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)). - `RadioControl`: Slightly reduced footprint. Make label treatment, focus styles, and spacing consistent with `ToggleControl` and `CheckboxControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)). - `FormToggle`: Update spacing and appearance to adhere to 4px baseline, slightly reducing footprint. Make label treatment and focus styles consistent with `RadioControl` and `CheckboxControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)). -- `Placeholder`: New styling when using `hasIllustration` prop ([#63885](https://github.com/WordPress/gutenberg/pull/63885)). ### Internal @@ -34,6 +33,7 @@ - `Tabs`: Vertical Tabs should be 40px min height. ([#63446](https://github.com/WordPress/gutenberg/pull/63446)). - `ColorPicker`: Use `minimal` variant for `SelectControl` ([#63676](https://github.com/WordPress/gutenberg/pull/63676)). - `Tabs`: keep full opacity of focus ring and remove hover styles on disabled tabs ([#63754](https://github.com/WordPress/gutenberg/pull/63754)). +- `Placeholder`: Remove unnecssary `placeholder-style` Sass mixin ([#63885](https://github.com/WordPress/gutenberg/pull/63885)). ### Documentation diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 4d9bbdcc280a0..e046ce1e3a427 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -191,7 +191,8 @@ bottom: 0; left: 0; pointer-events: none; - background: rgba($white, 0.8); + background: currentColor; + opacity: 0.1; } overflow: hidden; From b608a52d79048ff0ef5a103769e553367c0c64e8 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 31 Jul 2024 15:12:31 +1000 Subject: [PATCH 7/7] Reduce opacity of diagonal stroke --- packages/block-library/src/image/editor.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 911fd82e3db24..db6928766c0b7 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -80,6 +80,11 @@ figure.wp-block-image:not(.wp-block) { background: $white; opacity: 0.8; } + + // Reduce opacity of diagonal stroke so that it doesn't obscure the spinner. + .components-placeholder__illustration { + opacity: 0.1; + } } // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.