@wordpress/edit-site 5.22.0 → 5.24.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-page/page-details.js

@@ -105,26 +105,13 @@ export default function PageDetails( { id } ) {
 	const { record } = useEntityRecord( 'postType', 'page', id );
 	const { parentTitle, templateTitle, isPostsPage } = useSelect(
 		( select ) => {
-			const { getEditedPostContext } = unlock( select( editSiteStore ) );
-			const postContext = getEditedPostContext();
-			const templates = select( coreStore ).getEntityRecords(
+			const { getEditedPostId } = unlock( select( editSiteStore ) );
+			const template = select( coreStore ).getEntityRecord(
 				'postType',
 				TEMPLATE_POST_TYPE,
-				{ per_page: -1 }
+				getEditedPostId()
 			);
-			// Template title.
-			const templateSlug =
-				// Checks that the post type matches the current theme's post type, otherwise
-				// the templateSlug returns 'home'.
-				postContext?.postType === 'page'
-					? postContext?.templateSlug
-					: null;
-			const _templateTitle =
-				templates && templateSlug
-					? templates.find(
-							( template ) => template.slug === templateSlug
-					  )?.title?.rendered
-					: null;
+			const _templateTitle = template?.title?.rendered;
 
 			// Parent page title.
 			const _parentTitle = record?.parent

package/src/components/sidebar-navigation-screen-patterns/use-theme-patterns.js

@@ -9,7 +9,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { filterOutDuplicatesByName } from '../page-patterns/utils';
-import { PATTERN_CORE_SOURCES } from '../../utils/constants';
+import { EXCLUDED_PATTERN_SOURCES } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -32,7 +32,7 @@ export default function useThemePatterns() {
 			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
 				.filter(
 					( pattern ) =>
-						! PATTERN_CORE_SOURCES.includes( pattern.source )
+						! EXCLUDED_PATTERN_SOURCES.includes( pattern.source )
 				)
 				.filter( filterOutDuplicatesByName )
 				.filter( ( pattern ) => pattern.inserter !== false ),

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 {

package/src/components/site-hub/index.js

@@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { forwardRef } from '@wordpress/element';
+import { memo } from '@wordpress/element';
 import { search, external } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
@@ -32,7 +32,7 @@ import { unlock } from '../../lock-unlock';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
-const SiteHub = forwardRef( ( { isTransparent, ...restProps }, ref ) => {
+const SiteHub = memo( ( { isTransparent, className } ) => {
 	const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect(
 		( select ) => {
 			const { getCanvasMode, getSettings } = unlock(
@@ -84,12 +84,13 @@ const SiteHub = forwardRef( ( { isTransparent, ...restProps }, ref ) => {
 
 	return (
 		<motion.div
-			ref={ ref }
-			{ ...restProps }
-			className={ classnames(
-				'edit-site-site-hub',
-				restProps.className
-			) }
+			className={ classnames( 'edit-site-site-hub', className ) }
+			variants={ {
+				isDistractionFree: { x: '-100%' },
+				isDistractionFreeHovering: { x: 0 },
+				view: { x: 0 },
+				edit: { x: 0 },
+			} }
 			initial={ false }
 			transition={ {
 				type: 'tween',

package/src/components/start-template-options/index.js

@@ -3,7 +3,7 @@
  */
 import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import {
 	__experimentalBlockPatternsList as BlockPatternsList,
 	store as blockEditorStore,
@@ -13,8 +13,6 @@ import { useAsyncList } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -23,18 +21,22 @@ import { store as editSiteStore } from '../../store';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 function useFallbackTemplateContent( slug, isCustom = false ) {
-	const [ templateContent, setTemplateContent ] = useState( '' );
-
-	useEffect( () => {
-		apiFetch( {
-			path: addQueryArgs( '/wp/v2/templates/lookup', {
+	return useSelect(
+		( select ) => {
+			const { getEntityRecord, getDefaultTemplateId } =
+				select( coreStore );
+			const templateId = getDefaultTemplateId( {
 				slug,
 				is_custom: isCustom,
 				ignore_empty: true,
-			} ),
-		} ).then( ( { content } ) => setTemplateContent( content.raw ) );
-	}, [ isCustom, slug ] );
-	return templateContent;
+			} );
+			return templateId
+				? getEntityRecord( 'postType', TEMPLATE_POST_TYPE, templateId )
+						?.content?.raw
+				: undefined;
+		},
+		[ slug, isCustom ]
+	);
 }
 
 function useStartPatterns( fallbackContent ) {

package/src/components/style-book/index.js

@@ -7,13 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 	Disabled,
 	TabPanel,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	getCategories,
@@ -43,6 +40,12 @@ const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
 
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 // The content area of the Style Book is rendered within an iframe so that global styles
 // are applied to elements within the entire content area. To support elements that are
 // not part of the block previews, such as headings and layout for the block previews,
@@ -66,6 +69,8 @@ const STYLE_BOOK_IFRAME_STYLES = `
 		padding: 16px;
 		width: 100%;
 		box-sizing: border-box;
+		scroll-margin-top: 32px;
+		scroll-margin-bottom: 32px;
 	}
 
 	.edit-site-style-book__example.is-selected {
@@ -332,6 +337,7 @@ const StyleBookBody = ( {
 				}
 				isSelected={ isSelected }
 				onSelect={ onSelect }
+				key={ category }
 			/>
 		</Iframe>
 	);
@@ -339,12 +345,14 @@ const StyleBookBody = ( {
 
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
-		const composite = useCompositeState( { orientation: 'vertical' } );
+		const compositeStore = useCompositeStore( { orientation: 'vertical' } );
+
 		return (
 			<Composite
-				{ ...composite }
+				store={ compositeStore }
 				className={ className }
 				aria-label={ label }
+				role="grid"
 			>
 				{ examples
 					.filter( ( example ) =>
@@ -354,7 +362,6 @@ const Examples = memo(
 						<Example
 							key={ example.name }
 							id={ `example-${ example.name }` }
-							composite={ composite }
 							title={ example.title }
 							blocks={ example.blocks }
 							isSelected={ isSelected( example.name ) }
@@ -368,7 +375,7 @@ const Examples = memo(
 	}
 );
 
-const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
+const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
@@ -385,35 +392,41 @@ const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
 	);
 
 	return (
-		<CompositeItem
-			{ ...composite }
-			className={ classnames( 'edit-site-style-book__example', {
-				'is-selected': isSelected,
-			} ) }
-			id={ id }
-			aria-label={ sprintf(
-				// translators: %s: Title of a block, e.g. Heading.
-				__( 'Open %s styles in Styles panel' ),
-				title
-			) }
-			onClick={ onClick }
-			role="button"
-			as="div"
-		>
-			<span className="edit-site-style-book__example-title">
-				{ title }
-			</span>
-			<div className="edit-site-style-book__example-preview" aria-hidden>
-				<Disabled className="edit-site-style-book__example-preview__content">
-					<ExperimentalBlockEditorProvider
-						value={ renderedBlocks }
-						settings={ settings }
+		<div role="row">
+			<div role="gridcell">
+				<CompositeItem
+					className={ classnames( 'edit-site-style-book__example', {
+						'is-selected': isSelected,
+					} ) }
+					id={ id }
+					aria-label={ sprintf(
+						// translators: %s: Title of a block, e.g. Heading.
+						__( 'Open %s styles in Styles panel' ),
+						title
+					) }
+					render={ <div /> }
+					role="button"
+					onClick={ onClick }
+				>
+					<span className="edit-site-style-book__example-title">
+						{ title }
+					</span>
+					<div
+						className="edit-site-style-book__example-preview"
+						aria-hidden
 					>
-						<BlockList renderAppender={ false } />
-					</ExperimentalBlockEditorProvider>
-				</Disabled>
+						<Disabled className="edit-site-style-book__example-preview__content">
+							<ExperimentalBlockEditorProvider
+								value={ renderedBlocks }
+								settings={ settings }
+							>
+								<BlockList renderAppender={ false } />
+							</ExperimentalBlockEditorProvider>
+						</Disabled>
+					</div>
+				</CompositeItem>
 			</div>
-		</CompositeItem>
+		</div>
 	);
 };
 

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -20,75 +20,194 @@ import {
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function useInitEditedEntityFromURL() {
-	const { params: { postId, postType } = {} } = useLocation();
-	const { isRequestingSite, homepageId, url } = useSelect( ( select ) => {
-		const { getSite, getUnstableBase } = select( coreDataStore );
-		const siteData = getSite();
-		const base = getUnstableBase();
+const postTypesWithoutParentTemplate = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES.user,
+];
 
-		return {
-			isRequestingSite: ! base,
-			homepageId:
-				siteData?.show_on_front === 'page'
-					? siteData.page_on_front
-					: null,
-			url: base?.home,
-		};
-	}, [] );
+function useResolveEditedEntityAndContext( { postId, postType } ) {
+	const { hasLoadedAllDependencies, homepageId, url, frontPageTemplateId } =
+		useSelect( ( select ) => {
+			const { getSite, getUnstableBase, getEntityRecords } =
+				select( coreDataStore );
+			const siteData = getSite();
+			const base = getUnstableBase();
+			const templates = getEntityRecords(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{
+					per_page: -1,
+				}
+			);
+			let _frontPateTemplateId;
+			if ( templates ) {
+				const frontPageTemplate = templates.find(
+					( t ) => t.slug === 'front-page'
+				);
+				_frontPateTemplateId = frontPageTemplate
+					? frontPageTemplate.id
+					: false;
+			}
 
-	const {
-		setEditedEntity,
-		setTemplate,
-		setTemplatePart,
-		setPage,
-		setNavigationMenu,
-	} = useDispatch( editSiteStore );
+			return {
+				hasLoadedAllDependencies: !! base && !! siteData,
+				homepageId:
+					siteData?.show_on_front === 'page'
+						? siteData.page_on_front.toString()
+						: null,
+				url: base?.home,
+				frontPageTemplateId: _frontPateTemplateId,
+			};
+		}, [] );
 
-	useEffect( () => {
-		if ( postType && postId ) {
-			switch ( postType ) {
-				case TEMPLATE_POST_TYPE:
-					setTemplate( postId );
-					break;
-				case TEMPLATE_PART_POST_TYPE:
-					setTemplatePart( postId );
-					break;
-				case NAVIGATION_POST_TYPE:
-					setNavigationMenu( postId );
-					break;
-				case PATTERN_TYPES.user:
-					setEditedEntity( postType, postId );
-					break;
-				default:
-					setPage( {
-						context: { postType, postId },
-					} );
+	/**
+	 * This is a hook that recreates the logic to resolve a template for a given WordPress postID postTypeId
+	 * in order to match the frontend as closely as possible in the site editor.
+	 *
+	 * It is not possible to rely on the server logic because there maybe unsaved changes that impact the template resolution.
+	 */
+	const resolvedTemplateId = useSelect(
+		( select ) => {
+			// If we're rendering a post type that doesn't have a template
+			// no need to resolve its template.
+			if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+				return undefined;
+			}
+
+			const {
+				getEditedEntityRecord,
+				getEntityRecords,
+				getDefaultTemplateId,
+				__experimentalGetTemplateForLink,
+			} = select( coreDataStore );
+
+			function resolveTemplateForPostTypeAndId(
+				postTypeToResolve,
+				postIdToResolve
+			) {
+				// For the front page, we always use the front page template if existing.
+				if (
+					postTypeToResolve === 'page' &&
+					homepageId === postIdToResolve
+				) {
+					// We're still checking whether the front page template exists.
+					// Don't resolve the template yet.
+					if ( frontPageTemplateId === undefined ) {
+						return undefined;
+					}
+
+					if ( !! frontPageTemplateId ) {
+						return frontPageTemplateId;
+					}
+				}
+
+				const editedEntity = getEditedEntityRecord(
+					'postType',
+					postTypeToResolve,
+					postIdToResolve
+				);
+				if ( ! editedEntity ) {
+					return undefined;
+				}
+				// First see if the post/page has an assigned template and fetch it.
+				const currentTemplateSlug = editedEntity.template;
+				if ( currentTemplateSlug ) {
+					const currentTemplate = getEntityRecords(
+						'postType',
+						TEMPLATE_POST_TYPE,
+						{
+							per_page: -1,
+						}
+					)?.find( ( { slug } ) => slug === currentTemplateSlug );
+					if ( currentTemplate ) {
+						return currentTemplate.id;
+					}
+				}
+
+				// If no template is assigned, use the default template.
+				return getDefaultTemplateId( {
+					slug: `${ postTypeToResolve }-${ editedEntity?.slug }`,
+				} );
+			}
+
+			if ( ! hasLoadedAllDependencies ) {
+				return undefined;
+			}
+
+			// If we're rendering a specific page, post... we need to resolve its template.
+			if ( postType && postId ) {
+				return resolveTemplateForPostTypeAndId( postType, postId );
+			}
+
+			// If we're rendering the home page, and we have a static home page, resolve its template.
+			if ( homepageId ) {
+				return resolveTemplateForPostTypeAndId( 'page', homepageId );
 			}
 
-			return;
+			// If we're not rendering a specific page, use the front page template.
+			if ( url ) {
+				const template = __experimentalGetTemplateForLink( url );
+				return template?.id;
+			}
+		},
+		[
+			homepageId,
+			hasLoadedAllDependencies,
+			url,
+			postId,
+			postType,
+			frontPageTemplateId,
+		]
+	);
+
+	const context = useMemo( () => {
+		if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+			return {};
+		}
+
+		if ( postType && postId ) {
+			return { postType, postId };
 		}
 
-		// In all other cases, we need to set the home page in the site editor view.
 		if ( homepageId ) {
-			setPage( {
-				context: { postType: 'page', postId: homepageId },
-			} );
-		} else if ( ! isRequestingSite ) {
-			setPage( {
-				path: url,
-			} );
+			return { postType: 'page', postId: homepageId };
+		}
+
+		return {};
+	}, [ homepageId, postType, postId ] );
+
+	if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+		return { isReady: true, postType, postId, context };
+	}
+
+	if ( hasLoadedAllDependencies ) {
+		return {
+			isReady: resolvedTemplateId !== undefined,
+			postType: TEMPLATE_POST_TYPE,
+			postId: resolvedTemplateId,
+			context,
+		};
+	}
+
+	return { isReady: false };
+}
+
+export function useInitEditedEntity( params ) {
+	const { postType, postId, context, isReady } =
+		useResolveEditedEntityAndContext( params );
+
+	const { setEditedEntity } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		if ( isReady ) {
+			setEditedEntity( postType, postId, context );
 		}
-	}, [
-		url,
-		postId,
-		postType,
-		homepageId,
-		isRequestingSite,
-		setEditedEntity,
-		setPage,
-		setTemplate,
-		setTemplatePart,
-		setNavigationMenu,
-	] );
+	}, [ isReady, postType, postId, context, setEditedEntity ] );
+}
+
+export default function useInitEditedEntityFromURL() {
+	const { params = {} } = useLocation();
+	return useInitEditedEntity( params );
 }

package/src/components/template-part-converter/convert-to-regular.js

@@ -26,7 +26,7 @@ export default function ConvertToRegularBlocks( { clientId, onClose } ) {
 				onClose();
 			} }
 		>
-			{ __( 'Detach blocks from template part' ) }
+			{ __( 'Detach' ) }
 		</MenuItem>
 	);
 }

package/src/components/welcome-guide/page.js

@@ -23,8 +23,8 @@ export default function WelcomeGuidePage() {
 			'core/edit-site',
 			'welcomeGuide'
 		);
-		const { hasPageContentFocus } = select( editSiteStore );
-		return isPageActive && ! isEditorActive && hasPageContentFocus();
+		const { isPage } = select( editSiteStore );
+		return isPageActive && ! isEditorActive && isPage();
 	}, [] );
 
 	if ( ! isVisible ) {

package/src/components/welcome-guide/template.js

@@ -5,6 +5,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -23,12 +24,13 @@ export default function WelcomeGuideTemplate() {
 			'core/edit-site',
 			'welcomeGuide'
 		);
-		const { isPage, hasPageContentFocus } = select( editSiteStore );
+		const { isPage } = select( editSiteStore );
+		const { getRenderingMode } = select( editorStore );
 		return (
 			isTemplateActive &&
 			! isEditorActive &&
 			isPage() &&
-			! hasPageContentFocus()
+			getRenderingMode() === 'template-only'
 		);
 	}, [] );