@wordpress/edit-site 5.14.0 → 5.16.0

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

@@ -37,10 +37,10 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createNotice } = useDispatch( noticesStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const { get: getPrefference } = useSelect( preferencesStore );
+	const { get: getPreference } = useSelect( preferencesStore );
 
 	const turnOffDistractionFreeMode = useCallback( () => {
-		const isDistractionFree = getPrefference(
+		const isDistractionFree = getPreference(
 			editSiteStore.name,
 			'distractionFree'
 		);
@@ -52,7 +52,7 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 			isDismissible: true,
 			type: 'snackbar',
 		} );
-	}, [ createNotice, setPreference, getPrefference ] );
+	}, [ createNotice, setPreference, getPreference ] );
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -108,30 +108,10 @@ function SidebarNavigationScreenGlobalStylesContent() {
 	);
 }
 
-function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
-	const { revisions, isLoading } = useGlobalStylesRevisions();
-	const { revisionsCount } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			revisionsCount:
-				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
-		};
-	}, [] );
-
-	const hasRevisions = revisionsCount >= 2;
-	const modified = revisions?.[ 0 ]?.modified;
-
-	if ( ! hasRevisions || isLoading || ! modified ) {
-		return null;
-	}
-
+function SidebarNavigationScreenGlobalStylesFooter( {
+	modifiedDateTime,
+	onClickRevisions,
+} ) {
 	return (
 		<VStack className="edit-site-sidebar-navigation-screen-global-styles__footer">
 			<SidebarNavigationItem
@@ -150,8 +130,8 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
 						{ __( 'Last modified' ) }
 					</span>
 					<span>
-						<time dateTime={ modified }>
-							{ humanTimeDiff( modified ) }
+						<time dateTime={ modifiedDateTime }>
+							{ humanTimeDiff( modifiedDateTime ) }
 						</time>
 					</span>
 					<Icon icon={ backup } style={ { fill: 'currentcolor' } } />
@@ -162,6 +142,8 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
 }
 
 export default function SidebarNavigationScreenGlobalStyles() {
+	const { revisions, isLoading: isLoadingRevisions } =
+		useGlobalStylesRevisions();
 	const { openGeneralSidebar, setIsListViewOpened } =
 		useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -170,19 +152,32 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	);
 	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 { get: getPreference } = useSelect( preferencesStore );
+	const { isViewMode, isStyleBookOpened, revisionsCount } = useSelect(
+		( select ) => {
+			const { getCanvasMode, getEditorCanvasContainerView } = unlock(
+				select( editSiteStore )
+			);
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			return {
+				isViewMode: 'view' === getCanvasMode(),
+				isStyleBookOpened:
+					'style-book' === getEditorCanvasContainerView(),
+				revisionsCount:
+					globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ??
+					0,
+			};
+		},
+		[]
+	);
 
 	const turnOffDistractionFreeMode = useCallback( () => {
-		const isDistractionFree = getPrefference(
+		const isDistractionFree = getPreference(
 			editSiteStore.name,
 			'distractionFree'
 		);
@@ -194,7 +189,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 			isDismissible: true,
 			type: 'snackbar',
 		} );
-	}, [ createNotice, setPreference, getPrefference ] );
+	}, [ createNotice, setPreference, getPreference ] );
 
 	const openGlobalStyles = useCallback( async () => {
 		turnOffDistractionFreeMode();
@@ -226,6 +221,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		setEditorCanvasContainerView( 'global-styles-revisions' );
 	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
 
+	// If there are no revisions, do not render a footer.
+	const hasRevisions = revisionsCount >= 2;
+	const modifiedDateTime = revisions?.[ 0 ]?.modified;
+	const shouldShowGlobalStylesFooter =
+		hasRevisions && ! isLoadingRevisions && modifiedDateTime;
+
 	return (
 		<>
 			<SidebarNavigationScreen
@@ -235,9 +236,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				) }
 				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				footer={
-					<SidebarNavigationScreenGlobalStylesFooter
-						onClickRevisions={ openRevisions }
-					/>
+					shouldShowGlobalStylesFooter && (
+						<SidebarNavigationScreenGlobalStylesFooter
+							modifiedDateTime={ modifiedDateTime }
+							onClickRevisions={ openRevisions }
+						/>
+					)
 				}
 				actions={
 					<>

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

@@ -20,6 +20,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import TemplatePartHint from './template-part-hint';
 
 export default function SidebarNavigationScreenMain() {
 	const { location } = useNavigator();
@@ -42,46 +43,49 @@ export default function SidebarNavigationScreenMain() {
 				'Customize the appearance of your website using the block editor.'
 			) }
 			content={
-				<ItemGroup>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/navigation"
-						withChevron
-						icon={ navigation }
-					>
-						{ __( 'Navigation' ) }
-					</NavigatorButton>
-					<SidebarNavigationItemGlobalStyles
-						withChevron
-						icon={ styles }
-					>
-						{ __( 'Styles' ) }
-					</SidebarNavigationItemGlobalStyles>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/page"
-						withChevron
-						icon={ page }
-					>
-						{ __( 'Pages' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/wp_template"
-						withChevron
-						icon={ layout }
-					>
-						{ __( 'Templates' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/patterns"
-						withChevron
-						icon={ symbol }
-					>
-						{ __( 'Patterns' ) }
-					</NavigatorButton>
-				</ItemGroup>
+				<>
+					<ItemGroup>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/navigation"
+							withChevron
+							icon={ navigation }
+						>
+							{ __( 'Navigation' ) }
+						</NavigatorButton>
+						<SidebarNavigationItemGlobalStyles
+							withChevron
+							icon={ styles }
+						>
+							{ __( 'Styles' ) }
+						</SidebarNavigationItemGlobalStyles>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/page"
+							withChevron
+							icon={ page }
+						>
+							{ __( 'Pages' ) }
+						</NavigatorButton>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/wp_template"
+							withChevron
+							icon={ layout }
+						>
+							{ __( 'Templates' ) }
+						</NavigatorButton>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/patterns"
+							withChevron
+							icon={ symbol }
+						>
+							{ __( 'Patterns' ) }
+						</NavigatorButton>
+					</ItemGroup>
+					<TemplatePartHint />
+				</>
 			}
 		/>
 	);

package/src/components/sidebar-navigation-screen-main/template-part-hint.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { Notice } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isTemplatePartMoveHintVisible';
+
+export default function TemplatePartHint() {
+	const showTemplatePartHint = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	if ( ! showTemplatePartHint ) {
+		return null;
+	}
+
+	return (
+		<Notice
+			politeness="polite"
+			className="edit-site-sidebar__notice"
+			onRemove={ () => {
+				setPreference( 'core', PREFERENCE_NAME, false );
+			} }
+		>
+			{ __( 'Looking for template parts? Find them in "Patterns".' ) }
+		</Notice>
+	);
+}

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

@@ -22,9 +22,10 @@ import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/
 export const postType = `wp_navigation`;
 
 export default function SidebarNavigationScreenNavigationMenu() {
-	const {
-		params: { postId },
-	} = useNavigator();
+	const { params } = useNavigator();
+
+	// See https://github.com/WordPress/gutenberg/pull/52120.
+	const postId = Number( params?.postId );
 
 	const { record: navigationMenu, isResolving } = useEntityRecord(
 		'postType',

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

@@ -33,6 +33,7 @@ export default function ScreenNavigationMoreMenu( props ) {
 		<>
 			<DropdownMenu
 				className="sidebar-navigation__more-menu"
+				label={ __( 'Actions' ) }
 				icon={ moreVertical }
 				popoverProps={ POPOVER_PROPS }
 			>

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

@@ -24,13 +24,13 @@ export default function SingleNavigationMenu( {
 		<SidebarNavigationScreenWrapper
 			actions={
 				<>
-					<EditButton postId={ navigationMenu?.id } />
 					<ScreenNavigationMoreMenu
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ handleDelete }
 						onSave={ handleSave }
 						onDuplicate={ handleDuplicate }
 					/>
+					<EditButton postId={ navigationMenu?.id } />
 				</>
 			}
 			title={ buildNavigationLabel(

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

@@ -65,8 +65,10 @@ function useSaveNavigationMenu() {
 		};
 	}, [] );
 
-	const { editEntityRecord, saveEditedEntityRecord } =
-		useDispatch( coreStore );
+	const {
+		editEntityRecord,
+		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+	} = useDispatch( coreStore );
 
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
@@ -87,11 +89,19 @@ function useSaveNavigationMenu() {
 		// Apply the edits.
 		editEntityRecord( 'postType', postType, postId, edits );
 
+		const recordPropertiesToSave = Object.keys( edits );
+
 		// Attempt to persist.
 		try {
-			await saveEditedEntityRecord( 'postType', postType, postId, {
-				throwOnError: true,
-			} );
+			await saveSpecifiedEntityEdits(
+				'postType',
+				postType,
+				postId,
+				recordPropertiesToSave,
+				{
+					throwOnError: true,
+				}
+			);
 			createSuccessNotice( __( 'Renamed Navigation menu' ), {
 				type: 'snackbar',
 			} );
@@ -125,8 +135,7 @@ function useDuplicateNavigationMenu() {
 		useDispatch( noticesStore );
 
 	const handleDuplicate = async ( navigationMenu ) => {
-		const menuTitle =
-			navigationMenu?.title?.rendered || navigationMenu?.slug;
+		const menuTitle = navigationMenu?.title || navigationMenu?.slug;
 
 		try {
 			const savedRecord = await saveEntityRecord(

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

@@ -3,6 +3,8 @@
 // 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
+// and
+// block-library/src/navigation/constants.js
 export const PRELOADED_NAVIGATION_MENUS_QUERY = {
 	per_page: 100,
 	status: [ 'publish', 'draft' ],

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

@@ -25,19 +25,19 @@ import { unlock } from '../../lock-unlock';
 
 // Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
 function buildMenuLabel( title, id, status ) {
-	if ( ! title?.rendered ) {
+	if ( ! title ) {
 		/* 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 decodeEntities( title );
 	}
 
 	return sprintf(
 		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
 		__( '%1$s (%2$s)' ),
-		decodeEntities( title?.rendered ),
+		decodeEntities( title ),
 		status
 	);
 }
@@ -124,7 +124,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 						withChevron
 						icon={ navigation }
 					>
-						{ buildMenuLabel( title, index + 1, status ) }
+						{ buildMenuLabel( title?.rendered, index + 1, status ) }
 					</NavMenuItem>
 				) ) }
 			</ItemGroup>

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

@@ -23,10 +23,12 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 import { unlock } from '../../lock-unlock';
+import { getPathFromURL } from '../sync-state-with-url/use-sync-path-with-url';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
+	const location = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -63,22 +65,32 @@ export default function LeafMoreMenu( props ) {
 				attributes.type &&
 				history
 			) {
-				history.push( {
-					postType: attributes.type,
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						wp_theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
+				history.push(
+					{
+						postType: attributes.type,
+						postId: attributes.id,
+						...( isPreviewingTheme() && {
+							wp_theme_preview: currentlyPreviewingTheme(),
+						} ),
+					},
+					{
+						backPath: getPathFromURL( location.params ),
+					}
+				);
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
-				history.push( {
-					postType: 'page',
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						wp_theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
+				history.push(
+					{
+						postType: 'page',
+						postId: attributes.id,
+						...( isPreviewingTheme() && {
+							wp_theme_preview: currentlyPreviewingTheme(),
+						} ),
+					},
+					{
+						backPath: getPathFromURL( location.params ),
+					}
+				);
 			}
 		},
 		[ history ]

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

@@ -5,7 +5,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 	BlockList,
-	BlockTools,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
@@ -106,9 +105,7 @@ export default function NavigationMenuContent( { rootClientId } ) {
 				/>
 			) }
 			<div className="edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor">
-				<BlockTools>
-					<BlockList />
-				</BlockTools>
+				<BlockList />
 			</div>
 		</>
 	);

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

@@ -30,9 +30,9 @@ import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-d
 export default function SidebarNavigationScreenPage() {
 	const navigator = useNavigator();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const {
-		params: { postId },
-	} = useNavigator();
+	const { params } = useNavigator();
+
+	const postId = Number( params?.postId );
 	const { record } = useEntityRecord( 'postType', 'page', postId );
 
 	const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect(

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

@@ -9,42 +9,10 @@ import classnames from 'classnames';
 import { __, sprintf } from '@wordpress/i18n';
 import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
-import { Path, SVG } from '@wordpress/primitives';
-
-const publishedIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-1.067-5.6 4.2-5.667.8.6-4.8 6.467-3-2.267.6-.8 2.2 1.667Z"
-		/>
-	</SVG>
-);
-
-const draftIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8 4a4 4 0 0 0 0-8v8Z"
-		/>
-	</SVG>
-);
-
-const pendingIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
-		/>
-	</SVG>
-);
 
 export default function StatusLabel( { status, date, short } ) {
 	const relateToNow = humanTimeDiff( date );
 	let statusLabel = status;
-	let statusIcon = pendingIcon;
 	switch ( status ) {
 		case 'publish':
 			statusLabel = date
@@ -57,7 +25,6 @@ export default function StatusLabel( { status, date, short } ) {
 						{ time: <time dateTime={ date } /> }
 				  )
 				: __( 'Published' );
-			statusIcon = publishedIcon;
 			break;
 		case 'future':
 			const formattedDate = dateI18n(
@@ -77,7 +44,6 @@ export default function StatusLabel( { status, date, short } ) {
 			break;
 		case 'draft':
 			statusLabel = __( 'Draft' );
-			statusIcon = draftIcon;
 			break;
 		case 'pending':
 			statusLabel = __( 'Pending' );
@@ -99,7 +65,7 @@ export default function StatusLabel( { status, date, short } ) {
 				}
 			) }
 		>
-			{ statusIcon } { statusLabel }
+			{ statusLabel }
 		</div>
 	);
 }