@wordpress/edit-site 5.13.0 → 5.14.0

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -15,6 +15,8 @@ import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { humanTimeDiff } from '@wordpress/date';
 import { useCallback } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -33,6 +35,24 @@ const noop = () => {};
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { createNotice } = useDispatch( noticesStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPrefference } = useSelect( preferencesStore );
+
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -53,9 +73,10 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		<SidebarNavigationItem
 			{ ...props }
 			onClick={ () => {
-				// switch to edit mode.
+				turnOffDistractionFreeMode();
+				// Switch to edit mode.
 				setCanvasMode( 'edit' );
-				// open global styles sidebar.
+				// Open global styles sidebar.
 				openGeneralSidebar( 'edit-site/global-styles' );
 			} }
 		/>
@@ -147,22 +168,41 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const { createNotice } = useDispatch( noticesStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPrefference } = useSelect( preferencesStore );
+	const { isViewMode, isStyleBookOpened } = useSelect( ( select ) => {
+		const { getCanvasMode, getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
+		return {
+			isViewMode: 'view' === getCanvasMode(),
+			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+		};
+	}, [] );
 
-	const isStyleBookOpened = useSelect(
-		( select ) =>
-			'style-book' ===
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
-		[]
-	);
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
 
-	const openGlobalStyles = useCallback(
-		async () =>
-			Promise.all( [
-				setCanvasMode( 'edit' ),
-				openGeneralSidebar( 'edit-site/global-styles' ),
-			] ),
-		[ setCanvasMode, openGeneralSidebar ]
-	);
+	const openGlobalStyles = useCallback( async () => {
+		turnOffDistractionFreeMode();
+		return Promise.all( [
+			setCanvasMode( 'edit' ),
+			openGeneralSidebar( 'edit-site/global-styles' ),
+		] );
+	}, [ setCanvasMode, openGeneralSidebar, turnOffDistractionFreeMode ] );
 
 	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();
@@ -223,7 +263,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 					</>
 				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && (
+			{ isStyleBookOpened && ! isMobileViewport && isViewMode && (
 				<StyleBook
 					enableResizing={ false }
 					isSelected={ () => false }

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

@@ -75,11 +75,11 @@ export default function SidebarNavigationScreenMain() {
 					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/library"
+						path="/patterns"
 						withChevron
 						icon={ symbol }
 					>
-						{ __( 'Library' ) }
+						{ __( 'Patterns' ) }
 					</NavigatorButton>
 				</ItemGroup>
 			}

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

@@ -1,45 +1,24 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Button,
-	Modal,
-} from '@wordpress/components';
+import { __experimentalConfirmDialog as ConfirmDialog } 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>
+		<ConfirmDialog
+			isOpen={ true }
+			onConfirm={ ( e ) => {
+				e.preventDefault();
+				onConfirm();
 
-						<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>
+				// Immediate close avoids ability to hit delete multiple times.
+				onClose();
+			} }
+			onCancel={ onClose }
+			confirmButtonText={ __( 'Delete' ) }
+		>
+			{ __( 'Are you sure you want to delete this Navigation menu?' ) }
+		</ConfirmDialog>
 	);
 }

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

@@ -2,23 +2,20 @@
  * 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 ) );
+import { useLink } from '../routes/link';
 
+export default function EditButton( { postId } ) {
+	const linkInfo = useLink( {
+		postId,
+		postType: 'wp_navigation',
+		canvas: 'edit',
+	} );
 	return (
-		<SidebarButton
-			onClick={ () => setCanvasMode( 'edit' ) }
-			label={ __( 'Edit' ) }
-			icon={ pencil }
-		/>
+		<SidebarButton { ...linkInfo } label={ __( 'Edit' ) } icon={ pencil } />
 	);
 }

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

@@ -17,6 +17,7 @@ import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-nav
 import ScreenNavigationMoreMenu from './more-menu';
 import SingleNavigationMenu from './single-navigation-menu';
 import useNavigationMenuHandlers from './use-navigation-menu-handlers';
+import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
 
 export const postType = `wp_navigation`;
 
