From 1c8af6cf57646b286d7c7576fb5a1705fac71bc2 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 24 Aug 2022 14:54:39 +0200 Subject: [PATCH 01/16] Create classic navigation menus as draft and dirty the site editor --- .../use-convert-classic-menu-to-block-menu.js | 30 +++++++++++++++++-- .../edit/use-create-navigation-menu.js | 7 +++-- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js index 9edb3d96a5454b..bbf2fd3c5c37d1 100644 --- a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js +++ b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useRegistry } from '@wordpress/data'; +import { useRegistry, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useState, useCallback } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; @@ -18,9 +18,16 @@ export const CLASSIC_MENU_CONVERSION_PENDING = 'pending'; export const CLASSIC_MENU_CONVERSION_IDLE = 'idle'; function useConvertClassicToBlockMenu( clientId ) { - const { create: createNavigationMenu } = - useCreateNavigationMenu( clientId ); + /* + * The wp_navigation post is created as a draft so the changes on the frontend and + * the site editor are not permanent without a save interaction done by the user. + */ + const { create: createNavigationMenu } = useCreateNavigationMenu( + clientId, + 'draft' + ); const registry = useRegistry(); + const { editEntityRecord } = useDispatch( coreStore ); const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE ); const [ error, setError ] = useState( null ); @@ -71,6 +78,23 @@ function useConvertClassicToBlockMenu( clientId ) { menuName, innerBlocks ); + + /** + * We immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'. + * This status change causes the menu to be displayed in the frontend and set the post edition as dirty. + * If we add saveEditedEntityRecord here, the menu will be updated on the frontend and the editor automatically, + * without user interaction. + * If the user abandons the site editor without saving, we still have a wp_navigation post created as draft. + */ + await editEntityRecord( + 'postType', + 'wp_navigation', + navigationMenu.id, + { + status: 'publish', + }, + { throwOnError: true } + ); } catch ( err ) { throw new Error( sprintf( diff --git a/packages/block-library/src/navigation/edit/use-create-navigation-menu.js b/packages/block-library/src/navigation/edit/use-create-navigation-menu.js index 7b6b6b4521a8b3..6b0fda71489bdc 100644 --- a/packages/block-library/src/navigation/edit/use-create-navigation-menu.js +++ b/packages/block-library/src/navigation/edit/use-create-navigation-menu.js @@ -16,7 +16,10 @@ export const CREATE_NAVIGATION_MENU_ERROR = 'error'; export const CREATE_NAVIGATION_MENU_PENDING = 'pending'; export const CREATE_NAVIGATION_MENU_IDLE = 'idle'; -export default function useCreateNavigationMenu( clientId ) { +export default function useCreateNavigationMenu( + clientId, + postStatus = 'publish' +) { const [ status, setStatus ] = useState( CREATE_NAVIGATION_MENU_IDLE ); const [ value, setValue ] = useState( null ); const [ error, setError ] = useState( null ); @@ -60,7 +63,7 @@ export default function useCreateNavigationMenu( clientId ) { const record = { title, content: serialize( blocks ), - status: 'publish', + status: postStatus, }; // Return affords ability to await on this function directly From 484a567a71097d39094977a9505cabe309f4bee4 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 24 Aug 2022 16:14:36 +0200 Subject: [PATCH 02/16] Update reviewed comment --- .../edit/use-convert-classic-menu-to-block-menu.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js index bbf2fd3c5c37d1..ef450d5c940aea 100644 --- a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js +++ b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js @@ -80,11 +80,11 @@ function useConvertClassicToBlockMenu( clientId ) { ); /** - * We immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'. - * This status change causes the menu to be displayed in the frontend and set the post edition as dirty. - * If we add saveEditedEntityRecord here, the menu will be updated on the frontend and the editor automatically, + * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'. + * This status change causes the menu to be displayed in the frontend and set the post state as being "dirty". + * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_, * without user interaction. - * If the user abandons the site editor without saving, we still have a wp_navigation post created as draft. + * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft. */ await editEntityRecord( 'postType', From 03c4221ea4c0ca2be84c80eb1c6d9148d212f168 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 24 Aug 2022 16:27:15 +0100 Subject: [PATCH 03/16] Allow draft posts be ignored so that the fallback continues to work --- .../block-library/src/navigation/index.php | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 16d6a8e77700ff..8fa9c9b7332bfa 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -469,27 +469,25 @@ function render_block_core_navigation( $attributes, $content, $block ) { // Only published posts are valid. If this is changed then a corresponding change // must also be implemented in `use-navigation-menu.js`. - if ( 'publish' !== $navigation_post->post_status ) { - return ''; - } + if ( 'publish' === $navigation_post->post_status ) { + $nav_menu_name = $navigation_post->post_title; - $nav_menu_name = $navigation_post->post_title; - - if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) { - ++$seen_menu_names[ $nav_menu_name ]; - } else { - $seen_menu_names[ $nav_menu_name ] = 1; - } + if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) { + ++$seen_menu_names[ $nav_menu_name ]; + } else { + $seen_menu_names[ $nav_menu_name ] = 1; + } - $parsed_blocks = parse_blocks( $navigation_post->post_content ); + $parsed_blocks = parse_blocks( $navigation_post->post_content ); - // 'parse_blocks' includes a null block with '\n\n' as the content when - // it encounters whitespace. This code strips it. - $compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks ); + // 'parse_blocks' includes a null block with '\n\n' as the content when + // it encounters whitespace. This code strips it. + $compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks ); - // TODO - this uses the full navigation block attributes for the - // context which could be refined. - $inner_blocks = new WP_Block_List( $compacted_blocks, $attributes ); + // TODO - this uses the full navigation block attributes for the + // context which could be refined. + $inner_blocks = new WP_Block_List( $compacted_blocks, $attributes ); + } } // If there are no inner blocks then fallback to rendering an appropriate fallback. From ce9df388b52101937212d112871e072d36ed606c Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 25 Aug 2022 14:01:30 +0200 Subject: [PATCH 04/16] Prevent draft navigation posts to block site editing --- .../src/navigation/edit/index.js | 33 ++++++++++++++++++- .../src/navigation/use-navigation-menu.js | 17 ++++++---- 2 files changed, 43 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 5592bd52d70b3b..06d42e00d8ff09 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -21,7 +21,7 @@ import { Warning, __experimentalUseBlockOverlayActive as useBlockOverlayActive, } from '@wordpress/block-editor'; -import { EntityProvider } from '@wordpress/core-data'; +import { EntityProvider, store as coreStore } from '@wordpress/core-data'; import { useDispatch } from '@wordpress/data'; import { @@ -103,6 +103,7 @@ function Navigation( { const recursionId = `navigationMenu/${ ref }`; const hasAlreadyRendered = useHasRecursion( recursionId ); + const { editEntityRecord } = useDispatch( coreStore ); // Preload classic menus, so that they don't suddenly pop-in when viewing // the Select Menu dropdown. @@ -118,6 +119,11 @@ function Navigation( { name: 'block-library/core/navigation/classic-menu-conversion', } ); + const [ showMenuAutoPublishDraftNotice, hideMenuAutoPublishDraftNotice ] = + useNavigationNotice( { + name: 'block-library/core/navigation/auto-publish-draft', + } ); + const [ showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice, @@ -245,6 +251,10 @@ function Navigation( { const navRef = useRef(); + const isDraftNavigationMenu = navigationMenu?.status === 'draft'; + + useEffect( () => {} ); + const { convert: convertClassicMenu, status: classicMenuConversionStatus, @@ -444,6 +454,27 @@ function Navigation( { { open: overlayMenuPreview } ); + // Set menu to published if it's a draft on site load in order to make the post dirty. + useEffect( async () => { + hideMenuAutoPublishDraftNotice(); + if ( ! isDraftNavigationMenu ) return; + try { + await editEntityRecord( + 'postType', + 'wp_navigation', + navigationMenu?.id, + { + status: 'publish', + }, + { throwOnError: true } + ); + } catch { + showMenuAutoPublishDraftNotice( + __( 'Error ocurred while publishing the navigation menu.' ) + ); + } + }, [ isDraftNavigationMenu, navigationMenu ] ); + const stylingInspectorControls = ( { hasSubmenuIndicatorSetting && ( diff --git a/packages/block-library/src/navigation/use-navigation-menu.js b/packages/block-library/src/navigation/use-navigation-menu.js index 2c83295bb3e5a3..7ce66683300a3a 100644 --- a/packages/block-library/src/navigation/use-navigation-menu.js +++ b/packages/block-library/src/navigation/use-navigation-menu.js @@ -71,7 +71,7 @@ function selectNavigationMenus( select ) { const args = [ 'postType', 'wp_navigation', - { per_page: -1, status: 'publish' }, + { per_page: -1, status: [ 'publish', 'draft' ] }, ]; return { navigationMenus: getEntityRecords( ...args ), @@ -103,18 +103,23 @@ function selectExistingMenu( select, ref ) { ); // Only published Navigation posts are considered valid. - // If this is changed then a corresponding change must also be made - // in the index.php file. - const isNavigationMenuPublished = editedNavigationMenu.status === 'publish'; + // Draft Navigation posts are valid only on the editor, + // requiring a post update to publish to show in frontend. + // To achieve that, index.php must reflect this validation only for published. + const isNavigationMenuPublishedOrDraft = + editedNavigationMenu.status === 'publish' || + editedNavigationMenu.status === 'draft'; return { isNavigationMenuResolved: hasResolvedNavigationMenu, isNavigationMenuMissing: hasResolvedNavigationMenu && - ( ! navigationMenu || ! isNavigationMenuPublished ), + ( ! navigationMenu || ! isNavigationMenuPublishedOrDraft ), // getEditedEntityRecord will return the post regardless of status. // Therefore if the found post is not published then we should ignore it. - navigationMenu: isNavigationMenuPublished ? editedNavigationMenu : null, + navigationMenu: isNavigationMenuPublishedOrDraft + ? editedNavigationMenu + : null, }; } From 47b852bf3aa0d799fd218612f047ea83e55193d0 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 25 Aug 2022 16:01:17 +0200 Subject: [PATCH 05/16] Code cleaning, unit tests update --- packages/block-library/src/navigation/edit/index.js | 2 -- .../src/navigation/test/use-navigation-menu.js | 10 +++++----- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 06d42e00d8ff09..dc8da374aaaf89 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -253,8 +253,6 @@ function Navigation( { const isDraftNavigationMenu = navigationMenu?.status === 'draft'; - useEffect( () => {} ); - const { convert: convertClassicMenu, status: classicMenuConversionStatus, diff --git a/packages/block-library/src/navigation/test/use-navigation-menu.js b/packages/block-library/src/navigation/test/use-navigation-menu.js index d4ff99709996ca..b03776b663eaf8 100644 --- a/packages/block-library/src/navigation/test/use-navigation-menu.js +++ b/packages/block-library/src/navigation/test/use-navigation-menu.js @@ -36,16 +36,16 @@ function resolveRecords( registry, menus ) { dispatch.startResolution( 'getEntityRecords', [ 'postType', 'wp_navigation', - { per_page: -1, status: 'publish' }, + { per_page: -1, status: [ 'publish', 'draft' ] }, ] ); dispatch.finishResolution( 'getEntityRecords', [ 'postType', 'wp_navigation', - { per_page: -1, status: 'publish' }, + { per_page: -1, status: [ 'publish', 'draft' ] }, ] ); dispatch.receiveEntityRecords( 'postType', 'wp_navigation', menus, { per_page: -1, - status: 'publish', + status: [ 'publish', 'draft' ], } ); } @@ -161,12 +161,12 @@ describe( 'useNavigationMenus', () => { } ); } ); - it( 'Should return null for the menu when menu status is "draft"', () => { + it( 'Should return the menu when menu status is "draft"', () => { const navigationMenuDraft = { id: 4, title: 'Menu 3', status: 'draft' }; const testMenus = [ ...navigationMenus, navigationMenuDraft ]; resolveRecords( registry, testMenus ); expect( useNavigationMenu( 4 ) ).toEqual( { - navigationMenu: null, + navigationMenu: navigationMenuDraft, navigationMenus: testMenus, canSwitchNavigationMenu: true, canUserCreateNavigationMenu: false, From 351de42231b066dba63d5596ab2cdbf118d8a4d4 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 25 Aug 2022 21:47:39 +0200 Subject: [PATCH 06/16] Update comment --- packages/block-library/src/navigation/edit/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index dc8da374aaaf89..165e8378b2cc23 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -452,7 +452,7 @@ function Navigation( { { open: overlayMenuPreview } ); - // Set menu to published if it's a draft on site load in order to make the post dirty. + // Set menu to published if it's a draft on editor load in order to make the post dirty. useEffect( async () => { hideMenuAutoPublishDraftNotice(); if ( ! isDraftNavigationMenu ) return; From 3457ca42eb2460420a2a9ad0164fdafca782c984 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 30 Aug 2022 18:52:00 +0200 Subject: [PATCH 07/16] Disable import from already imported menus - needs refactor --- .../src/navigation/edit/index.js | 68 +++++++++++++++++-- .../edit/navigation-menu-selector.js | 24 ++++++- 2 files changed, 86 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 165e8378b2cc23..7937bfad093cf3 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -61,6 +61,15 @@ import useCreateNavigationMenu from './use-create-navigation-menu'; import { useInnerBlocks } from './use-inner-blocks'; import { detectColors } from './utils'; +const navigationStorage = window.localStorage; + +if ( ! navigationStorage.getItem( 'nav_menus_created' ) ) { + navigationStorage.setItem( + 'nav_menus_created', + JSON.stringify( [ ...new Map() ] ) + ); +} + function Navigation( { attributes, setAttributes, @@ -101,6 +110,10 @@ function Navigation( { setAttributes( { ref: postId } ); }; + const navigationStorageMap = new Map( + JSON.parse( window.localStorage.getItem( 'nav_menus_created' ) ) + ); + const recursionId = `navigationMenu/${ ref }`; const hasAlreadyRendered = useHasRecursion( recursionId ); const { editEntityRecord } = useDispatch( coreStore ); @@ -632,6 +645,18 @@ function Navigation( { classicMenu.id, classicMenu.name ); + navigationStorageMap.set( + classicMenu.name, + classicMenu.id + ); + navigationStorage.setItem( + 'nav_menus_created', + JSON.stringify( + Array.from( + navigationStorageMap.entries() + ) + ) + ); if ( navMenu ) { handleUpdateMenu( navMenu.id, { focusNavigationBlock: true, @@ -713,6 +738,18 @@ function Navigation( { classicMenu.id, classicMenu.name ); + navigationStorageMap.set( + classicMenu.name, + classicMenu.id + ); + navigationStorage.setItem( + 'nav_menus_created', + JSON.stringify( + Array.from( + navigationStorageMap.entries() + ) + ) + ); if ( navMenu ) { handleUpdateMenu( navMenu.id, { focusNavigationBlock: true, @@ -798,6 +835,16 @@ function Navigation( { classicMenu.id, classicMenu.name ); + navigationStorageMap.set( + classicMenu.name, + classicMenu.id + ); + navigationStorage.setItem( + 'nav_menus_created', + JSON.stringify( + Array.from( navigationStorageMap.entries() ) + ) + ); if ( navMenu ) { handleUpdateMenu( navMenu.id, { focusNavigationBlock: true, @@ -816,20 +863,33 @@ function Navigation( { { handleUpdateMenu( menuId ); + setShouldFocusNavigationSelector( true ); } } onSelectClassicMenu={ async ( classicMenu ) => { const navMenu = await convertClassicMenu( classicMenu.id, classicMenu.name ); + navigationStorageMap.set( + classicMenu.name, + classicMenu.id + ); + navigationStorage.setItem( + 'nav_menus_created', + JSON.stringify( + Array.from( + navigationStorageMap.entries() + ) + ) + ); if ( navMenu ) { - handleUpdateMenu( navMenu.id, { - focusNavigationBlock: true, - } ); + handleUpdateMenu( navMenu.id ); + setShouldFocusNavigationSelector( true ); } } } onCreateNew={ createUntitledEmptyNavigationMenu } @@ -857,7 +917,7 @@ function Navigation( { { stylingInspectorControls } - { isEntityAvailable && ( + { ! isDraftNavigationMenu && isEntityAvailable && ( { hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && ( diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 04edb53236dae8..7395c9f58948a7 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -156,6 +156,10 @@ function NavigationMenuSelector( { ); } + const navigationStorageMap = new Map( + JSON.parse( window.localStorage.getItem( 'nav_menus_created' ) ) + ); + return ( ) } { showClassicMenus && hasClassicMenus && ( - + { classicMenus?.map( ( menu ) => { - const label = decodeEntities( menu.name ); + const alreadyImported = + navigationStorageMap.get( menu.name ) && + navigationMenus.some( + ( { title: { raw } } ) => + raw === menu.name + ); + const label = !! alreadyImported + ? sprintf( + /* translators: %s: The name of a menu. */ + __( '"%s" (already imported)' ), + decodeEntities( menu.name ) + ) + : decodeEntities( menu.name ); + return ( { @@ -196,6 +213,9 @@ function NavigationMenuSelector( { createActionLabel, label ) } + aria-disabled={ !! alreadyImported } + disabled={ !! alreadyImported } + n > { label } From 46361f44e7228334617dbbf2708f69b184a01071 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 31 Aug 2022 16:12:37 +0200 Subject: [PATCH 08/16] Small refactor to already imported menus, still work on menu deletion --- .../src/navigation/edit/index.js | 38 ++++++++++-- .../edit/navigation-menu-selector.js | 62 +++++++++---------- 2 files changed, 61 insertions(+), 39 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 7937bfad093cf3..8c2a9a68f2983a 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -646,7 +646,7 @@ function Navigation( { classicMenu.name ); navigationStorageMap.set( - classicMenu.name, + navMenu.id, classicMenu.id ); navigationStorage.setItem( @@ -739,7 +739,7 @@ function Navigation( { classicMenu.name ); navigationStorageMap.set( - classicMenu.name, + navMenu.id, classicMenu.id ); navigationStorage.setItem( @@ -835,10 +835,7 @@ function Navigation( { classicMenu.id, classicMenu.name ); - navigationStorageMap.set( - classicMenu.name, - classicMenu.id - ); + navigationStorageMap.set( navMenu.id, classicMenu.id ); navigationStorage.setItem( 'nav_menus_created', JSON.stringify( @@ -860,6 +857,7 @@ function Navigation( { return ( +<<<<<<< HEAD + { ! isDraftNavigationMenu && isEntityAvailable && ( + + { + handleUpdateMenu( menuId ); + setShouldFocusNavigationSelector( true ); + } } + onSelectClassicMenu={ async ( classicMenu ) => { + const navMenu = await convertClassicMenu( + classicMenu.id, + classicMenu.name + ); + navigationStorageMap.set( + navMenu.id, + classicMenu.id + ); + navigationStorage.setItem( + 'nav_menus_created', + JSON.stringify( + Array.from( + navigationStorageMap.entries() + ) +>>>>>>> b82ba3f478 (Small refactor to already imported menus, still work on menu deletion) ) ) ); diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 7395c9f58948a7..45473cc3d66c2e 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -8,12 +8,15 @@ import { DropdownMenu, Button, VisuallyHidden, + ToolbarDropdownMenu, } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; import { Icon, chevronUp, chevronDown } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; import { useEffect, useMemo, useState } from '@wordpress/element'; +import { addQueryArgs } from '@wordpress/url'; +import { forwardRef } from '@wordpress/element'; /** * Internal dependencies @@ -21,16 +24,20 @@ import { useEffect, useMemo, useState } from '@wordpress/element'; import useNavigationMenu from '../use-navigation-menu'; import useNavigationEntities from '../use-navigation-entities'; -function NavigationMenuSelector( { - currentMenuId, - onSelectNavigationMenu, - onSelectClassicMenu, - onCreateNew, - actionLabel, - createNavigationMenuIsSuccess, - createNavigationMenuIsError, - toggleProps = {}, -} ) { +function NavigationMenuSelector( + { + currentMenuId, + onSelectNavigationMenu, + onSelectClassicMenu, + onCreateNew, + actionLabel, + createNavigationMenuIsSuccess, + createNavigationMenuIsError, + toggleProps = {}, + showManageActions = false, + }, + forwardedRef +) { /* translators: %s: The name of a menu. */ const createActionLabel = __( "Create from '%s'" ); @@ -86,8 +93,17 @@ function NavigationMenuSelector( { hasResolvedNavigationMenus, ] ); + const navigationStorageMap = new Map( + JSON.parse( window.localStorage.getItem( 'nav_menus_created' ) ) + ); + const notImportedClassicMenus = classicMenus?.filter( ( menu ) => { + const classicMenusImported = Array.from( + navigationStorageMap.values() + ); + return ! classicMenusImported.includes( menu.id ); + } ); const hasNavigationMenus = !! navigationMenus?.length; - const hasClassicMenus = !! classicMenus?.length; + const hasClassicMenus = !! notImportedClassicMenus?.length; const showNavigationMenus = !! canSwitchNavigationMenu; const showClassicMenus = !! canUserCreateNavigationMenu; @@ -156,10 +172,6 @@ function NavigationMenuSelector( { ); } - const navigationStorageMap = new Map( - JSON.parse( window.localStorage.getItem( 'nav_menus_created' ) ) - ); - return ( - { classicMenus?.map( ( menu ) => { - const alreadyImported = - navigationStorageMap.get( menu.name ) && - navigationMenus.some( - ( { title: { raw } } ) => - raw === menu.name - ); - const label = !! alreadyImported - ? sprintf( - /* translators: %s: The name of a menu. */ - __( '"%s" (already imported)' ), - decodeEntities( menu.name ) - ) - : decodeEntities( menu.name ); - + { notImportedClassicMenus?.map( ( menu ) => { + const label = decodeEntities( menu.name ); return ( { @@ -213,9 +212,6 @@ function NavigationMenuSelector( { createActionLabel, label ) } - aria-disabled={ !! alreadyImported } - disabled={ !! alreadyImported } - n > { label } From f580d76217f532d36b5d16236a4553a8e5c62884 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 1 Sep 2022 12:35:43 +0200 Subject: [PATCH 09/16] Show classic menu again if it has been deleted from navigation menu --- .../src/navigation/edit/index.js | 44 +++++++++---------- .../edit/navigation-menu-selector.js | 40 +++++------------ 2 files changed, 33 insertions(+), 51 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 8c2a9a68f2983a..84403e1907459c 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -61,11 +61,9 @@ import useCreateNavigationMenu from './use-create-navigation-menu'; import { useInnerBlocks } from './use-inner-blocks'; import { detectColors } from './utils'; -const navigationStorage = window.localStorage; - -if ( ! navigationStorage.getItem( 'nav_menus_created' ) ) { - navigationStorage.setItem( - 'nav_menus_created', +if ( ! window.localStorage.getItem( 'classic_menus_imported' ) ) { + window.localStorage.setItem( + 'classic_menus_imported', JSON.stringify( [ ...new Map() ] ) ); } @@ -110,8 +108,8 @@ function Navigation( { setAttributes( { ref: postId } ); }; - const navigationStorageMap = new Map( - JSON.parse( window.localStorage.getItem( 'nav_menus_created' ) ) + const importedClassicMenus = new Map( + JSON.parse( window.localStorage.getItem( 'classic_menus_imported' ) ) ); const recursionId = `navigationMenu/${ ref }`; @@ -645,15 +643,15 @@ function Navigation( { classicMenu.id, classicMenu.name ); - navigationStorageMap.set( + importedClassicMenus.set( navMenu.id, classicMenu.id ); - navigationStorage.setItem( - 'nav_menus_created', + window.localStorage.setItem( + 'classic_menus_imported', JSON.stringify( Array.from( - navigationStorageMap.entries() + importedClassicMenus.entries() ) ) ); @@ -738,15 +736,15 @@ function Navigation( { classicMenu.id, classicMenu.name ); - navigationStorageMap.set( + importedClassicMenus.set( navMenu.id, classicMenu.id ); - navigationStorage.setItem( - 'nav_menus_created', + window.localStorage.setItem( + 'classic_menus_imported', JSON.stringify( Array.from( - navigationStorageMap.entries() + importedClassicMenus.entries() ) ) ); @@ -835,11 +833,11 @@ function Navigation( { classicMenu.id, classicMenu.name ); - navigationStorageMap.set( navMenu.id, classicMenu.id ); - navigationStorage.setItem( - 'nav_menus_created', + importedClassicMenus.set( navMenu.id, classicMenu.id ); + window.localStorage.setItem( + 'classic_menus_imported', JSON.stringify( - Array.from( navigationStorageMap.entries() ) + Array.from( importedClassicMenus.entries() ) ) ); if ( navMenu ) { @@ -899,15 +897,15 @@ function Navigation( { classicMenu.id, classicMenu.name ); - navigationStorageMap.set( + importedClassicMenus.set( navMenu.id, classicMenu.id ); - navigationStorage.setItem( - 'nav_menus_created', + window.localStorage.setItem( + 'classic_menus_imported', JSON.stringify( Array.from( - navigationStorageMap.entries() + importedClassicMenus.entries() ) >>>>>>> b82ba3f478 (Small refactor to already imported menus, still work on menu deletion) ) diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 45473cc3d66c2e..b85171c4f507a2 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -8,15 +8,12 @@ import { DropdownMenu, Button, VisuallyHidden, - ToolbarDropdownMenu, } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; import { Icon, chevronUp, chevronDown } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; import { useEffect, useMemo, useState } from '@wordpress/element'; -import { addQueryArgs } from '@wordpress/url'; -import { forwardRef } from '@wordpress/element'; /** * Internal dependencies @@ -24,20 +21,16 @@ import { forwardRef } from '@wordpress/element'; import useNavigationMenu from '../use-navigation-menu'; import useNavigationEntities from '../use-navigation-entities'; -function NavigationMenuSelector( - { - currentMenuId, - onSelectNavigationMenu, - onSelectClassicMenu, - onCreateNew, - actionLabel, - createNavigationMenuIsSuccess, - createNavigationMenuIsError, - toggleProps = {}, - showManageActions = false, - }, - forwardedRef -) { +function NavigationMenuSelector( { + currentMenuId, + onSelectNavigationMenu, + onSelectClassicMenu, + onCreateNew, + actionLabel, + createNavigationMenuIsSuccess, + createNavigationMenuIsError, + toggleProps = {}, +} ) { /* translators: %s: The name of a menu. */ const createActionLabel = __( "Create from '%s'" ); @@ -93,17 +86,8 @@ function NavigationMenuSelector( hasResolvedNavigationMenus, ] ); - const navigationStorageMap = new Map( - JSON.parse( window.localStorage.getItem( 'nav_menus_created' ) ) - ); - const notImportedClassicMenus = classicMenus?.filter( ( menu ) => { - const classicMenusImported = Array.from( - navigationStorageMap.values() - ); - return ! classicMenusImported.includes( menu.id ); - } ); const hasNavigationMenus = !! navigationMenus?.length; - const hasClassicMenus = !! notImportedClassicMenus?.length; + const hasClassicMenus = !! classicMenus?.length; const showNavigationMenus = !! canSwitchNavigationMenu; const showClassicMenus = !! canUserCreateNavigationMenu; @@ -195,7 +179,7 @@ function NavigationMenuSelector( ) } { showClassicMenus && hasClassicMenus && ( - { notImportedClassicMenus?.map( ( menu ) => { + { classicMenus?.map( ( menu ) => { const label = decodeEntities( menu.name ); return ( Date: Thu, 1 Sep 2022 23:10:41 +0200 Subject: [PATCH 10/16] Some refactor and add icons on menu items --- .../src/navigation/edit/index.js | 129 ++---------------- .../use-convert-classic-menu-to-block-menu.js | 2 +- .../edit/use-imported-classic-menus.js | 23 ++++ .../block-library/src/navigation/index.php | 27 ++-- 4 files changed, 48 insertions(+), 133 deletions(-) create mode 100644 packages/block-library/src/navigation/edit/use-imported-classic-menus.js diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 84403e1907459c..a99d93f7297866 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -3,6 +3,9 @@ */ import classnames from 'classnames'; +/** + * WordPress dependencies + */ /** * WordPress dependencies */ @@ -21,7 +24,7 @@ import { Warning, __experimentalUseBlockOverlayActive as useBlockOverlayActive, } from '@wordpress/block-editor'; -import { EntityProvider, store as coreStore } from '@wordpress/core-data'; +import { EntityProvider } from '@wordpress/core-data'; import { useDispatch } from '@wordpress/data'; import { @@ -37,6 +40,9 @@ import { speak } from '@wordpress/a11y'; import { createBlock } from '@wordpress/blocks'; import { close, Icon } from '@wordpress/icons'; +/** + * Internal dependencies + */ /** * Internal dependencies */ @@ -61,13 +67,6 @@ import useCreateNavigationMenu from './use-create-navigation-menu'; import { useInnerBlocks } from './use-inner-blocks'; import { detectColors } from './utils'; -if ( ! window.localStorage.getItem( 'classic_menus_imported' ) ) { - window.localStorage.setItem( - 'classic_menus_imported', - JSON.stringify( [ ...new Map() ] ) - ); -} - function Navigation( { attributes, setAttributes, @@ -108,13 +107,8 @@ function Navigation( { setAttributes( { ref: postId } ); }; - const importedClassicMenus = new Map( - JSON.parse( window.localStorage.getItem( 'classic_menus_imported' ) ) - ); - const recursionId = `navigationMenu/${ ref }`; const hasAlreadyRendered = useHasRecursion( recursionId ); - const { editEntityRecord } = useDispatch( coreStore ); // Preload classic menus, so that they don't suddenly pop-in when viewing // the Select Menu dropdown. @@ -130,11 +124,6 @@ function Navigation( { name: 'block-library/core/navigation/classic-menu-conversion', } ); - const [ showMenuAutoPublishDraftNotice, hideMenuAutoPublishDraftNotice ] = - useNavigationNotice( { - name: 'block-library/core/navigation/auto-publish-draft', - } ); - const [ showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice, @@ -262,8 +251,6 @@ function Navigation( { const navRef = useRef(); - const isDraftNavigationMenu = navigationMenu?.status === 'draft'; - const { convert: convertClassicMenu, status: classicMenuConversionStatus, @@ -463,27 +450,6 @@ function Navigation( { { open: overlayMenuPreview } ); - // Set menu to published if it's a draft on editor load in order to make the post dirty. - useEffect( async () => { - hideMenuAutoPublishDraftNotice(); - if ( ! isDraftNavigationMenu ) return; - try { - await editEntityRecord( - 'postType', - 'wp_navigation', - navigationMenu?.id, - { - status: 'publish', - }, - { throwOnError: true } - ); - } catch { - showMenuAutoPublishDraftNotice( - __( 'Error ocurred while publishing the navigation menu.' ) - ); - } - }, [ isDraftNavigationMenu, navigationMenu ] ); - const stylingInspectorControls = ( { hasSubmenuIndicatorSetting && ( @@ -643,18 +609,6 @@ function Navigation( { classicMenu.id, classicMenu.name ); - importedClassicMenus.set( - navMenu.id, - classicMenu.id - ); - window.localStorage.setItem( - 'classic_menus_imported', - JSON.stringify( - Array.from( - importedClassicMenus.entries() - ) - ) - ); if ( navMenu ) { handleUpdateMenu( navMenu.id, { focusNavigationBlock: true, @@ -736,18 +690,6 @@ function Navigation( { classicMenu.id, classicMenu.name ); - importedClassicMenus.set( - navMenu.id, - classicMenu.id - ); - window.localStorage.setItem( - 'classic_menus_imported', - JSON.stringify( - Array.from( - importedClassicMenus.entries() - ) - ) - ); if ( navMenu ) { handleUpdateMenu( navMenu.id, { focusNavigationBlock: true, @@ -833,13 +775,6 @@ function Navigation( { classicMenu.id, classicMenu.name ); - importedClassicMenus.set( navMenu.id, classicMenu.id ); - window.localStorage.setItem( - 'classic_menus_imported', - JSON.stringify( - Array.from( importedClassicMenus.entries() ) - ) - ); if ( navMenu ) { handleUpdateMenu( navMenu.id, { focusNavigationBlock: true, @@ -855,65 +790,23 @@ function Navigation( { return ( -<<<<<<< HEAD { handleUpdateMenu( menuId ); - setShouldFocusNavigationSelector( true ); } } onSelectClassicMenu={ async ( classicMenu ) => { const navMenu = await convertClassicMenu( classicMenu.id, classicMenu.name ); - navigationStorageMap.set( - classicMenu.name, - classicMenu.id - ); - navigationStorage.setItem( - 'nav_menus_created', - JSON.stringify( - Array.from( - navigationStorageMap.entries() -======= - - { ! isDraftNavigationMenu && isEntityAvailable && ( - - { - handleUpdateMenu( menuId ); - setShouldFocusNavigationSelector( true ); - } } - onSelectClassicMenu={ async ( classicMenu ) => { - const navMenu = await convertClassicMenu( - classicMenu.id, - classicMenu.name - ); - importedClassicMenus.set( - navMenu.id, - classicMenu.id - ); - window.localStorage.setItem( - 'classic_menus_imported', - JSON.stringify( - Array.from( - importedClassicMenus.entries() - ) ->>>>>>> b82ba3f478 (Small refactor to already imported menus, still work on menu deletion) - ) - ) - ); if ( navMenu ) { - handleUpdateMenu( navMenu.id ); - setShouldFocusNavigationSelector( true ); + handleUpdateMenu( navMenu.id, { + focusNavigationBlock: true, + } ); } } } onCreateNew={ createUntitledEmptyNavigationMenu } @@ -941,7 +834,7 @@ function Navigation( { { stylingInspectorControls } - { ! isDraftNavigationMenu && isEntityAvailable && ( + { isEntityAvailable && ( { hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && ( diff --git a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js index ef450d5c940aea..3f0d73b263624f 100644 --- a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js +++ b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js @@ -81,7 +81,7 @@ function useConvertClassicToBlockMenu( clientId ) { /** * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'. - * This status change causes the menu to be displayed in the frontend and set the post state as being "dirty". + * This status change causes the menu to be displayed on the front of the site and sets the post state to be "dirty". * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_, * without user interaction. * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft. diff --git a/packages/block-library/src/navigation/edit/use-imported-classic-menus.js b/packages/block-library/src/navigation/edit/use-imported-classic-menus.js new file mode 100644 index 00000000000000..c4825b5389d66e --- /dev/null +++ b/packages/block-library/src/navigation/edit/use-imported-classic-menus.js @@ -0,0 +1,23 @@ +function useImportedClassicMenus() { + if ( ! window.localStorage.getItem( 'classic_menus_imported' ) ) { + window.localStorage.setItem( + 'classic_menus_imported', + JSON.stringify( [ ...new Map() ] ) + ); + } + const importedClassicMenus = new Map( + JSON.parse( window.localStorage.getItem( 'classic_menus_imported' ) ) + ); + + function setImportedClassicMenu( navMenuId, classicMenuId ) { + importedClassicMenus.set( navMenuId, classicMenuId ); + window.localStorage.setItem( + 'classic_menus_imported', + JSON.stringify( Array.from( importedClassicMenus.entries() ) ) + ); + } + + return { importedClassicMenus, setImportedClassicMenu }; +} + +export default useImportedClassicMenus; diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 8fa9c9b7332bfa..f7a31b70dbdfe7 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -471,23 +471,22 @@ function render_block_core_navigation( $attributes, $content, $block ) { // must also be implemented in `use-navigation-menu.js`. if ( 'publish' === $navigation_post->post_status ) { $nav_menu_name = $navigation_post->post_title; + } + if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) { + ++$seen_menu_names[ $nav_menu_name ]; + } else { + $seen_menu_names[ $nav_menu_name ] = 1; + } - if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) { - ++$seen_menu_names[ $nav_menu_name ]; - } else { - $seen_menu_names[ $nav_menu_name ] = 1; - } - - $parsed_blocks = parse_blocks( $navigation_post->post_content ); + $parsed_blocks = parse_blocks( $navigation_post->post_content ); - // 'parse_blocks' includes a null block with '\n\n' as the content when - // it encounters whitespace. This code strips it. - $compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks ); + // 'parse_blocks' includes a null block with '\n\n' as the content when + // it encounters whitespace. This code strips it. + $compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks ); - // TODO - this uses the full navigation block attributes for the - // context which could be refined. - $inner_blocks = new WP_Block_List( $compacted_blocks, $attributes ); - } + // TODO - this uses the full navigation block attributes for the + // context which could be refined. + $inner_blocks = new WP_Block_List( $compacted_blocks, $attributes ); } // If there are no inner blocks then fallback to rendering an appropriate fallback. From d8610f482efcb6ddc1fea02ce6390ad3adb577f7 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 1 Sep 2022 23:14:33 +0200 Subject: [PATCH 11/16] Update comment about draf menu post status pseudoupdate --- .../src/navigation/edit/index.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index a99d93f7297866..86d639d8a84e54 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -450,6 +450,27 @@ function Navigation( { { open: overlayMenuPreview } ); + // Prompt the user to publish the menu they have set as a draft + useEffect( async () => { + hideMenuAutoPublishDraftNotice(); + if ( ! isDraftNavigationMenu ) return; + try { + await editEntityRecord( + 'postType', + 'wp_navigation', + navigationMenu?.id, + { + status: 'publish', + }, + { throwOnError: true } + ); + } catch { + showMenuAutoPublishDraftNotice( + __( 'Error ocurred while publishing the navigation menu.' ) + ); + } + }, [ isDraftNavigationMenu, navigationMenu ] ); + const stylingInspectorControls = ( { hasSubmenuIndicatorSetting && ( From 3b945d9de0c78ce0de6a1d490ca355a0b5e78314 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 2 Sep 2022 09:28:42 +0200 Subject: [PATCH 12/16] Fix PHP frontend loading not published menus --- .../block-library/src/navigation/index.php | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index f7a31b70dbdfe7..8fa9c9b7332bfa 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -471,22 +471,23 @@ function render_block_core_navigation( $attributes, $content, $block ) { // must also be implemented in `use-navigation-menu.js`. if ( 'publish' === $navigation_post->post_status ) { $nav_menu_name = $navigation_post->post_title; - } - if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) { - ++$seen_menu_names[ $nav_menu_name ]; - } else { - $seen_menu_names[ $nav_menu_name ] = 1; - } - $parsed_blocks = parse_blocks( $navigation_post->post_content ); + if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) { + ++$seen_menu_names[ $nav_menu_name ]; + } else { + $seen_menu_names[ $nav_menu_name ] = 1; + } + + $parsed_blocks = parse_blocks( $navigation_post->post_content ); - // 'parse_blocks' includes a null block with '\n\n' as the content when - // it encounters whitespace. This code strips it. - $compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks ); + // 'parse_blocks' includes a null block with '\n\n' as the content when + // it encounters whitespace. This code strips it. + $compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks ); - // TODO - this uses the full navigation block attributes for the - // context which could be refined. - $inner_blocks = new WP_Block_List( $compacted_blocks, $attributes ); + // TODO - this uses the full navigation block attributes for the + // context which could be refined. + $inner_blocks = new WP_Block_List( $compacted_blocks, $attributes ); + } } // If there are no inner blocks then fallback to rendering an appropriate fallback. From ffd5fca7c0949e4c6eb61ad75d326f5ce031c284 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 2 Sep 2022 18:53:01 +0200 Subject: [PATCH 13/16] Remove prevent duplicated classic menus for another PR --- .../edit/navigation-menu-selector.js | 54 +++++++++++++++++++ .../edit/use-imported-classic-menus.js | 23 -------- 2 files changed, 54 insertions(+), 23 deletions(-) delete mode 100644 packages/block-library/src/navigation/edit/use-imported-classic-menus.js diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index b85171c4f507a2..99f3fb87c85d8e 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -5,15 +5,24 @@ import { MenuGroup, MenuItem, MenuItemsChoice, +<<<<<<< HEAD DropdownMenu, Button, VisuallyHidden, +======= + ToolbarDropdownMenu, +>>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; import { Icon, chevronUp, chevronDown } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; +<<<<<<< HEAD import { useEffect, useMemo, useState } from '@wordpress/element'; +======= +import { addQueryArgs } from '@wordpress/url'; +import { forwardRef, useMemo } from '@wordpress/element'; +>>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) /** * Internal dependencies @@ -21,6 +30,7 @@ import { useEffect, useMemo, useState } from '@wordpress/element'; import useNavigationMenu from '../use-navigation-menu'; import useNavigationEntities from '../use-navigation-entities'; +<<<<<<< HEAD function NavigationMenuSelector( { currentMenuId, onSelectNavigationMenu, @@ -31,6 +41,20 @@ function NavigationMenuSelector( { createNavigationMenuIsError, toggleProps = {}, } ) { +======= +function NavigationMenuSelector( + { + currentMenuId, + onSelectNavigationMenu, + onSelectClassicMenu, + onCreateNew, + showManageActions = false, + actionLabel, + toggleProps = {}, + }, + forwardedRef +) { +>>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) /* translators: %s: The name of a menu. */ const createActionLabel = __( "Create from '%s'" ); @@ -51,6 +75,7 @@ function NavigationMenuSelector( { canSwitchNavigationMenu, } = useNavigationMenu(); +<<<<<<< HEAD const [ currentTitle ] = useEntityProp( 'postType', 'wp_navigation', @@ -62,14 +87,19 @@ function NavigationMenuSelector( { hasResolvedNavigationMenus && ! isCreatingMenu; +======= +>>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) const menuChoices = useMemo( () => { return ( navigationMenus?.map( ( { id, title } ) => { const label = decodeEntities( title.rendered ); +<<<<<<< HEAD if ( id === currentMenuId && ! isCreatingMenu ) { setSelectorLabel( currentTitle ); setEnableOptions( shouldEnableMenuSelector ); } +======= +>>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) return { value: id, label, @@ -77,6 +107,7 @@ function NavigationMenuSelector( { }; } ) || [] ); +<<<<<<< HEAD }, [ currentTitle, currentMenuId, @@ -86,10 +117,14 @@ function NavigationMenuSelector( { hasResolvedNavigationMenus, ] ); +======= + }, [ navigationMenus ] ); +>>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) const hasNavigationMenus = !! navigationMenus?.length; const hasClassicMenus = !! classicMenus?.length; const showNavigationMenus = !! canSwitchNavigationMenu; const showClassicMenus = !! canUserCreateNavigationMenu; +<<<<<<< HEAD const noMenuSelected = hasNavigationMenus && ! currentMenuId; const noBlockMenus = ! hasNavigationMenus && hasResolvedNavigationMenus; @@ -154,6 +189,21 @@ function NavigationMenuSelector( { { __( 'Create new menu' ) } ); +======= + const hasManagePermissions = + canUserCreateNavigationMenu || canUserUpdateNavigationMenu; + + // Show the selector if: + // - has switch or create permissions and there are block or classic menus not previously imported. + // - user has create or update permissions and component should show the menu actions. + const showSelectMenus = + ( ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) && + ( hasNavigationMenus || hasClassicMenus ) ) || + ( hasManagePermissions && showManageActions ); + + if ( ! showSelectMenus ) { + return null; +>>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) } return ( @@ -171,6 +221,10 @@ function NavigationMenuSelector( { { +<<<<<<< HEAD +======= + onClose(); +>>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) onSelectNavigationMenu( menuId ); } } choices={ menuChoices } diff --git a/packages/block-library/src/navigation/edit/use-imported-classic-menus.js b/packages/block-library/src/navigation/edit/use-imported-classic-menus.js deleted file mode 100644 index c4825b5389d66e..00000000000000 --- a/packages/block-library/src/navigation/edit/use-imported-classic-menus.js +++ /dev/null @@ -1,23 +0,0 @@ -function useImportedClassicMenus() { - if ( ! window.localStorage.getItem( 'classic_menus_imported' ) ) { - window.localStorage.setItem( - 'classic_menus_imported', - JSON.stringify( [ ...new Map() ] ) - ); - } - const importedClassicMenus = new Map( - JSON.parse( window.localStorage.getItem( 'classic_menus_imported' ) ) - ); - - function setImportedClassicMenu( navMenuId, classicMenuId ) { - importedClassicMenus.set( navMenuId, classicMenuId ); - window.localStorage.setItem( - 'classic_menus_imported', - JSON.stringify( Array.from( importedClassicMenus.entries() ) ) - ); - } - - return { importedClassicMenus, setImportedClassicMenu }; -} - -export default useImportedClassicMenus; From 409e5fc0ac2a283108b05b11b98fd7571782c7be Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 5 Sep 2022 12:34:39 +0200 Subject: [PATCH 14/16] Not apply the fallback on draft menus --- packages/block-library/src/navigation/edit/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 86d639d8a84e54..a9088d67d5dd2c 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -238,6 +238,12 @@ function Navigation( { return menuADate.getTime() < menuBDate.getTime(); } ); + // Only autofallback to published menus. + const fallbackNavigationMenus = navigationMenus.filter( + ( menu ) => menu.status === 'publish' + ); + if ( fallbackNavigationMenus.length === 0 ) return; + /** * This fallback displays (both in editor and on front) * a list of pages only if no menu (user assigned or @@ -246,7 +252,7 @@ function Navigation( { * nor to be undoable, hence why it is marked as non persistent */ __unstableMarkNextChangeAsNotPersistent(); - setRef( navigationMenus[ 0 ].id ); + setRef( fallbackNavigationMenus[ 0 ].id ); }, [ navigationMenus ] ); const navRef = useRef(); From 130a93ebf7ea62907797a3481eaad06195bc68d1 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 5 Sep 2022 16:26:49 +0200 Subject: [PATCH 15/16] Update after rebase from trunk --- .../src/navigation/edit/index.js | 10 +++- .../edit/navigation-menu-selector.js | 54 ------------------- 2 files changed, 9 insertions(+), 55 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index a9088d67d5dd2c..03b87ad043eaf3 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -24,7 +24,7 @@ import { Warning, __experimentalUseBlockOverlayActive as useBlockOverlayActive, } from '@wordpress/block-editor'; -import { EntityProvider } from '@wordpress/core-data'; +import { EntityProvider, store as coreStore } from '@wordpress/core-data'; import { useDispatch } from '@wordpress/data'; import { @@ -109,6 +109,7 @@ function Navigation( { const recursionId = `navigationMenu/${ ref }`; const hasAlreadyRendered = useHasRecursion( recursionId ); + const { editEntityRecord } = useDispatch( coreStore ); // Preload classic menus, so that they don't suddenly pop-in when viewing // the Select Menu dropdown. @@ -124,6 +125,11 @@ function Navigation( { name: 'block-library/core/navigation/classic-menu-conversion', } ); + const [ showMenuAutoPublishDraftNotice, hideMenuAutoPublishDraftNotice ] = + useNavigationNotice( { + name: 'block-library/core/navigation/auto-publish-draft', + } ); + const [ showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice, @@ -203,6 +209,7 @@ function Navigation( { isNavigationMenuResolved, isNavigationMenuMissing, navigationMenus, + navigationMenu, canUserUpdateNavigationMenu, hasResolvedCanUserUpdateNavigationMenu, canUserDeleteNavigationMenu, @@ -457,6 +464,7 @@ function Navigation( { ); // Prompt the user to publish the menu they have set as a draft + const isDraftNavigationMenu = navigationMenu?.status === 'draft'; useEffect( async () => { hideMenuAutoPublishDraftNotice(); if ( ! isDraftNavigationMenu ) return; diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 99f3fb87c85d8e..b85171c4f507a2 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -5,24 +5,15 @@ import { MenuGroup, MenuItem, MenuItemsChoice, -<<<<<<< HEAD DropdownMenu, Button, VisuallyHidden, -======= - ToolbarDropdownMenu, ->>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; import { Icon, chevronUp, chevronDown } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; -<<<<<<< HEAD import { useEffect, useMemo, useState } from '@wordpress/element'; -======= -import { addQueryArgs } from '@wordpress/url'; -import { forwardRef, useMemo } from '@wordpress/element'; ->>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) /** * Internal dependencies @@ -30,7 +21,6 @@ import { forwardRef, useMemo } from '@wordpress/element'; import useNavigationMenu from '../use-navigation-menu'; import useNavigationEntities from '../use-navigation-entities'; -<<<<<<< HEAD function NavigationMenuSelector( { currentMenuId, onSelectNavigationMenu, @@ -41,20 +31,6 @@ function NavigationMenuSelector( { createNavigationMenuIsError, toggleProps = {}, } ) { -======= -function NavigationMenuSelector( - { - currentMenuId, - onSelectNavigationMenu, - onSelectClassicMenu, - onCreateNew, - showManageActions = false, - actionLabel, - toggleProps = {}, - }, - forwardedRef -) { ->>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) /* translators: %s: The name of a menu. */ const createActionLabel = __( "Create from '%s'" ); @@ -75,7 +51,6 @@ function NavigationMenuSelector( canSwitchNavigationMenu, } = useNavigationMenu(); -<<<<<<< HEAD const [ currentTitle ] = useEntityProp( 'postType', 'wp_navigation', @@ -87,19 +62,14 @@ function NavigationMenuSelector( hasResolvedNavigationMenus && ! isCreatingMenu; -======= ->>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) const menuChoices = useMemo( () => { return ( navigationMenus?.map( ( { id, title } ) => { const label = decodeEntities( title.rendered ); -<<<<<<< HEAD if ( id === currentMenuId && ! isCreatingMenu ) { setSelectorLabel( currentTitle ); setEnableOptions( shouldEnableMenuSelector ); } -======= ->>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) return { value: id, label, @@ -107,7 +77,6 @@ function NavigationMenuSelector( }; } ) || [] ); -<<<<<<< HEAD }, [ currentTitle, currentMenuId, @@ -117,14 +86,10 @@ function NavigationMenuSelector( hasResolvedNavigationMenus, ] ); -======= - }, [ navigationMenus ] ); ->>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) const hasNavigationMenus = !! navigationMenus?.length; const hasClassicMenus = !! classicMenus?.length; const showNavigationMenus = !! canSwitchNavigationMenu; const showClassicMenus = !! canUserCreateNavigationMenu; -<<<<<<< HEAD const noMenuSelected = hasNavigationMenus && ! currentMenuId; const noBlockMenus = ! hasNavigationMenus && hasResolvedNavigationMenus; @@ -189,21 +154,6 @@ function NavigationMenuSelector( { __( 'Create new menu' ) } ); -======= - const hasManagePermissions = - canUserCreateNavigationMenu || canUserUpdateNavigationMenu; - - // Show the selector if: - // - has switch or create permissions and there are block or classic menus not previously imported. - // - user has create or update permissions and component should show the menu actions. - const showSelectMenus = - ( ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) && - ( hasNavigationMenus || hasClassicMenus ) ) || - ( hasManagePermissions && showManageActions ); - - if ( ! showSelectMenus ) { - return null; ->>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) } return ( @@ -221,10 +171,6 @@ function NavigationMenuSelector( { -<<<<<<< HEAD -======= - onClose(); ->>>>>>> c9c4d2f402 (Remove prevent duplicated classic menus for another PR) onSelectNavigationMenu( menuId ); } } choices={ menuChoices } From ccf7e060b4034458d628d531ee7f72d4e1d33215 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 5 Sep 2022 16:28:57 +0200 Subject: [PATCH 16/16] Remove duplicated comment --- packages/block-library/src/navigation/edit/index.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 03b87ad043eaf3..8c6b5ee549d41e 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -3,9 +3,6 @@ */ import classnames from 'classnames'; -/** - * WordPress dependencies - */ /** * WordPress dependencies */ @@ -40,9 +37,6 @@ import { speak } from '@wordpress/a11y'; import { createBlock } from '@wordpress/blocks'; import { close, Icon } from '@wordpress/icons'; -/** - * Internal dependencies - */ /** * Internal dependencies */