From 7d58ed52bf00e50003e9468f557d628100580e06 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 9 Nov 2020 13:06:11 +0100
Subject: [PATCH] Add zoom-in/zoom-out to the template level

---
 .../components/header/header-toolbar/index.js |  6 +++
 .../header/template-zoom-toggle/index.js      | 36 +++++++++++++++++
 .../src/components/visual-editor/index.js     | 20 ++++++++--
 packages/edit-post/src/editor.js              | 40 ++++++++++++++-----
 packages/edit-post/src/utils/find-template.js | 39 ++++++++++++++++++
 5 files changed, 128 insertions(+), 13 deletions(-)
 create mode 100644 packages/edit-post/src/components/header/template-zoom-toggle/index.js
 create mode 100644 packages/edit-post/src/utils/find-template.js

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index ff8226f101a08b..440178d7f2e6d4 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/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' );
@@ -213,6 +218,7 @@ function HeaderToolbar() {
 							) }
 						</DropdownMenu>
 					) }
+				<TemplateZoomToggle />
 			</div>
 
 			{ displayBlockToolbar && (
diff --git a/packages/edit-post/src/components/header/template-zoom-toggle/index.js b/packages/edit-post/src/components/header/template-zoom-toggle/index.js
new file mode 100644
index 00000000000000..5f0a24b53cc049
--- /dev/null
+++ b/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;
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 781b9b553fbc48..de8112a09f3841 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { VisualEditorGlobalKeyboardShortcuts } from '@wordpress/editor';
+import {
+	VisualEditorGlobalKeyboardShortcuts,
+	PostTitle,
+} from '@wordpress/editor';
 import {
 	WritingFlow,
 	Typewriter,
@@ -22,8 +25,14 @@ import BlockInspectorButton from './block-inspector-button';
 import { useSelect } from '@wordpress/data';
 
 function VisualEditor() {
-	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 );
@@ -40,6 +49,11 @@ function VisualEditor() {
 				<CopyHandler>
 					<WritingFlow>
 						<ObserveTyping>
+							{ ! templateZoomOut && (
+								<div className="edit-post-visual-editor__post-title-wrapper">
+									<PostTitle />
+								</div>
+							) }
 							<BlockList />
 						</ObserveTyping>
 					</WritingFlow>
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
index 6965ac04e66ee4..58c951e8afe518 100644
--- a/packages/edit-post/src/editor.js
+++ b/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 }>
diff --git a/packages/edit-post/src/utils/find-template.js b/packages/edit-post/src/utils/find-template.js
new file mode 100644
index 00000000000000..27ebd58f522dc2
--- /dev/null
+++ b/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 = '';