Try: Menu item placeholder inheritance.

WordPress · Jun 23, 2021 · f47f4f4 · f47f4f4
1 parent c0ae9b2
commit f47f4f4
Show file tree

Hide file tree

Showing 2 changed files with 13 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,19 @@
 .wp-block-navigation-link__placeholder {
 	position: relative;
 
-	// Provide a little margin to show each placeholder as a separate unit.
-	margin: 2px;
-
 	.wp-block-navigation-link__placeholder-text {
-		font-family: $default-font;
-		font-size: $default-font-size;
-		padding-left: 4px;
-		padding-right: 4px;
-
+		background-image:
+			linear-gradient(135deg, transparent 10%, currentColor 10%, currentColor 30%, transparent 30%),
+			linear-gradient(45deg,  transparent 30%, currentColor 30%, currentColor 50%, transparent 50%),
+			linear-gradient(135deg, transparent 50%, currentColor 50%, currentColor 70%, transparent 70%),
+			linear-gradient(45deg,  transparent 70%, currentColor 70%, currentColor 90%, transparent 90%);
+		background-size: 10px 3px;
+		background-repeat: repeat-x;
+		background-position: 0 100%;
 	}
 
 	// 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);
 }