@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

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

@@ -20,6 +20,7 @@ import { store as editSiteStore } from '../../store';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 function useFallbackTemplateContent( slug, isCustom = false ) {
 	const [ templateContent, setTemplateContent ] = useState( '' );
@@ -50,6 +51,37 @@ function useStartPatterns( fallbackContent ) {
 		};
 	}, [] );
 
+	const currentThemeStylesheet = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme().stylesheet
+	);
+
+	// Duplicated from packages/block-library/src/pattern/edit.js.
+	function injectThemeAttributeInBlockTemplateContent( block ) {
+		if (
+			block.innerBlocks.find(
+				( innerBlock ) => innerBlock.name === 'core/template-part'
+			)
+		) {
+			block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+				if (
+					innerBlock.name === 'core/template-part' &&
+					innerBlock.attributes.theme === undefined
+				) {
+					innerBlock.attributes.theme = currentThemeStylesheet;
+				}
+				return innerBlock;
+			} );
+		}
+
+		if (
+			block.name === 'core/template-part' &&
+			block.attributes.theme === undefined
+		) {
+			block.attributes.theme = currentThemeStylesheet;
+		}
+		return block;
+	}
+
 	return useMemo( () => {
 		// filter patterns that are supposed to be used in the current template being edited.
 		return [
@@ -68,7 +100,12 @@ function useStartPatterns( fallbackContent ) {
 					);
 				} )
 				.map( ( pattern ) => {
-					return { ...pattern, blocks: parse( pattern.content ) };
+					return {
+						...pattern,
+						blocks: parse( pattern.content ).map( ( block ) =>
+							injectThemeAttributeInBlockTemplateContent( block )
+						),
+					};
 				} ),
 		];
 	}, [ fallbackContent, slug, patterns ] );
