@wordpress/edit-site 5.15.0 → 5.17.0

package/src/components/sidebar-edit-mode/template-panel/index.js

@@ -7,7 +7,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
-import { navigation as navigationIcon } from '@wordpress/icons';
+import { navigation, symbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,11 +18,13 @@ import TemplateAreas from './template-areas';
 import LastRevision from './last-revision';
 import SidebarCard from '../sidebar-card';
 
+const CARD_ICONS = {
+	wp_block: symbol,
+	wp_navigation: navigation,
+};
+
 export default function TemplatePanel() {
-	const {
-		info: { title, description, icon },
-		record,
-	} = useSelect( ( select ) => {
+	const { title, description, icon, record } = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } =
@@ -31,10 +33,14 @@ export default function TemplatePanel() {
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 		const _record = getEditedEntityRecord( 'postType', postType, postId );
+		const info = getTemplateInfo( _record );
 
-		const info = _record ? getTemplateInfo( _record ) : {};
-
-		return { info, record: _record };
+		return {
+			title: info.title,
+			description: info.description,
+			icon: info.icon,
+			record: _record,
+		};
 	}, [] );
 
 	if ( ! title && ! description ) {
@@ -46,9 +52,7 @@ export default function TemplatePanel() {
 			<SidebarCard
 				className="edit-site-template-card"
 				title={ decodeEntities( title ) }
-				icon={
-					record?.type === 'wp_navigation' ? navigationIcon : icon
-				}
+				icon={ CARD_ICONS[ record?.type ] ?? icon }
 				description={ decodeEntities( description ) }
 				actions={ <TemplateActions template={ record } /> }
 			>

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -11,6 +16,7 @@ import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -23,6 +29,8 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 
+const { useLocation } = unlock( routerPrivateApis );
+
 export default function SidebarNavigationScreen( {
 	isRoot,
 	title,
@@ -31,7 +39,7 @@ export default function SidebarNavigationScreen( {
 	content,
 	footer,
 	description,
-	backPath,
+	backPath: backPathProp,
 } ) {
 	const { dashboardLink } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
@@ -40,6 +48,7 @@ export default function SidebarNavigationScreen( {
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
+	const location = useLocation();
 	const navigator = useNavigator();
 	const theme = getTheme( currentlyPreviewingTheme() );
 	const icon = isRTL() ? chevronRight : chevronLeft;
@@ -47,7 +56,12 @@ export default function SidebarNavigationScreen( {
 	return (
 		<>
 			<VStack
-				className="edit-site-sidebar-navigation-screen__main"
+				className={ classnames(
+					'edit-site-sidebar-navigation-screen__main',
+					{
+						'has-footer': !! footer,
+					}
+				) }
 				spacing={ 0 }
 				justify="flex-start"
 			>
@@ -56,13 +70,17 @@ export default function SidebarNavigationScreen( {
 					alignment="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
-					{ ! isRoot && ! backPath && (
+					{ ! isRoot && (
 						<SidebarButton
 							onClick={ () => {
-								if ( navigator.location.isInitial ) {
-									navigator.goToParent( { replace: true } );
+								const backPath =
+									backPathProp ?? location.state?.backPath;
+								if ( backPath ) {
+									navigator.goTo( backPath, {
+										isBack: true,
+									} );
 								} else {
-									navigator.goBack();
+									navigator.goToParent();
 								}
 							} }
 							icon={ icon }
@@ -70,16 +88,6 @@ export default function SidebarNavigationScreen( {
 							showTooltip={ false }
 						/>
 					) }
-					{ ! isRoot && backPath && (
-						<SidebarButton
-							onClick={ () =>
-								navigator.goTo( backPath, { isBack: true } )
-							}
-							icon={ icon }
-							label={ __( 'Back' ) }
-							showTooltip={ false }
-						/>
-					) }
 					{ isRoot && (
 						<SidebarButton
 							icon={ icon }

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

@@ -9,6 +9,10 @@
 	// Ensure the sidebar is always at least as tall as the viewport.
 	// This allows the footer section to be sticky at the bottom of the viewport.
 	flex-grow: 1;
+	margin-bottom: $grid-unit-20;
+	&.has-footer {
+		margin-bottom: 0;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__content {

package/src/components/sidebar-navigation-screen-details-panel/style.scss

@@ -18,6 +18,7 @@
 .edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
 	color: $gray-600;
 	width: 100px;
+	flex-shrink: 0;
 }
 
 .edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {

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 > 0;
+	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-navigation-menu/index.js

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

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 ]
@@ -114,16 +126,17 @@ export default function LeafMoreMenu( props ) {
 						>
 							{ __( 'Move down' ) }
 						</MenuItem>
-						{ block.attributes?.id && (
-							<MenuItem
-								onClick={ () => {
-									onGoToPage( block );
-									onClose();
-								} }
-							>
-								{ goToLabel }
-							</MenuItem>
-						) }
+						{ block.attributes?.type === 'page' &&
+							block.attributes?.id && (
+								<MenuItem
+									onClick={ () => {
+										onGoToPage( block );
+										onClose();
+									} }
+								>
+									{ goToLabel }
+								</MenuItem>
+							) }
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem

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 } = useNavigator();
-
-	const postId = Number( params?.postId );
+	const {
+		params: { postId },
+	} = useNavigator();
 	const { record } = useEntityRecord( 'postType', 'page', postId );
 
 	const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect(

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

@@ -28,10 +28,15 @@ import { unlock } from '../../lock-unlock';
 const { useHistory } = unlock( routerPrivateApis );
 
 const PageItem = ( { postType = 'page', postId, ...props } ) => {
-	const linkInfo = useLink( {
-		postType,
-		postId,
-	} );
+	const linkInfo = useLink(
+		{
+			postType,
+			postId,
+		},
+		{
+			backPath: '/page',
+		}
+	);
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
 
@@ -152,7 +157,7 @@ export default function SidebarNavigationScreenPages() {
 					<>
 						{ ( isLoadingPages || isLoadingTemplates ) && (
 							<ItemGroup>
-								<Item>{ __( 'Loading pages' ) }</Item>
+								<Item>{ __( 'Loading pages…' ) }</Item>
 							</ItemGroup>
 						) }
 						{ ! ( isLoadingPages || isLoadingTemplates ) && (

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

@@ -16,16 +16,13 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import usePatternDetails from './use-pattern-details';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import normalizeRecordKey from '../../utils/normalize-record-key';
 
 export default function SidebarNavigationScreenPattern() {
+	const { params } = useNavigator();
 	const { categoryType } = getQueryArgs( window.location.href );
+	const { postType, postId } = params;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
-	const { params } = useNavigator();
-	const { postType } = params;
-	const postId = normalizeRecordKey( params?.postId );
-
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( postType, postId );

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

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

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

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -54,9 +59,14 @@ export default function useNavigationMenuContent( postType, postId ) {
 		return;
 	}
 
+	const blocks =
+		record?.content && typeof record.content !== 'function'
+			? parse( record.content )
+			: [];
+
 	const navigationBlocks = getBlocksOfTypeFromBlocks(
 		'core/navigation',
-		record?.blocks
+		blocks
 	);
 
 	if ( ! navigationBlocks.length ) {