From 93fdc550ce203a1e159ffae0caa1872dd328a6bd Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 23 May 2023 16:21:36 +0200 Subject: [PATCH 01/31] added more menu to navigation with delete menu option --- .../index.js | 49 ++++++++++++++++++- .../style.scss | 10 ++++ packages/edit-site/src/style.scss | 2 + 3 files changed, 59 insertions(+), 2 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/style.scss diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 06bc660057f93..595eb66f6158e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -1,18 +1,22 @@ /** * WordPress dependencies */ -import { useEntityRecord } from '@wordpress/core-data'; +import { useEntityRecord, store as coreStore } from '@wordpress/core-data'; import { __experimentalUseNavigator as useNavigator, Spinner, + DropdownMenu, + MenuItem, + MenuGroup, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useCallback, useMemo } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { BlockEditorProvider } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { decodeEntities } from '@wordpress/html-entities'; +import { moreVertical } from '@wordpress/icons'; /** * Internal dependencies @@ -74,6 +78,7 @@ export default function SidebarNavigationScreenNavigationMenu() { return ( ); } + +const POPOVER_PROPS = { + position: 'bottom right', + variant: 'toolbar', +}; + +function ScreenNavigationMoreMenu( navigationMenuID ) { + const { deleteEntityRecord } = useDispatch( coreStore ); + return ( + + { ( { onClose } ) => ( +
+ + { __( 'Rename' ) } + { __( 'Duplicate' ) } + { + deleteEntityRecord( + 'postType', + 'wp_navigation', + navigationMenuID, + { force: true } + ); + onClose(); + } } + > + { __( 'Delete' ) } + + +
+ ) } + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/style.scss new file mode 100644 index 0000000000000..11dcf5a0a658b --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/style.scss @@ -0,0 +1,10 @@ +.sidebar-navigation__more-menu { + .components-button { + color: $gray-600; + &:hover, + &:focus, + &[aria-current] { + color: $white; + } + } +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 1004684c17cc2..e5dd4ea7c7a91 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -28,7 +28,9 @@ @import "./components/sidebar-navigation-item/style.scss"; @import "./components/sidebar-navigation-screen/style.scss"; @import "./components/sidebar-navigation-screen-global-styles/style.scss"; +@import "./components/sidebar-navigation-screen-navigation-menu/style.scss"; @import "./components/sidebar-navigation-screen-page/style.scss"; +@import "./components/sidebar-navigation-screen-pages/style.scss"; @import "./components/sidebar-navigation-screen-template/style.scss"; @import "./components/sidebar-navigation-screen-templates/style.scss"; @import "./components/sidebar-navigation-subtitle/style.scss"; From b733e502744fb2ab2ed8dd9bbf135d923d75d3bb Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 24 May 2023 17:41:45 +0200 Subject: [PATCH 02/31] modal for the rename function --- .../index.js | 103 ++++++++++++------ 1 file changed, 71 insertions(+), 32 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 595eb66f6158e..545f554995fa5 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -4,13 +4,18 @@ import { useEntityRecord, store as coreStore } from '@wordpress/core-data'; import { __experimentalUseNavigator as useNavigator, - Spinner, + __experimentalHStack as HStack, + __experimentalVStack as VStack, + Button, DropdownMenu, + Spinner, + TextControl, MenuItem, MenuGroup, + Modal, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useCallback, useMemo } from '@wordpress/element'; +import { useCallback, useMemo, useState } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { BlockEditorProvider } from '@wordpress/block-editor'; @@ -47,6 +52,8 @@ export default function SidebarNavigationScreenNavigationMenu() { const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; + const [ isOpen, setOpen ] = useState( false ); + if ( isLoading ) { return ( setOpen( false ); + const openModal = () => setOpen( true ); return ( - - { ( { onClose } ) => ( -
- - { __( 'Rename' ) } - { __( 'Duplicate' ) } - { - deleteEntityRecord( - 'postType', - 'wp_navigation', - navigationMenuID, - { force: true } - ); - onClose(); - } } - > - { __( 'Delete' ) } - - -
+ <> + + { ( { onClose } ) => ( +
+ + + { __( 'Rename' ) } + + { __( 'Duplicate' ) } + { + deleteEntityRecord( + 'postType', + 'wp_navigation', + navigationMenuID, + { force: true } + ); + onClose(); + } } + > + { __( 'Delete' ) } + + +
+ ) } + + + { isOpen && ( + +
+ + + + + + + + +
+ ) } - + ); } From b4614b1a8f56fcec5aa52e202f97fd4b1ccee3b6 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 25 May 2023 10:04:10 +0200 Subject: [PATCH 03/31] prop refactoring, title on rename popup --- .../index.js | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 545f554995fa5..fc3b8e80f1a73 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -39,6 +39,8 @@ const { useHistory } = unlock( routerPrivateApis ); const noop = () => {}; export default function SidebarNavigationScreenNavigationMenu() { + const { deleteEntityRecord } = useDispatch( coreStore ); + const [ isOpen, setOpen ] = useState( false ); const postType = `wp_navigation`; const { params: { postId }, @@ -52,7 +54,13 @@ export default function SidebarNavigationScreenNavigationMenu() { const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; - const [ isOpen, setOpen ] = useState( false ); + const modalProps = { + postId, + isOpen, + setOpen, + deleteEntityRecord, + menuTitle, + }; if ( isLoading ) { return ( @@ -85,7 +93,7 @@ export default function SidebarNavigationScreenNavigationMenu() { return ( setOpen( false ); const openModal = () => setOpen( true ); + return ( <> (
- + { + openModal(); + onClose(); + } } + > { __( 'Rename' ) } { __( 'Duplicate' ) } @@ -198,7 +212,7 @@ function ScreenNavigationMoreMenu( navigationMenuID, isOpen, setOpen ) { deleteEntityRecord( 'postType', 'wp_navigation', - navigationMenuID, + postId, { force: true } ); onClose(); @@ -217,7 +231,7 @@ function ScreenNavigationMoreMenu( navigationMenuID, isOpen, setOpen ) { From 120bb55fc9fa693dbcf9ba40dddeeca4a93bc601 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 31 May 2023 16:35:58 +0200 Subject: [PATCH 04/31] very ugly renaming of the menu --- .../index.js | 55 +++++++++++++++---- 1 file changed, 43 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index fc3b8e80f1a73..668e1aceebf96 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -40,7 +40,11 @@ const noop = () => {}; export default function SidebarNavigationScreenNavigationMenu() { const { deleteEntityRecord } = useDispatch( coreStore ); + const { editEntityRecord } = useDispatch( coreStore ); + const { saveEditedEntityRecord } = useDispatch( coreStore ); + const [ isOpen, setOpen ] = useState( false ); + const postType = `wp_navigation`; const { params: { postId }, @@ -52,14 +56,34 @@ export default function SidebarNavigationScreenNavigationMenu() { postId ); + const handleSave = async () => { + saveEditedEntityRecord( 'postType', postType, postId ); + setOpen( false ); + }; + const handleChange = ( title ) => + editEntityRecord( 'postType', postType, postId, { title } ); + const handleDelete = () => + deleteEntityRecord( 'postType', postType, postId, { force: true } ); + const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; + const element = useSelect( + ( select ) => + select( coreStore ).getEditedEntityRecord( + 'postType', + postType, + postId + ), + [ postType, postId ] + ); + const modalProps = { - postId, isOpen, setOpen, - deleteEntityRecord, - menuTitle, + handleDelete, + handleSave, + handleChange, + editedMenuTitle: element.title, }; if ( isLoading ) { @@ -182,7 +206,14 @@ const POPOVER_PROPS = { }; function ScreenNavigationMoreMenu( props ) { - const { postId, isOpen, setOpen, deleteEntityRecord, menuTitle } = props; + const { + isOpen, + setOpen, + handleDelete, + handleSave, + handleChange, + editedMenuTitle, + } = props; const closeModal = () => setOpen( false ); const openModal = () => setOpen( true ); @@ -209,12 +240,7 @@ function ScreenNavigationMoreMenu( props ) { isDestructive isTertiary onClick={ () => { - deleteEntityRecord( - 'postType', - 'wp_navigation', - postId, - { force: true } - ); + handleDelete(); onClose(); } } > @@ -231,8 +257,9 @@ function ScreenNavigationMoreMenu( props ) { From bc52937ed9eab39e0ab45e57f8c38fdfe7ef7b90 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 2 Jun 2023 12:41:41 +0200 Subject: [PATCH 05/31] duplicate function --- .../index.js | 35 +++++++++++++++---- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 668e1aceebf96..9ac10e3dd4f20 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -39,10 +39,12 @@ const { useHistory } = unlock( routerPrivateApis ); const noop = () => {}; export default function SidebarNavigationScreenNavigationMenu() { - const { deleteEntityRecord } = useDispatch( coreStore ); - const { editEntityRecord } = useDispatch( coreStore ); - const { saveEditedEntityRecord } = useDispatch( coreStore ); - + const { + deleteEntityRecord, + editEntityRecord, + saveEntityRecord, + saveEditedEntityRecord, + } = useDispatch( coreStore ); const [ isOpen, setOpen ] = useState( false ); const postType = `wp_navigation`; @@ -56,6 +58,8 @@ export default function SidebarNavigationScreenNavigationMenu() { postId ); + const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; + const handleSave = async () => { saveEditedEntityRecord( 'postType', postType, postId ); setOpen( false ); @@ -64,8 +68,16 @@ export default function SidebarNavigationScreenNavigationMenu() { editEntityRecord( 'postType', postType, postId, { title } ); const handleDelete = () => deleteEntityRecord( 'postType', postType, postId, { force: true } ); - - const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; + const handleDuplicate = async () => { + const savedRecord = await saveEntityRecord( 'postType', postType, { + title: menuTitle, + content: navigationMenu?.content?.raw, + status: 'publish', + } ); + if ( savedRecord ) { + //TODO: add toast message and navigate back? + } + }; const element = useSelect( ( select ) => @@ -83,6 +95,7 @@ export default function SidebarNavigationScreenNavigationMenu() { handleDelete, handleSave, handleChange, + handleDuplicate, editedMenuTitle: element.title, }; @@ -212,6 +225,7 @@ function ScreenNavigationMoreMenu( props ) { handleDelete, handleSave, handleChange, + handleDuplicate, editedMenuTitle, } = props; const closeModal = () => setOpen( false ); @@ -235,7 +249,14 @@ function ScreenNavigationMoreMenu( props ) { > { __( 'Rename' ) } - { __( 'Duplicate' ) } + { + handleDuplicate(); + onClose(); + } } + > + { __( 'Duplicate' ) } + Date: Fri, 2 Jun 2023 15:21:14 +0200 Subject: [PATCH 06/31] added snackbar notices to each action --- .../index.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 9ac10e3dd4f20..6ace2169aea6c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -22,6 +22,7 @@ import { BlockEditorProvider } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { decodeEntities } from '@wordpress/html-entities'; import { moreVertical } from '@wordpress/icons'; +import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies @@ -46,6 +47,7 @@ export default function SidebarNavigationScreenNavigationMenu() { saveEditedEntityRecord, } = useDispatch( coreStore ); const [ isOpen, setOpen ] = useState( false ); + const { createSuccessNotice } = useDispatch( noticesStore ); const postType = `wp_navigation`; const { @@ -63,11 +65,19 @@ export default function SidebarNavigationScreenNavigationMenu() { const handleSave = async () => { saveEditedEntityRecord( 'postType', postType, postId ); setOpen( false ); + createSuccessNotice( 'Renamed Navigation menu', { + type: 'snackbar', + } ); }; const handleChange = ( title ) => editEntityRecord( 'postType', postType, postId, { title } ); - const handleDelete = () => + const handleDelete = () => { deleteEntityRecord( 'postType', postType, postId, { force: true } ); + createSuccessNotice( 'Deleted Navigation menu', { + type: 'snackbar', + } ); + //TODO: navigate to previous menu + }; const handleDuplicate = async () => { const savedRecord = await saveEntityRecord( 'postType', postType, { title: menuTitle, @@ -75,7 +85,10 @@ export default function SidebarNavigationScreenNavigationMenu() { status: 'publish', } ); if ( savedRecord ) { - //TODO: add toast message and navigate back? + createSuccessNotice( 'Duplicated Navigation menu', { + type: 'snackbar', + } ); + //TODO: navigate to the duplicated menu } }; From 180a8977bf8db11dd5e733fb7e29856c5fb509dc Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Mon, 5 Jun 2023 12:49:54 +0200 Subject: [PATCH 07/31] navigate to correct places on delete and duplicate. Added Copy after title on duplication --- .../sidebar-navigation-screen-navigation-menu/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 6ace2169aea6c..b446452a29ea7 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -51,6 +51,7 @@ export default function SidebarNavigationScreenNavigationMenu() { const postType = `wp_navigation`; const { + goTo, params: { postId }, } = useNavigator(); @@ -76,11 +77,11 @@ export default function SidebarNavigationScreenNavigationMenu() { createSuccessNotice( 'Deleted Navigation menu', { type: 'snackbar', } ); - //TODO: navigate to previous menu + goTo( '/navigation' ); }; const handleDuplicate = async () => { const savedRecord = await saveEntityRecord( 'postType', postType, { - title: menuTitle, + title: menuTitle + __( ' (Copy)' ), content: navigationMenu?.content?.raw, status: 'publish', } ); @@ -88,7 +89,7 @@ export default function SidebarNavigationScreenNavigationMenu() { createSuccessNotice( 'Duplicated Navigation menu', { type: 'snackbar', } ); - //TODO: navigate to the duplicated menu + goTo( `/navigation/${ postType }/${ savedRecord.id }` ); } }; From 884f8327d721a1440705aaeee5a693f7b35ac052 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 09:52:10 +0100 Subject: [PATCH 08/31] i18n Co-authored-by: Ben Dwyer --- .../sidebar-navigation-screen-navigation-menu/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index b446452a29ea7..7c92f4f1c3fbc 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -66,7 +66,7 @@ export default function SidebarNavigationScreenNavigationMenu() { const handleSave = async () => { saveEditedEntityRecord( 'postType', postType, postId ); setOpen( false ); - createSuccessNotice( 'Renamed Navigation menu', { + createSuccessNotice( __( 'Renamed Navigation menu' ), { type: 'snackbar', } ); }; @@ -74,7 +74,7 @@ export default function SidebarNavigationScreenNavigationMenu() { editEntityRecord( 'postType', postType, postId, { title } ); const handleDelete = () => { deleteEntityRecord( 'postType', postType, postId, { force: true } ); - createSuccessNotice( 'Deleted Navigation menu', { + createSuccessNotice( __( 'Deleted Navigation menu' ), { type: 'snackbar', } ); goTo( '/navigation' ); From 546c62ec31c00dda544413354387c683bde0e602 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 09:52:24 +0100 Subject: [PATCH 09/31] Another i18n Co-authored-by: Ben Dwyer --- .../sidebar-navigation-screen-navigation-menu/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 7c92f4f1c3fbc..5f26ace3962b7 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -309,7 +309,7 @@ function ScreenNavigationMoreMenu( props ) { type="submit" onClick={ handleSave } > - { __( 'Ok' ) } + { __( 'OK' ) } From 847c3002a5e99f2869191c06a31967c93dd360ec Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 09:52:45 +0100 Subject: [PATCH 10/31] Apply suggestions from code review Co-authored-by: Ben Dwyer --- .../sidebar-navigation-screen-navigation-menu/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 5f26ace3962b7..c87873c8c85bc 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -86,7 +86,7 @@ export default function SidebarNavigationScreenNavigationMenu() { status: 'publish', } ); if ( savedRecord ) { - createSuccessNotice( 'Duplicated Navigation menu', { + createSuccessNotice( __( 'Duplicated Navigation menu' ), { type: 'snackbar', } ); goTo( `/navigation/${ postType }/${ savedRecord.id }` ); From e11d696da4096c5af9fe8a5934c47d64f995ad3e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 09:59:33 +0100 Subject: [PATCH 11/31] Use self documenting var name --- .../sidebar-navigation-screen-navigation-menu/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index c87873c8c85bc..5495ac87f483f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -93,7 +93,7 @@ export default function SidebarNavigationScreenNavigationMenu() { } }; - const element = useSelect( + const entity = useSelect( ( select ) => select( coreStore ).getEditedEntityRecord( 'postType', @@ -110,7 +110,7 @@ export default function SidebarNavigationScreenNavigationMenu() { handleSave, handleChange, handleDuplicate, - editedMenuTitle: element.title, + editedMenuTitle: entity?.title || '', }; if ( isLoading ) { From 827cf11ff0333956b490a28620bf5db2b6ac0d93 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 09:59:58 +0100 Subject: [PATCH 12/31] Use consistent confirmatory action wording --- .../sidebar-navigation-screen-navigation-menu/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 5495ac87f483f..cef5ac639f6e7 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -309,7 +309,7 @@ function ScreenNavigationMoreMenu( props ) { type="submit" onClick={ handleSave } > - { __( 'OK' ) } + { __( 'Save' ) } From ef6783078f26ba65bd0b18d1a49716351a6f42d1 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 10:06:28 +0100 Subject: [PATCH 13/31] Refactor MoreMenu to component --- .../index.js | 104 +---------------- .../more-menu.js | 108 ++++++++++++++++++ 2 files changed, 110 insertions(+), 102 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index cef5ac639f6e7..3b7b3ff18265d 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -4,15 +4,7 @@ import { useEntityRecord, store as coreStore } from '@wordpress/core-data'; import { __experimentalUseNavigator as useNavigator, - __experimentalHStack as HStack, - __experimentalVStack as VStack, - Button, - DropdownMenu, Spinner, - TextControl, - MenuItem, - MenuGroup, - Modal, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from '@wordpress/element'; @@ -21,7 +13,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; import { BlockEditorProvider } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { decodeEntities } from '@wordpress/html-entities'; -import { moreVertical } from '@wordpress/icons'; + import { store as noticesStore } from '@wordpress/notices'; /** @@ -35,6 +27,7 @@ import { } from '../../utils/is-previewing-theme'; import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus'; import NavigationMenuContent from '../sidebar-navigation-screen-navigation-menus/navigation-menu-content'; +import ScreenNavigationMoreMenu from './more-menu'; const { useHistory } = unlock( routerPrivateApis ); const noop = () => {}; @@ -226,96 +219,3 @@ function NavigationMenuEditor( { navigationMenu } ) { ); } - -const POPOVER_PROPS = { - position: 'bottom right', - variant: 'toolbar', -}; - -function ScreenNavigationMoreMenu( props ) { - const { - isOpen, - setOpen, - handleDelete, - handleSave, - handleChange, - handleDuplicate, - editedMenuTitle, - } = props; - const closeModal = () => setOpen( false ); - const openModal = () => setOpen( true ); - - return ( - <> - - { ( { onClose } ) => ( -
- - { - openModal(); - onClose(); - } } - > - { __( 'Rename' ) } - - { - handleDuplicate(); - onClose(); - } } - > - { __( 'Duplicate' ) } - - { - handleDelete(); - onClose(); - } } - > - { __( 'Delete' ) } - - -
- ) } - - - { isOpen && ( - -
- - - - - - - - -
- - ) } - - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js new file mode 100644 index 0000000000000..3eeaca16337b1 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js @@ -0,0 +1,108 @@ +/** + * WordPress dependencies + */ +import { + __experimentalHStack as HStack, + __experimentalVStack as VStack, + Button, + DropdownMenu, + TextControl, + MenuItem, + MenuGroup, + Modal, +} from '@wordpress/components'; +import { moreVertical } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +const POPOVER_PROPS = { + position: 'bottom right', + variant: 'toolbar', +}; + +export default function ScreenNavigationMoreMenu( props ) { + const { + isOpen, + setOpen, + handleDelete, + handleSave, + handleChange, + handleDuplicate, + editedMenuTitle, + } = props; + const closeModal = () => setOpen( false ); + const openModal = () => setOpen( true ); + + return ( + <> + + { ( { onClose } ) => ( +
+ + { + openModal(); + onClose(); + } } + > + { __( 'Rename' ) } + + { + handleDuplicate(); + onClose(); + } } + > + { __( 'Duplicate' ) } + + { + handleDelete(); + onClose(); + } } + > + { __( 'Delete' ) } + + +
+ ) } + + + { isOpen && ( + +
+ + + + + + + + +
+ + ) } + + ); +} From d9609bb82ff1c0b2301c85c5323c3f98c6c5710f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 10:14:52 +0100 Subject: [PATCH 14/31] Extract Modal to seperate component --- .../more-menu.js | 50 +++++-------------- .../rename-modal.js | 46 +++++++++++++++++ 2 files changed, 58 insertions(+), 38 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js index 3eeaca16337b1..bb052cf0e264c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js @@ -1,19 +1,15 @@ /** * WordPress dependencies */ -import { - __experimentalHStack as HStack, - __experimentalVStack as VStack, - Button, - DropdownMenu, - TextControl, - MenuItem, - MenuGroup, - Modal, -} from '@wordpress/components'; +import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import RenameModal from './rename-modal'; + const POPOVER_PROPS = { position: 'bottom right', variant: 'toolbar', @@ -74,34 +70,12 @@ export default function ScreenNavigationMoreMenu( props ) { { isOpen && ( - -
- - - - - - - - -
- + ) } ); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js new file mode 100644 index 0000000000000..34af336a16ba5 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js @@ -0,0 +1,46 @@ +/** + * WordPress dependencies + */ +import { + __experimentalHStack as HStack, + __experimentalVStack as VStack, + Button, + TextControl, + Modal, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +export default function RenameModal( { + onClose, + editedMenuTitle, + handleChange, + handleSave, +} ) { + return ( + +
+ + + + + + + + +
+ + ); +} From a757dfd96ced6e36c99b9c34aac57347e812e049 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 10:22:26 +0100 Subject: [PATCH 15/31] Refactor change function --- .../sidebar-navigation-screen-navigation-menu/index.js | 5 +++-- .../sidebar-navigation-screen-navigation-menu/more-menu.js | 4 ++-- .../rename-modal.js | 4 ++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 3b7b3ff18265d..04b93eb99a64d 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -63,8 +63,9 @@ export default function SidebarNavigationScreenNavigationMenu() { type: 'snackbar', } ); }; - const handleChange = ( title ) => + const editRecordTitle = ( title = '' ) => editEntityRecord( 'postType', postType, postId, { title } ); + const handleDelete = () => { deleteEntityRecord( 'postType', postType, postId, { force: true } ); createSuccessNotice( __( 'Deleted Navigation menu' ), { @@ -101,7 +102,7 @@ export default function SidebarNavigationScreenNavigationMenu() { setOpen, handleDelete, handleSave, - handleChange, + onChange: editRecordTitle, handleDuplicate, editedMenuTitle: entity?.title || '', }; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js index bb052cf0e264c..72bb7ddccd8c0 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js @@ -21,7 +21,7 @@ export default function ScreenNavigationMoreMenu( props ) { setOpen, handleDelete, handleSave, - handleChange, + onChange, handleDuplicate, editedMenuTitle, } = props; @@ -72,7 +72,7 @@ export default function ScreenNavigationMoreMenu( props ) { { isOpen && ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js index 34af336a16ba5..dc8f447dfb4b9 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js @@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n'; export default function RenameModal( { onClose, editedMenuTitle, - handleChange, + onChange, handleSave, } ) { return ( @@ -24,7 +24,7 @@ export default function RenameModal( { __nextHasNoMarginBottom value={ editedMenuTitle } placeholder={ __( 'Navigation title' ) } - onChange={ handleChange } + onChange={ onChange } /> From 49d595729658e935b82e9fccf5dc5d0a140d81e9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 11:07:22 +0100 Subject: [PATCH 17/31] =?UTF-8?q?Localise=20state=20closer=20to=20where=20?= =?UTF-8?q?it=E2=80=99s=20needed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.js | 23 ++++++++---------- .../more-menu.js | 24 +++++++++---------- .../rename-modal.js | 2 +- 3 files changed, 22 insertions(+), 27 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 0a77704c5dbdf..afde9215453a0 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -7,7 +7,7 @@ import { Spinner, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useCallback, useMemo, useState } from '@wordpress/element'; +import { useCallback, useMemo } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { BlockEditorProvider } from '@wordpress/block-editor'; @@ -39,7 +39,7 @@ export default function SidebarNavigationScreenNavigationMenu() { editEntityRecord, saveEditedEntityRecord, } = useDispatch( coreStore ); - const [ isOpen, setOpen ] = useState( false ); + const { createSuccessNotice } = useDispatch( noticesStore ); const postType = `wp_navigation`; @@ -58,7 +58,6 @@ export default function SidebarNavigationScreenNavigationMenu() { const handleSave = async ( edits = {} ) => { editEntityRecord( 'postType', postType, postId, edits ); - setOpen( false ); await saveEditedEntityRecord( 'postType', postType, postId ); createSuccessNotice( __( 'Renamed Navigation menu' ), { type: 'snackbar', @@ -86,15 +85,6 @@ export default function SidebarNavigationScreenNavigationMenu() { } }; - const modalProps = { - isOpen, - setOpen, - handleDelete, - handleSave, - handleDuplicate, - menuTitle: decodeEntities( menuTitle ), - }; - if ( isLoading ) { return ( + } title={ decodeEntities( menuTitle ) } description={ __( 'Navigation menus are a curated collection of blocks that allow visitors to get around your site.' diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js index d18f9a8fcf751..3338f96605237 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js @@ -4,6 +4,7 @@ import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; +import { useState } from '@wordpress/element'; /** * Internal dependencies @@ -16,16 +17,12 @@ const POPOVER_PROPS = { }; export default function ScreenNavigationMoreMenu( props ) { - const { - isOpen, - setOpen, - handleDelete, - handleSave, - handleDuplicate, - menuTitle, - } = props; - const closeModal = () => setOpen( false ); - const openModal = () => setOpen( true ); + const { handleDelete, handleSave, handleDuplicate, menuTitle } = props; + + const [ renameModalOpen, setRenameModalOpen ] = useState( false ); + + const closeRenameModal = () => setRenameModalOpen( false ); + const openRenameModal = () => setRenameModalOpen( true ); return ( <> @@ -39,7 +36,8 @@ export default function ScreenNavigationMoreMenu( props ) { { - openModal(); + openRenameModal(); + // Close the dropdown after opening the modal. onClose(); } } > @@ -68,9 +66,9 @@ export default function ScreenNavigationMoreMenu( props ) { ) } - { isOpen && ( + { renameModalOpen && ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js index e753c65a1c4d1..5d0dbe3f5d325 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js @@ -12,7 +12,6 @@ import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; export default function RenameModal( { onClose, menuTitle, handleSave } ) { - // create local state to store the editedMenuTitle const [ editedMenuTitle, setEditedMenuTitle ] = useState( menuTitle ); return ( @@ -36,6 +35,7 @@ export default function RenameModal( { onClose, menuTitle, handleSave } ) { onClick={ ( e ) => { e.preventDefault(); handleSave( { title: editedMenuTitle } ); + onClose(); } } > { __( 'Save' ) } From 2da85f6406bf380f01cd09b21445b4ae509cc580 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 11:10:56 +0100 Subject: [PATCH 18/31] =?UTF-8?q?Disable=20=E2=80=9CSave=E2=80=9D=20button?= =?UTF-8?q?=20until=20menu=20title=20is=20modified?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sidebar-navigation-screen-navigation-menu/more-menu.js | 2 +- .../rename-modal.js | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js index 3338f96605237..713c03aaae850 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js @@ -70,7 +70,7 @@ export default function ScreenNavigationMoreMenu( props ) { ) } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js index 5d0dbe3f5d325..19263fcb6c521 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js @@ -11,7 +11,7 @@ import { import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; -export default function RenameModal( { onClose, menuTitle, handleSave } ) { +export default function RenameModal( { menuTitle, onClose, onSave } ) { const [ editedMenuTitle, setEditedMenuTitle ] = useState( menuTitle ); return ( @@ -30,11 +30,14 @@ export default function RenameModal( { onClose, menuTitle, handleSave } ) { + + + + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js index f69ccdb748066..dfd7085d503fb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js @@ -10,6 +10,7 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import RenameModal from './rename-modal'; +import DeleteModal from './delete-modal'; const POPOVER_PROPS = { position: 'bottom right', @@ -20,9 +21,14 @@ export default function ScreenNavigationMoreMenu( props ) { const { onDelete, onSave, onDuplicate, menuTitle } = props; const [ renameModalOpen, setRenameModalOpen ] = useState( false ); + const [ deleteModalOpen, setDeleteModalOpen ] = useState( false ); - const closeRenameModal = () => setRenameModalOpen( false ); + const closeModals = () => { + setRenameModalOpen( false ); + setDeleteModalOpen( false ); + }; const openRenameModal = () => setRenameModalOpen( true ); + const openDeleteModal = () => setDeleteModalOpen( true ); return ( <> @@ -55,7 +61,9 @@ export default function ScreenNavigationMoreMenu( props ) { isDestructive isTertiary onClick={ () => { - onDelete(); + openDeleteModal(); + + // Close the dropdown after opening the modal. onClose(); } } > @@ -66,9 +74,13 @@ export default function ScreenNavigationMoreMenu( props ) { ) } + { deleteModalOpen && ( + + ) } + { renameModalOpen && ( From 6bfccb31e6ff152afe0752ac48922e8760fac9f9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 14:41:43 +0100 Subject: [PATCH 28/31] Fix rename input focus border clipping --- .../rename-modal.js | 2 +- .../sidebar-navigation-screen-navigation-menu/style.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js index 09beb4e9bc94a..99f674ba8bee3 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js @@ -16,7 +16,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) { return ( -
+ Date: Fri, 9 Jun 2023 14:41:56 +0100 Subject: [PATCH 29/31] Use default variant to get correct styles --- .../sidebar-navigation-screen-navigation-menu/more-menu.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js index dfd7085d503fb..4b3a37a52f942 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js @@ -14,7 +14,6 @@ import DeleteModal from './delete-modal'; const POPOVER_PROPS = { position: 'bottom right', - variant: 'toolbar', }; export default function ScreenNavigationMoreMenu( props ) { From eac8d1c0288ef4ba685caa4a68ed87564039f692 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 9 Jun 2023 16:12:29 +0100 Subject: [PATCH 30/31] Make `Copy` translatable --- .../sidebar-navigation-screen-navigation-menu/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 8f30fb86e8f76..09dc9106af192 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -154,7 +154,11 @@ export default function SidebarNavigationScreenNavigationMenu() { 'postType', postType, { - title: menuTitle + __( ' (Copy)' ), + title: sprintf( + /* translators: %s: Navigation menu title */ + __( '%s (Copy)' ), + menuTitle + ), content: navigationMenu?.content?.raw, status: 'publish', }, From e49e2ecc8900703ab2ab4d28ac7a4253bb258148 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 12 Jun 2023 10:29:35 +0100 Subject: [PATCH 31/31] Updating confirmatory wording --- .../sidebar-navigation-screen-navigation-menu/delete-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-modal.js index 7acac802cf238..23737a434e699 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-modal.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-modal.js @@ -16,7 +16,7 @@ export default function RenameModal( { onClose, onConfirm } ) {

{ __( - 'Are you sure you wish to delete this Navigation menu?' + 'Are you sure you want to delete this Navigation menu?' ) }