Try: Menu item placeholder inheritance. (#32512)

* Try: Menu item placeholder inheritance. * Simplify and polish the waviness. * Remove opacity.
WordPress · Jul 15, 2021 · 5bf0d88 · 5bf0d88
1 parent c6ef6f3
commit 5bf0d88
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 43 deletions.
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -430,23 +430,23 @@ export default function NavigationLinkEdit( {
 	switch ( type ) {
 		case 'post':
 			/* translators: label for missing post in navigation link block */
-			missingText = __( 'Select a post' );
+			missingText = __( 'Select post' );
 			break;
 		case 'page':
 			/* translators: label for missing page in navigation link block */
-			missingText = __( 'Select a page' );
+			missingText = __( 'Select page' );
 			break;
 		case 'category':
 			/* translators: label for missing category in navigation link block */
-			missingText = __( 'Select a category' );
+			missingText = __( 'Select category' );
 			break;
 		case 'tag':
 			/* translators: label for missing tag in navigation link block */
-			missingText = __( 'Select a tag' );
+			missingText = __( 'Select tag' );
 			break;
 		default:
 			/* translators: label for missing values in navigation link block */
-			missingText = __( 'Add a link' );
+			missingText = __( 'Add link' );
 	}
 
 	return (

diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -80,49 +80,23 @@
 .wp-block-navigation-link__placeholder {
 	position: relative;
 
-	// Provide a little margin to show each placeholder as a separate unit.
-	margin: 2px;
-
+	// Draw a wavy underline.
 	.wp-block-navigation-link__placeholder-text {
-		font-family: $default-font;
-		font-size: $default-font-size;
-		padding-left: 4px;
-		padding-right: 4px;
-
+		$blur: 10%;
+		$width: 6%;
+		$stop1: 30%;
+		$stop2: 64%;
+
+		background-image:
+			linear-gradient(45deg, transparent ($stop1 - $blur), currentColor $stop1, currentColor ($stop1 + $width), transparent ($stop1 + $width + $blur)),
+			linear-gradient(135deg, transparent ($stop2 - $blur), currentColor $stop2, currentColor ($stop2 + $width), transparent ($stop2 + $width + $blur));
+		background-position: 0 100%;
+		background-size: 6px 3px;
+		background-repeat: repeat-x;
 	}
 
 	// This needs extra specificity.
 	&.wp-block-navigation-link__content {
 		cursor: pointer;
 	}
-
-	&::before {
-		content: "";
-		display: block;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		border-radius: $radius-block-ui;
-		opacity: 0.1;
-
-		.is-dark-theme & {
-			opacity: 0.2;
-		}
-
-		.is-editing & {
-			background: currentColor;
-		}
-	}
-}
-
-// We had to add extra classes to override the color from
-// .editor-styles-wrapper .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content
-.wp-block-navigation
-.wp-block-navigation-link:not(.is-editing)
-.wp-block-navigation-link__content.wp-block-navigation-link__placeholder {
-	box-shadow: inset 0 0 0 $border-width $gray-700;
-	border-radius: $radius-block-ui;
-	color: var(--wp-admin-theme-color);
 }