@wordpress/edit-site 5.22.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,16 +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, useEntityBlockEditor } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
+import {
+	privateApis as editorPrivateApis,
+	store as editorStore,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -21,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 usePageContentBlocks from '../../block-editor/block-editor-provider/use-page-content-blocks';
+
+const { PostPanelRow } = unlock( editorPrivateApis );
 
 const POPOVER_PROPS = {
 	className: 'edit-site-page-panels-edit-template__dropdown',
@@ -29,23 +28,16 @@ const POPOVER_PROPS = {
 };
 
 export default function EditTemplate() {
-	const { hasResolved, template, isTemplateHidden, postType } = useSelect(
+	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 _context = getEditedPostContext();
 			const _postType = getEditedPostType();
-			const queryArgs = [
-				'postType',
-				getEditedPostType(),
-				getEditedPostId(),
-			];
-
+			const queryArgs = [ 'postType', _postType, getEditedPostId() ];
 			return {
 				context: _context,
 				hasResolved: hasFinishedResolution(
@@ -53,36 +45,21 @@ export default function EditTemplate() {
 					queryArgs
 				),
 				template: getEditedEntityRecord( ...queryArgs ),
-				isTemplateHidden:
-					getCanvasMode() === 'edit' &&
-					getPageContentFocusType() === 'hideTemplate',
+				isTemplateHidden: getRenderingMode() === 'post-only',
 				postType: _postType,
 			};
 		},
 		[]
 	);
 
-	const [ blocks ] = useEntityBlockEditor( '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 ) );
-	// Check if there are any post content block types in the blocks tree.
-	const pageContentBlocks = usePageContentBlocks( {
-		blocks,
-		isPageContentFocused: true,
-	} );
+	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
@@ -99,7 +76,7 @@ export default function EditTemplate() {
 						<MenuGroup>
 							<MenuItem
 								onClick={ () => {
-									setHasPageContentFocus( false );
+									setRenderingMode( 'template-only' );
 									onClose();
 								} }
 							>
@@ -108,27 +85,24 @@ export default function EditTemplate() {
 							<SwapTemplateButton onClick={ onClose } />
 						</MenuGroup>
 						<ResetDefaultTemplate onClick={ onClose } />
-						{ !! pageContentBlocks?.length && (
-							<MenuGroup>
-								<MenuItem
-									icon={
-										! isTemplateHidden ? check : undefined
-									}
-									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,11 +2,16 @@
  * WordPress dependencies
  */
 import { __experimentalVStack as VStack } from '@wordpress/components';
+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( {
@@ -17,7 +22,7 @@ export default function PageSummary( {
 	postType,
 } ) {
 	return (
-		<VStack>
+		<VStack spacing={ 0 }>
 			<PageStatus
 				status={ status }
 				date={ date }
@@ -25,13 +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

@@ -1,40 +1,41 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
 import { MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEntityRecord } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import {
+	useAllowSwitchingTemplates,
 	useCurrentTemplateSlug,
 	useEditedPostContext,
-	useIsPostsPage,
 } from './hooks';
-import { store as editSiteStore } from '../../../store';
 
 export default function ResetDefaultTemplate( { onClick } ) {
 	const currentTemplateSlug = useCurrentTemplateSlug();
-	const isPostsPage = useIsPostsPage();
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const { postType, postId } = useEditedPostContext();
-	const entity = useEntityRecord( 'postType', postType, postId );
-	const { setPage } = useDispatch( editSiteStore );
+	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 (
 		<MenuGroup>
 			<MenuItem
 				onClick={ async () => {
-					entity.edit( { template: '' }, { undoIgnore: true } );
+					editEntityRecord(
+						'postType',
+						postType,
+						postId,
+						{ template: '' },
+						{ undoIgnore: true }
+					);
 					onClick();
-					await setPage( {
-						context: { postType, postId },
-					} );
 				} }
 			>
 				{ __( 'Use default template' ) }

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

@@ -59,29 +59,24 @@
 	}
 }
 
-.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 {
 	.components-popover__content {
 		min-width: 240px;
 	}
+	.components-button.is-pressed,
+	.components-button.is-pressed:hover {
+		background: inherit;
+		color: inherit;
+	}
 }

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

@@ -1,20 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
 import { useMemo, useState, useCallback } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { MenuItem, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEntityRecord } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { parse } from '@wordpress/blocks';
 import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../../store';
 import { useAvailableTemplates, useEditedPostContext } from './hooks';
 
 export default function SwapTemplateButton( { onClick } ) {
@@ -24,16 +23,18 @@ export default function SwapTemplateButton( { onClick } ) {
 		setShowModal( false );
 	}, [] );
 	const { postType, postId } = useEditedPostContext();
-	const entitiy = useEntityRecord( 'postType', postType, postId );
-	const { setPage } = useDispatch( editSiteStore );
+	const { editEntityRecord } = useDispatch( coreStore );
 	if ( ! availableTemplates?.length ) {
 		return null;
 	}
 	const onTemplateSelect = async ( template ) => {
-		entitiy.edit( { template: template.name }, { undoIgnore: true } );
-		await setPage( {
-			context: { postType, postId },
-		} );
+		editEntityRecord(
+			'postType',
+			postType,
+			postId,
+			{ template: template.name },
+			{ undoIgnore: true }
+		);
 		onClose(); // Close the template suggestions modal first.
 		onClick();
 	};

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

@@ -3,11 +3,7 @@
  */
 import { ComplementaryArea } from '@wordpress/interface';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
@@ -76,7 +72,11 @@ import { store as editSiteStore } from '../../../store';
  */
 export default function PluginSidebarEditSite( { className, ...props } ) {
 	const showIconLabels = useSelect(
-		( select ) => select( editSiteStore ).getSettings().showIconLabels,
+		( select ) =>
+			!! select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
 		[]
 	);
 

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-edit-mode/template-panel/hooks.js

@@ -10,7 +10,10 @@ import { parse } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
-import { PATTERN_CORE_SOURCES, PATTERN_TYPES } from '../../../utils/constants';
+import {
+	EXCLUDED_PATTERN_SOURCES,
+	PATTERN_TYPES,
+} from '../../../utils/constants';
 import { unlock } from '../../../lock-unlock';
 
 function injectThemeAttributeInBlockTemplateContent(
@@ -38,9 +41,9 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) {
 	const filterOutDuplicatesByName = ( currentItem, index, items ) =>
 		index === items.findIndex( ( item ) => currentItem.name === item.name );
 
-	// Filter out core patterns.
-	const filterOutCorePatterns = ( pattern ) =>
-		! PATTERN_CORE_SOURCES.includes( pattern.source );
+	// Filter out core/directory patterns not included in theme.json.
+	const filterOutExcludedPatternSources = ( pattern ) =>
+		! EXCLUDED_PATTERN_SOURCES.includes( pattern.source );
 
 	// Filter only the patterns that are compatible with the current template.
 	const filterCompatiblePatterns = ( pattern ) =>
@@ -48,9 +51,10 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) {
 
 	return patterns
 		.filter(
-			filterOutCorePatterns &&
-				filterOutDuplicatesByName &&
-				filterCompatiblePatterns
+			( pattern, index, items ) =>
+				filterOutExcludedPatternSources( pattern ) &&
+				filterOutDuplicatesByName( pattern, index, items ) &&
+				filterCompatiblePatterns( pattern )
 		)
 		.map( ( pattern ) => ( {
 			...pattern,

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

@@ -63,7 +63,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 		const { getSettings } = unlock( select( editSiteStore ) );
 
 		return {
-			storedSettings: getSettings( false ),
+			storedSettings: getSettings(),
 		};
 	}, [] );
 

package/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js

@@ -20,7 +20,7 @@ export default function NavigationMenuEditor( { navigationMenuId } ) {
 		const { getSettings } = unlock( select( editSiteStore ) );
 
 		return {
-			storedSettings: getSettings( false ),
+			storedSettings: getSettings(),
 		};
 	}, [] );