diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index c6dd37884807ed..545f4a79e38791 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -10,6 +10,7 @@ import { escape } from 'lodash'; import { createBlock } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { + __experimentalInputControl as InputControl, KeyboardShortcuts, PanelBody, Popover, @@ -232,21 +233,21 @@ export default function NavigationLinkEdit( { }, [ isSelected ] ); // If the LinkControl popover is open and the URL has changed, close the LinkControl and focus the label text. - useEffect( () => { - if ( isLinkOpen && url ) { - // Does this look like a URL and have something TLD-ish? - if ( - isURL( prependHTTP( label ) ) && - /^.+\.[a-z]+/.test( label ) - ) { - // Focus and select the label text. - selectLabelText(); - } else { - // Focus it (but do not select). - placeCaretAtHorizontalEdge( ref.current, true ); - } - } - }, [ url ] ); + // useEffect( () => { + // if ( isLinkOpen && url ) { + // // Does this look like a URL and have something TLD-ish? + // if ( + // isURL( prependHTTP( label ) ) && + // /^.+\.[a-z]+/.test( label ) + // ) { + // // Focus and select the label text. + // selectLabelText(); + // } else { + // // Focus it (but do not select). + // placeCaretAtHorizontalEdge( ref.current, true ); + // } + // } + // }, [ url ] ); /** * Focus the Link label text and select it. @@ -302,6 +303,7 @@ export default function NavigationLinkEdit( { [ `has-${ textColor }-color` ]: !! textColor, 'has-background': !! backgroundColor || !! style?.color?.background, [ `has-${ backgroundColor }-background-color` ]: !! backgroundColor, + 'is-missing-link': ! url, } ), style: { color: style?.color?.text, @@ -415,13 +417,31 @@ export default function NavigationLinkEdit( { 'core/image', 'core/strikethrough', ] } + onClick={ () => { + if ( ! url ) { + setIsLinkOpen( true ); + } + } } /> { isLinkOpen && ( setIsLinkOpen( false ) } + className="wp-block-navigation-link__popover-link-input" > - + setAttributes( { label } ) + } + /> + + setAttributes( { url: encodeURI( url ) } ) + } + /> + { /* { let format; if ( type === 'post' ) { - /* translators: %s: search term. */ format = __( 'Create draft post: %s' ); } else { - /* translators: %s: search term. */ format = __( 'Create draft page: %s' ); @@ -482,7 +500,7 @@ export default function NavigationLinkEdit( { id, } ) } - /> + /> */ } ) } diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 34558950e3391c..8e2f9c97ea68e9 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -26,6 +26,11 @@ } } +// foo +.is-missing-link { + border: solid 1px red; +} + // Styles for submenu flyout .has-child { > .wp-block-navigation-link__content { @@ -160,3 +165,9 @@ } } } + +.wp-block-navigation-link__popover-link-input { + max-width: 360px; + min-width: auto; + width: 90vw; +}