From 9eaae165f1459ece7d666e7936c957791f3fc31f Mon Sep 17 00:00:00 2001 From: retrofox Date: Mon, 28 Oct 2019 15:40:34 -0300 Subject: [PATCH 01/39] link-control: doc --- .../src/components/link-control/README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md index a887f092933a14..47bfca167fe784 100644 --- a/packages/block-editor/src/components/link-control/README.md +++ b/packages/block-editor/src/components/link-control/README.md @@ -58,6 +58,19 @@ through of its function parameter. - Type: `Function` - Required: No +Use this callback as an opportunity to know if the link has been changed because of user edition. +The function callback will get selected item, or Null. + +```es6 + { + item + ? console.log( `The item selected has the ${ item.id } id.` ) + : console.warn( 'No Item selected.' ); + } +/> +``` + ### onSettingChange - Type: `Function` From b93b07aa0da5d150f94603cf1576a82b359210d3 Mon Sep 17 00:00:00 2001 From: retrofox Date: Mon, 28 Oct 2019 16:12:20 -0300 Subject: [PATCH 02/39] navigation-menu-item: replace URLPopover by LinkControl --- .../src/navigation-menu-item/edit.js | 111 +++++++++--------- 1 file changed, 54 insertions(+), 57 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index b1e6ab69f24df5..bd07f6d7d52e3c 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -33,14 +33,10 @@ import { BlockControls, InnerBlocks, InspectorControls, - URLPopover, RichText, + __experimentalLinkControl as LinkControl, } from '@wordpress/block-editor'; -import { - Fragment, - useRef, - useState, -} from '@wordpress/element'; +import { Fragment, useState } from '@wordpress/element'; function NavigationMenuItemEdit( { attributes, @@ -49,41 +45,55 @@ function NavigationMenuItemEdit( { isParentOfSelectedBlock, setAttributes, insertMenuItemBlock, + fetchSearchSuggestions, } ) { const [ isLinkOpen, setIsLinkOpen ] = useState( false ); - const [ isEditingLink, setIsEditingLink ] = useState( false ); - const [ urlInput, setUrlInput ] = useState( null ); - const inputValue = urlInput !== null ? urlInput : url; + /** + * `onKeyDown` LinkControl handler. + * It takes over to stop the event propagation to make the + * navigation work, avoiding undesired behaviors. + * For instance, it will block to move between menu items + * when the LinkOver is focused. + * + * @param {Object} event + */ + const handleLinkControlOnKeyDown = ( event ) => { + const { keyCode } = event; - const onKeyDown = ( event ) => { - if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) { + if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( keyCode ) > -1 ) { // Stop the key event from propagating up to ObserveTyping.startTypingInTextField. event.stopPropagation(); } }; - const closeURLPopover = () => { - setIsEditingLink( false ); - setUrlInput( null ); - setIsLinkOpen( false ); - }; - - const autocompleteRef = useRef( null ); - - const onFocusOutside = ( event ) => { - const autocompleteElement = autocompleteRef.current; - if ( autocompleteElement && autocompleteElement.contains( event.target ) ) { + /** + * Updates the link attribute when it changes + * through of the `onLinkChange` LinkControl callback. + * + * @param {Object|null} newlink The object link if it has been selected, or null. + */ + const updateLink = ( newlink ) => { + if ( ! newlink ) { return; } - closeURLPopover(); + setAttributes( { link: newlink } ); }; - const stopPropagation = ( event ) => { - event.stopPropagation(); - }; + const { label, link } = attributes; + const initialLinkSetting = { 'new-tab': !! link ? link.newTab : false }; - const { label, url } = attributes; + /** + * It updates the link attribute when the + * link settings changes. + * + * @param {string} setting Setting type, for instance, `new-tab`. + * @param {string} value Setting type value. + */ + const updateLinkSetting = ( setting, value ) => { + const newTab = 'new-tab' === setting ? value : link.newTab; + setAttributes( { link: { ...link, newTab } } ); + }; return ( @@ -95,40 +105,26 @@ function NavigationMenuItemEdit( { title={ __( 'Link' ) } onClick={ () => setIsLinkOpen( ! isLinkOpen ) } /> - { } title={ __( 'Add submenu item' ) } onClick={ insertMenuItemBlock } - /> } + /> + { isLinkOpen && + event.stopPropagation() } + onClose={ ( newlink ) => setAttributes( { link: newlink } ) } + currentLink={ link } + onLinkChange={ updateLink } + currentSettings={ initialLinkSetting } + onSettingsChange={ updateLinkSetting } + fetchSearchSuggestions={ fetchSearchSuggestions } + /> + } - { isLinkOpen && - <> - - { ( ! url || isEditingLink ) && - event.preventDefault() } - autocompleteRef={ autocompleteRef } - /> - } - { ( url && ! isEditingLink ) && - - } - - - - } { - const { getClientIdsOfDescendants, hasSelectedInnerBlock } = select( 'core/block-editor' ); + const { getClientIdsOfDescendants, hasSelectedInnerBlock, getSettings } = select( 'core/block-editor' ); const { clientId } = ownProps; return { isParentOfSelectedBlock: hasSelectedInnerBlock( clientId, true ), hasDescendants: !! getClientIdsOfDescendants( [ clientId ] ).length, + fetchSearchSuggestions: getSettings().__experimentalFetchLinkSuggestions, }; } ), withDispatch( ( dispatch, ownProps ) => { From c52d92f1466e64d4ebca8282028b263a6dfb869b Mon Sep 17 00:00:00 2001 From: retrofox Date: Mon, 28 Oct 2019 16:27:17 -0300 Subject: [PATCH 03/39] navigation-menu: do not set link when onClose --- .../src/navigation-menu-item/edit.js | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index bd07f6d7d52e3c..6233881d1ddea4 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -47,6 +47,8 @@ function NavigationMenuItemEdit( { insertMenuItemBlock, fetchSearchSuggestions, } ) { + const { label, link } = attributes; + const linkSettings = { 'new-tab': link.newTab }; const [ isLinkOpen, setIsLinkOpen ] = useState( false ); /** @@ -80,9 +82,6 @@ function NavigationMenuItemEdit( { setAttributes( { link: newlink } ); }; - const { label, link } = attributes; - const initialLinkSetting = { 'new-tab': !! link ? link.newTab : false }; - /** * It updates the link attribute when the * link settings changes. @@ -112,17 +111,16 @@ function NavigationMenuItemEdit( { onClick={ insertMenuItemBlock } /> { isLinkOpen && - event.stopPropagation() } - onClose={ ( newlink ) => setAttributes( { link: newlink } ) } - currentLink={ link } - onLinkChange={ updateLink } - currentSettings={ initialLinkSetting } - onSettingsChange={ updateLinkSetting } - fetchSearchSuggestions={ fetchSearchSuggestions } - /> + event.stopPropagation() } + currentLink={ link } + onLinkChange={ updateLink } + currentSettings={ linkSettings } + onSettingsChange={ updateLinkSetting } + fetchSearchSuggestions={ fetchSearchSuggestions } + /> } From 33baef0b14e2934806cf4a19d0637a6ef487a10e Mon Sep 17 00:00:00 2001 From: retrofox Date: Mon, 28 Oct 2019 16:41:36 -0300 Subject: [PATCH 04/39] navigation-menu-item: ensuring hide popover once it closes --- packages/block-library/src/navigation-menu-item/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 6233881d1ddea4..491d5f719f3da6 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -117,6 +117,7 @@ function NavigationMenuItemEdit( { onKeyPress={ ( event ) => event.stopPropagation() } currentLink={ link } onLinkChange={ updateLink } + onClose={ () => setIsLinkOpen( false ) } currentSettings={ linkSettings } onSettingsChange={ updateLinkSetting } fetchSearchSuggestions={ fetchSearchSuggestions } From 1cc27a2c7ff07fdf610aafb901b7835abf7f4d65 Mon Sep 17 00:00:00 2001 From: retrofox Date: Mon, 28 Oct 2019 17:18:13 -0300 Subject: [PATCH 05/39] navigation-menu-item: anchor LinkControl at TextControl --- .../src/navigation-menu-item/edit.js | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 491d5f719f3da6..51cf4c97f95b52 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -93,7 +93,6 @@ function NavigationMenuItemEdit( { const newTab = 'new-tab' === setting ? value : link.newTab; setAttributes( { link: { ...link, newTab } } ); }; - return ( @@ -110,19 +109,6 @@ function NavigationMenuItemEdit( { title={ __( 'Add submenu item' ) } onClick={ insertMenuItemBlock } /> - { isLinkOpen && - event.stopPropagation() } - currentLink={ link } - onLinkChange={ updateLink } - onClose={ () => setIsLinkOpen( false ) } - currentSettings={ linkSettings } - onSettingsChange={ updateLinkSetting } - fetchSearchSuggestions={ fetchSearchSuggestions } - /> - } @@ -188,6 +174,19 @@ function NavigationMenuItemEdit( { placeholder={ __( 'Add item…' ) } withoutInteractiveFormatting /> + { isLinkOpen && + event.stopPropagation() } + currentLink={ link } + onLinkChange={ updateLink } + onClose={ () => setIsLinkOpen( false ) } + currentSettings={ linkSettings } + onSettingsChange={ updateLinkSetting } + fetchSearchSuggestions={ fetchSearchSuggestions } + /> + } Date: Mon, 28 Oct 2019 18:02:27 -0300 Subject: [PATCH 06/39] navigation-menu-item: render external link --- packages/block-library/src/navigation-menu-item/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 51cf4c97f95b52..d3a06ee6fe655d 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -93,6 +93,7 @@ function NavigationMenuItemEdit( { const newTab = 'new-tab' === setting ? value : link.newTab; setAttributes( { link: { ...link, newTab } } ); }; + return ( From d32f027dd6c86f73007d9614669dd5c6e7388822 Mon Sep 17 00:00:00 2001 From: retrofox Date: Mon, 28 Oct 2019 18:53:22 -0300 Subject: [PATCH 07/39] navigation-menu-item: remove link object from attrs --- .../src/navigation-menu-item/block.json | 6 ++++++ .../src/navigation-menu-item/edit.js | 18 +++++++++++------- .../block-library/src/navigation-menu/edit.js | 17 ++++++++++++----- 3 files changed, 29 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/block.json b/packages/block-library/src/navigation-menu-item/block.json index 20b33eca1f4a05..2e402134d8d49a 100644 --- a/packages/block-library/src/navigation-menu-item/block.json +++ b/packages/block-library/src/navigation-menu-item/block.json @@ -12,9 +12,15 @@ "title": { "type": "string" }, + "type": { + "type": "string" + }, "description": { "type": "string" }, + "link_id": { + "type": "number" + }, "opensInNewTab": { "type": "boolean", "default": false diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index d3a06ee6fe655d..d800cb3284f194 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -47,7 +47,8 @@ function NavigationMenuItemEdit( { insertMenuItemBlock, fetchSearchSuggestions, } ) { - const { label, link } = attributes; + const { label, title, url } = attributes; + const link = { title, url }; const linkSettings = { 'new-tab': link.newTab }; const [ isLinkOpen, setIsLinkOpen ] = useState( false ); @@ -80,6 +81,8 @@ function NavigationMenuItemEdit( { return; } setAttributes( { link: newlink } ); + const { newTitle, newUrl } = newlink; + setAttributes( { title: newTitle, url: newUrl } ); }; /** @@ -90,8 +93,9 @@ function NavigationMenuItemEdit( { * @param {string} value Setting type value. */ const updateLinkSetting = ( setting, value ) => { - const newTab = 'new-tab' === setting ? value : link.newTab; - setAttributes( { link: { ...link, newTab } } ); + if ( 'new-tab' ) { + setAttributes( { opensInNewTab: value } ); + } }; return ( @@ -118,8 +122,8 @@ function NavigationMenuItemEdit( { > { - setAttributes( { opensInNewTab } ); + onChange={ ( opensInNewTabSetting ) => { + setAttributes( { opensInNewTabSetting } ); } } label={ __( 'Open in new tab' ) } /> @@ -136,8 +140,8 @@ function NavigationMenuItemEdit( { > { - setAttributes( { title } ); + onChange={ ( newtTitle ) => { + setAttributes( { newtTitle } ); } } label={ __( 'Title Attribute' ) } help={ __( 'Provide more context about where the link goes.' ) } diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js index 5afeca57bf1c90..c2e496443a4ee0 100644 --- a/packages/block-library/src/navigation-menu/edit.js +++ b/packages/block-library/src/navigation-menu/edit.js @@ -51,11 +51,18 @@ function NavigationMenu( { if ( ! pages ) { return null; } - return pages.map( ( page ) => { - return [ 'core/navigation-menu-item', - { label: page.title.rendered, url: page.permalink_template }, - ]; - } ); + + return pages.map( ( { title, permalink_template, type, link, id } ) => ( + [ 'core/navigation-menu-item', { + label: title.rendered, + destination: permalink_template, + title: title.raw, + type, + link_id: id, + url: link, + newTab: false, + } ] + ) ); }, [ pages ] ); From 5eb1366ab6fdfa37672ddf11b63f37d4fa7ca7dd Mon Sep 17 00:00:00 2001 From: retrofox Date: Tue, 29 Oct 2019 14:14:00 -0300 Subject: [PATCH 08/39] navigation-menu-item: handing close link popover --- .../src/navigation-menu-item/edit.js | 38 ++++++++++++++++--- 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index d800cb3284f194..35abbd028984ca 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -36,7 +36,7 @@ import { RichText, __experimentalLinkControl as LinkControl, } from '@wordpress/block-editor'; -import { Fragment, useState } from '@wordpress/element'; +import { Fragment, useState, useEffect } from '@wordpress/element'; function NavigationMenuItemEdit( { attributes, @@ -47,10 +47,25 @@ function NavigationMenuItemEdit( { insertMenuItemBlock, fetchSearchSuggestions, } ) { - const { label, title, url } = attributes; + const { label, title, url, opensInNewTab } = attributes; const link = { title, url }; - const linkSettings = { 'new-tab': link.newTab }; const [ isLinkOpen, setIsLinkOpen ] = useState( false ); + const [ wasCloseByLinkControl, setWasCloseByLinkControl ] = useState( false ); + + /** + * It's a kind of hack to handle closing the LinkControl popover + * clicking on the ToolbarButton link. + */ + useEffect( () => { + if ( ! isSelected ) { + setIsLinkOpen( false ); + setWasCloseByLinkControl( false ); + } + return () => { + setIsLinkOpen( false ); + setWasCloseByLinkControl( false ); + }; + }, [ isSelected ] ); /** * `onKeyDown` LinkControl handler. @@ -106,7 +121,15 @@ function NavigationMenuItemEdit( { name="link" icon="admin-links" title={ __( 'Link' ) } - onClick={ () => setIsLinkOpen( ! isLinkOpen ) } + onClick={ () => { + // If the popover was closed by click outside, + // then there is not nothing to do here. + if ( wasCloseByLinkControl ) { + setWasCloseByLinkControl( false ); + return; + } + setIsLinkOpen( ! isLinkOpen ); + } } /> event.stopPropagation() } currentLink={ link } onLinkChange={ updateLink } - onClose={ () => setIsLinkOpen( false ) } - currentSettings={ linkSettings } + onClose={ () => { + setWasCloseByLinkControl( true ); + setIsLinkOpen( false ); + } } + currentSettings={ { 'new-tab': opensInNewTab } } onSettingsChange={ updateLinkSetting } fetchSearchSuggestions={ fetchSearchSuggestions } /> From 9fa15623ec1e5a5b456613cd8591b1dd1b84f808 Mon Sep 17 00:00:00 2001 From: retrofox Date: Tue, 29 Oct 2019 17:25:41 -0300 Subject: [PATCH 09/39] navigation-menu: set text color to external link --- packages/block-library/src/navigation-menu-item/editor.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss index ddb17939c4ba4f..8dea0d966a8247 100644 --- a/packages/block-library/src/navigation-menu-item/editor.scss +++ b/packages/block-library/src/navigation-menu-item/editor.scss @@ -71,6 +71,10 @@ &:focus { color: var(--color-menu-link); + + .components-external-link { + color: var(--color-menu-link); + } } } From 9616d76bb56ff52584aee9f533924fab1764bc64 Mon Sep 17 00:00:00 2001 From: retrofox Date: Tue, 29 Oct 2019 16:54:42 -0300 Subject: [PATCH 10/39] navigation-menu: apply colors correctly in edition mode --- .../src/navigation-menu-item/editor.scss | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss index 8dea0d966a8247..b980818ef098ec 100644 --- a/packages/block-library/src/navigation-menu-item/editor.scss +++ b/packages/block-library/src/navigation-menu-item/editor.scss @@ -64,16 +64,24 @@ } .wp-block-navigation-menu-item { - font-family: inherit; - font-size: inherit; - background-color: var(--background-color-menu-link); - color: var(--color-menu-link); + &:not(.is-editing) { + font-family: inherit; + font-size: inherit; + background-color: var(--background-color-menu-link); + color: var(--color-menu-link); + width: inherit; + } - &:focus { + &.is-editing .components-text-control__input { + width: inherit; + background-color: var(--background-color-menu-link); color: var(--color-menu-link); .components-external-link { color: var(--color-menu-link); + &:focus { + color: var(--color-menu-link); + } } } } From 35e88e8cf37f2d6ad0979e78c31a8d9177f031de Mon Sep 17 00:00:00 2001 From: retrofox Date: Wed, 30 Oct 2019 11:26:26 -0300 Subject: [PATCH 11/39] navigation-menu-item: apply text color to external link --- packages/block-library/src/navigation-menu-item/editor.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss index b980818ef098ec..d7f3b365ca9f35 100644 --- a/packages/block-library/src/navigation-menu-item/editor.scss +++ b/packages/block-library/src/navigation-menu-item/editor.scss @@ -70,6 +70,10 @@ background-color: var(--background-color-menu-link); color: var(--color-menu-link); width: inherit; + + .components-external-link { + color: var(--color-menu-link); + } } &.is-editing .components-text-control__input { From 255032000505c5b9371d8566d8a1036b54163deb Mon Sep 17 00:00:00 2001 From: retrofox Date: Wed, 30 Oct 2019 12:05:27 -0300 Subject: [PATCH 12/39] fixing eslint errors/warnings --- .../src/navigation-menu-item/edit.js | 21 +++++++++---------- .../block-library/src/navigation-menu/edit.js | 5 ++++- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 35abbd028984ca..0747134a54b017 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -74,7 +74,7 @@ function NavigationMenuItemEdit( { * For instance, it will block to move between menu items * when the LinkOver is focused. * - * @param {Object} event + * @param {Event} event */ const handleLinkControlOnKeyDown = ( event ) => { const { keyCode } = event; @@ -89,15 +89,14 @@ function NavigationMenuItemEdit( { * Updates the link attribute when it changes * through of the `onLinkChange` LinkControl callback. * - * @param {Object|null} newlink The object link if it has been selected, or null. + * @param {Object|null} itemLink Link object if it has been selected. Otherwise, Null. */ - const updateLink = ( newlink ) => { - if ( ! newlink ) { + const updateLink = ( itemLink ) => { + if ( ! itemLink ) { return; } - setAttributes( { link: newlink } ); - const { newTitle, newUrl } = newlink; - setAttributes( { title: newTitle, url: newUrl } ); + + setAttributes( { title: itemLink.title, url: itemLink.url } ); }; /** @@ -145,8 +144,8 @@ function NavigationMenuItemEdit( { > { - setAttributes( { opensInNewTabSetting } ); + onChange={ ( newTab ) => { + setAttributes( { opensInNewTab: newTab } ); } } label={ __( 'Open in new tab' ) } /> @@ -163,8 +162,8 @@ function NavigationMenuItemEdit( { > { - setAttributes( { newtTitle } ); + onChange={ ( itemTitle ) => { + setAttributes( { title: itemTitle } ); } } label={ __( 'Title Attribute' ) } help={ __( 'Provide more context about where the link goes.' ) } diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js index c2e496443a4ee0..b44dfc5d653b5a 100644 --- a/packages/block-library/src/navigation-menu/edit.js +++ b/packages/block-library/src/navigation-menu/edit.js @@ -52,7 +52,9 @@ function NavigationMenu( { return null; } - return pages.map( ( { title, permalink_template, type, link, id } ) => ( + // Disable camelcase because of permalink_template. + /* eslint-disable camelcase */ + return pages.map( ( { title, permalink_template, type, link, id } ) => ( [ 'core/navigation-menu-item', { label: title.rendered, destination: permalink_template, @@ -63,6 +65,7 @@ function NavigationMenu( { newTab: false, } ] ) ); + /* eslint-enable camelcase */ }, [ pages ] ); From fbfcec6f9d46d4611e5cdd694f7aae9ad4e8ad43 Mon Sep 17 00:00:00 2001 From: retrofox Date: Wed, 30 Oct 2019 12:11:50 -0300 Subject: [PATCH 13/39] fix camelcase warning flawlessly props to @getdave --- packages/block-library/src/navigation-menu/edit.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js index b44dfc5d653b5a..57b7e86e9e6a2f 100644 --- a/packages/block-library/src/navigation-menu/edit.js +++ b/packages/block-library/src/navigation-menu/edit.js @@ -52,12 +52,10 @@ function NavigationMenu( { return null; } - // Disable camelcase because of permalink_template. - /* eslint-disable camelcase */ - return pages.map( ( { title, permalink_template, type, link, id } ) => ( + return pages.map( ( { title, permalink_template: destination, type, link, id } ) => ( [ 'core/navigation-menu-item', { label: title.rendered, - destination: permalink_template, + destination, title: title.raw, type, link_id: id, @@ -65,7 +63,6 @@ function NavigationMenu( { newTab: false, } ] ) ); - /* eslint-enable camelcase */ }, [ pages ] ); From 81bf11ad4a4a1fc8b2ecd2917fd16add0cacb964 Mon Sep 17 00:00:00 2001 From: retrofox Date: Wed, 30 Oct 2019 12:39:48 -0300 Subject: [PATCH 14/39] navigation-menu-item: set current link as null when it changes --- packages/block-library/src/navigation-menu-item/edit.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 0747134a54b017..2f17897730fee3 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -47,8 +47,8 @@ function NavigationMenuItemEdit( { insertMenuItemBlock, fetchSearchSuggestions, } ) { - const { label, title, url, opensInNewTab } = attributes; - const link = { title, url }; + const { label, opensInNewTab, title, url } = attributes; + const link = title ? { title, url } : null; const [ isLinkOpen, setIsLinkOpen ] = useState( false ); const [ wasCloseByLinkControl, setWasCloseByLinkControl ] = useState( false ); @@ -93,7 +93,8 @@ function NavigationMenuItemEdit( { */ const updateLink = ( itemLink ) => { if ( ! itemLink ) { - return; + // If not link, then set empty string to link attrs. + return setAttributes( { title: '', url: '' } ); } setAttributes( { title: itemLink.title, url: itemLink.url } ); From 0d9637d1091188b5221eaec6d22400d4918d6eb2 Mon Sep 17 00:00:00 2001 From: retrofox Date: Wed, 30 Oct 2019 18:52:04 -0300 Subject: [PATCH 15/39] link-control: doc fixes --- packages/block-editor/src/components/link-control/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md index 47bfca167fe784..d458448175ee9e 100644 --- a/packages/block-editor/src/components/link-control/README.md +++ b/packages/block-editor/src/components/link-control/README.md @@ -58,8 +58,8 @@ through of its function parameter. - Type: `Function` - Required: No -Use this callback as an opportunity to know if the link has been changed because of user edition. -The function callback will get selected item, or Null. +Use this callback to take an action after a user set or updated a link. +The function callback will receive the selected item, or Null. ```es6 Date: Thu, 31 Oct 2019 10:28:03 +0000 Subject: [PATCH 16/39] Updates setting change handler to test for specific setting and value Addresses https://github.com/WordPress/gutenberg/pull/18062#discussion_r341001366 --- packages/block-library/src/navigation-menu-item/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 2f17897730fee3..c39141c337d850 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -108,7 +108,7 @@ function NavigationMenuItemEdit( { * @param {string} value Setting type value. */ const updateLinkSetting = ( setting, value ) => { - if ( 'new-tab' ) { + if ( setting === 'new-tab' ) { setAttributes( { opensInNewTab: value } ); } }; From ccccb5ce857449f6687b8c6b8e76849cdd7b279f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 31 Oct 2019 10:48:32 +0000 Subject: [PATCH 17/39] Remove hyperlinks from nav item labels Addresses https://github.com/WordPress/gutenberg/pull/18062#discussion_r341005499 --- .../src/navigation-menu-item/edit.js | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index c39141c337d850..07e57f86a6b06d 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -113,6 +113,47 @@ function NavigationMenuItemEdit( { } }; + let content; + if ( isSelected ) { + content = ( +
+ setAttributes( { label: labelValue } ) } + label={ __( 'Navigation Label' ) } + hideLabelFromVision={ true } + /> + { isLinkOpen && + event.stopPropagation() } + currentLink={ link } + onLinkChange={ updateLink } + onClose={ () => { + setWasCloseByLinkControl( true ); + setIsLinkOpen( false ); + } } + currentSettings={ { 'new-tab': opensInNewTab } } + onSettingsChange={ updateLinkSetting } + + /> + } +
+ ); + } else { + content = ( +
+ { ( link && link.url ) && ( + { label } + ) } + { ( ! link || ! link.url ) && label } +
+ ); + } + return ( From 9a2d2fb6194446599343057d1c9ad24b2f0446ae Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 31 Oct 2019 10:52:57 +0000 Subject: [PATCH 18/39] Update attribute name Addresses https://github.com/WordPress/gutenberg/pull/18062#discussion_r341006979 --- packages/block-library/src/navigation-menu/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js index 57b7e86e9e6a2f..8523298d1c5172 100644 --- a/packages/block-library/src/navigation-menu/edit.js +++ b/packages/block-library/src/navigation-menu/edit.js @@ -60,7 +60,7 @@ function NavigationMenu( { type, link_id: id, url: link, - newTab: false, + opensInNewTab: false, } ] ) ); }, From c712717cbce08b9d43628a02a7b2913487bc9f7e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 31 Oct 2019 11:04:30 +0000 Subject: [PATCH 19/39] Fix save output to handle new tab attribute Addresses https://github.com/WordPress/gutenberg/pull/18062#discussion_r341008648 --- packages/block-library/src/navigation-menu/index.php | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/block-library/src/navigation-menu/index.php b/packages/block-library/src/navigation-menu/index.php index b49a41a06aa11c..018b0c74e8bf69 100644 --- a/packages/block-library/src/navigation-menu/index.php +++ b/packages/block-library/src/navigation-menu/index.php @@ -97,22 +97,33 @@ function build_navigation_menu_html( $block, $colors ) { $html = ''; foreach ( (array) $block['innerBlocks'] as $key => $menu_item ) { + $opens_in_new_tab = isset( $menu_item['attrs']['opensInNewTab'] ) ?? false; + $html .= '
  • ' . ' 0 ) { $html .= build_navigation_menu_html( $menu_item, $colors ); From 56536a1ebbbd40312851d4cd3d1a78dc9392fe18 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 31 Oct 2019 11:13:39 +0000 Subject: [PATCH 20/39] Update to simplify link update with default args Addresses https://github.com/WordPress/gutenberg/pull/18062#discussion_r341028925 --- .../block-library/src/navigation-menu-item/edit.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 07e57f86a6b06d..75891bd7e4196a 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -91,13 +91,11 @@ function NavigationMenuItemEdit( { * * @param {Object|null} itemLink Link object if it has been selected. Otherwise, Null. */ - const updateLink = ( itemLink ) => { - if ( ! itemLink ) { - // If not link, then set empty string to link attrs. - return setAttributes( { title: '', url: '' } ); - } - - setAttributes( { title: itemLink.title, url: itemLink.url } ); + const updateLink = ( { title: newTitle = '', url: newURL = '' } = {} ) => { + setAttributes( { + title: newTitle, + url: newURL, + } ); }; /** From 0c965d87ef07c7f43e1b6e6edf58aa4e01647a91 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 31 Oct 2019 11:41:23 +0000 Subject: [PATCH 21/39] Remove content accidentally re-added in merge of rebase --- .../src/navigation-menu-item/edit.js | 41 ------------------- 1 file changed, 41 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 75891bd7e4196a..427ca3fc8b3186 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -111,47 +111,6 @@ function NavigationMenuItemEdit( { } }; - let content; - if ( isSelected ) { - content = ( -
    - setAttributes( { label: labelValue } ) } - label={ __( 'Navigation Label' ) } - hideLabelFromVision={ true } - /> - { isLinkOpen && - event.stopPropagation() } - currentLink={ link } - onLinkChange={ updateLink } - onClose={ () => { - setWasCloseByLinkControl( true ); - setIsLinkOpen( false ); - } } - currentSettings={ { 'new-tab': opensInNewTab } } - onSettingsChange={ updateLinkSetting } - - /> - } -
    - ); - } else { - content = ( -
    - { ( link && link.url ) && ( - { label } - ) } - { ( ! link || ! link.url ) && label } -
    - ); - } - return ( From 80cb5e867074efb2ad5be69eca55f4124a89cf85 Mon Sep 17 00:00:00 2001 From: retrofox Date: Thu, 31 Oct 2019 09:37:31 -0300 Subject: [PATCH 22/39] navigation-menu-item: set title as label when it's empty --- packages/block-library/src/navigation-menu-item/edit.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 427ca3fc8b3186..56b4d69dc16ae8 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -96,6 +96,11 @@ function NavigationMenuItemEdit( { title: newTitle, url: newURL, } ); + + // Set the item label as well if it isn't already defined. + if ( ! label ) { + setAttributes( { label: newTitle } ); + } }; /** From b9d2195a3bb08f1e8ad006642dbc6b8b0aa76140 Mon Sep 17 00:00:00 2001 From: retrofox Date: Thu, 31 Oct 2019 10:16:35 -0300 Subject: [PATCH 23/39] navigation-menu-item: open LinkControl when new item --- packages/block-library/src/navigation-menu-item/edit.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 56b4d69dc16ae8..a711643640563d 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -67,6 +67,12 @@ function NavigationMenuItemEdit( { }; }, [ isSelected ] ); + // Open the LinkControl popover if it's a new item. + useEffect( () => { + if( ! label && isSelected ) { setIsLinkOpen( true ) } + }, [] ); + + /** * `onKeyDown` LinkControl handler. * It takes over to stop the event propagation to make the From 293bfb3933e5399b14ada1d49aef9832594971ee Mon Sep 17 00:00:00 2001 From: retrofox Date: Thu, 31 Oct 2019 10:58:33 -0300 Subject: [PATCH 24/39] navigation-menu-item: new item workflow open link control and show fake placeholder when it's a new iotem --- .../src/navigation-menu-item/edit.js | 38 ++++++++++++++----- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index a711643640563d..13a6351ca12401 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -51,6 +51,7 @@ function NavigationMenuItemEdit( { const link = title ? { title, url } : null; const [ isLinkOpen, setIsLinkOpen ] = useState( false ); const [ wasCloseByLinkControl, setWasCloseByLinkControl ] = useState( false ); + const [ showFakePlaceholder, setShowFakePlaceholder ] = useState( false ); /** * It's a kind of hack to handle closing the LinkControl popover @@ -60,16 +61,23 @@ function NavigationMenuItemEdit( { if ( ! isSelected ) { setIsLinkOpen( false ); setWasCloseByLinkControl( false ); + setShowFakePlaceholder( false ); } return () => { setIsLinkOpen( false ); setWasCloseByLinkControl( false ); + setShowFakePlaceholder( false ); }; }, [ isSelected ] ); - // Open the LinkControl popover if it's a new item. + // Set the menu item when it's new. + // - Open LinkControl popover. + // - Show a fake placeholder. useEffect( () => { - if( ! label && isSelected ) { setIsLinkOpen( true ) } + if ( ! label && isSelected ) { + setIsLinkOpen( true ); + setShowFakePlaceholder( true ); + } }, [] ); @@ -106,6 +114,7 @@ function NavigationMenuItemEdit( { // Set the item label as well if it isn't already defined. if ( ! label ) { setAttributes( { label: newTitle } ); + setShowFakePlaceholder( false ); } }; @@ -122,6 +131,8 @@ function NavigationMenuItemEdit( { } }; + const itemLabelPlaceholder = __( 'Add item…' ); + return ( @@ -204,13 +215,22 @@ function NavigationMenuItemEdit( { 'is-selected': isSelected, } ) } > - setAttributes( { label: labelValue } ) } - placeholder={ __( 'Add item…' ) } - withoutInteractiveFormatting - /> + { ( ! showFakePlaceholder ) && ( + setAttributes( { label: labelValue } ) } + placeholder={ itemLabelPlaceholder } + withoutInteractiveFormatting + /> + ) } + + { ( showFakePlaceholder ) && ( +
    + { itemLabelPlaceholder } +
    + ) } + { isLinkOpen && Date: Thu, 31 Oct 2019 13:01:42 -0300 Subject: [PATCH 25/39] navigation-menu: rename state hook --- .../block-library/src/navigation-menu-item/edit.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 13a6351ca12401..a396fa94b98f8f 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -50,7 +50,7 @@ function NavigationMenuItemEdit( { const { label, opensInNewTab, title, url } = attributes; const link = title ? { title, url } : null; const [ isLinkOpen, setIsLinkOpen ] = useState( false ); - const [ wasCloseByLinkControl, setWasCloseByLinkControl ] = useState( false ); + const [ wasClosedByLinkControl, setWasClosedByLinkControl ] = useState( false ); const [ showFakePlaceholder, setShowFakePlaceholder ] = useState( false ); /** @@ -60,12 +60,12 @@ function NavigationMenuItemEdit( { useEffect( () => { if ( ! isSelected ) { setIsLinkOpen( false ); - setWasCloseByLinkControl( false ); + setWasClosedByLinkControl( false ); setShowFakePlaceholder( false ); } return () => { setIsLinkOpen( false ); - setWasCloseByLinkControl( false ); + setWasClosedByLinkControl( false ); setShowFakePlaceholder( false ); }; }, [ isSelected ] ); @@ -144,8 +144,8 @@ function NavigationMenuItemEdit( { onClick={ () => { // If the popover was closed by click outside, // then there is not nothing to do here. - if ( wasCloseByLinkControl ) { - setWasCloseByLinkControl( false ); + if ( wasClosedByLinkControl ) { + setWasClosedByLinkControl( false ); return; } setIsLinkOpen( ! isLinkOpen ); @@ -239,7 +239,7 @@ function NavigationMenuItemEdit( { currentLink={ link } onLinkChange={ updateLink } onClose={ () => { - setWasCloseByLinkControl( true ); + setWasClosedByLinkControl( true ); setIsLinkOpen( false ); } } currentSettings={ { 'new-tab': opensInNewTab } } From 3b4a3eda5d1122d3a55981e85c0c4db4e1bb3055 Mon Sep 17 00:00:00 2001 From: retrofox Date: Thu, 31 Oct 2019 15:38:46 -0300 Subject: [PATCH 26/39] navigation-menu-item: use camelCase for link ID --- packages/block-library/src/navigation-menu-item/block.json | 2 +- packages/block-library/src/navigation-menu/edit.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/block.json b/packages/block-library/src/navigation-menu-item/block.json index 2e402134d8d49a..00e59fc5224f54 100644 --- a/packages/block-library/src/navigation-menu-item/block.json +++ b/packages/block-library/src/navigation-menu-item/block.json @@ -18,7 +18,7 @@ "description": { "type": "string" }, - "link_id": { + "linkId": { "type": "number" }, "opensInNewTab": { diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js index 8523298d1c5172..2766711b1d6169 100644 --- a/packages/block-library/src/navigation-menu/edit.js +++ b/packages/block-library/src/navigation-menu/edit.js @@ -58,7 +58,7 @@ function NavigationMenu( { destination, title: title.raw, type, - link_id: id, + linkId: id, url: link, opensInNewTab: false, } ] From 468eff8a2cbb274667b2f74ab89a04e2c9225f4a Mon Sep 17 00:00:00 2001 From: retrofox Date: Thu, 31 Oct 2019 17:50:43 -0300 Subject: [PATCH 27/39] navigation-menu-item: set edit mode style --- .../block-library/src/navigation-menu-item/editor.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss index d7f3b365ca9f35..82a303a434afb0 100644 --- a/packages/block-library/src/navigation-menu-item/editor.scss +++ b/packages/block-library/src/navigation-menu-item/editor.scss @@ -88,6 +88,13 @@ } } } + + &.is-editing, + &.is-selected { + box-shadow: 0 0 1px $light-gray-900 inset; + border-radius: 4px; + min-width: 30px; + } } .wp-block-navigation-menu-item__nofollow-external-link { From e85cf064b6aab3613f3aabe1a7e33c259888769f Mon Sep 17 00:00:00 2001 From: retrofox Date: Thu, 31 Oct 2019 17:55:35 -0300 Subject: [PATCH 28/39] navigation-menu-item: remove fake placeholder stuff --- .../src/navigation-menu-item/edit.js | 33 +++++-------------- 1 file changed, 8 insertions(+), 25 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index a396fa94b98f8f..9a596140fa40b0 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -51,7 +51,6 @@ function NavigationMenuItemEdit( { const link = title ? { title, url } : null; const [ isLinkOpen, setIsLinkOpen ] = useState( false ); const [ wasClosedByLinkControl, setWasClosedByLinkControl ] = useState( false ); - const [ showFakePlaceholder, setShowFakePlaceholder ] = useState( false ); /** * It's a kind of hack to handle closing the LinkControl popover @@ -61,26 +60,19 @@ function NavigationMenuItemEdit( { if ( ! isSelected ) { setIsLinkOpen( false ); setWasClosedByLinkControl( false ); - setShowFakePlaceholder( false ); } return () => { setIsLinkOpen( false ); setWasClosedByLinkControl( false ); - setShowFakePlaceholder( false ); }; }, [ isSelected ] ); // Set the menu item when it's new. // - Open LinkControl popover. - // - Show a fake placeholder. useEffect( () => { - if ( ! label && isSelected ) { - setIsLinkOpen( true ); - setShowFakePlaceholder( true ); - } + if ( ! label && isSelected ) setIsLinkOpen( true ); }, [] ); - /** * `onKeyDown` LinkControl handler. * It takes over to stop the event propagation to make the @@ -114,7 +106,6 @@ function NavigationMenuItemEdit( { // Set the item label as well if it isn't already defined. if ( ! label ) { setAttributes( { label: newTitle } ); - setShowFakePlaceholder( false ); } }; @@ -215,21 +206,13 @@ function NavigationMenuItemEdit( { 'is-selected': isSelected, } ) } > - { ( ! showFakePlaceholder ) && ( - setAttributes( { label: labelValue } ) } - placeholder={ itemLabelPlaceholder } - withoutInteractiveFormatting - /> - ) } - - { ( showFakePlaceholder ) && ( -
    - { itemLabelPlaceholder } -
    - ) } + setAttributes( { label: labelValue } ) } + placeholder={ itemLabelPlaceholder } + withoutInteractiveFormatting + /> { isLinkOpen && Date: Fri, 1 Nov 2019 08:17:52 -0300 Subject: [PATCH 29/39] navigation-menu-item: no use effect to Initialize is open state --- packages/block-library/src/navigation-menu-item/edit.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 9a596140fa40b0..884125b2926767 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -49,7 +49,7 @@ function NavigationMenuItemEdit( { } ) { const { label, opensInNewTab, title, url } = attributes; const link = title ? { title, url } : null; - const [ isLinkOpen, setIsLinkOpen ] = useState( false ); + const [ isLinkOpen, setIsLinkOpen ] = useState( ! label && isSelected ); const [ wasClosedByLinkControl, setWasClosedByLinkControl ] = useState( false ); /** @@ -67,12 +67,6 @@ function NavigationMenuItemEdit( { }; }, [ isSelected ] ); - // Set the menu item when it's new. - // - Open LinkControl popover. - useEffect( () => { - if ( ! label && isSelected ) setIsLinkOpen( true ); - }, [] ); - /** * `onKeyDown` LinkControl handler. * It takes over to stop the event propagation to make the From 2dfa557c44c41ce1394672d46be5eae0bceff470 Mon Sep 17 00:00:00 2001 From: retrofox Date: Fri, 1 Nov 2019 09:21:46 -0300 Subject: [PATCH 30/39] navigation-menu-item: remove unneeded setting state --- packages/block-library/src/navigation-menu-item/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 884125b2926767..62684aa131a13a 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -62,7 +62,6 @@ function NavigationMenuItemEdit( { setWasClosedByLinkControl( false ); } return () => { - setIsLinkOpen( false ); setWasClosedByLinkControl( false ); }; }, [ isSelected ] ); From c063034b13fd37c08c490e6cb25d81e180cc5dca Mon Sep 17 00:00:00 2001 From: retrofox Date: Fri, 1 Nov 2019 09:27:49 -0300 Subject: [PATCH 31/39] navigation-menu-item: move link control callback outside of the component rendering --- .../src/navigation-menu-item/edit.js | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 62684aa131a13a..bd4f05a7f4d0b9 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -38,6 +38,37 @@ import { } from '@wordpress/block-editor'; import { Fragment, useState, useEffect } from '@wordpress/element'; +/** + * It updates the link attribute when the + * link settings changes. + * + * @param {string} setting Setting type, for instance, `new-tab`. + * @param {string} value Setting type value. + */ +const updateLinkSetting = ( setter ) => ( setting, value ) => { + if ( setting === 'new-tab' ) { + setter( { opensInNewTab: value } ); + } +}; + +/** + * Updates the link attribute when it changes + * through of the `onLinkChange` LinkControl callback. + * + * @param {Object|null} itemLink Link object if it has been selected. Otherwise, Null. + */ +const updateLink = ( setter, label ) => ( { title: newTitle = '', url: newURL = '' } = {} ) => { + setter( { + title: newTitle, + url: newURL, + } ); + + // Set the item label as well if it isn't already defined. + if ( ! label ) { + setter( { label: newTitle } ); + } +}; + function NavigationMenuItemEdit( { attributes, hasDescendants, @@ -84,37 +115,6 @@ function NavigationMenuItemEdit( { } }; - /** - * Updates the link attribute when it changes - * through of the `onLinkChange` LinkControl callback. - * - * @param {Object|null} itemLink Link object if it has been selected. Otherwise, Null. - */ - const updateLink = ( { title: newTitle = '', url: newURL = '' } = {} ) => { - setAttributes( { - title: newTitle, - url: newURL, - } ); - - // Set the item label as well if it isn't already defined. - if ( ! label ) { - setAttributes( { label: newTitle } ); - } - }; - - /** - * It updates the link attribute when the - * link settings changes. - * - * @param {string} setting Setting type, for instance, `new-tab`. - * @param {string} value Setting type value. - */ - const updateLinkSetting = ( setting, value ) => { - if ( setting === 'new-tab' ) { - setAttributes( { opensInNewTab: value } ); - } - }; - const itemLabelPlaceholder = __( 'Add item…' ); return ( @@ -213,13 +213,13 @@ function NavigationMenuItemEdit( { onKeyDown={ handleLinkControlOnKeyDown } onKeyPress={ ( event ) => event.stopPropagation() } currentLink={ link } - onLinkChange={ updateLink } + onLinkChange={ updateLink( setAttributes, label ) } onClose={ () => { setWasClosedByLinkControl( true ); setIsLinkOpen( false ); } } currentSettings={ { 'new-tab': opensInNewTab } } - onSettingsChange={ updateLinkSetting } + onSettingsChange={ updateLinkSetting( setAttributes ) } fetchSearchSuggestions={ fetchSearchSuggestions } /> } From e1b64e45de7f36bf134a1c3166300292055e55a1 Mon Sep 17 00:00:00 2001 From: retrofox Date: Mon, 4 Nov 2019 16:09:54 -0300 Subject: [PATCH 32/39] navigation-menu-item: simplify closing linkcontrol It adds a hacky solution to deal with both events that happen at the same time: LinkControl.onClose and ToolbatButton.onClick, removing the useState ussage in favor adding a setTimeout call. --- .../src/navigation-menu-item/edit.js | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index bd4f05a7f4d0b9..54f040a99761e0 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -81,7 +81,6 @@ function NavigationMenuItemEdit( { const { label, opensInNewTab, title, url } = attributes; const link = title ? { title, url } : null; const [ isLinkOpen, setIsLinkOpen ] = useState( ! label && isSelected ); - const [ wasClosedByLinkControl, setWasClosedByLinkControl ] = useState( false ); /** * It's a kind of hack to handle closing the LinkControl popover @@ -90,11 +89,7 @@ function NavigationMenuItemEdit( { useEffect( () => { if ( ! isSelected ) { setIsLinkOpen( false ); - setWasClosedByLinkControl( false ); } - return () => { - setWasClosedByLinkControl( false ); - }; }, [ isSelected ] ); /** @@ -126,10 +121,8 @@ function NavigationMenuItemEdit( { icon="admin-links" title={ __( 'Link' ) } onClick={ () => { - // If the popover was closed by click outside, - // then there is not nothing to do here. - if ( wasClosedByLinkControl ) { - setWasClosedByLinkControl( false ); + // It works together with LinkControl onCLose event. + if ( isLinkOpen ) { return; } setIsLinkOpen( ! isLinkOpen ); @@ -214,10 +207,7 @@ function NavigationMenuItemEdit( { onKeyPress={ ( event ) => event.stopPropagation() } currentLink={ link } onLinkChange={ updateLink( setAttributes, label ) } - onClose={ () => { - setWasClosedByLinkControl( true ); - setIsLinkOpen( false ); - } } + onClose={ () => setTimeout( () => setIsLinkOpen( false ), 100 ) } currentSettings={ { 'new-tab': opensInNewTab } } onSettingsChange={ updateLinkSetting( setAttributes ) } fetchSearchSuggestions={ fetchSearchSuggestions } From b77c66340bbca9a5406e83ba0d200cf7628c9b70 Mon Sep 17 00:00:00 2001 From: retrofox Date: Mon, 4 Nov 2019 18:05:05 -0300 Subject: [PATCH 33/39] navigation-menu: fixing eslint errors --- .../block-library/src/navigation-menu-item/edit.js | 6 +++--- packages/block-library/src/navigation-menu/index.php | 12 +++++------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 54f040a99761e0..c4262db0ff232a 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -42,8 +42,7 @@ import { Fragment, useState, useEffect } from '@wordpress/element'; * It updates the link attribute when the * link settings changes. * - * @param {string} setting Setting type, for instance, `new-tab`. - * @param {string} value Setting type value. + * @param {Function} setter Setter attribute function. */ const updateLinkSetting = ( setter ) => ( setting, value ) => { if ( setting === 'new-tab' ) { @@ -55,7 +54,8 @@ const updateLinkSetting = ( setter ) => ( setting, value ) => { * Updates the link attribute when it changes * through of the `onLinkChange` LinkControl callback. * - * @param {Object|null} itemLink Link object if it has been selected. Otherwise, Null. + * @param {Function} setter Setter attribute function. + * @param {string} label ItemMenu link label. */ const updateLink = ( setter, label ) => ( { title: newTitle = '', url: newURL = '' } = {} ) => { setter( { diff --git a/packages/block-library/src/navigation-menu/index.php b/packages/block-library/src/navigation-menu/index.php index 018b0c74e8bf69..02ba29277d7d25 100644 --- a/packages/block-library/src/navigation-menu/index.php +++ b/packages/block-library/src/navigation-menu/index.php @@ -97,14 +97,12 @@ function build_navigation_menu_html( $block, $colors ) { $html = ''; foreach ( (array) $block['innerBlocks'] as $key => $menu_item ) { - $opens_in_new_tab = isset( $menu_item['attrs']['opensInNewTab'] ) ?? false; - $html .= '
  • ' . ' 0 ) { $html .= build_navigation_menu_html( $menu_item, $colors ); From b4ca8caffba8f5a632c9fc6dfc70be3023651794 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 5 Nov 2019 09:45:40 +0000 Subject: [PATCH 34/39] Update packages/block-library/src/navigation-menu-item/edit.js Co-Authored-By: Daniel Richards --- packages/block-library/src/navigation-menu-item/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index c4262db0ff232a..6344f732576d2f 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -97,7 +97,7 @@ function NavigationMenuItemEdit( { * It takes over to stop the event propagation to make the * navigation work, avoiding undesired behaviors. * For instance, it will block to move between menu items - * when the LinkOver is focused. + * when the LinkControl is focused. * * @param {Event} event */ From cf3d2c8e37efdee55f545113b8ac08ebc00580fa Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 5 Nov 2019 09:45:23 +0000 Subject: [PATCH 35/39] Update packages/block-library/src/navigation-menu-item/edit.js Co-Authored-By: Daniel Richards --- packages/block-library/src/navigation-menu-item/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index 6344f732576d2f..ed4356ed12bdbe 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -121,7 +121,6 @@ function NavigationMenuItemEdit( { icon="admin-links" title={ __( 'Link' ) } onClick={ () => { - // It works together with LinkControl onCLose event. if ( isLinkOpen ) { return; } From 2c7b597a47b677ea644a91e51fd532cdf34cc3af Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 5 Nov 2019 09:38:17 +0000 Subject: [PATCH 36/39] Fixes bug where Link UI was visually divorced from target Menu Item Addresses https://github.com/WordPress/gutenberg/pull/18062#discussion_r342398474 --- .../src/navigation-menu-item/edit.js | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index ed4356ed12bdbe..c9c92dff8af377 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -191,27 +191,28 @@ function NavigationMenuItemEdit( { 'is-selected': isSelected, } ) } > - setAttributes( { label: labelValue } ) } - placeholder={ itemLabelPlaceholder } - withoutInteractiveFormatting - /> - - { isLinkOpen && - event.stopPropagation() } - currentLink={ link } - onLinkChange={ updateLink( setAttributes, label ) } - onClose={ () => setTimeout( () => setIsLinkOpen( false ), 100 ) } - currentSettings={ { 'new-tab': opensInNewTab } } - onSettingsChange={ updateLinkSetting( setAttributes ) } - fetchSearchSuggestions={ fetchSearchSuggestions } +
    + setAttributes( { label: labelValue } ) } + placeholder={ itemLabelPlaceholder } + withoutInteractiveFormatting /> - } + { isLinkOpen && ( + event.stopPropagation() } + currentLink={ link } + onLinkChange={ updateLink( setAttributes, label ) } + onClose={ () => setTimeout( () => setIsLinkOpen( false ), 100 ) } + currentSettings={ { 'new-tab': opensInNewTab } } + onSettingsChange={ updateLinkSetting( setAttributes ) } + fetchSearchSuggestions={ fetchSearchSuggestions } + /> + ) } +
    Date: Tue, 5 Nov 2019 09:44:27 +0000 Subject: [PATCH 37/39] Updates to remove unwanted prop being passed to LinkControl MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `fetchSearchSuggestions` seems to have been accidentally re-added. It’s not required. Addresses https://github.com/WordPress/gutenberg/pull/18062#discussion_r342399619 --- packages/block-library/src/navigation-menu-item/edit.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index c9c92dff8af377..a69333ff3eb1ae 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -76,7 +76,6 @@ function NavigationMenuItemEdit( { isParentOfSelectedBlock, setAttributes, insertMenuItemBlock, - fetchSearchSuggestions, } ) { const { label, opensInNewTab, title, url } = attributes; const link = title ? { title, url } : null; @@ -209,7 +208,6 @@ function NavigationMenuItemEdit( { onClose={ () => setTimeout( () => setIsLinkOpen( false ), 100 ) } currentSettings={ { 'new-tab': opensInNewTab } } onSettingsChange={ updateLinkSetting( setAttributes ) } - fetchSearchSuggestions={ fetchSearchSuggestions } /> ) } @@ -224,13 +222,12 @@ function NavigationMenuItemEdit( { export default compose( [ withSelect( ( select, ownProps ) => { - const { getClientIdsOfDescendants, hasSelectedInnerBlock, getSettings } = select( 'core/block-editor' ); + const { getClientIdsOfDescendants, hasSelectedInnerBlock } = select( 'core/block-editor' ); const { clientId } = ownProps; return { isParentOfSelectedBlock: hasSelectedInnerBlock( clientId, true ), hasDescendants: !! getClientIdsOfDescendants( [ clientId ] ).length, - fetchSearchSuggestions: getSettings().__experimentalFetchLinkSuggestions, }; } ), withDispatch( ( dispatch, ownProps ) => { From f60ae0574b269c1e93846ec6f848bacaaff99912 Mon Sep 17 00:00:00 2001 From: retrofox Date: Tue, 5 Nov 2019 11:34:04 -0300 Subject: [PATCH 38/39] navigation-menu: remove `destination` attr --- packages/block-library/src/navigation-menu/edit.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js index 2766711b1d6169..4a30a442cbb7a6 100644 --- a/packages/block-library/src/navigation-menu/edit.js +++ b/packages/block-library/src/navigation-menu/edit.js @@ -52,14 +52,13 @@ function NavigationMenu( { return null; } - return pages.map( ( { title, permalink_template: destination, type, link, id } ) => ( + return pages.map( ( { title, type, link: url, id: linkId } ) => ( [ 'core/navigation-menu-item', { label: title.rendered, - destination, title: title.raw, type, - linkId: id, - url: link, + linkId, + url, opensInNewTab: false, } ] ) ); From c34be01150d86aa697c09be58ab2bf24aa13af7b Mon Sep 17 00:00:00 2001 From: retrofox Date: Tue, 5 Nov 2019 11:34:25 -0300 Subject: [PATCH 39/39] navigation-menu-item: cleanup timer once unmount --- .../block-library/src/navigation-menu-item/edit.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index a69333ff3eb1ae..9a0273c5de3c57 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -81,6 +81,8 @@ function NavigationMenuItemEdit( { const link = title ? { title, url } : null; const [ isLinkOpen, setIsLinkOpen ] = useState( ! label && isSelected ); + let onCloseTimerId = null; + /** * It's a kind of hack to handle closing the LinkControl popover * clicking on the ToolbarButton link. @@ -89,6 +91,13 @@ function NavigationMenuItemEdit( { if ( ! isSelected ) { setIsLinkOpen( false ); } + + return () => { + // Clear LinkControl.OnClose timeout. + if ( onCloseTimerId ) { + clearTimeout( onCloseTimerId ); + } + }; }, [ isSelected ] ); /** @@ -205,7 +214,9 @@ function NavigationMenuItemEdit( { onKeyPress={ ( event ) => event.stopPropagation() } currentLink={ link } onLinkChange={ updateLink( setAttributes, label ) } - onClose={ () => setTimeout( () => setIsLinkOpen( false ), 100 ) } + onClose={ () => { + onCloseTimerId = setTimeout( () => setIsLinkOpen( false ), 100 ); + } } currentSettings={ { 'new-tab': opensInNewTab } } onSettingsChange={ updateLinkSetting( setAttributes ) } />