@wordpress/edit-site 5.3.1 → 5.3.3

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

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal } from '@wordpress/components';
+import { EntitiesSavedStates } from '@wordpress/editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { NavigableRegion } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../private-apis';
+
+export default function SavePanel() {
+	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
+		const { isSaveViewOpened, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isSaveViewOpen: isSaveViewOpened(),
+			canvasMode: getCanvasMode(),
+		};
+	}, [] );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const onClose = () => setIsSaveViewOpened( false );
+
+	if ( canvasMode === 'view' ) {
+		return isSaveViewOpen ? (
+			<Modal
+				className="edit-site-save-panel__modal"
+				onRequestClose={ onClose }
+				__experimentalHideHeader
+				contentLabel={ __(
+					'Save site, content, and template changes'
+				) }
+			>
+				<EntitiesSavedStates close={ onClose } />
+			</Modal>
+		) : null;
+	}
+
+	return (
+		<NavigableRegion
+			className="edit-site-layout__actions"
+			ariaLabel={ __( 'Save sidebar' ) }
+		>
+			{ isSaveViewOpen ? (
+				<EntitiesSavedStates close={ onClose } />
+			) : (
+				<div className="edit-site-editor__toggle-save-panel">
+					<Button
+						variant="secondary"
+						className="edit-site-editor__toggle-save-panel-button"
+						onClick={ () => setIsSaveViewOpened( true ) }
+						aria-expanded={ false }
+					>
+						{ __( 'Open save panel' ) }
+					</Button>
+				</div>
+			) }
+		</NavigableRegion>
+	);
+}

package/src/components/save-panel/style.scss

@@ -0,0 +1,5 @@
+.edit-site-save-panel__modal {
+	@include break-small() {
+		width: 600px;
+	}
+}

package/src/components/sidebar/index.js

@@ -2,37 +2,65 @@
  * WordPress dependencies
  */
 import { memo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 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" />
 		</>
 	);
 }
 
 function Sidebar() {
+	const { isDirty } = useSelect( ( select ) => {
+		const { __experimentalGetDirtyEntityRecords } = select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isDirty: dirtyEntityRecords.length > 0,
+		};
+	}, [] );
+
 	return (
-		<NavigatorProvider
-			className="edit-site-sidebar__content"
-			initialPath="/"
-		>
-			<SidebarScreens />
-		</NavigatorProvider>
+		<>
+			<NavigatorProvider
+				className="edit-site-sidebar__content"
+				initialPath="/"
+			>
+				<SidebarScreens />
+			</NavigatorProvider>
+			{ isDirty && (
+				<div className="edit-site-sidebar__footer">
+					<SaveButton />
+				</div>
+			) }
+		</>
 	);
 }
 

package/src/components/sidebar/style.scss

@@ -1,3 +1,18 @@
+.edit-site-sidebar__content {
+	flex-grow: 1;
+	overflow-y: auto;
+	@include custom-scrollbars-on-hover;
+}
+
+.edit-site-sidebar__footer {
+	border-top: 1px solid $gray-800;
+	flex-shrink: 0;
+	margin: 0 $canvas-padding;
+	padding: $canvas-padding 0;
+	display: flex;
+	justify-content: flex-end;
+}
+
 .edit-site-sidebar__content.edit-site-sidebar__content {
 	overflow-x: unset;
 }

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>
+					) }
 				</>
 			}
 		/>

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

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+
+const config = {
+	wp_template: {
+		path: '/templates/all',
+		title: __( 'All templates' ),
+	},
+	wp_template_part: {
+		path: '/template-parts/all',
+		title: __( 'All template parts' ),
+	},
+};
+
+export default function SidebarNavigationScreenTemplatesBrowse( {
+	postType = 'wp_template',
+} ) {
+	return (
+		<SidebarNavigationScreen
+			path={ config[ postType ].path }
+			title={ config[ postType ].title }
+		/>
+	);
+}