@@ -162,7 +199,7 @@ export default function StartTemplateOptions() {
 				shouldOpenModal:
 					! hasEdits &&
 					'' === templateRecord.content &&
-					'wp_template' === _postType &&
+					TEMPLATE_POST_TYPE === _postType &&
 					! select( preferencesStore ).get(
 						'core/edit-site',
 						'welcomeGuide'

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

@@ -11,6 +11,12 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES,
+} from '../../utils/constants';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -42,16 +48,16 @@ export default function useInitEditedEntityFromURL() {
 	useEffect( () => {
 		if ( postType && postId ) {
 			switch ( postType ) {
-				case 'wp_template':
+				case TEMPLATE_POST_TYPE:
 					setTemplate( postId );
 					break;
-				case 'wp_template_part':
+				case TEMPLATE_PART_POST_TYPE:
 					setTemplatePart( postId );
 					break;
-				case 'wp_navigation':
+				case NAVIGATION_POST_TYPE:
 					setNavigationMenu( postId );
 					break;
-				case 'wp_block':
+				case PATTERN_TYPES.user:
 					setEditedEntity( postType, postId );
 					break;
 				default:

package/src/components/sync-state-with-url/use-sync-path-with-url.js

@@ -9,6 +9,11 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_TYPES,
+} from '../../utils/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -18,9 +23,9 @@ export function getPathFromURL( urlParams ) {
 	// Compute the navigator path based on the URL params.
 	if ( urlParams?.postType && urlParams?.postId ) {
 		switch ( urlParams.postType ) {
-			case 'wp_block':
-			case 'wp_template':
-			case 'wp_template_part':
+			case PATTERN_TYPES.user:
+			case TEMPLATE_POST_TYPE:
+			case TEMPLATE_PART_POST_TYPE:
 			case 'page':
 				path = `/${ encodeURIComponent(
 					urlParams.postType

package/src/components/template-actions/index.js

@@ -22,6 +22,7 @@ import { store as editSiteStore } from '../../store';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
 import RenameMenuItem from './rename-menu-item';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 export default function TemplateActions( {
 	postType,
@@ -67,10 +68,16 @@ export default function TemplateActions( {
 				}
 			);
 		} catch ( error ) {
+			const fallbackErrorMessage =
+				template.type === TEMPLATE_POST_TYPE
+					? __( 'An error occurred while reverting the template.' )
+					: __(
+							'An error occurred while reverting the template part.'
+					  );
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while reverting the entity.' );
+					: fallbackErrorMessage;
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
@@ -97,7 +104,7 @@ export default function TemplateActions( {
 									onRemove?.();
 									onClose();
 								} }
-								isTemplate={ template.type === 'wp_template' }
+								title={ template.title.rendered }
 							/>
 						</>
 					) }
@@ -120,7 +127,7 @@ export default function TemplateActions( {
 	);
 }
 
-function DeleteMenuItem( { onRemove, isTemplate } ) {
+function DeleteMenuItem( { onRemove, title } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	return (
 		<>
@@ -133,11 +140,11 @@ function DeleteMenuItem( { onRemove, isTemplate } ) {
 				onCancel={ () => setIsModalOpen( false ) }
 				confirmButtonText={ __( 'Delete' ) }
 			>
-				{ isTemplate
-					? __( 'Are you sure you want to delete this template?' )
-					: __(
-							'Are you sure you want to delete this template part?'
-					  ) }
+				{ sprintf(
+					// translators: %s: The template or template part's title.
+					__( 'Are you sure you want to delete "%s"?' ),
+					decodeEntities( title )
+				) }
 			</ConfirmDialog>
 		</>
 	);

package/src/components/template-actions/rename-menu-item.js

@@ -16,6 +16,11 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
 
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+
 export default function RenameMenuItem( { template, onClose } ) {
 	const title = decodeEntities( template.title.rendered );
 	const [ editedTitle, setEditedTitle ] = useState( title );
@@ -28,7 +33,7 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	if ( template.type === 'wp_template' && ! template.is_custom ) {
+	if ( template.type === TEMPLATE_POST_TYPE && ! template.is_custom ) {
 		return null;
 	}
 
@@ -56,14 +61,25 @@ export default function RenameMenuItem( { template, onClose } ) {
 				}
 			);
 
-			createSuccessNotice( __( 'Entity renamed.' ), {
-				type: 'snackbar',
-			} );
+			createSuccessNotice(
+				template.type === TEMPLATE_POST_TYPE
+					? __( 'Template renamed.' )
+					: __( 'Template part renamed.' ),
+				{
+					type: 'snackbar',
+				}
+			);
 		} catch ( error ) {
+			const fallbackErrorMessage =
+				template.type === TEMPLATE_POST_TYPE
+					? __( 'An error occurred while renaming the template.' )
+					: __(
+							'An error occurred while renaming the template part.'
+					  );
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while renaming the entity.' );
+					: fallbackErrorMessage;
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}

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

@@ -77,7 +77,7 @@ export default function WelcomeGuideStyles() {
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(
-									'You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle! '
+									'You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle!'
 								) }
 							</p>
 						</>
@@ -117,7 +117,7 @@ export default function WelcomeGuideStyles() {
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(
-									'New to block themes and styling your site? '
+									'New to block themes and styling your site?'
 								) }
 								<ExternalLink
 									href={ __(

package/src/hooks/commands/use-edit-mode-commands.js

@@ -33,6 +33,7 @@ import isTemplateRevertable from '../../utils/is-template-revertable';
 import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
 import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -131,7 +132,7 @@ function useManipulateDocumentCommands() {
 
 	if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) {
 		const label =
-			template.type === 'wp_template'
+			template.type === TEMPLATE_POST_TYPE
 				? /* translators: %1$s: template title */
 				  sprintf(
 						'Reset template: %s',
@@ -155,7 +156,7 @@ function useManipulateDocumentCommands() {
 
 	if ( isTemplateRemovable( template ) && ! hasPageContentFocus ) {
 		const label =
-			template.type === 'wp_template'
+			template.type === TEMPLATE_POST_TYPE
 				? /* translators: %1$s: template title */
 				  sprintf(
 						'Delete template: %s',
@@ -167,7 +168,7 @@ function useManipulateDocumentCommands() {
 						decodeEntities( template.title )
 				  );
 		const path =
-			template.type === 'wp_template'
+			template.type === TEMPLATE_POST_TYPE
 				? '/wp_template'
 				: '/wp_template_part/all';
 		commands.push( {

package/src/hooks/navigation-menu-edit.js

@@ -15,6 +15,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import { useLink } from '../components/routes/link';
 import { unlock } from '../lock-unlock';
+import { NAVIGATION_POST_TYPE } from '../utils/constants';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -26,7 +27,7 @@ function NavigationMenuEdit( { attributes } ) {
 		( select ) => {
 			return select( coreStore ).getEntityRecord(
 				'postType',
-				'wp_navigation',
+				NAVIGATION_POST_TYPE,
 				// Ideally this should be an official public API.
 				ref
 			);

package/src/hooks/push-changes-to-global-styles/index.js

@@ -26,12 +26,9 @@ import { store as noticesStore } from '@wordpress/notices';
 import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../lock-unlock';
 
-const {
-	cleanEmptyObject,
-	GlobalStylesContext,
-	__experimentalUseGlobalBehaviors: useGlobalBehaviors,
-	__experimentalUseHasBehaviorsPanel: useHasBehaviorsPanel,
-} = unlock( blockEditorPrivateApis );
+const { cleanEmptyObject, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 
 // Block Gap is a special case and isn't defined within the blocks
 // style properties config. We'll add it here to allow it to be pushed
@@ -286,10 +283,6 @@ function PushChangesToGlobalStylesControl( {
 	attributes,
 	setAttributes,
 } ) {
-	const hasBehaviorsPanel = useHasBehaviorsPanel( attributes, name, {
-		blockSupportOnly: true,
-	} );
-
 	const { user: userConfig, setUserConfig } =
 		useContext( GlobalStylesContext );
 
@@ -299,13 +292,8 @@ function PushChangesToGlobalStylesControl( {
 		useDispatch( blockEditorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
-	const { inheritedBehaviors, setBehavior } = useGlobalBehaviors( name );
-
-	const userHasEditedBehaviors =
-		attributes.hasOwnProperty( 'behaviors' ) && hasBehaviorsPanel;
-
 	const pushChanges = useCallback( () => {
-		if ( changes.length === 0 && ! userHasEditedBehaviors ) {
+		if ( changes.length === 0 ) {
 			return;
 		}
 
@@ -364,46 +352,15 @@ function PushChangesToGlobalStylesControl( {
 				}
 			);
 		}
-
-		if ( userHasEditedBehaviors ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { behaviors: undefined } );
-			setBehavior( attributes.behaviors );
-			createSuccessNotice(
-				sprintf(
-					// translators: %s: Title of the block e.g. 'Heading'.
-					__( '%s behaviors applied.' ),
-					getBlockType( name ).title
-				),
-				{
-					type: 'snackbar',
-					actions: [
-						{
-							label: __( 'Undo' ),
-							onClick() {
-								__unstableMarkNextChangeAsNotPersistent();
-								setBehavior( inheritedBehaviors );
-								setUserConfig( () => userConfig, {
-									undoIgnore: true,
-								} );
-							},
-						},
-					],
-				}
-			);
-		}
 	}, [
 		__unstableMarkNextChangeAsNotPersistent,
 		attributes,
 		changes,
 		createSuccessNotice,
-		inheritedBehaviors,
 		name,
 		setAttributes,
-		setBehavior,
 		setUserConfig,
 		userConfig,
-		userHasEditedBehaviors,
 	] );
 
 	return (
@@ -412,7 +369,7 @@ function PushChangesToGlobalStylesControl( {
 			help={ sprintf(
 				// translators: %s: Title of the block e.g. 'Heading'.
 				__(
-					'Apply this block’s typography, spacing, dimensions, color styles, and behaviors to all %s blocks.'
+					'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
 				),
 				getBlockType( name ).title
 			) }
@@ -422,7 +379,7 @@ function PushChangesToGlobalStylesControl( {
 			</BaseControl.VisualLabel>
 			<Button
 				variant="primary"
-				disabled={ changes.length === 0 && ! userHasEditedBehaviors }
+				disabled={ changes.length === 0 }
 				onClick={ pushChanges }
 			>
 				{ __( 'Apply globally' ) }

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

@@ -15,6 +15,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import { useLink } from '../components/routes/link';
 import { unlock } from '../lock-unlock';
+import { TEMPLATE_PART_POST_TYPE } from '../utils/constants';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -25,7 +26,7 @@ function EditTemplatePartMenuItem( { attributes } ) {
 		( select ) => {
 			return select( coreStore ).getEntityRecord(
 				'postType',
-				'wp_template_part',
+				TEMPLATE_PART_POST_TYPE,
 				// Ideally this should be an official public API.
 				`${ theme }//${ slug }`
 			);

package/src/store/actions.js

@@ -4,7 +4,7 @@
 import apiFetch from '@wordpress/api-fetch';
 import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
-import { addQueryArgs, getPathAndQueryString } from '@wordpress/url';
+import { addQueryArgs } from '@wordpress/url';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -19,7 +19,11 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { STORE_NAME as editSiteStoreName } from './constants';
 import isTemplateRevertable from '../utils/is-template-revertable';
-
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../utils/constants';
 /**
  * Dispatches an action that toggles a feature flag.
  *
@@ -67,14 +71,18 @@ export const setTemplate =
 			try {
 				const template = await registry
 					.resolveSelect( coreStore )
-					.getEntityRecord( 'postType', 'wp_template', templateId );
+					.getEntityRecord(
+						'postType',
+						TEMPLATE_POST_TYPE,
+						templateId
+					);
 				templateSlug = template?.slug;
 			} catch ( error ) {}
 		}
 
 		dispatch( {
 			type: 'SET_EDITED_POST',
-			postType: 'wp_template',
+			postType: TEMPLATE_POST_TYPE,
 			id: templateId,
 			context: { templateSlug },
 		} );
@@ -92,14 +100,14 @@ export const addTemplate =
 	async ( { dispatch, registry } ) => {
 		const newTemplate = await registry
 			.dispatch( coreStore )
-			.saveEntityRecord( 'postType', 'wp_template', template );
+			.saveEntityRecord( 'postType', TEMPLATE_POST_TYPE, template );
 
 		if ( template.content ) {
 			registry
 				.dispatch( coreStore )
 				.editEntityRecord(
 					'postType',
-					'wp_template',
+					TEMPLATE_POST_TYPE,
 					newTemplate.id,
 					{ blocks: parse( template.content ) },
 					{ undoIgnore: true }
@@ -108,7 +116,7 @@ export const addTemplate =
 
 		dispatch( {
 			type: 'SET_EDITED_POST',
-			postType: 'wp_template',
+			postType: TEMPLATE_POST_TYPE,
 			id: newTemplate.id,
 			context: { templateSlug: newTemplate.slug },
 		} );
@@ -178,7 +186,7 @@ export const removeTemplate =
 export function setTemplatePart( templatePartId ) {
 	return {
 		type: 'SET_EDITED_POST',
-		postType: 'wp_template_part',
+		postType: TEMPLATE_PART_POST_TYPE,
 		id: templatePartId,
 	};
 }
@@ -193,7 +201,7 @@ export function setTemplatePart( templatePartId ) {
 export function setNavigationMenu( navigationMenuId ) {
 	return {
 		type: 'SET_EDITED_POST',
-		postType: 'wp_navigation',
+		postType: NAVIGATION_POST_TYPE,
 		id: navigationMenuId,
 	};
 }
@@ -233,7 +241,7 @@ export function setHomeTemplateId() {
  *
  * @param {Object} context The context object.
  *
- * @return {number} The resolved template ID for the page route.
+ * @return {Object} Action object.
  */
 export function setEditedPostContext( context ) {
 	return {
@@ -257,29 +265,55 @@ export function setEditedPostContext( context ) {
 export const setPage =
 	( page ) =>
 	async ( { dispatch, registry } ) => {
-		if ( ! page.path && page.context?.postId ) {
-			const entity = await registry
+		let template;
+		const getDefaultTemplate = async ( slug ) =>
+			apiFetch( {
+				path: addQueryArgs( '/wp/v2/templates/lookup', {
+					slug: `page-${ slug }`,
+				} ),
+			} );
+
+		if ( page.path ) {
+			template = await registry
 				.resolveSelect( coreStore )
-				.getEntityRecord(
+				.__experimentalGetTemplateForLink( page.path );
+		} else {
+			const editedEntity = await registry
+				.resolveSelect( coreStore )
+				.getEditedEntityRecord(
 					'postType',
-					page.context.postType || 'post',
-					page.context.postId
+					page.context?.postType || 'post',
+					page.context?.postId
 				);
-			// If the entity is undefined for some reason, path will resolve to "/"
-			page.path = getPathAndQueryString( entity?.link );
+			const currentTemplateSlug = editedEntity?.template;
+			if ( currentTemplateSlug ) {
+				const currentTemplate = (
+					await registry
+						.resolveSelect( coreStore )
+						.getEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
+							per_page: -1,
+						} )
+				)?.find( ( { slug } ) => slug === currentTemplateSlug );
+				if ( currentTemplate ) {
+					template = currentTemplate;
+				} else {
+					// If a page has a `template` set and is not included in the list
+					// of the current theme's templates, query for current theme's default template.
+					template = await getDefaultTemplate( editedEntity?.slug );
+				}
+			} else {
+				// Page's `template` is empty, that indicates we need to use the default template for the page.
+				template = await getDefaultTemplate( editedEntity?.slug );
+			}
 		}
 
-		const template = await registry
-			.resolveSelect( coreStore )
-			.__experimentalGetTemplateForLink( page.path );
-
 		if ( ! template ) {
 			return;
 		}
 
 		dispatch( {
 			type: 'SET_EDITED_POST',
-			postType: 'wp_template',
+			postType: TEMPLATE_POST_TYPE,
 			id: template.id,
 			context: {
 				...page.context,

package/src/store/constants.js

@@ -4,8 +4,3 @@
  * @type {string}
  */
 export const STORE_NAME = 'core/edit-site';
-
-export const TEMPLATE_PART_AREA_HEADER = 'header';
-export const TEMPLATE_PART_AREA_FOOTER = 'footer';
-export const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar';
-export const TEMPLATE_PART_AREA_GENERAL = 'uncategorized';

package/src/store/private-actions.js

@@ -49,3 +49,22 @@ export const setEditorCanvasContainerView =
 			view,
 		} );
 	};
+
+/**
+ * Sets the type of page content focus. Can be one of:
+ *
+ * - `'disableTemplate'`: Disable the blocks belonging to the page's template.
+ * - `'hideTemplate'`: Hide the blocks belonging to the page's template.
+ *
+ * @param {'disableTemplate'|'hideTemplate'} pageContentFocusType The type of page content focus.
+ *
+ * @return {Object} Action object.
+ */
+export const setPageContentFocusType =
+	( pageContentFocusType ) =>
+	( { dispatch } ) => {
+		dispatch( {
+			type: 'SET_PAGE_CONTENT_FOCUS_TYPE',
+			pageContentFocusType,
+		} );
+	};

package/src/store/private-selectors.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { hasPageContentFocus } from './selectors';
+
 /**
  * Returns the current canvas mode.
  *
@@ -19,3 +24,20 @@ export function getCanvasMode( state ) {
 export function getEditorCanvasContainerView( state ) {
 	return state.editorCanvasContainerView;
 }
+
+/**
+ * Returns the type of the current page content focus, or null if there is no
+ * page content focus.
+ *
+ * Possible values are:
+ *
+ * - `'disableTemplate'`: Disable the blocks belonging to the page's template.
+ * - `'hideTemplate'`: Hide the blocks belonging to the page's template.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {'disableTemplate'|'hideTemplate'|null} Type of the current page content focus.
+ */
+export function getPageContentFocusType( state ) {
+	return hasPageContentFocus( state ) ? state.pageContentFocusType : null;
+}