Edit Site: Add home icon to template switcher.

WordPress · May 4, 2020 · b93715b · b93715b
1 parent ab4166f
commit b93715b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php
@@ -189,6 +189,7 @@ function gutenberg_edit_site_init( $hook ) {
 		$template_part_ids = $template_part_ids + $_wp_current_template_part_ids;
 	}
 	$settings['templateId']      = $current_template_post->ID;
+	$settings['homeTemplateId']  = $current_template_post->ID;
 	$settings['templateType']    = 'wp_template';
 	$settings['templateIds']     = array_values( $template_ids );
 	$settings['templatePartIds'] = array_values( $template_part_ids );

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -78,6 +78,7 @@ export default function Header( { openEntitiesSavedStates } ) {
 					ids={ settings.templateIds }
 					templatePartIds={ settings.templatePartIds }
 					activeId={ settings.templateId }
+					homeId={ settings.homeTemplateId }
 					isTemplatePart={
 						settings.templateType === 'wp_template_part'
 					}

diff --git a/packages/edit-site/src/components/template-switcher/index.js b/packages/edit-site/src/components/template-switcher/index.js
@@ -10,6 +10,8 @@ import {
 	MenuGroup,
 	MenuItemsChoice,
 	MenuItem,
+	SVG,
+	Path,
 } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 
@@ -20,10 +22,28 @@ import AddTemplate from '../add-template';
 import TemplatePreview from './template-preview';
 import ThemePreview from './theme-preview';
 
-function TemplateLabel( { template } ) {
+const HomeIcon = () => (
+	<SVG
+		width="24"
+		height="24"
+		viewBox="-6 -6 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path
+			d="M9.5 4V9.5H6.75V6.25V5.75H6.25H3.75H3.25V6.25V9.5H0.5V4L5 0.625L9.5 4Z"
+			stroke="black"
+		/>
+	</SVG>
+);
+function TemplateLabel( { template, homeId } ) {
 	return (
 		<>
 			{ template.slug }{ ' ' }
+			{ template.id === homeId && (
+				<Tooltip text={ __( 'Home' ) }>
+					<HomeIcon />
+				</Tooltip>
+			) }
 			{ template.status !== 'auto-draft' && (
 				<Tooltip text={ __( 'Customized' ) }>
 					<span className="edit-site-template-switcher__label-customized-dot" />
@@ -37,6 +57,7 @@ export default function TemplateSwitcher( {
 	ids,
 	templatePartIds,
 	activeId,
+	homeId,
 	isTemplatePart,
 	onActiveIdChange,
 	onActiveTemplatePartIdChange,
@@ -72,7 +93,10 @@ export default function TemplateSwitcher( {
 					);
 					return {
 						label: template ? (
-							<TemplateLabel template={ template } />
+							<TemplateLabel
+								template={ template }
+								homeId={ homeId }
+							/>
 						) : (
 							__( 'Loading…' )
 						),
@@ -98,7 +122,7 @@ export default function TemplateSwitcher( {
 				} ),
 			};
 		},
-		[ ids, templatePartIds ]
+		[ ids, templatePartIds, homeId ]
 	);
 	const [ isAddTemplateOpen, setIsAddTemplateOpen ] = useState( false );
 	return (