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

epiqueras · 2020-04-30T18:49:01Z

Closes #20788

Description

This PR adds a home icon to the current home template in the template switcher.

How has this been tested?

It was verified that the home icon shows for the home template in the site editor's template switcher.

Screenshots

Types of Changes

New Feature: The site editor's template switcher now has an icon to show the current home template.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

github-actions · 2020-04-30T18:55:51Z

Size Change: +251 B (0%)

Total Size: 821 kB

Filename	Size	Change
`build/api-fetch/index.js`	4.08 kB	-3 B (0%)
`build/block-directory/index.js`	6.6 kB	-1 B
`build/block-editor/index.js`	101 kB	+6 B (0%)
`build/block-library/index.js`	115 kB	-1 B
`build/components/index.js`	179 kB	+8 B (0%)
`build/compose/index.js`	6.66 kB	+1 B
`build/edit-post/index.js`	28.1 kB	+2 B (0%)
`build/edit-site/index.js`	12.2 kB	+215 B (1%)
`build/edit-site/style-rtl.css`	5.19 kB	+14 B (0%)
`build/edit-site/style.css`	5.2 kB	+15 B (0%)
`build/edit-widgets/index.js`	8.33 kB	-1 B
`build/editor/index.js`	44.3 kB	-6 B (0%)
`build/element/index.js`	4.65 kB	-1 B
`build/format-library/index.js`	7.63 kB	+1 B
`build/list-reusable-blocks/index.js`	3.13 kB	+1 B
`build/plugins/index.js`	2.56 kB	+1 B

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.02 kB	0 B
`build/annotations/index.js`	3.62 kB	0 B
`build/autop/index.js`	2.82 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/style-rtl.css`	760 B	0 B
`build/block-directory/style.css`	761 B	0 B
`build/block-editor/style-rtl.css`	10.2 kB	0 B
`build/block-editor/style.css`	10.2 kB	0 B
`build/block-library/editor-rtl.css`	7.08 kB	0 B
`build/block-library/editor.css`	7.08 kB	0 B
`build/block-library/style-rtl.css`	7.22 kB	0 B
`build/block-library/style.css`	7.23 kB	0 B
`build/block-library/theme-rtl.css`	683 B	0 B
`build/block-library/theme.css`	685 B	0 B
`build/block-serialization-default-parser/index.js`	1.88 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	48.1 kB	0 B
`build/components/style-rtl.css`	16.9 kB	0 B
`build/components/style.css`	16.9 kB	0 B
`build/core-data/index.js`	11.4 kB	0 B
`build/data-controls/index.js`	1.29 kB	0 B
`build/data/index.js`	8.44 kB	0 B
`build/date/index.js`	5.47 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	3.1 kB	0 B
`build/edit-navigation/index.js`	4.05 kB	0 B
`build/edit-navigation/style-rtl.css`	485 B	0 B
`build/edit-navigation/style.css`	485 B	0 B
`build/edit-post/style-rtl.css`	12.2 kB	0 B
`build/edit-post/style.css`	12.2 kB	0 B
`build/edit-widgets/style-rtl.css`	4.67 kB	0 B
`build/edit-widgets/style.css`	4.66 kB	0 B
`build/editor/editor-styles-rtl.css`	428 B	0 B
`build/editor/editor-styles.css`	431 B	0 B
`build/editor/style-rtl.css`	5.07 kB	0 B
`build/editor/style.css`	5.08 kB	0 B
`build/escape-html/index.js`	734 B	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	2.13 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/i18n/index.js`	3.56 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.51 kB	0 B
`build/keycodes/index.js`	1.94 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/media-utils/index.js`	5.29 kB	0 B
`build/notices/index.js`	1.79 kB	0 B
`build/nux/index.js`	3.4 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/primitives/index.js`	1.5 kB	0 B
`build/priority-queue/index.js`	789 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/rich-text/index.js`	14.8 kB	0 B
`build/server-side-render/index.js`	2.67 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.28 kB	0 B
`build/url/index.js`	4.02 kB	0 B
`build/viewport/index.js`	1.84 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.18 kB	0 B

_{compressed-size-action}

mtias · 2020-05-01T08:18:13Z

The icon should have the same proportions and 24x24 grid of the other icons. I think it'd made sense for it to be aligned with the little circle-dot on the right (Home, then dot).

mtias · 2020-05-01T08:23:41Z

There's a work in progress on in the icons figma:

Should be added to wordpress/icons and see if it holds in the context (it might end up being too stylish).

pablohoneyhoney · 2020-05-01T13:55:03Z

This likely needs different scales for different contexts

cc/ @jasmussen @jameskoster

epiqueras · 2020-05-01T18:50:44Z

I used the SVG @MichaelArestad posted on the issue.

Can you post the new SVG here and I'll add it to the icons package and pull it from there?

MichaelArestad · 2020-05-01T20:42:22Z

@epiqueras This should work for now:

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 15.25V4.33282L8 0.832823L15.25 4.33282V15.25H0.75Z" stroke="black" stroke-width="1.5"/>
<rect x="6" y="9" width="4" height="7" fill="black"/>
</svg>

MichaelArestad · 2020-05-01T20:43:04Z

The icon should have the same proportions and 24x24 grid of the other icons. I think it'd made sense for it to be aligned with the little circle-dot on the right (Home, then dot).

That sounds good to me.

epiqueras · 2020-05-02T00:54:13Z

I updated it but I think 24x24 is too big here.

jasmussen · 2020-05-02T03:15:48Z

Yeah the icon should be 24x24 like the other icons in the g2 figma file, and icon component. But that includes clearance around the icon. I'll provide an svg when I'm able.

jasmussen · 2020-05-02T09:34:19Z

Try this one:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4L4 7.9V20h16V7.9L12 4zm6.5 14.5H14V13h-4v5.5H5.5V8.8L12 5.7l6.5 3.1v9.7z"/></svg>

epiqueras · 2020-05-02T14:06:01Z

Better

mtias · 2020-05-03T19:17:12Z

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;


Is this meant to grab the template that is assigned as the home every time?

I'm confused then regarding when templateId and homeTemplateId would be different.

When the client changes templateId to switch templates.

jameskoster · 2020-05-04T09:37:25Z

Home icon merged and available here.

epiqueras · 2020-05-04T17:57:08Z

Rebased

jasmussen · 2020-05-04T18:03:14Z

I hate to frustrate, but just wanted to clarify, this is the latest version of the icon:

#22004 (comment)

A little confusion in the icon files led to the double icon, sorry about that.

So you can update the file that Jay links to when the svg code I posted.

epiqueras · 2020-05-04T18:27:44Z

Done

MichaelArestad · 2020-05-04T19:12:39Z

packages/edit-site/src/components/template-switcher/style.scss

+.edit-site-template-switcher__label-home-icon {
+	width: 24px;
+	height: 24px;
+	position: absolute;


Definitely not a blocker, but you could use something like this demo to make it a little more flexible for adding in things like the dot icon.

Yes, we should probably switch to this soon. I thought I had done it for #21202 but it looks like I never did it.

MichaelArestad · 2020-05-04T19:14:22Z

Visually, looks pretty good. I left a suggestion on the CSS used. Not a blocker, though. Nice work. Thanks.

epiqueras · 2020-05-04T19:42:00Z

Thanks, can I get approval?

mtias · 2020-05-04T19:44:44Z

@MichaelArestad we should also start looking at ways in which to surface the homepage setting (blog or static page or front-page template) and switching between them.

epiqueras added [Feature] Full Site Editing [Type] Feature New feature to highlight in changelogs. labels Apr 30, 2020

epiqueras requested a review from TimothyBJacobs as a code owner April 30, 2020 18:49

epiqueras self-assigned this Apr 30, 2020

youknowriad mentioned this pull request Apr 30, 2020

Full Site Editing Breakdown #20791

Closed

53 tasks

epiqueras mentioned this pull request Apr 30, 2020

Site Editing: home page indicator #20788

Closed

mtias reviewed May 3, 2020

View reviewed changes

Edit Site: Add home icon to template switcher.

b93715b

epiqueras force-pushed the add/home-icon-to-template-switcher branch from 2f72e70 to 81cca04 Compare May 4, 2020 17:56

Icons: Add new home icon.

631bac2

epiqueras force-pushed the add/home-icon-to-template-switcher branch from 81cca04 to 631bac2 Compare May 4, 2020 17:57

Icons: Update home icon.

ef4e233

MichaelArestad reviewed May 4, 2020

View reviewed changes

mtias approved these changes May 4, 2020

View reviewed changes

epiqueras merged commit b73bb6d into master May 4, 2020

epiqueras deleted the add/home-icon-to-template-switcher branch May 4, 2020 20:42

github-actions bot added this to the Gutenberg 8.1 milestone May 4, 2020

ellatrix mentioned this pull request Jun 16, 2020

WP 5.5: merge all PHP changes #23210

Closed

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

epiqueras commented Apr 30, 2020

github-actions bot commented Apr 30, 2020 •

edited

Loading

mtias commented May 1, 2020

mtias commented May 1, 2020

pablohoneyhoney commented May 1, 2020 •

edited

Loading

epiqueras commented May 1, 2020

MichaelArestad commented May 1, 2020

MichaelArestad commented May 1, 2020

epiqueras commented May 2, 2020

jasmussen commented May 2, 2020

jasmussen commented May 2, 2020

epiqueras commented May 2, 2020

mtias May 3, 2020

epiqueras May 3, 2020

mtias May 4, 2020

epiqueras May 4, 2020

jameskoster commented May 4, 2020

epiqueras commented May 4, 2020

jasmussen commented May 4, 2020 •

edited

Loading

epiqueras commented May 4, 2020

MichaelArestad May 4, 2020

mtias May 4, 2020

MichaelArestad commented May 4, 2020

epiqueras commented May 4, 2020

mtias commented May 4, 2020

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

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

Conversation

epiqueras commented Apr 30, 2020

Description

How has this been tested?

Screenshots

Types of Changes

Checklist:

github-actions bot commented Apr 30, 2020 • edited Loading

mtias commented May 1, 2020

mtias commented May 1, 2020

pablohoneyhoney commented May 1, 2020 • edited Loading

epiqueras commented May 1, 2020

MichaelArestad commented May 1, 2020

MichaelArestad commented May 1, 2020

epiqueras commented May 2, 2020

jasmussen commented May 2, 2020

jasmussen commented May 2, 2020

epiqueras commented May 2, 2020

mtias May 3, 2020

Choose a reason for hiding this comment

epiqueras May 3, 2020

Choose a reason for hiding this comment

mtias May 4, 2020

Choose a reason for hiding this comment

epiqueras May 4, 2020

Choose a reason for hiding this comment

jameskoster commented May 4, 2020

epiqueras commented May 4, 2020

jasmussen commented May 4, 2020 • edited Loading

epiqueras commented May 4, 2020

MichaelArestad May 4, 2020

Choose a reason for hiding this comment

mtias May 4, 2020

Choose a reason for hiding this comment

MichaelArestad commented May 4, 2020

epiqueras commented May 4, 2020

mtias commented May 4, 2020

github-actions bot commented Apr 30, 2020 •

edited

Loading

pablohoneyhoney commented May 1, 2020 •

edited

Loading

jasmussen commented May 4, 2020 •

edited

Loading