From bfb6f107b9474fa42257398e357d3cce2c41cd60 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Mon, 8 Feb 2021 17:15:03 -0500 Subject: [PATCH 01/19] Prototyping a new Link Nav Block Interaction Working on #28440 Co-authored-by: Kerry Liu --- .../block-library/src/navigation-link/edit.js | 56 ++++++++++++------- .../src/navigation-link/style.scss | 11 ++++ 2 files changed, 48 insertions(+), 19 deletions(-) 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; +} From 410eb6d2af28cebbda2d328f1f3bc32c2ffd907a Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Wed, 10 Feb 2021 15:28:14 -0500 Subject: [PATCH 02/19] Use the existing LinkControl for Link Block Attempting to force focus to the LinkControl when the URL is not set, as well as highlight a block with a missing URL. --- .../block-library/src/navigation-link/edit.js | 90 +++++++++---------- .../src/navigation-link/style.scss | 3 +- 2 files changed, 46 insertions(+), 47 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 545f4a79e38791..938cb9bda3e20c 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -303,7 +303,6 @@ 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, @@ -392,56 +391,57 @@ export default function NavigationLinkEdit( {
  • - - setAttributes( { label: labelValue } ) - } - onMerge={ mergeBlocks } - onReplace={ onReplace } - __unstableOnSplitAtEnd={ () => - insertBlocksAfter( - createBlock( 'core/navigation-link' ) - ) - } - aria-label={ __( 'Navigation link text' ) } - placeholder={ itemLabelPlaceholder } - keepPlaceholderOnFocus - withoutInteractiveFormatting - allowedFormats={ [ - 'core/bold', - 'core/italic', - 'core/image', - 'core/strikethrough', - ] } - onClick={ () => { - if ( ! url ) { - setIsLinkOpen( true ); + { ! url ? ( + { + if ( ! url ) { + setIsLinkOpen( true ); + } + } } + > + { __( 'Missing URL' ) } + + ) : ( + + setAttributes( { label: labelValue } ) } - } } - /> + onMerge={ mergeBlocks } + onReplace={ onReplace } + __unstableOnSplitAtEnd={ () => + insertBlocksAfter( + createBlock( 'core/navigation-link' ) + ) + } + aria-label={ __( 'Navigation link text' ) } + placeholder={ itemLabelPlaceholder } + keepPlaceholderOnFocus + withoutInteractiveFormatting + allowedFormats={ [ + 'core/bold', + 'core/italic', + '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 ) } ) - } - /> - { /* */ } + /> ) }
    diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 8e2f9c97ea68e9..5535c3ed7bd1d1 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -26,8 +26,7 @@ } } -// foo -.is-missing-link { +.wp-block-navigation-link__missing-url { border: solid 1px red; } From 8e25425d2eab8b48d6e9243952ac0b7262bb87d0 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Wed, 10 Feb 2021 16:20:23 -0500 Subject: [PATCH 03/19] Clean up implementation --- .../block-library/src/navigation-link/edit.js | 49 +++++++++---------- .../src/navigation-link/style.scss | 14 ++---- 2 files changed, 26 insertions(+), 37 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 938cb9bda3e20c..1c3929d24d7d61 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -10,7 +10,6 @@ import { escape } from 'lodash'; import { createBlock } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { - __experimentalInputControl as InputControl, KeyboardShortcuts, PanelBody, Popover, @@ -233,21 +232,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. @@ -310,6 +309,10 @@ export default function NavigationLinkEdit( { }, } ); + if ( ! url ) { + blockProps.onClick = () => setIsLinkOpen( true ); + } + const innerBlocksProps = useInnerBlocksProps( { className: classnames( 'wp-block-navigation__container', { @@ -392,16 +395,7 @@ export default function NavigationLinkEdit( {
  • { ! url ? ( - { - if ( ! url ) { - setIsLinkOpen( true ); - } - } } - > - { __( 'Missing URL' ) } - + __( 'Missing URL' ) ) : ( setIsLinkOpen( false ) } - className="wp-block-navigation-link__popover-link-input" > { let format; if ( type === 'post' ) { + /* translators: %s: search term. */ format = __( 'Create draft post: %s' ); } else { + /* translators: %s: search term. */ format = __( 'Create draft page: %s' ); diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 5535c3ed7bd1d1..3d0c8f521bef3b 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -9,6 +9,10 @@ } } +.wp-block-navigation-link:not(.has-link) { + border: solid 1px #f00; +} + .wp-block-navigation__container { // Reset the default list styles list-style: none; @@ -26,10 +30,6 @@ } } -.wp-block-navigation-link__missing-url { - border: solid 1px red; -} - // Styles for submenu flyout .has-child { > .wp-block-navigation-link__content { @@ -164,9 +164,3 @@ } } } - -.wp-block-navigation-link__popover-link-input { - max-width: 360px; - min-width: auto; - width: 90vw; -} From b03a5b928d98004168d4be504e2bd8a74aa9ed47 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Thu, 11 Feb 2021 11:13:12 -0500 Subject: [PATCH 04/19] Add border to popover --- packages/block-library/src/navigation-link/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 1c3929d24d7d61..daaced0c4ac4f5 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -433,6 +433,7 @@ export default function NavigationLinkEdit( { setIsLinkOpen( false ) } + isAlternate > Date: Mon, 15 Feb 2021 11:09:18 +0100 Subject: [PATCH 05/19] Polish --- .../block-library/src/navigation-link/edit.js | 4 ++- .../src/navigation-link/editor.scss | 25 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index daaced0c4ac4f5..0a7c1f13a76c96 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -395,7 +395,9 @@ export default function NavigationLinkEdit( {
  • { ! url ? ( - __( 'Missing URL' ) +
    + { __( 'Missing URL' ) } +
    ) : ( Date: Mon, 15 Feb 2021 11:17:20 +0100 Subject: [PATCH 06/19] Get the sizing to work. --- packages/block-library/src/navigation-link/edit.js | 8 ++++++-- .../block-library/src/navigation-link/editor.scss | 12 +++++++++--- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 0a7c1f13a76c96..e17da1475280db 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -336,6 +336,10 @@ export default function NavigationLinkEdit( { } ); + const classes = classnames( 'wp-block-navigation-link__content', { + 'wp-block-navigation-link__placeholder': ! url, + } ); + return ( @@ -393,9 +397,9 @@ export default function NavigationLinkEdit( {
  • -
    +
    { ! url ? ( -
    +
    { __( 'Missing URL' ) }
    ) : ( diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 61916d4366203b..b4434084604b52 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -56,10 +56,16 @@ // Menu item setup state, is shown when a menu item has no URL configured. .wp-block-navigation-link__placeholder { - font-family: $default-font; - font-size: $default-font-size; position: relative; - padding: ($grid-unit-15 / 2) $grid-unit-10; + + // Provide a little margin to show each placeholder as a separate unit. + margin-left: 2px; + margin-right: 2px; + + .wp-block-navigation-link__placeholder-text { + font-family: $default-font; + font-size: $default-font-size; + } &::before { content: ""; From 6a003bdf865375fb66ce34dbf250ce18bcf93448 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 15 Feb 2021 11:28:38 +0100 Subject: [PATCH 07/19] Color the separator. --- .../block-editor/src/components/link-control/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index d8c21f3b88be20..6650cb7c98f20c 100644 --- 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 { From 7bee744a0683181e260f272260e7edb0b2afb016 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Mon, 15 Feb 2021 11:30:18 -0500 Subject: [PATCH 08/19] Customize Missing URL text based on variation --- .../block-library/src/navigation-link/edit.js | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index e17da1475280db..02e34742b47173 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -340,6 +340,24 @@ export default function NavigationLinkEdit( { 'wp-block-navigation-link__placeholder': ! url, } ); + let missingText = ''; + switch ( type ) { + case 'post': + missingText = __( 'Missing Post' ); + break; + case 'page': + missingText = __( 'Missing Page' ); + break; + case 'category': + missingText = __( 'Missing Category' ); + break; + case 'tag': + missingText = __( 'Missing Tag' ); + break; + default: + missingText = __( 'Missing URL' ); + } + return ( @@ -400,7 +418,7 @@ export default function NavigationLinkEdit( {
    { ! url ? (
    - { __( 'Missing URL' ) } + { missingText }
    ) : ( Date: Mon, 15 Feb 2021 17:18:43 -0500 Subject: [PATCH 09/19] Trigger URL Input on Keyboard Focus Co-authored-by: Kerry Liu --- packages/block-editor/src/components/url-input/index.js | 3 +++ packages/block-library/src/navigation-link/edit.js | 8 ++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 4e9e59322e9f50..dec79b0b068d81 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -100,6 +100,9 @@ class URLInput extends Component { } componentWillUnmount() { + if ( this.suggestionsRequest?.cancel ) { + 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 index 02e34742b47173..2842cd93c87fe3 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -211,6 +211,10 @@ export default function NavigationLinkEdit( { insertBlock( blockToInsert, insertionPoint, clientId ); } + if ( isSelected && ! url && ! isLinkOpen ) { + setIsLinkOpen( true ); + } + // Show the LinkControl on mount if the URL is empty // ( When adding a new menu item) // This can't be done in the useState call because it conflicts @@ -309,10 +313,6 @@ export default function NavigationLinkEdit( { }, } ); - if ( ! url ) { - blockProps.onClick = () => setIsLinkOpen( true ); - } - const innerBlocksProps = useInnerBlocksProps( { className: classnames( 'wp-block-navigation__container', { From 8711c5d14aaaad7e2a44ccf5c9c8047c1e087664 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Tue, 16 Feb 2021 10:30:01 -0500 Subject: [PATCH 10/19] Update missing labels --- packages/block-library/src/navigation-link/edit.js | 10 +++++----- packages/block-library/src/navigation-link/style.scss | 4 ---- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 2842cd93c87fe3..20a275942806a7 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -343,19 +343,19 @@ export default function NavigationLinkEdit( { let missingText = ''; switch ( type ) { case 'post': - missingText = __( 'Missing Post' ); + missingText = __( 'Select a post' ); break; case 'page': - missingText = __( 'Missing Page' ); + missingText = __( 'Select a page' ); break; case 'category': - missingText = __( 'Missing Category' ); + missingText = __( 'Select a category' ); break; case 'tag': - missingText = __( 'Missing Tag' ); + missingText = __( 'Select a tag' ); break; default: - missingText = __( 'Missing URL' ); + missingText = __( 'Add a link' ); } return ( diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 3d0c8f521bef3b..34558950e3391c 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -9,10 +9,6 @@ } } -.wp-block-navigation-link:not(.has-link) { - border: solid 1px #f00; -} - .wp-block-navigation__container { // Reset the default list styles list-style: none; From c2344acdab80e2095ed60677d8dc7531570bbee3 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Tue, 16 Feb 2021 11:53:51 -0500 Subject: [PATCH 11/19] Add Highlighting to Inactive State Note that we had to use pretty high specificity to override the text color Co-authored-by: Kerry Liu --- .../block-library/src/navigation-link/editor.scss | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index b4434084604b52..eabbac82935b83 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -76,11 +76,24 @@ bottom: 0; left: 0; border-radius: $radius-block-ui; - background: currentColor; 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 { + border: $border-width solid $gray-700; + border-radius: $radius-block-ui; + color: var(--wp-admin-theme-color); +} From 07c86719ed347f37550290b81beb28c1c02a730c Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 22 Feb 2021 12:07:17 +0100 Subject: [PATCH 12/19] Polish border and spacing. --- packages/block-library/src/navigation-link/editor.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index eabbac82935b83..16df1e77697ad2 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -59,8 +59,7 @@ position: relative; // Provide a little margin to show each placeholder as a separate unit. - margin-left: 2px; - margin-right: 2px; + margin: 2px; .wp-block-navigation-link__placeholder-text { font-family: $default-font; @@ -93,7 +92,7 @@ .wp-block-navigation .wp-block-navigation-link:not(.is-editing) .wp-block-navigation-link__content.wp-block-navigation-link__placeholder { - border: $border-width solid $gray-700; + box-shadow: inset 0 0 0 $border-width $gray-700; border-radius: $radius-block-ui; color: var(--wp-admin-theme-color); } From 1ffb93b4103639fdea9b2f8dcd85174280efc9d8 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Mon, 22 Feb 2021 16:16:41 -0500 Subject: [PATCH 13/19] Add keyboard shortcuts for displaying popover --- .../block-library/src/navigation-link/edit.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 20a275942806a7..25b3babb4084dd 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -313,6 +313,10 @@ export default function NavigationLinkEdit( { }, } ); + if ( ! url ) { + blockProps.onClick = () => setIsLinkOpen( true ); + } + const innerBlocksProps = useInnerBlocksProps( { className: classnames( 'wp-block-navigation__container', { @@ -418,6 +422,11 @@ export default function NavigationLinkEdit( {
    { ! url ? (
    + isSelected && setIsLinkOpen( true ), + } } + /> { missingText }
    ) : ( @@ -459,6 +468,12 @@ export default function NavigationLinkEdit( { onClose={ () => setIsLinkOpen( false ) } isAlternate > + setIsLinkOpen( false ), + } } + /> Date: Tue, 23 Feb 2021 11:12:32 -0500 Subject: [PATCH 14/19] Prettier --- packages/block-library/src/navigation-link/edit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 25b3babb4084dd..f0d5d6cd196e4b 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -424,7 +424,8 @@ export default function NavigationLinkEdit( {
    isSelected && setIsLinkOpen( true ), + enter: () => + isSelected && setIsLinkOpen( true ), } } /> { missingText } From 06ca25ea6a4c45ac2c7d07004314664145e6c848 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Wed, 24 Feb 2021 15:34:23 -0500 Subject: [PATCH 15/19] Fix Keyboard and Click Focus --- packages/block-library/src/navigation-link/edit.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index f0d5d6cd196e4b..beeb39ffcbea69 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -211,10 +211,6 @@ export default function NavigationLinkEdit( { insertBlock( blockToInsert, insertionPoint, clientId ); } - if ( isSelected && ! url && ! isLinkOpen ) { - setIsLinkOpen( true ); - } - // Show the LinkControl on mount if the URL is empty // ( When adding a new menu item) // This can't be done in the useState call because it conflicts From 8ab3153b8dd96d754ffa4a196465e7fbba494fa9 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Wed, 24 Feb 2021 15:42:54 -0500 Subject: [PATCH 16/19] Add pointer cursor for missing state --- packages/block-library/src/navigation-link/editor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 16df1e77697ad2..b3083f763f0ac3 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -57,6 +57,7 @@ // 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; From 3ae7de13ff783e8ea627e9b99ab025c5768786b3 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Thu, 25 Feb 2021 09:28:56 -0500 Subject: [PATCH 17/19] Remove isAlternate --- packages/block-library/src/navigation-link/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index beeb39ffcbea69..0709ead9a8edf3 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -463,7 +463,6 @@ export default function NavigationLinkEdit( { setIsLinkOpen( false ) } - isAlternate > Date: Thu, 25 Feb 2021 14:49:40 -0500 Subject: [PATCH 18/19] Simplify Promise cancel --- packages/block-editor/src/components/url-input/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index dec79b0b068d81..401f64ede229d2 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -100,9 +100,7 @@ class URLInput extends Component { } componentWillUnmount() { - if ( this.suggestionsRequest?.cancel ) { - this.suggestionsRequest.cancel(); - } + this.suggestionsRequest?.cancel?.(); delete this.suggestionsRequest; } From 0509b2aecab231c83932bdbef287460df06bc174 Mon Sep 17 00:00:00 2001 From: George Hotelling Date: Thu, 25 Feb 2021 14:50:11 -0500 Subject: [PATCH 19/19] Add translator notes --- packages/block-library/src/navigation-link/edit.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 0709ead9a8edf3..7b1892b67e2322 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -343,18 +343,23 @@ export default function NavigationLinkEdit( { 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' ); }