Fix label/input styling.

WordPress · Oct 23, 2019 · 30feecb · 30feecb
1 parent 651e76e
commit 30feecb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 44 deletions.
diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js
@@ -35,7 +35,6 @@ import {
 	BlockControls,
 	InnerBlocks,
 	InspectorControls,
-	PlainText,
 	URLPopover,
 } from '@wordpress/block-editor';
 import {
@@ -84,16 +83,14 @@ function NavigationMenuItemEdit( {
 	let content;
 	if ( isSelected ) {
 		content = (
-			<div className="wp-block-navigation-menu-item__edit-container">
-				<PlainText
-					ref={ plainTextRef }
-					className="wp-block-navigation-menu-item__field"
-					value={ label }
-					onChange={ ( labelValue ) => setAttributes( { label: labelValue } ) }
-					aria-label={ __( 'Navigation Label' ) }
-					maxRows={ 1 }
-				/>
-			</div>
+			<TextControl
+				ref={ plainTextRef }
+				className="wp-block-navigation-menu-item__field"
+				value={ label }
+				onChange={ ( labelValue ) => setAttributes( { label: labelValue } ) }
+				label={ __( 'Navigation Label' ) }
+				hideLabelFromVision={ true }
+			/>
 		);
 	} else {
 		content = <div className="wp-block-navigation-menu-item__container">

diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss
@@ -1,43 +1,15 @@
-$menu-label-field-width: 140px;
-
-.wp-block-navigation-menu-item__edit-container {
-	display: grid;
-	grid-auto-columns: min-content;
-	grid-auto-flow: column;
-	align-items: center;
-	white-space: nowrap;
-	border: 1px solid $light-gray-500;
-	// two pixes comes from two times one pixel border
-	width: $menu-label-field-width + $icon-button-size + 2px;
-	padding-left: 1px;
-}
-
-.wp-block-navigation-menu-item__edit-container .wp-block-navigation-menu-item__field {
-	border-right: 1px solid $light-gray-500 !important;
-	width: $menu-label-field-width;
-	border: none;
+// Specificity override for .edit-post-visual-editor input[type="text"]
+.wp-block-navigation-menu-item__field .components-text-control__input.components-text-control__input {
 	border-radius: 0;
-	padding-left: $grid-size-large;
-
-	min-height: $icon-button-size - 1px;
-	line-height: $icon-button-size - 1px;
-
-	&,
-	&:focus {
-		color: $dark-gray-500;
-	}
+	background-color: transparent;
+	padding: $block-padding;
 }
 
+.wp-block-navigation-menu-item__field .components-text-control__input.components-text-control__input,
 .wp-block-navigation-menu-item {
 	font-family: $editor-font;
 	font-weight: bold;
 	font-size: $text-editor-font-size;
-
-	.wp-block-navigation-menu-item__container,
-	&.is-editing .editor-plain-text {
-		background-color: var(--background-color-menu-link);
-		color: var(--color-menu-link);
-	}
 }
 
 .wp-block-navigation-menu-item__nofollow-external-link {