Polish placeholder radius and enable duotone on image setup state (#4…

…3425)
WordPress · Aug 19, 2022 · 85ef6fb · 85ef6fb
1 parent d79e59f
commit 85ef6fb
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
@@ -85,7 +85,7 @@
 	"supports": {
 		"anchor": true,
 		"color": {
-			"__experimentalDuotone": "img",
+			"__experimentalDuotone": "img, .components-placeholder",
 			"text": false,
 			"background": false
 		},

diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -9,6 +9,9 @@
 		box-shadow: inset 0 0 0 $border-width $gray-900;
 		border: none;
 
+		// Disable any duotone filter applied in the selected state.
+		filter: none;
+
 		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
 		border-radius: $radius-block-ui;
 

diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
@@ -173,11 +173,13 @@
 // 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;
 	min-width: 100px;
 
+	// Radius fallback value.
+	border-radius: $radius-block-ui;
+
 	// Blur the background so layered dashed placeholders are still visually separate.
 	// We also provide a semitransparent background so as to allow duotones to sheen through.
 	backdrop-filter: blur(100px);