@wordpress/edit-site 5.12.0 → 5.12.1

package/src/components/sidebar-navigation-screen-library/use-pattern-categories.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useDefaultPatternCategories from './use-default-pattern-categories';
+import useThemePatterns from './use-theme-patterns';
+
+export default function usePatternCategories() {
+	const defaultCategories = useDefaultPatternCategories();
+	const themePatterns = useThemePatterns();
+	const userPatterns = useSelect( ( select ) =>
+		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
+			per_page: -1,
+		} )
+	);
+
+	const patternCategories = useMemo( () => {
+		const categoryMap = {};
+		const categoriesWithCounts = [];
+
+		// Create a map for easier counting of patterns in categories.
+		defaultCategories.forEach( ( category ) => {
+			if ( ! categoryMap[ category.name ] ) {
+				categoryMap[ category.name ] = { ...category, count: 0 };
+			}
+		} );
+
+		// Update the category counts to reflect theme registered patterns.
+		themePatterns.forEach( ( pattern ) => {
+			pattern.categories?.forEach( ( category ) => {
+				if ( categoryMap[ category ] ) {
+					categoryMap[ category ].count += 1;
+				}
+			} );
+		} );
+
+		// Filter categories so we only have those containing patterns.
+		defaultCategories.forEach( ( category ) => {
+			if ( categoryMap[ category.name ].count ) {
+				categoriesWithCounts.push( categoryMap[ category.name ] );
+			}
+		} );
+
+		// Add "Your Patterns" category for user patterns if there are any.
+		if ( userPatterns?.length ) {
+			categoriesWithCounts.push( {
+				count: userPatterns.length || 0,
+				name: 'custom-patterns',
+				label: __( 'Custom patterns' ),
+			} );
+		}
+
+		return categoriesWithCounts;
+	}, [ defaultCategories, themePatterns, userPatterns ] );
+
+	return { patternCategories, hasPatterns: !! patternCategories.length };
+}

package/src/components/sidebar-navigation-screen-library/use-template-part-areas.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords } from '@wordpress/core-data';
+
+const getTemplatePartAreas = ( items ) => {
+	const allItems = items || [];
+
+	const groupedByArea = allItems.reduce(
+		( accumulator, item ) => {
+			const key = accumulator[ item.area ] ? item.area : 'uncategorized';
+			accumulator[ key ].push( item );
+			return accumulator;
+		},
+		{ header: [], footer: [], sidebar: [], uncategorized: [] }
+	);
+
+	return groupedByArea;
+};
+
+export default function useTemplatePartAreas() {
+	const { records: templateParts, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		'wp_template_part',
+		{ per_page: -1 }
+	);
+
+	return {
+		hasTemplateParts: templateParts ? !! templateParts.length : false,
+		isLoading,
+		templatePartAreas: getTemplatePartAreas( templateParts ),
+	};
+}

package/src/components/sidebar-navigation-screen-library/use-theme-patterns.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	CORE_PATTERN_SOURCES,
+	filterOutDuplicatesByName,
+} from '../page-library/utils';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+export default function useThemePatterns() {
+	const blockPatterns = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return (
+			getSettings().__experimentalAdditionalBlockPatterns ??
+			getSettings().__experimentalBlockPatterns
+		);
+	} );
+
+	const restBlockPatterns = useSelect( ( select ) =>
+		select( coreStore ).getBlockPatterns()
+	);
+
+	const patterns = useMemo(
+		() =>
+			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
+				.filter(
+					( pattern ) =>
+						! CORE_PATTERN_SOURCES.includes( pattern.source )
+				)
+				.filter( filterOutDuplicatesByName ),
+		[ blockPatterns, restBlockPatterns ]
+	);
+
+	return patterns;
+}

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

@@ -4,10 +4,11 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 
 import { useEffect } from '@wordpress/element';
 
