Add zoom-in/zoom-out to the template level

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -25,6 +25,11 @@ import {
 import { plus } from '@wordpress/icons';
 import { useRef } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import TemplateZoomToggle from '../template-zoom-toggle';
+
 function HeaderToolbar() {
 	const inserterButton = useRef();
 	const { setIsInserterOpened } = useDispatch( 'core/edit-post' );
@@ -204,6 +209,7 @@ characters. */
 						) }
 					</DropdownMenu>
 				) }
+				<TemplateZoomToggle />
 			</div>
 
 			{ displayBlockToolbar && (

packages/edit-post/src/components/header/template-zoom-toggle/index.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { stack } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+function TemplateZoomToggle( { ...props } ) {
+	const isActive = useSelect(
+		( select ) =>
+			select( 'core/edit-post' ).isFeatureActive( 'templateZoomOut' ),
+		[]
+	);
+	const { toggleFeature } = useDispatch( 'core/edit-post' );
+
+	return (
+		<Button
+			isPressed={ isActive }
+			onClick={ () => {
+				toggleFeature( 'templateZoomOut' );
+			} }
+			icon={ stack }
+			/* translators: button label text should, if possible, be under 16
+characters. */
+			label={
+				isActive
+					? __( 'Zoom in to the post content' )
+					: __( 'Zoom out to the template' )
+			}
+			{ ...props }
+		/>
+	);
+}
+
+export default TemplateZoomToggle;

packages/edit-post/src/components/visual-editor/index.js

@@ -27,8 +27,14 @@ import { useSelect } from '@wordpress/data';
 
 export default function VisualEditor() {
 	const ref = useRef();
-	const deviceType = useSelect( ( select ) => {
-		return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType();
+	const { deviceType, templateZoomOut } = useSelect( ( select ) => {
+		const { isFeatureActive, __experimentalGetPreviewDeviceType } = select(
+			'core/edit-post'
+		);
+		return {
+			deviceType: __experimentalGetPreviewDeviceType(),
+			templateZoomOut: isFeatureActive( 'templateZoomOut' ),
+		};
 	}, [] );
 	const inlineStyles = useResizeCanvas( deviceType );
 
@@ -49,9 +55,11 @@ export default function VisualEditor() {
 				style={ inlineStyles }
 			>
 				<WritingFlow>
-					<div className="edit-post-visual-editor__post-title-wrapper">
-						<PostTitle />
-					</div>
+					{ ! templateZoomOut && (
+						<div className="edit-post-visual-editor__post-title-wrapper">
+							<PostTitle />
+						</div>
+					) }
 					<BlockList />
 				</WritingFlow>
 			</div>

packages/edit-post/src/editor.js

@@ -12,13 +12,13 @@ import {
 	ErrorBoundary,
 	PostLockedModal,
 } from '@wordpress/editor';
-import { StrictMode, useMemo } from '@wordpress/element';
+import { StrictMode, useEffect, useMemo, useState } from '@wordpress/element';
 import {
 	KeyboardShortcuts,
 	SlotFillProvider,
 	DropZoneProvider,
 } from '@wordpress/components';
-import { createBlock } from '@wordpress/blocks';
+import { parse } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -27,6 +27,25 @@ import preventEventDiscovery from './prevent-event-discovery';
 import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
 import EditPostSettings from './components/edit-post-settings';
+import findTemplate from './utils/find-template';
+
+function useTemplate( link ) {
+	const getEntityRecords = useSelect(
+		( select ) => select( 'core' ).getEntityRecords,
+		[]
+	);
+	const [ template, setTemplate ] = useState( null, getEntityRecords );
+
+	useEffect( () => {
+		setTemplate( undefined );
+		if ( ! link ) {
+			return;
+		}
+		findTemplate( link ).then( setTemplate );
+	}, [ link ] );
+
+	return template;
+}
 
 function Editor( {
 	postId,
@@ -47,6 +66,7 @@ function Editor( {
 		blockTypes,
 		__experimentalLocalAutosaveInterval,
 		keepCaretInsideBlock,
+		templateZoomOut,
 	} = useSelect( ( select ) => {
 		const {
 			isFeatureActive,
@@ -73,6 +93,7 @@ function Editor( {
 				'localAutosaveInterval'
 			),
 			keepCaretInsideBlock: isFeatureActive( 'keepCaretInsideBlock' ),
+			templateZoomOut: isFeatureActive( 'templateZoomOut' ),
 		};
 	} );
 
@@ -134,13 +155,10 @@ function Editor( {
 		keepCaretInsideBlock,
 	] );
 
-	const template = useMemo(
-		() => [
-			createBlock( 'core/post-title' ),
-			createBlock( 'core/post-content' ),
-		],
-		[]
-	);
+	const template = useTemplate( post && post.link );
+	const templateContent = useMemo( () => {
+		return template ? parse( template.post_content ) : [];
+	}, [ template ] );
 
 	if ( ! post ) {
 		return null;
@@ -156,7 +174,9 @@ function Editor( {
 							post={ post }
 							initialEdits={ initialEdits }
 							useSubRegistry={ false }
-							__unstableTemplate={ template }
+							__unstableTemplate={
+								templateZoomOut ? templateContent : undefined
+							}
 							{ ...props }
 						>
 							<ErrorBoundary onError={ onError }>

packages/edit-post/src/utils/find-template.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Browser dependencies
+ */
+const { fetch } = window;
+
+/**
+ * Find the template for a given page path.
+ *
+ * @param {string}   path The page path.
+ * @param {Function} getEntityRecords The promise-returning `getEntityRecords` selector to use.
+ *
+ * @return {number} The found template ID.
+ */
+export default async function findTemplate( path, getEntityRecords ) {
+	const { data } = await fetch(
+		addQueryArgs( findTemplate.siteUrl + path, {
+			'_wp-find-template': true,
+		} )
+	).then( ( res ) => res.json() );
+
+	let newTemplate = data;
+	if ( newTemplate === null ) {
+		newTemplate = (
+			await getEntityRecords( 'postType', 'wp_template', {
+				resolved: true,
+				slug: data.post_name,
+			} )
+		 )[ 0 ];
+	}
+
+	return newTemplate;
+}
+
+findTemplate.siteUrl = '';