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 {