@@ -17,25 +18,21 @@ import { useEffect } from '@wordpress/element';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import SidebarNavigationScreenNavigationMenuButton from '../sidebar-navigation-screen-navigation-menus/navigator-button';
 
 export default function SidebarNavigationScreenMain() {
-	const editorCanvasContainerView = useSelect( ( select ) => {
-		return unlock( select( editSiteStore ) ).getEditorCanvasContainerView();
-	}, [] );
-
+	const { location } = useNavigator();
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
 
 	// Clear the editor canvas container view when accessing the main navigation screen.
 	useEffect( () => {
-		if ( editorCanvasContainerView ) {
+		if ( location?.path === '/' ) {
 			setEditorCanvasContainerView( undefined );
 		}
-	}, [ editorCanvasContainerView, setEditorCanvasContainerView ] );
+	}, [ setEditorCanvasContainerView, location?.path ] );
 
 	return (
 		<SidebarNavigationScreen
@@ -46,14 +43,14 @@ export default function SidebarNavigationScreenMain() {
 			) }
 			content={
 				<ItemGroup>
-					<SidebarNavigationScreenNavigationMenuButton
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/navigation"
 						withChevron
 						icon={ navigation }
-						as={ SidebarNavigationItem }
 					>
 						{ __( 'Navigation' ) }
-					</SidebarNavigationScreenNavigationMenuButton>
-
+					</NavigatorButton>
 					<SidebarNavigationItemGlobalStyles
 						withChevron
 						icon={ styles }
@@ -78,7 +75,7 @@ export default function SidebarNavigationScreenMain() {
 					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/wp_template_part"
+						path="/library"
 						withChevron
 						icon={ symbol }
 					>

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

@@ -15,7 +15,7 @@ import { pencil } from '@wordpress/icons';
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 

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

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function RenameModal( { onClose, onConfirm } ) {
+	return (
+		<Modal title={ __( 'Delete' ) } onRequestClose={ onClose }>
+			<form>
+				<VStack spacing="3">
+					<p>
+						{ __(
+							'Are you sure you want to delete this Navigation menu?'
+						) }
+					</p>
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ onClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							variant="primary"
+							type="submit"
+							onClick={ ( e ) => {
+								e.preventDefault();
+								onConfirm();
+
+								// Immediate close avoids ability to hit delete multiple times.
+								onClose();
+							} }
+						>
+							{ __( 'Delete' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { pencil } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
+import { unlock } from '../../lock-unlock';
+
+export default function EditButton() {
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
+	return (
+		<SidebarButton
+			onClick={ () => setCanvasMode( 'edit' ) }
+			label={ __( 'Edit' ) }
+			icon={ pencil }
+		/>
+	);
+}

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

@@ -1,48 +1,68 @@
 /**
  * WordPress dependencies
  */
-import { useEntityRecord } from '@wordpress/core-data';
+import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import {
 	__experimentalUseNavigator as useNavigator,
 	Spinner,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
 import { useSelect } 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';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
-import { store as editSiteStore } from '../../store';
-import {
-	isPreviewingTheme,
-	currentlyPreviewingTheme,
-} 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';
+import SingleNavigationMenu from './single-navigation-menu';
+import useNavigationMenuHandlers from './use-navigation-menu-handlers';
 
-const { useHistory } = unlock( routerPrivateApis );
-const noop = () => {};
+export const postType = `wp_navigation`;
 
 export default function SidebarNavigationScreenNavigationMenu() {
-	const postType = `wp_navigation`;
 	const {
 		params: { postId },
 	} = useNavigator();
 
-	const { record: navigationMenu, isResolving: isLoading } = useEntityRecord(
+	const { record: navigationMenu, isResolving } = useEntityRecord(
 		'postType',
 		postType,
 		postId
 	);
 
+	const { isSaving, isDeleting } = useSelect(
+		( select ) => {
+			const {
+				isSavingEntityRecord,
+				isDeletingEntityRecord,
+				getEditedEntityRecord: getEditedEntityRecordSelector,
+			} = select( coreStore );
+
+			return {
+				isSaving: isSavingEntityRecord( 'postType', postType, postId ),
+				isDeleting: isDeletingEntityRecord(
+					'postType',
+					postType,
+					postId
+				),
+				getEditedEntityRecord: getEditedEntityRecordSelector,
+			};
+		},
+		[ postId ]
+	);
+
+	const isLoading = isResolving || isSaving || isDeleting;
+
 	const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug;
 
+	const { handleSave, handleDelete, handleDuplicate } =
+		useNavigationMenuHandlers();
+
+	const _handleDelete = () => handleDelete( navigationMenu );
+	const _handleSave = () => handleSave( navigationMenu );
+	const _handleDuplicate = () => handleDuplicate( navigationMenu );
+
 	if ( isLoading ) {
 		return (
 			<SidebarNavigationScreenWrapper
@@ -66,6 +86,14 @@ export default function SidebarNavigationScreenNavigationMenu() {
 	if ( ! navigationMenu?.content?.raw ) {
 		return (
 			<SidebarNavigationScreenWrapper
+				actions={
+					<ScreenNavigationMoreMenu
+						menuTitle={ decodeEntities( menuTitle ) }
+						onDelete={ _handleDelete }
+						onSave={ _handleSave }
+						onDuplicate={ _handleDuplicate }
+					/>
+				}
 				title={ decodeEntities( menuTitle ) }
 				description={ __( 'This Navigation Menu is empty.' ) }
 			/>
@@ -73,85 +101,11 @@ export default function SidebarNavigationScreenNavigationMenu() {
 	}
 
 	return (
-		<SidebarNavigationScreenWrapper
-			title={ decodeEntities( menuTitle ) }
-			description={ __(
-				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
-			) }
-		>
-			<NavigationMenuEditor navigationMenu={ navigationMenu } />
-		</SidebarNavigationScreenWrapper>
-	);
-}
-
-function NavigationMenuEditor( { navigationMenu } ) {
-	const history = useHistory();
-
-	const onSelect = 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() && {
-						theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
-			}
-			if ( name === 'core/page-list-item' && attributes.id && history ) {
-				history.push( {
-					postType: 'page',
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
-			}
-		},
-		[ history ]
-	);
-
-	const { storedSettings } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-
-		return {
-			storedSettings: getSettings( false ),
-		};
-	}, [] );
-
-	const blocks = useMemo( () => {
-		if ( ! NavigationMenuEditor ) {
-			return [];
-		}
-
-		return [
-			createBlock( 'core/navigation', { ref: navigationMenu?.id } ),
-		];
-	}, [ navigationMenu ] );
-
-	if ( ! navigationMenu || ! 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 }
-					onSelect={ onSelect }
-				/>
-			</div>
-		</BlockEditorProvider>
+		<SingleNavigationMenu
+			navigationMenu={ navigationMenu }
+			handleDelete={ _handleDelete }
+			handleSave={ _handleSave }
+			handleDuplicate={ _handleDuplicate }
+		/>
 	);
 }

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,51 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	TextControl,
+	Modal,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+export default function RenameModal( { menuTitle, onClose, onSave } ) {
+	const [ editedMenuTitle, setEditedMenuTitle ] = useState( menuTitle );
+
+	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={ editedMenuTitle === menuTitle }
+							variant="primary"
+							type="submit"
+							onClick={ ( e ) => {
+								e.preventDefault();
+								onSave( { title: editedMenuTitle } );
+
+								// Immediate close avoids ability to hit save multiple times.
+								onClose();
+							} }
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}