@wordpress/edit-site 5.23.0 → 5.24.0

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

@@ -8,6 +8,7 @@ import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -33,7 +34,7 @@ export function SidebarComplementaryAreaFills() {
 		isEditorSidebarOpened,
 		hasBlockSelection,
 		supportsGlobalStyles,
-		hasPageContentFocus,
+		isEditingPage,
 	} = useSelect( ( select ) => {
 		const _sidebar =
 			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
@@ -48,7 +49,9 @@ export function SidebarComplementaryAreaFills() {
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
-			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
+			isEditingPage:
+				select( editSiteStore ).isPage() &&
+				select( editorStore ).getRenderingMode() !== 'template-only',
 		};
 	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
@@ -60,13 +63,18 @@ export function SidebarComplementaryAreaFills() {
 			return;
 		}
 		if ( hasBlockSelection ) {
-			if ( ! hasPageContentFocus ) {
+			if ( ! isEditingPage ) {
 				enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
 			}
 		} else {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}
-	}, [ hasBlockSelection, isEditorSidebarOpened, hasPageContentFocus ] );
+	}, [
+		hasBlockSelection,
+		isEditorSidebarOpened,
+		isEditingPage,
+		enableComplementaryArea,
+	] );
 
 	let sidebarName = sidebar;
 	if ( ! isEditorSidebarOpened ) {
@@ -85,11 +93,7 @@ export function SidebarComplementaryAreaFills() {
 			>
 				{ sidebarName === SIDEBAR_TEMPLATE && (
 					<>
-						{ hasPageContentFocus ? (
-							<PagePanels />
-						) : (
-							<TemplatePanel />
-						) }
+						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
 						<PluginTemplateSettingPanel.Slot />
 					</>
 				) }

package/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -3,17 +3,14 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-} from '@wordpress/components';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	privateApis as editorPrivateApis,
+	store as editorStore,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -22,7 +19,8 @@ import { store as editSiteStore } from '../../../store';
 import SwapTemplateButton from './swap-template-button';
 import ResetDefaultTemplate from './reset-default-template';
 import { unlock } from '../../../lock-unlock';
-import { PAGE_CONTENT_BLOCK_TYPES } from '../../../utils/constants';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
 
 const POPOVER_PROPS = {
 	className: 'edit-site-page-panels-edit-template__dropdown',
@@ -30,51 +28,38 @@ const POPOVER_PROPS = {
 };
 
 export default function EditTemplate() {
-	const { hasPostContentBlocks, hasResolved, template, isTemplateHidden } =
-		useSelect( ( select ) => {
+	const { hasResolved, template, isTemplateHidden } = useSelect(
+		( select ) => {
 			const { getEditedPostContext, getEditedPostType, getEditedPostId } =
 				select( editSiteStore );
-			const { getCanvasMode, getPageContentFocusType } = unlock(
-				select( editSiteStore )
-			);
+			const { getRenderingMode } = unlock( select( editorStore ) );
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
-			const { __experimentalGetGlobalBlocksByName } =
-				select( blockEditorStore );
 			const _context = getEditedPostContext();
 			const _postType = getEditedPostType();
 			const queryArgs = [ 'postType', _postType, getEditedPostId() ];
 			return {
-				hasPostContentBlocks: !! __experimentalGetGlobalBlocksByName(
-					Object.keys( PAGE_CONTENT_BLOCK_TYPES )
-				).length,
 				context: _context,
 				hasResolved: hasFinishedResolution(
 					'getEditedEntityRecord',
 					queryArgs
 				),
 				template: getEditedEntityRecord( ...queryArgs ),
-				isTemplateHidden:
-					getCanvasMode() === 'edit' &&
-					getPageContentFocusType() === 'hideTemplate',
+				isTemplateHidden: getRenderingMode() === 'post-only',
 				postType: _postType,
 			};
-		}, [] );
+		},
+		[]
+	);
 
-	const { setHasPageContentFocus } = useDispatch( editSiteStore );
-	// Disable reason: `useDispatch` can't be called conditionally.
-	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-	const { setPageContentFocusType } = unlock( useDispatch( editSiteStore ) );
+	const { setRenderingMode } = useDispatch( editorStore );
 
 	if ( ! hasResolved ) {
 		return null;
 	}
 
 	return (
-		<HStack className="edit-site-summary-field">
-			<Text className="edit-site-summary-field__label">
-				{ __( 'Template' ) }
-			</Text>
+		<PostPanelRow label={ __( 'Template' ) }>
 			<DropdownMenu
 				popoverProps={ POPOVER_PROPS }
 				focusOnMount
@@ -91,7 +76,7 @@ export default function EditTemplate() {
 						<MenuGroup>
 							<MenuItem
 								onClick={ () => {
-									setHasPageContentFocus( false );
+									setRenderingMode( 'template-only' );
 									onClose();
 								} }
 							>
@@ -100,28 +85,24 @@ export default function EditTemplate() {
 							<SwapTemplateButton onClick={ onClose } />
 						</MenuGroup>
 						<ResetDefaultTemplate onClick={ onClose } />
-						{ hasPostContentBlocks && (
-							<MenuGroup>
-								<MenuItem
-									icon={
-										! isTemplateHidden ? check : undefined
-									}
-									isPressed={ ! isTemplateHidden }
-									onClick={ () => {
-										setPageContentFocusType(
-											isTemplateHidden
-												? 'disableTemplate'
-												: 'hideTemplate'
-										);
-									} }
-								>
-									{ __( 'Template preview' ) }
-								</MenuItem>
-							</MenuGroup>
-						) }
+						<MenuGroup>
+							<MenuItem
+								icon={ ! isTemplateHidden ? check : undefined }
+								isPressed={ ! isTemplateHidden }
+								onClick={ () => {
+									setRenderingMode(
+										isTemplateHidden
+											? 'template-locked'
+											: 'post-only'
+									);
+								} }
+							>
+								{ __( 'Template preview' ) }
+							</MenuItem>
+						</MenuGroup>
 					</>
 				) }
 			</DropdownMenu>
-		</HStack>
+		</PostPanelRow>
 	);
 }

package/src/components/sidebar-edit-mode/page-panels/hooks.js

@@ -18,13 +18,25 @@ export function useEditedPostContext() {
 	);
 }
 
-export function useIsPostsPage() {
+export function useAllowSwitchingTemplates() {
 	const { postId } = useEditedPostContext();
 	return useSelect(
-		( select ) =>
-			+postId ===
-			select( coreStore ).getEntityRecord( 'root', 'site' )
-				?.page_for_posts,
+		( select ) => {
+			const { getEntityRecord, getEntityRecords } = select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const templates = getEntityRecords(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{ per_page: -1 }
+			);
+			const isPostsPage = +postId === siteSettings?.page_for_posts;
+			// If current page is set front page or posts page, we also need
+			// to check if the current theme has a template for it. If not
+			const isFrontPage =
+				+postId === siteSettings?.page_on_front &&
+				templates?.some( ( { slug } ) => slug === 'front-page' );
+			return ! isPostsPage && ! isFrontPage;
+		},
 		[ postId ]
 	);
 }
@@ -46,19 +58,18 @@ function useTemplates() {
 
 export function useAvailableTemplates() {
 	const currentTemplateSlug = useCurrentTemplateSlug();
-	const isPostsPage = useIsPostsPage();
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const templates = useTemplates();
 	return useMemo(
 		() =>
-			// The posts page template cannot be changed.
-			! isPostsPage &&
+			allowSwitchingTemplate &&
 			templates?.filter(
 				( template ) =>
 					template.is_custom &&
 					template.slug !== currentTemplateSlug &&
 					!! template.content.raw // Skip empty templates.
 			),
-		[ templates, currentTemplateSlug, isPostsPage ]
+		[ templates, currentTemplateSlug, allowSwitchingTemplate ]
 	);
 }
 

package/src/components/sidebar-edit-mode/page-panels/page-status.js

@@ -6,7 +6,6 @@ import {
 	ToggleControl,
 	Dropdown,
 	__experimentalText as Text,
-	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	TextControl,
 	RadioControl,
@@ -19,11 +18,15 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import StatusLabel from '../../sidebar-navigation-screen-page/status-label';
+import { unlock } from '../../../lock-unlock';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
 
 const STATUS_OPTIONS = [
 	{
@@ -159,10 +162,7 @@ export default function PageStatus( {
 	};
 
 	return (
-		<HStack className="edit-site-summary-field">
-			<Text className="edit-site-summary-field__label">
-				{ __( 'Status' ) }
-			</Text>
+		<PostPanelRow label={ __( 'Status' ) }>
 			<Dropdown
 				contentClassName="edit-site-change-status__content"
 				popoverProps={ popoverProps }
@@ -244,6 +244,6 @@ export default function PageStatus( {
 					</>
 				) }
 			/>
-		</HStack>
+		</PostPanelRow>
 	);
 }

package/src/components/sidebar-edit-mode/page-panels/page-summary.js

@@ -2,13 +2,16 @@
  * WordPress dependencies
  */
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { PostURLPanel } from '@wordpress/editor';
+import {
+	PostAuthorPanel,
+	PostURLPanel,
+	PostSchedulePanel,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import PageStatus from './page-status';
-import PublishDate from './publish-date';
 import EditTemplate from './edit-template';
 
 export default function PageSummary( {
@@ -19,7 +22,7 @@ export default function PageSummary( {
 	postType,
 } ) {
 	return (
-		<VStack>
+		<VStack spacing={ 0 }>
 			<PageStatus
 				status={ status }
 				date={ date }
@@ -27,14 +30,10 @@ export default function PageSummary( {
 				postId={ postId }
 				postType={ postType }
 			/>
-			<PublishDate
-				status={ status }
-				date={ date }
-				postId={ postId }
-				postType={ postType }
-			/>
+			<PostSchedulePanel />
 			<EditTemplate />
 			<PostURLPanel />
+			<PostAuthorPanel />
 		</VStack>
 	);
 }

package/src/components/sidebar-edit-mode/page-panels/reset-default-template.js

@@ -10,18 +10,18 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import {
+	useAllowSwitchingTemplates,
 	useCurrentTemplateSlug,
 	useEditedPostContext,
-	useIsPostsPage,
 } from './hooks';
 
 export default function ResetDefaultTemplate( { onClick } ) {
 	const currentTemplateSlug = useCurrentTemplateSlug();
-	const isPostsPage = useIsPostsPage();
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const { postType, postId } = useEditedPostContext();
 	const { editEntityRecord } = useDispatch( coreStore );
 	// The default template in a post is indicated by an empty string.
-	if ( ! currentTemplateSlug || isPostsPage ) {
+	if ( ! currentTemplateSlug || ! allowSwitchingTemplate ) {
 		return null;
 	}
 	return (

package/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -59,25 +59,15 @@
 	}
 }
 
-.edit-site-summary-field {
-	.components-dropdown {
-		width: 70%;
-	}
-
-	.edit-site-summary-field__trigger {
-		max-width: 100%;
-
-		// Truncate
-		display: block;
-		text-align: left;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.edit-site-summary-field__label {
-		width: 30%;
-	}
+.edit-site-summary-field__trigger {
+	max-width: 100%;
+
+	// Truncate
+	display: block;
+	text-align: left;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .edit-site-page-panels-edit-template__dropdown {

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

@@ -10,6 +10,7 @@ import { Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -20,12 +21,12 @@ import { store as editSiteStore } from '../../../store';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../../utils/constants';
 
 const SettingsHeader = ( { sidebarName } ) => {
-	const { hasPageContentFocus, entityType } = useSelect( ( select ) => {
-		const { getEditedPostType, hasPageContentFocus: _hasPageContentFocus } =
-			select( editSiteStore );
+	const { isEditingPage, entityType } = useSelect( ( select ) => {
+		const { getEditedPostType, isPage } = select( editSiteStore );
+		const { getRenderingMode } = select( editorStore );
 
 		return {
-			hasPageContentFocus: _hasPageContentFocus(),
+			isEditingPage: isPage() && getRenderingMode() !== 'template-only',
 			entityType: getEditedPostType(),
 		};
 	} );
@@ -41,7 +42,7 @@ const SettingsHeader = ( { sidebarName } ) => {
 		enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
 
 	let templateAriaLabel;
-	if ( hasPageContentFocus ) {
+	if ( isEditingPage ) {
 		templateAriaLabel =
 			sidebarName === SIDEBAR_TEMPLATE
 				? // translators: ARIA label for the Template sidebar tab, selected.
@@ -70,11 +71,9 @@ const SettingsHeader = ( { sidebarName } ) => {
 						}
 					) }
 					aria-label={ templateAriaLabel }
-					data-label={
-						hasPageContentFocus ? __( 'Page' ) : entityLabel
-					}
+					data-label={ isEditingPage ? __( 'Page' ) : entityLabel }
 				>
-					{ hasPageContentFocus ? __( 'Page' ) : entityLabel }
+					{ isEditingPage ? __( 'Page' ) : entityLabel }
 				</Button>
 			</li>
 			<li>

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

@@ -72,6 +72,7 @@
 }
 
 .edit-site-sidebar-navigation-screen__actions {
+	display: flex;
 	flex-shrink: 0;
 }
 

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

@@ -15,6 +15,8 @@ import { pencil } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { escapeAttribute } from '@wordpress/escape-html';
 import { safeDecodeURIComponent, filterURLForDisplay } from '@wordpress/url';
+import { useEffect } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -27,13 +29,20 @@ import PageDetails from './page-details';
 import PageActions from '../page-actions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
+const { useHistory } = unlock( routerPrivateApis );
+
 export default function SidebarNavigationScreenPage() {
-	const navigator = useNavigator();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const history = useHistory();
 	const {
 		params: { postId },
+		goTo,
 	} = useNavigator();
-	const { record } = useEntityRecord( 'postType', 'page', postId );
+	const { record, hasResolved } = useEntityRecord(
+		'postType',
+		'page',
+		postId
+	);
 
 	const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect(
 		( select ) => {
@@ -61,6 +70,18 @@ export default function SidebarNavigationScreenPage() {
 		[ record ]
 	);
 
+	// Redirect to the main pages navigation screen if the page is not found or has been deleted.
+	useEffect( () => {
+		if ( hasResolved && ! record ) {
+			history.push( {
+				path: '/page',
+				postId: undefined,
+				postType: undefined,
+				canvas: 'view',
+			} );
+		}
+	}, [ hasResolved, history ] );
+
 	const featureImageAltText = featuredMediaAltText
 		? decodeEntities( featuredMediaAltText )
 		: decodeEntities( record?.title?.rendered || __( 'Featured image' ) );
@@ -76,7 +97,7 @@ export default function SidebarNavigationScreenPage() {
 						postId={ postId }
 						toggleProps={ { as: SidebarButton } }
 						onRemove={ () => {
-							navigator.goTo( '/page' );
+							goTo( '/page' );
 						} }
 					/>
 					<SidebarButton

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

@@ -11,6 +11,8 @@
 
 	img {
 		border-radius: $grid-unit-15;
+		width: 20px;
+		height: 20px;
 	}
 
 	svg {
@@ -21,7 +23,10 @@
 .edit-site-sidebar-navigation-screen-template__added-by-description-author-icon {
 	width: 24px;
 	height: 24px;
-	margin-right: $grid-unit-10;
+	margin-right: $grid-unit-05;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .edit-site-sidebar-navigation-screen-template__template-area-button {