@wordpress/editor 13.27.1 → 13.27.2

package/src/components/post-template/block-theme.js

@@ -24,25 +24,46 @@ const POPOVER_PROPS = {
 };
 
 export default function BlockThemeControl( { id } ) {
-	const { isTemplateHidden } = useSelect( ( select ) => {
-		const { getRenderingMode } = unlock( select( editorStore ) );
-		return {
-			isTemplateHidden: getRenderingMode() === 'post-only',
-		};
-	}, [] );
+	const { isTemplateHidden, getPostLinkProps, getEditorSettings, hasGoBack } =
+		useSelect( ( select ) => {
+			const { getRenderingMode, getEditorSettings: _getEditorSettings } =
+				unlock( select( editorStore ) );
+			const editorSettings = _getEditorSettings();
+			return {
+				isTemplateHidden: getRenderingMode() === 'post-only',
+				getPostLinkProps: editorSettings.getPostLinkProps,
+				getEditorSettings: _getEditorSettings,
+				hasGoBack: editorSettings.hasOwnProperty( 'goBack' ),
+			};
+		}, [] );
+
 	const { editedRecord: template, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_template',
 		id
 	);
-	const { getEditorSettings } = useSelect( editorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { setRenderingMode } = useDispatch( editorStore );
+	const editTemplate = getPostLinkProps
+		? getPostLinkProps( {
+				postId: template.id,
+				postType: 'wp_template',
+		  } )
+		: {};
 
 	if ( ! hasResolved ) {
 		return null;
 	}
-
+	// The site editor does not have a `goBack` setting as it uses its own routing
+	// and assigns its own backlink to focusMode pages.
+	const notificationAction = hasGoBack
+		? [
+				{
+					label: __( 'Go back' ),
+					onClick: () => getEditorSettings().goBack(),
+				},
+		  ]
+		: undefined;
 	return (
 		<DropdownMenu
 			popoverProps={ POPOVER_PROPS }
@@ -58,8 +79,8 @@ export default function BlockThemeControl( { id } ) {
 				<>
 					<MenuGroup>
 						<MenuItem
-							onClick={ () => {
-								setRenderingMode( 'template-only' );
+							onClick={ ( event ) => {
+								editTemplate.onClick( event );
 								onClose();
 								createSuccessNotice(
 									__(
@@ -67,16 +88,7 @@ export default function BlockThemeControl( { id } ) {
 									),
 									{
 										type: 'snackbar',
-										actions: [
-											{
-												label: __( 'Go back' ),
-												onClick: () =>
-													setRenderingMode(
-														getEditorSettings()
-															.defaultRenderingMode
-													),
-											},
-										],
+										actions: notificationAction,
 									}
 								);
 							} }

package/src/components/post-template/classic-theme.js

@@ -63,12 +63,16 @@ function PostTemplateDropdownContent( { onClose } ) {
 		selectedTemplateSlug,
 		canCreate,
 		canEdit,
+		currentTemplateId,
+		getPostLinkProps,
+		getEditorSettings,
 	} = useSelect(
 		( select ) => {
 			const { canUser, getEntityRecords } = select( coreStore );
 			const editorSettings = select( editorStore ).getEditorSettings();
 			const canCreateTemplates = canUser( 'create', 'templates' );
-
+			const _currentTemplateId =
+				select( editorStore ).getCurrentTemplateId();
 			return {
 				availableTemplates: editorSettings.availableTemplates,
 				fetchedTemplates: canCreateTemplates
@@ -88,12 +92,23 @@ function PostTemplateDropdownContent( { onClose } ) {
 					allowSwitchingTemplate &&
 					canCreateTemplates &&
 					editorSettings.supportsTemplateMode &&
-					!! select( editorStore ).getCurrentTemplateId(),
+					!! _currentTemplateId,
+				currentTemplateId: _currentTemplateId,
+				getPostLinkProps: editorSettings.getPostLinkProps,
+				getEditorSettings: select( editorStore ).getEditorSettings,
 			};
 		},
 		[ allowSwitchingTemplate ]
 	);
 
+	const editTemplate =
+		getPostLinkProps && currentTemplateId
+			? getPostLinkProps( {
+					postId: currentTemplateId,
+					postType: 'wp_template',
+			  } )
+			: {};
+
 	const options = useMemo(
 		() =>
 			Object.entries( {
@@ -113,9 +128,7 @@ function PostTemplateDropdownContent( { onClose } ) {
 		options.find( ( option ) => ! option.value ); // The default option has '' value.
 
 	const { editPost } = useDispatch( editorStore );
-	const { getEditorSettings } = useSelect( editorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const { setRenderingMode } = useDispatch( editorStore );
 	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
 
 	return (
@@ -160,7 +173,7 @@ function PostTemplateDropdownContent( { onClose } ) {
 					<Button
 						variant="link"
 						onClick={ () => {
-							setRenderingMode( 'template-only' );
+							editTemplate.onClick();
 							onClose();
 							createSuccessNotice(
 								__(
@@ -172,10 +185,7 @@ function PostTemplateDropdownContent( { onClose } ) {
 										{
 											label: __( 'Go back' ),
 											onClick: () =>
-												setRenderingMode(
-													getEditorSettings()
-														.defaultRenderingMode
-												),
+												getEditorSettings().goBack(),
 										},
 									],
 								}

package/src/components/post-template/create-new-template-modal.js

@@ -23,15 +23,19 @@ import { store as editorStore } from '../../store';
 const DEFAULT_TITLE = __( 'Custom Template' );
 
 export default function CreateNewTemplateModal( { onClose } ) {
-	const defaultBlockTemplate = useSelect(
-		( select ) =>
-			select( editorStore ).getEditorSettings().defaultBlockTemplate,
-		[]
+	const { defaultBlockTemplate, getPostLinkProps } = useSelect(
+		( select ) => {
+			const { getEditorSettings, getCurrentTemplateId } =
+				select( editorStore );
+			return {
+				defaultBlockTemplate: getEditorSettings().defaultBlockTemplate,
+				getPostLinkProps: getEditorSettings().getPostLinkProps,
+				getTemplateId: getCurrentTemplateId,
+			};
+		}
 	);
 
-	const { createTemplate, setRenderingMode } = unlock(
-		useDispatch( editorStore )
-	);
+	const { createTemplate } = unlock( useDispatch( editorStore ) );
 
 	const [ title, setTitle ] = useState( '' );
 
@@ -86,15 +90,21 @@ export default function CreateNewTemplateModal( { onClose } ) {
 				),
 			] );
 
-		await createTemplate( {
+		const newTemplate = await createTemplate( {
 			slug: cleanForSlug( title || DEFAULT_TITLE ),
 			content: newTemplateContent,
 			title: title || DEFAULT_TITLE,
 		} );
 
 		setIsBusy( false );
+		const editTemplate = getPostLinkProps
+			? getPostLinkProps( {
+					postId: newTemplate.id,
+					postType: 'wp_template',
+			  } )
+			: {};
+		editTemplate.onClick();
 		cancel();
-		setRenderingMode( 'template-only' );
 	};
 
 	return (

package/src/components/provider/index.js

@@ -113,8 +113,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
 			const postContext =
-				rootLevelPost.type !== 'wp_template' ||
-				( shouldRenderTemplate && mode !== 'template-only' )
+				rootLevelPost.type !== 'wp_template' || shouldRenderTemplate
 					? { postId: post.id, postType: post.type }
 					: {};
 
@@ -125,14 +124,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 						? rootLevelPost.slug
 						: undefined,
 			};
-		}, [
-			mode,
-			post.id,
-			post.type,
-			rootLevelPost.type,
-			rootLevelPost?.slug,
-			shouldRenderTemplate,
-		] );
+		}, [ post.id, post.type, rootLevelPost.type, rootLevelPost.slug ] );
 		const { editorSettings, selection, isReady } = useSelect(
 			( select ) => {
 				const {
@@ -200,7 +192,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		// Synchronizes the active post with the state
 		useEffect( () => {
 			setEditedPost( post.type, post.id );
-		}, [ post.type, post.id ] );
+		}, [ post.type, post.id, setEditedPost ] );
 
 		// Synchronize the editor settings as they change.
 		useEffect( () => {

package/src/store/actions.js

@@ -313,8 +313,14 @@ export const trashPost =
 export const autosave =
 	( { local = false, ...options } = {} ) =>
 	async ( { select, dispatch } ) => {
+		const post = select.getCurrentPost();
+
+		// Currently template autosaving is not supported.
+		if ( post.type === 'wp_template' ) {
+			return;
+		}
+
 		if ( local ) {
-			const post = select.getCurrentPost();
 			const isPostNew = select.isEditedPostNew();
 			const title = select.getEditedPostAttribute( 'title' );
 			const content = select.getEditedPostAttribute( 'content' );
@@ -576,11 +582,10 @@ export function updateEditorSettings( settings ) {
  * Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes:
  *
  * -   `all`: This is the default mode. It renders the post editor with all the features available. If a template is provided, it's preferred over the post.
- * -   `template-only`: This mode renders the editor with only the template blocks visible.
  * -   `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template.
  * -   `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable.
  *
- * @param {string} mode Mode (one of 'template-only', 'post-only', 'template-locked' or 'all').
+ * @param {string} mode Mode (one of 'post-only', 'template-locked' or 'all').
  */
 export const setRenderingMode =
 	( mode ) =>

package/src/store/private-actions.js

@@ -59,6 +59,7 @@ export const createTemplate =
 					],
 				}
 			);
+		return savedTemplate;
 	};
 
 /**

package/src/store/selectors.js

@@ -373,6 +373,12 @@ export const getAutosaveAttribute = createRegistrySelector(
 		}
 
 		const postType = getCurrentPostType( state );
+
+		// Currently template autosaving is not supported.
+		if ( postType === 'wp_template' ) {
+			return false;
+		}
+
 		const postId = getCurrentPostId( state );
 		const currentUserId = select( coreStore ).getCurrentUser()?.id;
 		const autosave = select( coreStore ).getAutosave(
@@ -592,6 +598,12 @@ export const isEditedPostAutosaveable = createRegistrySelector(
 		}
 
 		const postType = getCurrentPostType( state );
+
+		// Currently template autosaving is not supported.
+		if ( postType === 'wp_template' ) {
+			return false;
+		}
+
 		const postId = getCurrentPostId( state );
 		const hasFetchedAutosave = select( coreStore ).hasFetchedAutosaves(
 			postType,