diff --git a/packages/edit-site/src/components/add-new-template/new-template-part.js b/packages/edit-site/src/components/add-new-template/new-template-part.js index 172eb7fb47846..1d5a6e08d0c0e 100644 --- a/packages/edit-site/src/components/add-new-template/new-template-part.js +++ b/packages/edit-site/src/components/add-new-template/new-template-part.js @@ -67,9 +67,12 @@ export default function NewTemplatePart( { setCanvasMode( 'edit' ); // Navigate to the created template part editor. - history.push( { - postId: templatePart.id, - postType: templatePart.type, + window.queueMicrotask( () => { + history.push( { + postId: templatePart.id, + postType: 'wp_template_part', + path: '/template-parts/single', + } ); } ); // TODO: Add a success notice? diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index 2fb715dddbcf9..dd7142b386b5d 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -102,7 +102,6 @@ export default function NewTemplate( { const { setTemplate, setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - async function createTemplate( template, isWPSuggestion = true ) { if ( isCreatingTemplate ) { return; @@ -140,15 +139,18 @@ export default function NewTemplate( { // Set template before navigating away to avoid initial stale value. setTemplate( newTemplate.id, newTemplate.slug ); - // Switch to edit mode. setCanvasMode( 'edit' ); // Navigate to the created template editor. - history.push( { - postId: newTemplate.id, - postType: newTemplate.type, + window.queueMicrotask( () => { + history.push( { + postId: newTemplate.id, + postType: newTemplate.type, + path: '/templates/single', + } ); } ); + createSuccessNotice( sprintf( // translators: %s: Title of the created template e.g: "Category". diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js new file mode 100644 index 0000000000000..639f6c8ccb83c --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { Button } from '@wordpress/components'; +import { store as coreStore } from '@wordpress/core-data'; +import { decodeEntities } from '@wordpress/html-entities'; + +/** + * Internal dependencies + */ +import SidebarNavigationScreen from '../sidebar-navigation-screen'; +import { unlock } from '../../private-apis'; +import { store as editSiteStore } from '../../store'; + +export default function SidebarNavigationScreenNavigationItem() { + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + + const { post } = useSelect( ( select ) => { + const { getEditedPostContext } = select( editSiteStore ); + const { getEntityRecord } = select( coreStore ); + const { postType, postId } = getEditedPostContext() ?? {}; + + // The currently selected entity to display. + // Typically template or template part in the site editor. + return { + post: + postId && postType + ? getEntityRecord( 'postType', postType, postId ) + : null, + }; + }, [] ); + + return ( + setCanvasMode( 'edit' ) } + > + { __( 'Edit' ) } + + } + content={ + post ? decodeEntities( post?.description?.rendered ) : null + } + /> + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js index d006fb000d9cc..9e939d2392b18 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js @@ -25,6 +25,7 @@ export default function SidebarNavigationScreenNavigationMenus() { history.push( { postType: attributes.type, postId: attributes.id, + path: '/navigation/single', } ); } }, diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js index 5bba2467c0b73..4c1fd155ac7eb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js @@ -1,7 +1,10 @@ /** * WordPress dependencies */ -import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; +import { + __experimentalItemGroup as ItemGroup, + __experimentalItem as Item, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useEntityRecords } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; @@ -15,12 +18,6 @@ import { useLink } from '../routes/link'; import SidebarNavigationItem from '../sidebar-navigation-item'; import AddNewTemplate from '../add-new-template'; -function omit( object, keys ) { - return Object.fromEntries( - Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) ) - ); -} - const config = { wp_template: { path: '/templates', @@ -42,15 +39,13 @@ const config = { }, }; -const Item = ( { item } ) => { +const TemplateItem = ( { postType, postId, ...props } ) => { const linkInfo = useLink( { - ...item.params, - path: config[ item.params.postType ].path + '/single', + postType, + postId, + path: config[ postType ].path + '/single', } ); - const props = item.params - ? { ...omit( item, 'params' ), ...linkInfo } - : item; - return ; + return ; }; export default function SidebarNavigationScreenTemplates( { @@ -66,31 +61,6 @@ export default function SidebarNavigationScreenTemplates( { } ); - let items = []; - if ( isLoading ) { - items = [ - { - children: config[ postType ].labels.loading, - }, - ]; - } else if ( ! templates && ! isLoading ) { - items = [ - { - children: config[ postType ].labels.notFound, - }, - ]; - } else { - items = templates?.map( ( template ) => ( { - params: { - postType, - postId: template.id, - }, - children: decodeEntities( - template.title?.rendered || template.slug - ), - } ) ); - } - const browseAllLink = useLink( { postType, postId: undefined, @@ -114,19 +84,37 @@ export default function SidebarNavigationScreenTemplates( { } content={ <> - - { items.map( ( item, index ) => ( - - ) ) } - - { ! isMobileViewport && ( - - ) } - + { isLoading && config[ postType ].labels.loading } + { ! isLoading && ( + + { ! templates?.length && ( + + { config[ postType ].labels.notFound } + + ) } + { ( templates ?? [] ).map( ( template ) => ( + + { decodeEntities( + template.title?.rendered || + template.slug + ) } + + ) ) } + { ! isMobileViewport && ( + + ) } + + ) } } /> diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 796ac6b0d6567..e7b4e76a78add 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -16,6 +16,7 @@ import useSyncPathWithURL from '../sync-state-with-url/use-sync-path-with-url'; import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus'; import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse'; import SaveButton from '../save-button'; +import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item'; function SidebarScreens() { useSyncPathWithURL(); @@ -24,6 +25,7 @@ function SidebarScreens() { <> +