From 8e72efea66e5037013624d0a80e9f56e918a23cd Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Fri, 26 Aug 2022 13:39:47 +0200
Subject: [PATCH] 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.
---
 packages/base-styles/_mixins.scss                         | 8 +++++++-
 .../src/components/button-block-appender/style.scss       | 4 +---
 packages/block-library/src/group/editor.scss              | 4 +---
 packages/block-library/src/navigation/editor.scss         | 4 +---
 packages/components/src/placeholder/style.scss            | 5 +----
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 7b3d3faea6117..95373ddd92b1f 100644
--- 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
index a475cb13fb360..dfeb3241c7bb7 100644
--- 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
index c4939d9afe3a9..a743b0abd2644 100644
--- 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
index aba1463b17dd1..b8ab1463fb2e9 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -290,9 +290,8 @@ $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;
@@ -300,7 +299,6 @@ $color-control-label-height: 20px;
 
 	> svg {
 		fill: currentColor;
-		opacity: 0.4;
 	}
 }
 
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 131f10f13fd16..f81ce464d8a33 100644
--- 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;
 }