@wordpress/edit-site 5.21.1-next.f8d8eceb.0 → 5.23.0

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/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-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(),
 		};
 	}, [] );
 

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

@@ -46,7 +46,9 @@ function getPageDetails( page ) {
 			label: __( 'Slug' ),
 			value: (
 				<Truncate numberOfLines={ 1 }>
-					{ safeDecodeURIComponent( page.slug ) }
+					{ safeDecodeURIComponent(
+						page.slug || page.generated_slug
+					) }
 				</Truncate>
 			),
 		},
@@ -103,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/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/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,8 +20,14 @@ import {
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function useInitEditedEntityFromURL() {
-	const { params: { postId, postType } = {} } = useLocation();
+const postTypesWithoutParentTemplate = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES.user,
+];
+
+function useResolveEditedEntityAndContext( { postId, postType } ) {
 	const { isRequestingSite, homepageId, url } = useSelect( ( select ) => {
 		const { getSite, getUnstableBase } = select( coreDataStore );
 		const siteData = getSite();
@@ -37,58 +43,119 @@ export default function useInitEditedEntityFromURL() {
 		};
 	}, [] );
 
-	const {
-		setEditedEntity,
-		setTemplate,
-		setTemplatePart,
-		setPage,
-		setNavigationMenu,
-	} = useDispatch( editSiteStore );
+	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;
+			}
 
-	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 },
-					} );
+			const {
+				getEditedEntityRecord,
+				getEntityRecords,
+				getDefaultTemplateId,
+				__experimentalGetTemplateForLink,
+			} = select( coreDataStore );
+
+			function resolveTemplateForPostTypeAndId(
+				postTypeToResolve,
+				postIdToResolve
+			) {
+				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 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 );
+			}
+
+			// If we're not rendering a specific page, use the front page template.
+			if ( ! isRequestingSite && url ) {
+				const template = __experimentalGetTemplateForLink( url );
+				return template?.id;
 			}
+		},
+		[ homepageId, isRequestingSite, url, postId, postType ]
+	);
+
+	const context = useMemo( () => {
+		if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+			return {};
+		}
 
-			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 };
 		}
-	}, [
-		url,
-		postId,
-		postType,
-		homepageId,
-		isRequestingSite,
-		setEditedEntity,
-		setPage,
-		setTemplate,
-		setTemplatePart,
-		setNavigationMenu,
-	] );
+
+		return {};
+	}, [ homepageId, postType, postId ] );
+
+	if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+		return { isReady: true, postType, postId, context };
+	}
+
+	if ( ( postType && postId ) || homepageId || ! isRequestingSite ) {
+		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 );
+		}
+	}, [ 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/hooks/push-changes-to-global-styles/index.js

@@ -17,8 +17,9 @@ import {
 	hasBlockSupport,
 } from '@wordpress/blocks';
 import { useContext, useMemo, useCallback } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -391,6 +392,10 @@ function PushChangesToGlobalStylesControl( {
 const withPushChangesToGlobalStyles = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const blockEditingMode = useBlockEditingMode();
+		const isBlockBasedTheme = useSelect(
+			( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+			[]
+		);
 		const supportsStyles = SUPPORTED_STYLES.some( ( feature ) =>
 			hasBlockSupport( props.name, feature )
 		);
@@ -398,11 +403,13 @@ const withPushChangesToGlobalStyles = createHigherOrderComponent(
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ blockEditingMode === 'default' && supportsStyles && (
-					<InspectorAdvancedControls>
-						<PushChangesToGlobalStylesControl { ...props } />
-					</InspectorAdvancedControls>
-				) }
+				{ blockEditingMode === 'default' &&
+					supportsStyles &&
+					isBlockBasedTheme && (
+						<InspectorAdvancedControls>
+							<PushChangesToGlobalStylesControl { ...props } />
+						</InspectorAdvancedControls>
+					) }
 			</>
 		);
 	}

package/src/hooks/template-part-edit.js

@@ -24,11 +24,13 @@ function EditTemplatePartMenuItem( { attributes } ) {
 	const { params } = useLocation();
 	const templatePart = useSelect(
 		( select ) => {
-			return select( coreStore ).getEntityRecord(
+			const { getCurrentTheme, getEntityRecord } = select( coreStore );
+
+			return getEntityRecord(
 				'postType',
 				TEMPLATE_PART_POST_TYPE,
 				// Ideally this should be an official public API.
-				`${ theme }//${ slug }`
+				`${ theme || getCurrentTheme()?.stylesheet }//${ slug }`
 			);
 		},
 		[ theme, slug ]

package/src/index.js

@@ -10,10 +10,6 @@ import {
 import { dispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { createRoot } from '@wordpress/element';
-import {
-	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
-	__experimentalFetchUrlData as fetchUrlData,
-} from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -39,10 +35,6 @@ export function initializeEditor( id, settings ) {
 	const target = document.getElementById( id );
 	const root = createRoot( target );
 
-	settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) =>
-		fetchLinkSuggestions( search, searchOptions, settings );
-	settings.__experimentalFetchRichUrlData = fetchUrlData;
-
 	dispatch( blocksStore ).reapplyBlockTypeFilters();
 	const coreBlocks = __experimentalGetCoreBlocks().filter(
 		( { name } ) => name !== 'core/freeform'