Edit Site: Move template switcher to the header.

WordPress · Dec 17, 2019 · 54553f2 · 54553f2
1 parent 41a3e85
commit 54553f2
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -21,7 +21,6 @@ import {
  */
 import { useEditorContext } from '../editor';
 import Sidebar from '../sidebar';
-import TemplateSwitcher from '../template-switcher';
 import AddTemplate from '../add-template';
 
 export default function BlockEditor() {
@@ -68,24 +67,6 @@ export default function BlockEditor() {
 		},
 		[ setBlocks, _setContent ]
 	);
-	const setActiveTemplateId = useCallback(
-		( newTemplateId ) =>
-			setSettings( ( prevSettings ) => ( {
-				...prevSettings,
-				templateId: newTemplateId,
-				templateType: 'wp_template',
-			} ) ),
-		[]
-	);
-	const setActiveTemplatePartId = useCallback(
-		( newTemplatePartId ) =>
-			setSettings( ( prevSettings ) => ( {
-				...prevSettings,
-				templateId: newTemplatePartId,
-				templateType: 'wp_template_part',
-			} ) ),
-		[]
-	);
 	const addTemplateId = useCallback(
 		( newTemplateId ) =>
 			setSettings( ( prevSettings ) => ( {
@@ -103,14 +84,6 @@ export default function BlockEditor() {
 		>
 			<BlockEditorKeyboardShortcuts />
 			<Sidebar.TemplatesFill>
-				<TemplateSwitcher
-					ids={ settings.templateIds }
-					templatePartIds={ settings.templatePartIds }
-					activeId={ settings.templateId }
-					isTemplatePart={ settings.templateType === 'wp_template_part' }
-					onActiveIdChange={ setActiveTemplateId }
-					onActiveTemplatePartIdChange={ setActiveTemplatePartId }
-				/>
 				<AddTemplate
 					ids={ settings.templateIds }
 					onAddTemplateId={ addTemplateId }

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -1,14 +1,36 @@
 /**
  * WordPress dependencies
  */
+import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { useEditorContext } from '../editor';
+import TemplateSwitcher from '../template-switcher';
 import SaveButton from '../save-button';
 
 export default function Header() {
+	const { settings, setSettings } = useEditorContext();
+	const setActiveTemplateId = useCallback(
+		( newTemplateId ) =>
+			setSettings( ( prevSettings ) => ( {
+				...prevSettings,
+				templateId: newTemplateId,
+				templateType: 'wp_template',
+			} ) ),
+		[]
+	);
+	const setActiveTemplatePartId = useCallback(
+		( newTemplatePartId ) =>
+			setSettings( ( prevSettings ) => ( {
+				...prevSettings,
+				templateId: newTemplatePartId,
+				templateType: 'wp_template_part',
+			} ) ),
+		[]
+	);
 	return (
 		<div
 			className="edit-site-header"
@@ -20,6 +42,14 @@ export default function Header() {
 				{ __( 'Site Editor' ) } { __( '(beta)' ) }
 			</h1>
 			<div className="edit-site-header__actions">
+				<TemplateSwitcher
+					ids={ settings.templateIds }
+					templatePartIds={ settings.templatePartIds }
+					activeId={ settings.templateId }
+					isTemplatePart={ settings.templateType === 'wp_template_part' }
+					onActiveIdChange={ setActiveTemplateId }
+					onActiveTemplatePartIdChange={ setActiveTemplatePartId }
+				/>
 				<SaveButton />
 			</div>
 		</div>

diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -33,5 +33,7 @@
 }
 
 .edit-site-header__actions {
+	align-items: center;
+	display: flex;
 	padding: 0 20px;
 }