diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index d0551ca331a06e..3c567d2fe2ce75 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -14,11 +14,10 @@ import {
TextControl,
TextareaControl,
ToolbarButton,
- Tooltip,
ToolbarGroup,
} from '@wordpress/components';
import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
import {
BlockControls,
InspectorControls,
@@ -490,10 +489,6 @@ export default function NavigationLinkEdit( {
const placeholderText = `(${
isInvalid ? __( 'Invalid' ) : __( 'Draft' )
})`;
- const tooltipText =
- isInvalid || isDraft
- ? __( 'This item has been deleted, or is a draft' )
- : __( 'This item is missing a link' );
return (
<>
@@ -579,27 +574,38 @@ export default function NavigationLinkEdit( {
{ ( isInvalid ||
isDraft ||
isLabelFieldFocused ) && (
-
-
-
- {
- // Some attributes are stored in an escaped form. It's a legacy issue.
- // Ideally they would be stored in a raw, unescaped form.
- // Unescape is used here to "recover" the escaped characters
- // so they display without encoding.
- // See `updateAttributes` for more details.
- `${ decodeEntities( label ) } ${
- isInvalid || isDraft
- ? placeholderText
- : ''
- }`.trim()
- }
-
-
+
+
+ {
+ // Some attributes are stored in an escaped form. It's a legacy issue.
+ // Ideally they would be stored in a raw, unescaped form.
+ // Unescape is used here to "recover" the escaped characters
+ // so they display without encoding.
+ // See `updateAttributes` for more details.
+ `${ decodeEntities( label ) } ${
+ isInvalid || isDraft
+ ? placeholderText
+ : ''
+ }`.trim()
+ }
+
) }
>
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index 4fa94eeaaa80f5..761f04a9e77ba0 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/packages/block-library/src/navigation-link/editor.scss
@@ -61,6 +61,16 @@
margin-bottom: $grid-unit-20;
margin-left: $grid-unit-20;
}
+
+ .wp-block-navigation-link__placeholder-text {
+ &.is-invalid {
+ --wp-underline-color: var(--wp--preset--color--vivid-red);
+ }
+
+ &.is-draft {
+ --wp-underline-color: var(--wp--preset--color--luminous-vivid-amber);
+ }
+ }
}
.wp-block-navigation-link__invalid-item {