@@ -33,11 +34,8 @@ export default function SidebarNavigationScreenNavigationMenu() {
 
 	const { isSaving, isDeleting } = useSelect(
 		( select ) => {
-			const {
-				isSavingEntityRecord,
-				isDeletingEntityRecord,
-				getEditedEntityRecord: getEditedEntityRecordSelector,
-			} = select( coreStore );
+			const { isSavingEntityRecord, isDeletingEntityRecord } =
+				select( coreStore );
 
 			return {
 				isSaving: isSavingEntityRecord( 'postType', postType, postId ),
@@ -46,7 +44,6 @@ export default function SidebarNavigationScreenNavigationMenu() {
 					postType,
 					postId
 				),
-				getEditedEntityRecord: getEditedEntityRecordSelector,
 			};
 		},
 		[ postId ]
@@ -60,7 +57,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 		useNavigationMenuHandlers();
 
 	const _handleDelete = () => handleDelete( navigationMenu );
-	const _handleSave = () => handleSave( navigationMenu );
+	const _handleSave = ( edits ) => handleSave( navigationMenu, edits );
 	const _handleDuplicate = () => handleDuplicate( navigationMenu );
 
 	if ( isLoading ) {
@@ -94,7 +91,11 @@ export default function SidebarNavigationScreenNavigationMenu() {
 						onDuplicate={ _handleDuplicate }
 					/>
 				}
-				title={ decodeEntities( menuTitle ) }
+				title={ buildNavigationLabel(
+					navigationMenu?.title,
+					navigationMenu?.id,
+					navigationMenu?.status
+				) }
 				description={ __( 'This Navigation Menu is empty.' ) }
 			/>
 		);

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

@@ -11,9 +11,16 @@ import {
 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">
@@ -30,11 +37,15 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 						</Button>
 
 						<Button
-							disabled={ editedMenuTitle === menuTitle }
+							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.

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

@@ -9,6 +9,8 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
 import ScreenNavigationMoreMenu from './more-menu';
 import NavigationMenuEditor from './navigation-menu-editor';
+import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
+import EditButton from './edit-button';
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
@@ -21,14 +23,21 @@ export default function SingleNavigationMenu( {
 	return (
 		<SidebarNavigationScreenWrapper
 			actions={
-				<ScreenNavigationMoreMenu
-					menuTitle={ decodeEntities( menuTitle ) }
-					onDelete={ handleDelete }
-					onSave={ handleSave }
-					onDuplicate={ handleDuplicate }
-				/>
+				<>
+					<EditButton postId={ navigationMenu?.id } />
+					<ScreenNavigationMoreMenu
+						menuTitle={ decodeEntities( menuTitle ) }
+						onDelete={ handleDelete }
+						onSave={ handleSave }
+						onDuplicate={ handleDuplicate }
+					/>
+				</>
 			}
-			title={ decodeEntities( menuTitle ) }
+			title={ buildNavigationLabel(
+				navigationMenu?.title,
+				navigationMenu?.id,
+				navigationMenu?.status
+			) }
 			description={ __(
 				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
 			) }

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

@@ -1,15 +1,10 @@
 .sidebar-navigation__more-menu {
 	.components-button {
-		color: $gray-600;
+		color: $gray-200;
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: $white;
+			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

@@ -71,7 +71,11 @@ function useSaveNavigationMenu() {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	const handleSave = async ( navigationMenu, edits = {} ) => {
+	const handleSave = async ( navigationMenu, edits ) => {
+		if ( ! edits ) {
+			return;
+		}
+
 		const postId = navigationMenu?.id;
 		// Prepare for revert in case of error.
 		const originalRecord = getEditedEntityRecord(

package/src/components/sidebar-navigation-screen-navigation-menus/build-navigation-label.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+
+// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
+export default function buildNavigationLabel( 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
+	);
+}

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

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 import { decodeEntities } from '@wordpress/html-entities';
 import {
@@ -20,6 +21,7 @@ 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';
+import { unlock } from '../../lock-unlock';
 
 // Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
 function buildMenuLabel( title, id, status ) {
@@ -40,16 +42,43 @@ function buildMenuLabel( title, id, status ) {
 	);
 }
 
+// Save a boolean to prevent us creating a fallback more than once per session.
+let hasCreatedFallback = false;
+
 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 } = unlock( useSelect( coreStore ) );
 
 	const firstNavigationMenu = navigationMenus?.[ 0 ];
 
+	// Save a boolean to prevent us creating a fallback more than once per session.
+	if ( firstNavigationMenu ) {
+		hasCreatedFallback = true;
+	}
+
+	// If there is no navigation menu found
+	// then trigger fallback algorithm to create one.
+	if (
+		! firstNavigationMenu &&
+		! isResolvingNavigationMenus &&
+		hasResolvedNavigationMenus &&
+		! hasCreatedFallback
+	) {
+		getNavigationFallbackId();
+	}
+
 	const { handleSave, handleDelete, handleDuplicate } =
 		useNavigationMenuHandlers();
 
@@ -78,7 +107,9 @@ export default function SidebarNavigationScreenNavigationMenus() {
 				navigationMenu={ firstNavigationMenu }
 				handleDelete={ () => handleDelete( firstNavigationMenu ) }
 				handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
-				handleSave={ () => handleSave( firstNavigationMenu ) }
+				handleSave={ ( edits ) =>
+					handleSave( firstNavigationMenu, edits )
+				}
 			/>
 		);
 	}

package/src/components/sidebar-navigation-screen-page/page-details.js

@@ -76,7 +76,7 @@ function getPageDetails( page ) {
 		: 0;
 	const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE );
 
-	if ( wordsCounted ) {
+	if ( wordsCounted && ! page?.isPostsPage ) {
 		details.push(
 			{
 				label: __( 'Words' ),
@@ -100,7 +100,7 @@ function getPageDetails( page ) {
 
 export default function PageDetails( { id } ) {
 	const { record } = useEntityRecord( 'postType', 'page', id );
-	const { parentTitle, templateTitle } = useSelect(
+	const { parentTitle, templateTitle, isPostsPage } = useSelect(
 		( select ) => {
 			const { getEditedPostContext } = unlock( select( editSiteStore ) );
 			const postContext = getEditedPostContext();
@@ -135,12 +135,16 @@ export default function PageDetails( { id } ) {
 				  )?.title?.rendered
 				: null;
 
+			const { getEntityRecord } = select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+
 			return {
 				parentTitle: _parentTitle,
 				templateTitle: _templateTitle,
+				isPostsPage: record?.id === siteSettings?.page_for_posts,
 			};
 		},
-		[ record?.parent ]
+		[ record?.parent, record?.id ]
 	);
 	return (
 		<SidebarNavigationScreenDetailsPanel
@@ -150,6 +154,7 @@ export default function PageDetails( { id } ) {
 			{ getPageDetails( {
 				parentTitle,
 				templateTitle,
+				isPostsPage,
 				...record,
 			} ).map( ( { label, value } ) => (
 				<SidebarNavigationScreenDetailsPanelRow key={ label }>

package/src/components/sidebar-navigation-screen-page/status-label.js

@@ -43,7 +43,7 @@ const pendingIcon = (
 
 export default function StatusLabel( { status, date, short } ) {
 	const relateToNow = humanTimeDiff( date );
-	let statusLabel = '';
+	let statusLabel = status;
 	let statusIcon = pendingIcon;
 	switch ( status ) {
 		case 'publish':

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

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { layout, page, home, loop, plus } from '@wordpress/icons';
+import { layout, page, home, verse, plus } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -159,7 +159,7 @@ export default function SidebarNavigationScreenPages() {
 											itemIcon = home;
 											break;
 										case postsPage:
-											itemIcon = loop;
+											itemIcon = verse;
 											break;
 										default:
 											itemIcon = page;

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

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 import { pencil } from '@wordpress/icons';
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -13,19 +14,26 @@ import SidebarButton from '../sidebar-button';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import usePatternDetails from './use-pattern-details';
-import useNavigationMenuContent from './use-navigation-menu-content';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 export default function SidebarNavigationScreenPattern() {
 	const { params } = useNavigator();
+	const { categoryType } = getQueryArgs( window.location.href );
 	const { postType, postId } = params;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( postType, postId );
-	const content = useNavigationMenuContent( postType, postId );
+
+	// The absence of a category type in the query params for template parts
+	// indicates the user has arrived at the template part via the "manage all"
+	// page and the back button should return them to that list page.
+	const backPath =
+		! categoryType && postType === 'wp_template_part'
+			? '/wp_template_part/all'
+			: '/patterns';
 
 	return (
 		<SidebarNavigationScreen
@@ -36,8 +44,7 @@ export default function SidebarNavigationScreenPattern() {
 					icon={ pencil }
 				/>
 			}
-			backPath={ '/library' }
-			content={ content }
+			backPath={ backPath }
 			{ ...patternDetails }
 		/>
 	);

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

@@ -0,0 +1,29 @@
+.edit-site-sidebar-navigation-screen-pattern__added-by-description {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: $grid-unit-30;
+}
+
+.edit-site-sidebar-navigation-screen-pattern__added-by-description-author {
+	display: inline-flex;
+	align-items: center;
+
+	img {
+		border-radius: $grid-unit-15;
+	}
+
+	svg {
+		fill: $gray-600;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon {
+	width: 24px;
+	height: 24px;
+	margin-right: $grid-unit-10;
+}
+
+.edit-site-sidebar-navigation-screen-pattern__lock-icon {
+	display: inline-flex;
+}

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js

@@ -22,7 +22,7 @@ export default function TemplatePartNavigationMenu( { id } ) {
 				size="12"
 				upperCase={ true }
 			>
-				{ title?.rendered || __( 'Navigation' ) }
+				{ title?.rendered || title || __( 'Navigation' ) }
 			</Heading>
 			<NavigationMenuEditor navigationMenuId={ id } />
 		</>