@wordpress/edit-site 5.12.0 → 5.12.2

package/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import RenameModal from './rename-modal';
+import DeleteModal from './delete-modal';
+
+const POPOVER_PROPS = {
+	position: 'bottom right',
+};
+
+export default function ScreenNavigationMoreMenu( props ) {
+	const { onDelete, onSave, onDuplicate, menuTitle } = props;
+
+	const [ renameModalOpen, setRenameModalOpen ] = useState( false );
+	const [ deleteModalOpen, setDeleteModalOpen ] = useState( false );
+
+	const closeModals = () => {
+		setRenameModalOpen( false );
+		setDeleteModalOpen( false );
+	};
+	const openRenameModal = () => setRenameModalOpen( true );
+	const openDeleteModal = () => setDeleteModalOpen( true );
+
+	return (
+		<>
+			<DropdownMenu
+				className="sidebar-navigation__more-menu"
+				icon={ moreVertical }
+				popoverProps={ POPOVER_PROPS }
+			>
+				{ ( { onClose } ) => (
+					<div>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => {
+									openRenameModal();
+									// Close the dropdown after opening the modal.
+									onClose();
+								} }
+							>
+								{ __( 'Rename' ) }
+							</MenuItem>
+							<MenuItem
+								onClick={ () => {
+									onDuplicate();
+									onClose();
+								} }
+							>
+								{ __( 'Duplicate' ) }
+							</MenuItem>
+						</MenuGroup>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => {
+									openDeleteModal();
+
+									// Close the dropdown after opening the modal.
+									onClose();
+								} }
+							>
+								{ __( 'Delete' ) }
+							</MenuItem>
+						</MenuGroup>
+					</div>
+				) }
+			</DropdownMenu>
+
+			{ deleteModalOpen && (
+				<DeleteModal onClose={ closeModals } onConfirm={ onDelete } />
+			) }
+
+			{ renameModalOpen && (
+				<RenameModal
+					onClose={ closeModals }
+					menuTitle={ menuTitle }
+					onSave={ onSave }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import NavigationMenuContent from '../sidebar-navigation-screen-navigation-menus/navigation-menu-content';
+
+const noop = () => {};
+
+export default function NavigationMenuEditor( { navigationMenuId } ) {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings( false ),
+		};
+	}, [] );
+
+	const blocks = useMemo( () => {
+		if ( ! navigationMenuId ) {
+			return [];
+		}
+
+		return [ createBlock( 'core/navigation', { ref: navigationMenuId } ) ];
+	}, [ navigationMenuId ] );
+
+	if ( ! navigationMenuId || ! blocks?.length ) {
+		return null;
+	}
+
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			value={ blocks }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
+				<NavigationMenuContent rootClientId={ blocks[ 0 ].clientId } />
+			</div>
+		</BlockEditorProvider>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	TextControl,
+	Modal,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+const notEmptyString = ( testString ) => testString?.trim()?.length > 0;
+
+export default function RenameModal( { menuTitle, onClose, onSave } ) {
+	const [ editedMenuTitle, setEditedMenuTitle ] = useState( menuTitle );
+
+	const titleHasChanged = editedMenuTitle !== menuTitle;
+
+	const isEditedMenuTitleValid =
+		titleHasChanged && notEmptyString( editedMenuTitle );
+
+	return (
+		<Modal title={ __( 'Rename' ) } onRequestClose={ onClose }>
+			<form className="sidebar-navigation__rename-modal-form">
+				<VStack spacing="3">
+					<TextControl
+						__nextHasNoMarginBottom
+						value={ editedMenuTitle }
+						placeholder={ __( 'Navigation title' ) }
+						onChange={ setEditedMenuTitle }
+					/>
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ onClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							disabled={ ! isEditedMenuTitleValid }
+							variant="primary"
+							type="submit"
+							onClick={ ( e ) => {
+								e.preventDefault();
+
+								if ( ! isEditedMenuTitleValid ) {
+									return;
+								}
+								onSave( { title: editedMenuTitle } );
+
+								// Immediate close avoids ability to hit save multiple times.
+								onClose();
+							} }
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+/**
+ * Internal dependencies
+ */
+import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
+import ScreenNavigationMoreMenu from './more-menu';
+import NavigationMenuEditor from './navigation-menu-editor';
+
+export default function SingleNavigationMenu( {
+	navigationMenu,
+	handleDelete,
+	handleDuplicate,
+	handleSave,
+} ) {
+	const menuTitle = navigationMenu?.title?.rendered;
+
+	return (
+		<SidebarNavigationScreenWrapper
+			actions={
+				<ScreenNavigationMoreMenu
+					menuTitle={ decodeEntities( menuTitle ) }
+					onDelete={ handleDelete }
+					onSave={ handleSave }
+					onDuplicate={ handleDuplicate }
+				/>
+			}
+			title={ decodeEntities( menuTitle ) }
+			description={ __(
+				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
+			) }
+		>
+			<NavigationMenuEditor navigationMenuId={ navigationMenu?.id } />
+		</SidebarNavigationScreenWrapper>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menu/style.scss

@@ -0,0 +1,15 @@
+.sidebar-navigation__more-menu {
+	.components-button {
+		color: $gray-200;
+		&:hover,
+		&:focus,
+		&[aria-current] {
+			color: $gray-100;
+		}
+	}
+}
+
+.sidebar-navigation__rename-modal-form {
+	// Fix for input focus style being cut off by the modal.
+	padding-top: 1px;
+}

package/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js

@@ -0,0 +1,179 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+/**
+ * Internal dependencies
+ */
+import { postType } from '.';
+
+function useDeleteNavigationMenu() {
+	const { goTo } = useNavigator();
+
+	const { deleteEntityRecord } = useDispatch( coreStore );
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	const handleDelete = async ( navigationMenu ) => {
+		const postId = navigationMenu?.id;
+		try {
+			await deleteEntityRecord(
+				'postType',
+				postType,
+				postId,
+				{
+					force: true,
+				},
+				{
+					throwOnError: true,
+				}
+			);
+			createSuccessNotice( __( 'Deleted Navigation menu' ), {
+				type: 'snackbar',
+			} );
+			goTo( '/navigation' );
+		} catch ( error ) {
+			createErrorNotice(
+				sprintf(
+					/* translators: %s: error message describing why the navigation menu could not be deleted. */
+					__( `Unable to delete Navigation menu (%s).` ),
+					error?.message
+				),
+
+				{
+					type: 'snackbar',
+				}
+			);
+		}
+	};
+
+	return handleDelete;
+}
+
+function useSaveNavigationMenu() {
+	const { getEditedEntityRecord } = useSelect( ( select ) => {
+		const { getEditedEntityRecord: getEditedEntityRecordSelector } =
+			select( coreStore );
+
+		return {
+			getEditedEntityRecord: getEditedEntityRecordSelector,
+		};
+	}, [] );
+
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	const handleSave = async ( navigationMenu, edits ) => {
+		if ( ! edits ) {
+			return;
+		}
+
+		const postId = navigationMenu?.id;
+		// Prepare for revert in case of error.
+		const originalRecord = getEditedEntityRecord(
+			'postType',
+			'wp_navigation',
+			postId
+		);
+
+		// Apply the edits.
+		editEntityRecord( 'postType', postType, postId, edits );
+
+		// Attempt to persist.
+		try {
+			await saveEditedEntityRecord( 'postType', postType, postId, {
+				throwOnError: true,
+			} );
+			createSuccessNotice( __( 'Renamed Navigation menu' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			// Revert to original in case of error.
+			editEntityRecord( 'postType', postType, postId, originalRecord );
+
+			createErrorNotice(
+				sprintf(
+					/* translators: %s: error message describing why the navigation menu could not be renamed. */
+					__( `Unable to rename Navigation menu (%s).` ),
+					error?.message
+				),
+
+				{
+					type: 'snackbar',
+				}
+			);
+		}
+	};
+
+	return handleSave;
+}
+
+function useDuplicateNavigationMenu() {
+	const { goTo } = useNavigator();
+
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	const handleDuplicate = async ( navigationMenu ) => {
+		const menuTitle =
+			navigationMenu?.title?.rendered || navigationMenu?.slug;
+
+		try {
+			const savedRecord = await saveEntityRecord(
+				'postType',
+				postType,
+				{
+					title: sprintf(
+						/* translators: %s: Navigation menu title */
+						__( '%s (Copy)' ),
+						menuTitle
+					),
+					content: navigationMenu?.content?.raw,
+					status: 'publish',
+				},
+				{
+					throwOnError: true,
+				}
+			);
+
+			if ( savedRecord ) {
+				createSuccessNotice( __( 'Duplicated Navigation menu' ), {
+					type: 'snackbar',
+				} );
+				goTo( `/navigation/${ postType }/${ savedRecord.id }` );
+			}
+		} catch ( error ) {
+			createErrorNotice(
+				sprintf(
+					/* translators: %s: error message describing why the navigation menu could not be deleted. */
+					__( `Unable to duplicate Navigation menu (%s).` ),
+					error?.message
+				),
+
+				{
+					type: 'snackbar',
+				}
+			);
+		}
+	};
+
+	return handleDuplicate;
+}
+
+export default function useNavigationMenuHandlers() {
+	return {
+		handleDelete: useDeleteNavigationMenu(),
+		handleSave: useSaveNavigationMenu(),
+		handleDuplicate: useDuplicateNavigationMenu(),
+	};
+}

package/src/components/sidebar-navigation-screen-navigation-menus/constants.js

@@ -1,9 +1,11 @@
 // This requested is preloaded in `gutenberg_preload_navigation_posts`.
 // As unbounded queries are limited to 100 by `fetchAllMiddleware`
 // on apiFetch this query is limited to 100.
+// These parameters must be kept aligned with those in
+// lib/compat/wordpress-6.3/navigation-block-preloading.php
 export const PRELOADED_NAVIGATION_MENUS_QUERY = {
 	per_page: 100,
-	status: 'publish',
+	status: [ 'publish', 'draft' ],
 	order: 'desc',
 	orderby: 'date',
 };

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 import { decodeEntities } from '@wordpress/html-entities';
 import {
@@ -18,14 +19,60 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 import { useLink } from '../routes/link';
+import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu';
+import useNavigationMenuHandlers from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers';
+
+// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
+function buildMenuLabel( title, id, status ) {
+	if ( ! title?.rendered ) {
+		/* translators: %s is the index of the menu in the list of menus. */
+		return sprintf( __( '(no title %s)' ), id );
+	}
+
+	if ( status === 'publish' ) {
+		return decodeEntities( title?.rendered );
+	}
+
+	return sprintf(
+		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
+		__( '%1$s (%2$s)' ),
+		decodeEntities( title?.rendered ),
+		status
+	);
+}
 
 export default function SidebarNavigationScreenNavigationMenus() {
-	const { records: navigationMenus, isResolving: isLoading } =
-		useEntityRecords(
-			'postType',
-			`wp_navigation`,
-			PRELOADED_NAVIGATION_MENUS_QUERY
-		);
+	const {
+		records: navigationMenus,
+		isResolving: isResolvingNavigationMenus,
+		hasResolved: hasResolvedNavigationMenus,
+	} = useEntityRecords(
+		'postType',
+		`wp_navigation`,
+		PRELOADED_NAVIGATION_MENUS_QUERY
+	);
+
+	const isLoading =
+		isResolvingNavigationMenus && ! hasResolvedNavigationMenus;
+
+	const getNavigationFallbackId = useSelect(
+		( select ) => select( coreStore ).getNavigationFallbackId
+	);
+
+	const firstNavigationMenu = navigationMenus?.[ 0 ];
+
+	// If there is no navigation menu found
+	// then trigger fallback algorithm to create one.
+	if (
+		! firstNavigationMenu &&
+		! isResolvingNavigationMenus &&
+		hasResolvedNavigationMenus
+	) {
+		getNavigationFallbackId();
+	}
+
+	const { handleSave, handleDelete, handleDuplicate } =
+		useNavigationMenuHandlers();
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 
@@ -45,19 +92,31 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		);
 	}
 
+	// if single menu then render it
+	if ( navigationMenus?.length === 1 ) {
+		return (
+			<SingleNavigationMenu
+				navigationMenu={ firstNavigationMenu }
+				handleDelete={ () => handleDelete( firstNavigationMenu ) }
+				handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
+				handleSave={ ( edits ) =>
+					handleSave( firstNavigationMenu, edits )
+				}
+			/>
+		);
+	}
+
 	return (
 		<SidebarNavigationScreenWrapper>
 			<ItemGroup>
-				{ navigationMenus?.map( ( navMenu ) => (
+				{ navigationMenus?.map( ( { id, title, status }, index ) => (
 					<NavMenuItem
-						postId={ navMenu.id }
-						key={ navMenu.id }
+						postId={ id }
+						key={ id }
 						withChevron
 						icon={ navigation }
 					>
-						{ decodeEntities(
-							navMenu.title?.rendered || navMenu.slug
-						) }
+						{ buildMenuLabel( title, index + 1, status ) }
 					</NavMenuItem>
 				) ) }
 			</ItemGroup>

package/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js

@@ -5,16 +5,29 @@
 import { chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
 import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
+/**
+ * Internal dependencies
+ */
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
 export default function LeafMoreMenu( props ) {
+	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
 	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
@@ -26,6 +39,12 @@ export default function LeafMoreMenu( props ) {
 		BlockTitle( { clientId, maximumLength: 25 } )
 	);
 
+	const goToLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Go to %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
 	const rootClientId = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -35,6 +54,36 @@ export default function LeafMoreMenu( props ) {
 		[ clientId ]
 	);
 
+	const onGoToPage = useCallback(
+		( selectedBlock ) => {
+			const { attributes, name } = selectedBlock;
+			if (
+				attributes.kind === 'post-type' &&
+				attributes.id &&
+				attributes.type &&
+				history
+			) {
+				history.push( {
+					postType: attributes.type,
+					postId: attributes.id,
+					...( isPreviewingTheme() && {
+						wp_theme_preview: currentlyPreviewingTheme(),
+					} ),
+				} );
+			}
+			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				history.push( {
+					postType: 'page',
+					postId: attributes.id,
+					...( isPreviewingTheme() && {
+						wp_theme_preview: currentlyPreviewingTheme(),
+					} ),
+				} );
+			}
+		},
+		[ history ]
+	);
+
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
@@ -65,6 +114,16 @@ export default function LeafMoreMenu( props ) {
 						>
 							{ __( 'Move down' ) }
 						</MenuItem>
+						{ block.attributes?.id && (
+							<MenuItem
+								onClick={ () => {
+									onGoToPage( block );
+									onClose();
+								} }
+							>
+								{ goToLabel }
+							</MenuItem>
+						) }
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem