Placeholders: Make dashed style a mixin, and apply across. (#43512)

* Placeholders: Make dashed style a mixin, and apply across. * Rename to placeholder-style and remove comments.
WordPress · Aug 26, 2022 · 8e72efe · 8e72efe
1 parent b4f6baa
commit 8e72efe
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 14 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -202,6 +202,11 @@
 	}
 }
 
+@mixin placeholder-style() {
+	border: $border-width dashed currentColor;
+	border-radius: $radius-block-ui;
+}
+
 /**
  * Allows users to opt-out of animations via OS-level preferences.
  */
@@ -226,7 +231,6 @@
 			animation-delay: 0s;
 		}
 	}
-
 }
 
 @mixin input-control {
@@ -371,6 +375,7 @@
  * Reset default styles for JavaScript UI based pages.
  * This is a WP-admin agnostic reset
  */
+
 @mixin reset {
 	box-sizing: border-box;
 
@@ -384,6 +389,7 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+
 @mixin wp-admin-reset( $content-container ) {
 	background: $white;
 

diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
@@ -45,10 +45,8 @@
 			right: 0;
 			bottom: 0;
 			left: 0;
-			border: $border-width dashed currentColor;
-			opacity: 0.4;
-			border-radius: $radius-block-ui;
 			pointer-events: none;
+			@include placeholder-style();
 		}
 
 		.block-editor-inserter {

diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
@@ -39,12 +39,10 @@
 	&::after {
 		content: "";
 		display: flex;
-		border: $border-width dashed currentColor;
-		opacity: 0.4;
-		border-radius: $radius-block-ui;
 		flex: 1 0 $grid-unit-60;
 		pointer-events: none;
 		min-height: $grid-unit-60 - $border-width - $border-width;
+		@include placeholder-style();
 	}
 
 	// 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
@@ -290,17 +290,15 @@ $color-control-label-height: 20px;
 		right: 0;
 		bottom: 0;
 		left: 0;
-		border: $border-width dashed currentColor;
-		opacity: 0.4;
 		pointer-events: none;
+		@include placeholder-style();
 
 		// Inherit border radius from style variations.
 		border-radius: inherit;
 	}
 
 	> svg {
 		fill: currentColor;
-		opacity: 0.4;
 	}
 }
 

diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
@@ -177,9 +177,6 @@
 	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);
@@ -213,7 +210,7 @@
 	}
 
 	// By painting the borders here, we enable them to be replaced by the Border control.
-	border: $border-width dashed currentColor;
+	@include placeholder-style();
 	overflow: hidden;
 }