From 3de7762c03ed744623440ea65bc03e07d0c54cd3 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 3 Feb 2025 09:54:43 +0100
Subject: [PATCH] MAke navigation block wavy underline more visible on dark
 backgrounds.

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

diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index b27c4520921fd..5034c6f909ecd 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/packages/block-library/src/navigation-link/editor.scss
@@ -82,30 +82,9 @@
 	// Draw a wavy underline.
 	.wp-block-navigation-link__placeholder-text {
 		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: #{$alert-red};
-			}
+			text-decoration: wavy underline;
+			text-decoration-skip-ink: none;
+			text-underline-offset: 0.25rem;
 		}
 	}