From 60880d6adeb2d067fc47b05acae6f25618595282 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 28 Jan 2025 13:23:51 +0100
Subject: [PATCH] Adjust CSS.

---
 .../src/navigation-link/editor.scss           | 51 ++++++++++---------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index d83e93e3221d2..c575bab3755e1 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/packages/block-library/src/navigation-link/editor.scss
@@ -61,13 +61,6 @@
 		margin-bottom: $grid-unit-20;
 		margin-left: $grid-unit-20;
 	}
-
-	.wp-block-navigation-link__placeholder-text {
-		&.is-invalid,
-		&.is-draft {
-			--wp-underline-color: var(--wp--preset--color--vivid-red);
-		}
-	}
 }
 
 .wp-block-navigation-link__invalid-item {
@@ -88,23 +81,33 @@
 
 	// Draw a wavy underline.
 	.wp-block-navigation-link__placeholder-text {
-		$blur: 10%;
-		$width: 6%;
-		$stop1: 30%;
-		$stop2: 64%;
-
-		--wp-underline-color: var(--wp-admin-theme-color);
-
-		background-image:
-			linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),
-			linear-gradient(135deg, transparent ($stop2 - $blur), var(--wp-underline-color) $stop2, var(--wp-underline-color) ($stop2 + $width), transparent ($stop2 + $width + $blur));
-		background-position: 0 100%;
-		background-size: 6px 3px;
-		background-repeat: repeat-x;
-
-		// Since applied to a span, it doesn't change the footprint of the item,
-		// but it does vertically shift the underline to better align.
-		padding-bottom: 0.1em;
+		span {
+			$blur: 10%;
+			$width: 6%;
+			$stop1: 30%;
+			$stop2: 64%;
+
+			--wp-underline-color: var(--wp-admin-theme-color);
+
+			background-image:
+				linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),
+				linear-gradient(135deg, transparent ($stop2 - $blur), var(--wp-underline-color) $stop2, var(--wp-underline-color) ($stop2 + $width), transparent ($stop2 + $width + $blur));
+			background-position: 0 100%;
+			background-size: 6px 3px;
+			background-repeat: repeat-x;
+
+			// Since applied to a span, it doesn't change the footprint of the item,
+			// but it does vertically shift the underline to better align.
+			padding-bottom: 0.1em;
+		}
+
+
+		&.is-invalid,
+		&.is-draft {
+			span {
+				--wp-underline-color: var(--wp--preset--color--vivid-red);
+			}
+		}
 	}
 
 	// This needs extra specificity.