Polish block indicator to include label

WordPress · Jan 26, 2022 · 243f776 · 243f776
1 parent 93fc292
commit 243f776
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js b/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Icon, navigation } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 const PlaceholderPreview = ( { isLoading } ) => {
 	return (
@@ -16,7 +17,10 @@ const PlaceholderPreview = ( { isLoading } ) => {
 				{ 'is-loading': isLoading }
 			) }
 		>
-			<Icon icon={ navigation } />
+			<div className="wp-block-navigation-placeholder__actions__indicator">
+				<Icon icon={ navigation } />
+				{ __( 'Navigation' ) }
+			</div>
 		</div>
 	);
 };

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -237,9 +237,9 @@ $color-control-label-height: 20px;
 .wp-block-navigation-placeholder__preview {
 	display: flex;
 	align-items: center;
-	min-height: $button-size + $grid-unit-05 + $grid-unit-05;
-	padding: $grid-unit-05 $grid-unit-10 $grid-unit-05 $grid-unit-15;
 	min-width: $grid-unit-10 * 12;
+	font-size: $default-font-size;
+	font-family: $default-font;
 
 	.wp-block-navigation.is-selected & {
 		display: none;
@@ -273,14 +273,18 @@ $color-control-label-height: 20px;
 }
 
 // Selected state.
+.wp-block-navigation-placeholder__preview,
+.wp-block-navigation-placeholder__controls {
+	padding: ($grid-unit-15 * 0.5) $grid-unit-10;
+	flex-direction: row;
+	align-items: center;
+}
+
 .wp-block-navigation-placeholder__controls {
-	padding: $grid-unit-05 $grid-unit-10;
 	border-radius: $radius-block-ui;
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	display: none;
-	flex-direction: row;
-	align-items: center;
 	position: relative;
 	z-index: 1;
 
@@ -289,7 +293,6 @@ $color-control-label-height: 20px;
 		display: flex;
 	}
 
-
 	// If an ancestor has a text-decoration property applied, it is inherited regardless of
 	// the specificity of a child element. Only pulling the child out of the flow fixes it.
 	// See also https://www.w3.org/TR/CSS21/text.html#propdef-text-decoration.
@@ -323,22 +326,22 @@ $color-control-label-height: 20px;
 		margin-right: $grid-unit-15;
 		height: $button-size; // Prevents jumpiness.
 	}
+}
 
-	// Block title
-	.wp-block-navigation-placeholder__actions__indicator {
-		display: flex;
-		padding: 0 ($grid-unit-15 * 0.5) 0 0;
-		align-items: center;
-		justify-content: flex-start;
-		line-height: 0;
-		min-height: $button-size;
+// Block title
+.wp-block-navigation-placeholder__actions__indicator {
+	display: flex;
+	padding: 0 ($grid-unit-15 * 0.5) 0 0;
+	align-items: center;
+	justify-content: flex-start;
+	line-height: 0;
+	min-height: $button-size;
 
-		// Line up with the icon in the toolbar.
-		margin-left: $grid-unit-05;
+	// Line up with the icon in the toolbar.
+	margin-left: $grid-unit-05;
 
-		svg {
-			margin-right: $grid-unit-05;
-		}
+	svg {
+		margin-right: $grid-unit-05;
 	}
 }