@wordpress/edit-site 5.3.2 → 5.4.0

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/index.js

@@ -3,14 +3,12 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	store as blockEditorStore,
 	BlockEditorProvider,
 } from '@wordpress/block-editor';
 import { speak } from '@wordpress/a11y';
-import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -71,11 +69,6 @@ export default function NavigationInspector( { onSelect } ) {
 		};
 	}, [] );
 
-	const navMenuListId = useInstanceId(
-		NavigationMenu,
-		'edit-site-navigation-inspector-menu'
-	);
-
 	const firstNavRefInTemplate = clientIdToRef[ firstNavigationBlockId ];
 	const firstNavigationMenuRef = navigationMenus?.[ 0 ]?.id;
 
@@ -99,14 +92,6 @@ export default function NavigationInspector( { onSelect } ) {
 		}
 	}, [ selectedNavigationBlockId ] );
 
-	let options = [];
-	if ( navigationMenus ) {
-		options = navigationMenus.map( ( { id, title } ) => ( {
-			value: id,
-			label: title.rendered,
-		} ) );
-	}
-
 	const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'wp_navigation',
@@ -137,8 +122,6 @@ export default function NavigationInspector( { onSelect } ) {
 
 	const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks );
 
-	const hasMoreThanOneNavigationMenu = navigationMenus?.length > 1;
-
 	const hasNavigationMenus = !! navigationMenus?.length;
 
 	// Entity block editor will return entities that are not currently published.
@@ -178,21 +161,6 @@ export default function NavigationInspector( { onSelect } ) {
 			{ ! hasResolvedNavigationMenus && (
 				<div className="edit-site-navigation-inspector__placeholder" />
 			) }
-			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
-				<SelectControl
-					__nextHasNoMarginBottom
-					className="edit-site-navigation-inspector__select-menu"
-					aria-controls={
-						// aria-controls should only apply when referenced element is in DOM
-						hasLoadedInnerBlocks ? navMenuListId : undefined
-					}
-					value={ currentMenuId || defaultNavigationMenuId }
-					options={ options }
-					onChange={ ( newMenuId ) =>
-						setCurrentMenuId( Number( newMenuId ) )
-					}
-				/>
-			) }
 			{ isLoading && (
 				<>
 					<div className="edit-site-navigation-inspector__placeholder is-child" />

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, LeafMoreMenu } = 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
@@ -56,5 +56,11 @@ export default function NavigationMenu( { innerBlocks, onSelect } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	return <OffCanvasEditor blocks={ innerBlocks } onSelect={ onSelect } />;
+	return (
+		<OffCanvasEditor
+			blocks={ innerBlocks }
+			onSelect={ onSelect }
+			LeafMoreMenu={ LeafMoreMenu }
+		/>
+	);
 }

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

@@ -2,43 +2,39 @@
  * 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
@@ -47,11 +43,10 @@ function Sidebar() {
 			>
 				<SidebarScreens />
 			</NavigatorProvider>
-			{ isDirty && (
-				<div className="edit-site-sidebar__footer">
-					<SaveButton />
-				</div>
-			) }
+
+			<div className="edit-site-sidebar__footer">
+				<SaveButton />
+			</div>
 		</>
 	);
 }

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

@@ -69,7 +69,7 @@ export function SidebarComplementaryAreaFills() {
 				identifier={ sidebarName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close settings sidebar' ) }
+				closeLabel={ __( 'Close settings' ) }
 				header={ <SettingsHeader sidebarName={ sidebarName } /> }
 				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
 			>

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

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { Icon } from '@wordpress/components';
+import { PanelRow, Icon } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -13,6 +14,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../../store';
 import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
+import LastRevision from './last-revision';
 
 export default function TemplateCard() {
 	const {
@@ -38,20 +40,28 @@ export default function TemplateCard() {
 	}
 
 	return (
-		<div className="edit-site-template-card">
-			<Icon className="edit-site-template-card__icon" icon={ icon } />
-			<div className="edit-site-template-card__content">
-				<div className="edit-site-template-card__header">
-					<h2 className="edit-site-template-card__title">
-						{ decodeEntities( title ) }
-					</h2>
-					<TemplateActions template={ template } />
+		<>
+			<div className="edit-site-template-card">
+				<Icon className="edit-site-template-card__icon" icon={ icon } />
+				<div className="edit-site-template-card__content">
+					<div className="edit-site-template-card__header">
+						<h2 className="edit-site-template-card__title">
+							{ decodeEntities( title ) }
+						</h2>
+						<TemplateActions template={ template } />
+					</div>
+					<div className="edit-site-template-card__description">
+						{ decodeEntities( description ) }
+					</div>
+					<TemplateAreas />
 				</div>
-				<div className="edit-site-template-card__description">
-					{ decodeEntities( description ) }
-				</div>
-				<TemplateAreas />
 			</div>
-		</div>
+			<PanelRow
+				header={ __( 'Editing history' ) }
+				className="edit-site-template-revisions"
+			>
+				<LastRevision />
+			</PanelRow>
+		</>
 	);
 }

package/src/components/sidebar-edit-mode/template-card/last-revision.js

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { sprintf, _n } from '@wordpress/i18n';
+import { backup } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
+import { PostTypeSupportCheck } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import useEditedEntityRecord from '../../use-edited-entity-record';
+
+const useRevisionData = () => {
+	const { record: currentTemplate } = useEditedEntityRecord();
+
+	const lastRevisionId =
+		currentTemplate?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+
+	const revisionsCount =
+		( currentTemplate?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0 ) +
+		1;
+
+	return {
+		currentTemplate,
+		lastRevisionId,
+		revisionsCount,
+	};
+};
+
+function PostLastRevisionCheck( { children } ) {
+	const { lastRevisionId, revisionsCount } = useRevisionData();
+
+	if ( ! lastRevisionId || revisionsCount < 2 ) {
+		return null;
+	}
+
+	return (
+		<PostTypeSupportCheck supportKeys="revisions">
+			{ children }
+		</PostTypeSupportCheck>
+	);
+}
+
+const PostLastRevision = () => {
+	const { lastRevisionId, revisionsCount } = useRevisionData();
+
+	return (
+		<PostLastRevisionCheck>
+			<Button
+				href={ addQueryArgs( 'revision.php', {
+					revision: lastRevisionId,
+					gutenberg: true,
+				} ) }
+				className="edit-site-template-last-revision__title"
+				icon={ backup }
+			>
+				{ sprintf(
+					/* translators: %d: number of revisions */
+					_n( '%d Revision', '%d Revisions', revisionsCount ),
+					revisionsCount
+				) }
+			</Button>
+		</PostLastRevisionCheck>
+	);
+};
+
+export default function LastRevision() {
+	return (
+		<PostLastRevisionCheck>
+			<PostLastRevision />
+		</PostLastRevisionCheck>
+	);
+}

package/src/components/sidebar-edit-mode/template-card/style.scss

@@ -59,6 +59,10 @@
 	}
 }
 
+.edit-site-template-revisions {
+	margin-left: math.div(-$grid-unit-10, 2);
+}
+
 h3.edit-site-template-card__template-areas-title {
 	font-weight: 500;
 	margin: 0 0 $grid-unit-10;

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-navigation-menus/style.scss

@@ -1,8 +1,4 @@
 .edit-site-sidebar-navigation-screen-navigation-menus {
-	.block-editor-list-view-block__menu-edit,
-	.edit-site-navigation-inspector__select-menu {
-		display: none;
-	}
 	.offcanvas-editor-list-view-leaf {
 		max-width: calc(100% - #{ $grid-unit-05 });
 	}

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