Edit Site: Add home icon to template switcher. (#22004)

* Edit Site: Add home icon to template switcher. * Icons: Add new home icon. * Icons: Update home icon.
WordPress · May 4, 2020 · b73bb6d · b73bb6d
1 parent a67c9a9
commit b73bb6d
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 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
@@ -11,7 +11,7 @@ import {
 	MenuItemsChoice,
 	MenuItem,
 } from '@wordpress/components';
-import { plus } from '@wordpress/icons';
+import { Icon, home, plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,10 +20,17 @@ import AddTemplate from '../add-template';
 import TemplatePreview from './template-preview';
 import ThemePreview from './theme-preview';
 
-function TemplateLabel( { template } ) {
+function TemplateLabel( { template, homeId } ) {
 	return (
 		<>
 			{ template.slug }{ ' ' }
+			{ template.id === homeId && (
+				<Tooltip text={ __( 'Home' ) }>
+					<div className="edit-site-template-switcher__label-home-icon">
+						<Icon icon={ home } />
+					</div>
+				</Tooltip>
+			) }
 			{ template.status !== 'auto-draft' && (
 				<Tooltip text={ __( 'Customized' ) }>
 					<span className="edit-site-template-switcher__label-customized-dot" />
@@ -37,6 +44,7 @@ export default function TemplateSwitcher( {
 	ids,
 	templatePartIds,
 	activeId,
+	homeId,
 	isTemplatePart,
 	onActiveIdChange,
 	onActiveTemplatePartIdChange,
@@ -72,7 +80,10 @@ export default function TemplateSwitcher( {
 					);
 					return {
 						label: template ? (
-							<TemplateLabel template={ template } />
+							<TemplateLabel
+								template={ template }
+								homeId={ homeId }
+							/>
 						) : (
 							__( 'Loading…' )
 						),
@@ -98,7 +109,7 @@ export default function TemplateSwitcher( {
 				} ),
 			};
 		},
-		[ ids, templatePartIds ]
+		[ ids, templatePartIds, homeId ]
 	);
 	const [ isAddTemplateOpen, setIsAddTemplateOpen ] = useState( false );
 	return (

diff --git a/packages/edit-site/src/components/template-switcher/style.scss b/packages/edit-site/src/components/template-switcher/style.scss
@@ -6,6 +6,13 @@
 	position: relative;
 }
 
+.edit-site-template-switcher__label-home-icon {
+	width: 24px;
+	height: 24px;
+	position: absolute;
+	right: 20px;
+}
+
 .edit-site-template-switcher__label-customized-dot {
 	position: absolute;
 	right: 4px;

diff --git a/packages/icons/src/library/home.js b/packages/icons/src/library/home.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const home = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M20 20H4v-9.5L12 4l8 6.5V20zM12 5.933l-6.5 5.281V18.5h13v-7.286L12 5.933z" />
+		<Path d="M12 4L4 7.9V20h16V7.9L12 4zm6.5 14.5H14V13h-4v5.5H5.5V8.8L12 5.7l6.5 3.1v9.7z" />
 	</SVG>
 );