WordPress · georgeh · Feb 26, 2021 · Feb 8, 2021 · Feb 10, 2021 · Feb 10, 2021
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
@@ -241,13 +241,17 @@ $block-editor-link-control-number-of-actions: 1;
 }
 
 .block-editor-link-control__settings {
-	border-top: 1px solid $gray-300;
+	border-top: $border-width solid $gray-300;
 	margin: 0;
 	padding: $grid-unit-20 $grid-unit-30;
 
 	:last-child {
 		margin-bottom: 0;
 	}
+
+	.is-alternate & {
+		border-top: $border-width solid $gray-900;
+	}
 }
 
 .block-editor-link-control__setting {

diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
@@ -100,6 +100,7 @@ class URLInput extends Component {
 	}
 
 	componentWillUnmount() {
+		this.suggestionsRequest?.cancel?.();
 		delete this.suggestionsRequest;
 	}
 

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -309,6 +309,10 @@ export default function NavigationLinkEdit( {
 		},
 	} );
 
+	if ( ! url ) {
+		blockProps.onClick = () => setIsLinkOpen( true );
+	}
+
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: classnames( 'wp-block-navigation__container', {
@@ -332,6 +336,33 @@ export default function NavigationLinkEdit( {
 		}
 	);
 
+	const classes = classnames( 'wp-block-navigation-link__content', {
+		'wp-block-navigation-link__placeholder': ! url,
+	} );
+
+	let missingText = '';
+	switch ( type ) {
+		case 'post':
+			/* translators: label for missing post in navigation link block */
+			missingText = __( 'Select a post' );
+			break;
+		case 'page':
+			/* translators: label for missing page in navigation link block */
+			missingText = __( 'Select a page' );
+			break;
+		case 'category':
+			/* translators: label for missing category in navigation link block */
+			missingText = __( 'Select a category' );
+			break;
+		case 'tag':
+			/* translators: label for missing tag in navigation link block */
+			missingText = __( 'Select a tag' );
+			break;
+		default:
+			/* translators: label for missing values in navigation link block */
+			missingText = __( 'Add a link' );
+	}
+
 	return (
 		<Fragment>
 			<BlockControls>
@@ -389,7 +420,18 @@ export default function NavigationLinkEdit( {
 				</PanelBody>
 			</InspectorControls>
 			<li { ...blockProps }>
-				<div className="wp-block-navigation-link__content">
+				<div className={ classes }>
+					{ ! url ? (
+						<div className="wp-block-navigation-link__placeholder-text">
+							<KeyboardShortcuts
+								shortcuts={ {
+									enter: () =>
+										isSelected && setIsLinkOpen( true ),
+								} }
+							/>
+							{ missingText }
+						</div>
+					) : (
 						<RichText
 							ref={ ref }
 							identifier="label"
@@ -415,12 +457,24 @@ export default function NavigationLinkEdit( {
 								'core/image',
 								'core/strikethrough',
 							] }
+							onClick={ () => {
+								if ( ! url ) {
+									setIsLinkOpen( true );
+								}
+							} }
 						/>
+					) }
 					{ isLinkOpen && (
 						<Popover
 							position="bottom center"
 							onClose={ () => setIsLinkOpen( false ) }
 						>
+							<KeyboardShortcuts
+								bindGlobal
+								shortcuts={ {
+									escape: () => setIsLinkOpen( false ),
+								} }
+							/>
 							<LinkControl
 								className="wp-block-navigation-link__inline-link-input"
 								value={ link }

diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -53,3 +53,47 @@
 		display: none;
 	}
 }
+
+// Menu item setup state, is shown when a menu item has no URL configured.
+.wp-block-navigation-link__placeholder {
+	position: relative;
+	cursor: pointer;
+
+	// 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;
+	}
+
+	&::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);
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,6 +100,7 @@ class URLInput extends Component { @@
     	}
     	componentWillUnmount() {
+    		this.suggestionsRequest?.cancel?.();
     		delete this.suggestionsRequest;
     	}
@@ Expand Down @@