@wordpress/edit-site 5.3.2 → 5.3.3

package/src/components/layout/index.js

@@ -19,7 +19,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
@@ -38,7 +38,7 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import SiteHub from '../site-hub';
 import ResizeHandle from '../block-editor/resize-handle';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 import SavePanel from '../save-panel';
 
 const ANIMATION_DURATION = 0.5;
@@ -87,21 +87,20 @@ export default function Layout() {
 	} );
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =
-		useState( false );
 	const canvasPadding = isMobileViewport ? 0 : 24;
 	const showSidebar =
-		( isMobileViewport && ! isMobileCanvasVisible ) ||
+		( isMobileViewport && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
 	const showCanvas =
-		( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;
+		( isMobileViewport && isEditorPage && canvasMode === 'edit' ) ||
+		! isMobileViewport ||
+		! isEditorPage;
 	const showFrame =
-		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
-
+		( ! isEditorPage && ! isMobileViewport ) ||
+		( ! isMobileViewport && isEditorPage && canvasMode === 'view' );
 	const isFullCanvas =
-		( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
-		isMobileCanvasVisible;
-	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
+		( isMobileViewport && isListPage ) ||
+		( isEditorPage && canvasMode === 'edit' );
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer, fullSize ] = useResizeObserver();
 	const [ forcedWidth, setForcedWidth ] = useState( null );
@@ -112,15 +111,6 @@ export default function Layout() {
 	if ( showFrame && ! isResizing ) {
 		canvasWidth = canvasSize.width - canvasPadding;
 	}
-	useEffect( () => {
-		if ( canvasMode === 'view' && isMobileViewport ) {
-			setIsMobileCanvasVisible( false );
-		}
-
-		if ( canvasMode === 'edit' && isMobileViewport ) {
-			setIsMobileCanvasVisible( true );
-		}
-	}, [ canvasMode, isMobileViewport ] );
 
 	// Synchronizing the URL with the store value of canvasMode happens in an effect
 	// This condition ensures the component is only rendered after the synchronization happens
@@ -153,37 +143,34 @@ export default function Layout() {
 								? forcedWidth - 48
 								: undefined,
 					} }
-					isMobileCanvasVisible={ isMobileCanvasVisible }
-					setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
 				/>
 
 				<AnimatePresence initial={ false }>
-					{ isEditorPage &&
-						( canvasMode === 'edit' || isMobileCanvasVisible ) && (
-							<NavigableRegion
-								className="edit-site-layout__header"
-								ariaLabel={ __( 'Editor top bar' ) }
-								as={ motion.div }
-								animate={ {
-									y: 0,
-								} }
-								initial={ {
-									y: '-100%',
-								} }
-								exit={ {
-									y: '-100%',
-								} }
-								transition={ {
-									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-							>
-								{ canvasMode === 'edit' && <Header /> }
-							</NavigableRegion>
-						) }
+					{ isEditorPage && canvasMode === 'edit' && (
+						<NavigableRegion
+							className="edit-site-layout__header"
+							ariaLabel={ __( 'Editor top bar' ) }
+							as={ motion.div }
+							animate={ {
+								y: 0,
+							} }
+							initial={ {
+								y: '-100%',
+							} }
+							exit={ {
+								y: '-100%',
+							} }
+							transition={ {
+								type: 'tween',
+								duration: disableMotion
+									? 0
+									: ANIMATION_DURATION,
+								ease: 'easeOut',
+							} }
+						>
+							{ canvasMode === 'edit' && <Header /> }
+						</NavigableRegion>
+					) }
 				</AnimatePresence>
 
 				<div className="edit-site-layout__content">

package/src/components/layout/style.scss

@@ -1,5 +1,3 @@
-$hub-height: $grid-unit-20 * 2 + $button-size;
-
 .edit-site-layout {
 	height: 100%;
 	background: $gray-900;
@@ -10,24 +8,23 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 
 .edit-site-layout__hub {
 	position: fixed;
-	top: $canvas-padding;
-	left: $canvas-padding;
+	top: 0;
+	left: 0;
 	width: calc(100vw - #{$canvas-padding * 2});
-	height: $hub-height;
+	height: $header-height;
 	z-index: z-index(".edit-site-layout__hub");
 
-	background: $black;
-	padding: $grid-unit-20;
-	padding-left: 0;
-	border-radius: $radius-block-ui * 4;
-	box-shadow: $shadow-modal;
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		width: auto;
+		padding-right: 0;
+	}
+
+	@include break-medium {
+		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
+	}
 
 	.edit-site-layout.is-full-canvas & {
-		top: 0;
-		left: 0;
-		padding: 0;
 		padding-right: $grid-unit-20;
-		height: $header-height;
 		border-radius: 0;
 		width: 100vw;
 		box-shadow: none;
@@ -37,15 +34,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 			padding-right: 0;
 		}
 	}
-
-	.edit-site-layout.is-full-canvas.is-edit-mode & {
-		width: auto;
-		padding-right: 0;
-	}
-
-	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
-	}
 }
 
 .edit-site-layout__header {

package/src/components/list/actions/rename-menu-item.js

@@ -24,7 +24,7 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	if ( ! template.is_custom ) {
+	if ( template.type === 'wp_template' && ! template.is_custom ) {
 		return null;
 	}
 

package/src/components/list/table.js

@@ -84,6 +84,10 @@ export default function Table( { templateType } ) {
 							<Heading level={ 4 }>
 								<Link
 									params={ {
+										path:
+											template.type === 'wp_template'
+												? '/templates/single'
+												: '/template-parts/single',
 										postId: template.id,
 										postType: template.type,
 									} }

package/src/components/navigation-inspector/navigation-menu.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
@@ -11,7 +11,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
 const ALLOWED_BLOCKS = {
 	'core/navigation': [
@@ -39,7 +39,7 @@ const ALLOWED_BLOCKS = {
 export default function NavigationMenu( { innerBlocks, onSelect } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
-	const { OffCanvasEditor } = unlock( blockEditorExperiments );
+	const { OffCanvasEditor } = unlock( blockEditorPrivateApis );
 
 	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
 	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata

package/src/components/save-panel/index.js

@@ -11,7 +11,7 @@ import { NavigableRegion } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 
 export default function SavePanel() {
 	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
@@ -35,6 +35,9 @@ export default function SavePanel() {
 				className="edit-site-save-panel__modal"
 				onRequestClose={ onClose }
 				__experimentalHideHeader
+				contentLabel={ __(
+					'Save site, content, and template changes'
+				) }
 			>
 				<EntitiesSavedStates close={ onClose } />
 			</Modal>

package/src/components/sidebar/index.js

@@ -11,19 +11,27 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
-import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';
+import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
+import useSyncPathWithURL from '../sync-state-with-url/use-sync-path-with-url';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveButton from '../save-button';
+import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
 
 function SidebarScreens() {
-	useSyncSidebarPathWithURL();
+	useSyncPathWithURL();
 
 	return (
 		<>
 			<SidebarNavigationScreenMain />
 			<SidebarNavigationScreenNavigationMenus />
+			<SidebarNavigationScreenNavigationItem />
 			<SidebarNavigationScreenTemplates postType="wp_template" />
 			<SidebarNavigationScreenTemplates postType="wp_template_part" />
+			<SidebarNavigationScreenTemplate postType="wp_template" />
+			<SidebarNavigationScreenTemplate postType="wp_template_part" />
+			<SidebarNavigationScreenTemplatesBrowse postType="wp_template" />
+			<SidebarNavigationScreenTemplatesBrowse postType="wp_template_part" />
 		</>
 	);
 }

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

@@ -4,19 +4,33 @@
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	Button,
 	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
-import { isRTL, __, sprintf } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../private-apis';
 
 export default function SidebarNavigationScreen( {
 	path,
-	parentTitle,
 	title,
 	actions,
 	content,
 } ) {
+	const { dashboardLink } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		return {
+			dashboardLink: getSettings().__experimentalDashboardLink,
+		};
+	}, [] );
+
 	return (
 		<NavigatorScreen
 			className="edit-site-sidebar-navigation-screen"
@@ -28,18 +42,20 @@ export default function SidebarNavigationScreen( {
 					justify="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
-					{ parentTitle ? (
-						<NavigatorBackButton
+					{ path !== '/' ? (
+						<NavigatorToParentButton
 							className="edit-site-sidebar-navigation-screen__back"
 							icon={ isRTL() ? chevronRight : chevronLeft }
-							aria-label={ sprintf(
-								/* translators: %s: previous page. */
-								__( 'Navigate to the previous view: %s' ),
-								parentTitle
-							) }
+							aria-label={ __( 'Back' ) }
 						/>
 					) : (
-						<div className="edit-site-sidebar-navigation-screen__icon-placeholder" />
+						<Button
+							className="edit-site-sidebar-navigation-screen__back"
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							aria-label={ __( 'Navigate to the Dashboard' ) }
+							href={ dashboardLink || 'index.php' }
+							label={ __( 'Dashboard' ) }
+						/>
 					) }
 					<h2 className="edit-site-sidebar-navigation-screen__title">
 						{ title }

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

@@ -7,13 +7,14 @@
 
 .edit-site-sidebar-navigation-screen__content {
 	margin: 0 $grid-unit-20 $grid-unit-20 $button-size;
+	color: $gray-600;
 }
 
 .edit-site-sidebar-navigation-screen__title-icon {
 	position: sticky;
 	top: 0;
 	background: $gray-900;
-	padding-top: $grid-unit-60 + $hub-height + $canvas-padding * 2;
+	padding-top: $grid-unit-60 + $header-height;
 	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
@@ -31,11 +32,8 @@
 .edit-site-sidebar-navigation-screen__back {
 	color: $gray-200;
 
-	&:hover {
+	&:hover,
+	&:not([aria-disabled="true"]):active {
 		color: $white;
 	}
 }
-
-.edit-site-sidebar-navigation-screen__icon-placeholder {
-	width: $button-size;
-}

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

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+export default function SidebarNavigationScreenNavigationItem() {
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
+	const { post } = useSelect( ( select ) => {
+		const { getEditedPostContext } = select( editSiteStore );
+		const { getEntityRecord } = select( coreStore );
+		const { postType, postId } = getEditedPostContext() ?? {};
+
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			post:
+				postId && postType
+					? getEntityRecord( 'postType', postType, postId )
+					: null,
+		};
+	}, [] );
+
+	return (
+		<SidebarNavigationScreen
+			path="/navigation/single"
+			title={ post ? decodeEntities( post?.title?.rendered ) : null }
+			actions={
+				<Button
+					variant="primary"
+					onClick={ () => setCanvasMode( 'edit' ) }
+				>
+					{ __( 'Edit' ) }
+				</Button>
+			}
+			content={
+				post ? decodeEntities( post?.description?.rendered ) : null
+			}
+		/>
+	);
+}

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

@@ -25,6 +25,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 				history.push( {
 					postType: attributes.type,
 					postId: attributes.id,
+					path: '/navigation/single',
 				} );
 			}
 		},
@@ -33,7 +34,6 @@ export default function SidebarNavigationScreenNavigationMenus() {
 	return (
 		<SidebarNavigationScreen
 			path="/navigation"
-			parentTitle={ __( 'Design' ) }
 			title={ __( 'Navigation' ) }
 			content={
 				<div className="edit-site-sidebar-navigation-screen-navigation-menus">

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

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import useEditedEntityRecord from '../use-edited-entity-record';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+const config = {
+	wp_template: {
+		path: '/templates/single',
+	},
+	wp_template_part: {
+		path: '/template-parts/single',
+	},
+};
+
+export default function SidebarNavigationScreenTemplate( {
+	postType = 'wp_template',
+} ) {
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { getDescription, getTitle, record } = useEditedEntityRecord();
+	let description = getDescription();
+	if ( ! description && record.is_custom ) {
+		description = __(
+			'This is a custom template that can be applied manually to any Post or Page.'
+		);
+	}
+
+	return (
+		<SidebarNavigationScreen
+			path={ config[ postType ].path }
+			title={ getTitle() }
+			actions={
+				<Button
+					variant="primary"
+					onClick={ () => setCanvasMode( 'edit' ) }
+				>
+					{ __( 'Edit' ) }
+				</Button>
+			}
+			content={ description ? <p>{ description }</p> : undefined }
+		/>
+	);
+}

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

@@ -1,9 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
@@ -14,24 +16,8 @@ import { useViewportMatch } from '@wordpress/compose';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useLocation } from '../routes';
-import { store as editSiteStore } from '../../store';
 import AddNewTemplate from '../add-new-template';
 
-function omit( object, keys ) {
-	return Object.fromEntries(
-		Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
-	);
-}
-
-const Item = ( { item } ) => {
-	const linkInfo = useLink( item.params );
-	const props = item.params
-		? { ...omit( item, 'params' ), ...linkInfo }
-		: item;
-	return <SidebarNavigationItem { ...props } />;
-};
-
 const config = {
 	wp_template: {
 		path: '/templates',
@@ -53,23 +39,20 @@ const config = {
 	},
 };
 
+const TemplateItem = ( { postType, postId, ...props } ) => {
+	const linkInfo = useLink( {
+		postType,
+		postId,
+		path: config[ postType ].path + '/single',
+	} );
+	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
+};
+
 export default function SidebarNavigationScreenTemplates( {
 	postType = 'wp_template',
 } ) {
-	const { params } = useLocation();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
-	// Ideally the URL params would be enough.
-	// Loading the editor should ideally redirect to the home page
-	// instead of fetching the edited entity here.
-	const { editedPostId, editedPostType } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		return {
-			editedPostId: getEditedPostId(),
-			editedPostType: getEditedPostType(),
-		};
-	}, [] );
-
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
 		postType,
@@ -78,44 +61,15 @@ export default function SidebarNavigationScreenTemplates( {
 		}
 	);
 
-	let items = [];
-	if ( isLoading ) {
-		items = [
-			{
-				children: config[ postType ].labels.loading,
-			},
-		];
-	} else if ( ! templates && ! isLoading ) {
-		items = [
-			{
-				children: config[ postType ].labels.notFound,
-			},
-		];
-	} else {
-		items = templates?.map( ( template ) => ( {
-			params: {
-				postType,
-				postId: template.id,
-			},
-			children: decodeEntities(
-				template.title?.rendered || template.slug
-			),
-			'aria-current':
-				( params.postType === postType &&
-					params.postId === template.id ) ||
-				// This is a special case for the home page.
-				( editedPostId === template.id &&
-					editedPostType === postType &&
-					!! params.postId )
-					? 'page'
-					: undefined,
-		} ) );
-	}
+	const browseAllLink = useLink( {
+		postType,
+		postId: undefined,
+		path: config[ postType ].path + '/all',
+	} );
 
 	return (
 		<SidebarNavigationScreen
 			path={ config[ postType ].path }
-			parentTitle={ __( 'Design' ) }
 			title={ config[ postType ].labels.title }
 			actions={
 				! isMobileViewport && (
@@ -130,25 +84,37 @@ export default function SidebarNavigationScreenTemplates( {
 			}
 			content={
 				<>
-					<ItemGroup>
-						{ items.map( ( item, index ) => (
-							<Item item={ item } key={ index } />
-						) ) }
-
-						<SidebarNavigationItem
-							className="edit-site-sidebar-navigation-screen-templates__see-all"
-							{ ...useLink( {
-								postType,
-								postId: undefined,
-							} ) }
-							aria-current={
-								params.postType === postType && ! params.postId
-									? 'page'
-									: undefined
-							}
-							children={ config[ postType ].labels.manage }
-						/>
-					</ItemGroup>
+					{ isLoading && config[ postType ].labels.loading }
+					{ ! isLoading && (
+						<ItemGroup>
+							{ ! templates?.length && (
+								<Item>
+									{ config[ postType ].labels.notFound }
+								</Item>
+							) }
+							{ ( templates ?? [] ).map( ( template ) => (
+								<TemplateItem
+									postType={ postType }
+									postId={ template.id }
+									key={ template.id }
+								>
+									{ decodeEntities(
+										template.title?.rendered ||
+											template.slug
+									) }
+								</TemplateItem>
+							) ) }
+							{ ! isMobileViewport && (
+								<SidebarNavigationItem
+									className="edit-site-sidebar-navigation-screen-templates__see-all"
+									{ ...browseAllLink }
+									children={
+										config[ postType ].labels.manage
+									}
+								/>
+							) }
+						</ItemGroup>
+					) }
 				</>
 			}
 		/>