Site Editor: Navigation templates #25739

david-szabo97 · 2020-09-30T12:55:59Z

Description

A couple of things done in this PR to match the draft #23939 (comment))

Root menu is now Themes
Deleted Current Theme group
Deleted Current Template group
Templates are now in a separate menu (TemplatesMenu)
Template Parts are now in a separate menu (TemplatePartsMenu)
Page templates are now in a separate menu (TemplatesPagesMenu)
Post templates are now in a separate menu (TemplatesPostsMenu)
Moved preview panel to the root and used slot-fill (had to do this because of overflow:hidden on the Navigation component)

How has this been tested?

yarn wp-env start
Enable FSE
Open Site Editor
Click site logo to toggle the navigation sidebar

Screenshots

Types of changes

New feature

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-09-30T13:04:11Z

Size Change: +168 B (0%)

Total Size: 1.18 MB

Filename	Size	Change
`build/annotations/index.js`	3.52 kB	-4 B (0%)
`build/blob/index.js`	668 B	+48 B (7%)	🔍
`build/block-directory/index.js`	8.55 kB	-57 B (0%)
`build/block-editor/index.js`	129 kB	-121 B (0%)
`build/block-editor/style-rtl.css`	10.9 kB	-16 B (0%)
`build/block-editor/style.css`	10.9 kB	-16 B (0%)
`build/block-library/editor-rtl.css`	8.65 kB	+42 B (0%)
`build/block-library/editor.css`	8.65 kB	+43 B (0%)
`build/block-library/index.js`	135 kB	+52 B (0%)
`build/block-library/style-rtl.css`	7.66 kB	+3 B (0%)
`build/block-library/style.css`	7.65 kB	+3 B (0%)
`build/block-serialization-default-parser/index.js`	1.78 kB	+1 B
`build/blocks/index.js`	47.5 kB	-3 B (0%)
`build/components/index.js`	169 kB	+139 B (0%)
`build/components/style-rtl.css`	15.3 kB	-63 B (0%)
`build/components/style.css`	15.3 kB	-64 B (0%)
`build/compose/index.js`	9.42 kB	+2 B (0%)
`build/core-data/index.js`	12 kB	-2 B (0%)
`build/data-controls/index.js`	685 B	-585 B (85%)	🏆
`build/data/index.js`	8.6 kB	+189 B (2%)
`build/edit-navigation/index.js`	10.7 kB	-2 B (0%)
`build/edit-post/index.js`	306 kB	+251 B (0%)
`build/edit-post/style-rtl.css`	6.29 kB	+37 B (0%)
`build/edit-post/style.css`	6.27 kB	+38 B (0%)
`build/edit-site/index.js`	20.5 kB	+82 B (0%)
`build/edit-site/style-rtl.css`	3.71 kB	-67 B (1%)
`build/edit-site/style.css`	3.72 kB	-64 B (1%)
`build/edit-widgets/index.js`	21.3 kB	+265 B (1%)
`build/editor/index.js`	45.5 kB	+9 B (0%)
`build/editor/style-rtl.css`	3.85 kB	+17 B (0%)
`build/editor/style.css`	3.84 kB	+20 B (0%)
`build/element/index.js`	4.44 kB	+1 B
`build/escape-html/index.js`	734 B	+1 B
`build/format-library/index.js`	7.49 kB	-3 B (0%)
`build/is-shallow-equal/index.js`	710 B	+1 B
`build/keyboard-shortcuts/index.js`	2.39 kB	-4 B (0%)
`build/media-utils/index.js`	5.12 kB	-1 B
`build/nux/index.js`	3.27 kB	-1 B
`build/plugins/index.js`	2.44 kB	-1 B
`build/priority-queue/index.js`	790 B	+1 B
`build/rich-text/index.js`	13 kB	-3 B (0%)
`build/server-side-render/index.js`	2.6 kB	-2 B (0%)
`build/shortcode/index.js`	1.7 kB	+1 B
`build/url/index.js`	4.06 kB	+2 B (0%)
`build/warning/index.js`	1.13 kB	-1 B

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/api-fetch/index.js`	3.35 kB	0 B
`build/autop/index.js`	2.72 kB	0 B
`build/block-directory/style-rtl.css`	943 B	0 B
`build/block-directory/style.css`	942 B	0 B
`build/block-library/theme-rtl.css`	741 B	0 B
`build/block-library/theme.css`	741 B	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/date/index.js`	31.9 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	4.42 kB	0 B
`build/edit-navigation/style-rtl.css`	868 B	0 B
`build/edit-navigation/style.css`	871 B	0 B
`build/edit-widgets/style-rtl.css`	3 kB	0 B
`build/edit-widgets/style.css`	3 kB	0 B
`build/editor/editor-styles-rtl.css`	492 B	0 B
`build/editor/editor-styles.css`	493 B	0 B
`build/format-library/style-rtl.css`	547 B	0 B
`build/format-library/style.css`	548 B	0 B
`build/hooks/index.js`	1.74 kB	0 B
`build/html-entities/index.js`	621 B	0 B
`build/i18n/index.js`	3.54 kB	0 B
`build/keycodes/index.js`	1.85 kB	0 B
`build/list-reusable-blocks/index.js`	3.02 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	476 B	0 B
`build/list-reusable-blocks/style.css`	476 B	0 B
`build/notices/index.js`	1.69 kB	0 B
`build/nux/style-rtl.css`	671 B	0 B
`build/nux/style.css`	668 B	0 B
`build/primitives/index.js`	1.34 kB	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/token-list/index.js`	1.24 kB	0 B
`build/viewport/index.js`	1.74 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

david-szabo97 · 2020-09-30T14:31:22Z

Looking forward ideas about how we should handle empty menus. For example Pages item should navigate to TemplatesPagesMenu but it's empty so we skip rendering. I wonder what would be the best way to hide the Pages item when the menu is empty. Maybe we should implement something in the Navigation component?

~~I'd love to see a prop like hideIfTargetMenuEmpty or something like that~~

~~#25315 already implements a similar logic for groups. It would be a bit more difficult for menus though, since we need to think about nested menus too 🤔~~

EDIT: Probably this wouldn't work in practice, since we might have other kind of items in the menu. So probably the best way is to create a context and store what should be visible. And nested menus.....

vindl · 2020-09-30T16:07:49Z

Extracted Current Theme group as a separate component (CurrentTheme ; we need to come up with a better name)

I don't think we need to show this in the sidebar anymore. At least I haven't seen it in any of latest design iterations. It might make more sense in Document Settings dropdown maybe.

Also I don't think we need a Current Template section. That should be obvious from active item and title in the header?

vindl · 2020-09-30T16:09:48Z

Looking forward ideas about how we should handle empty menus. For example Pages item should navigate to TemplatesPagesMenu but it's empty so we skip rendering. I wonder what would be the best way to hide the Pages item when the menu is empty. Maybe we should implement something in the Navigation component?

It's probably fine to leave it as a placeholder for now until we add more items for it. And yes, this should be a separate issue for navigation component and not handled in this PR.

david-szabo97 · 2020-10-01T13:09:47Z

Also I don't think we need a Current Template section. That should be obvious from active item and title in the header?

I left it there so we can overwrite templates. I think it will be replaced by the + button later 🤔

vindl · 2020-10-01T15:10:22Z

I left it there so we can overwrite templates. I think it will be replaced by the + button later 🤔

In that I case I think it's better to introduce it when we add the +/overwrite functions then?

vindl · 2020-10-01T17:59:36Z

cc @ockham since you worked on template resolution before :)

packages/edit-site/src/components/left-sidebar/navigation-panel/index.js

packages/edit-site/src/components/left-sidebar/navigation-panel/constants.js

packages/edit-site/src/components/left-sidebar/navigation-panel/template-navigation-items.js

Copons

This works nice, thanks @david-szabo97!

I'll open two follow up issues shortly:

Audit and improve the performances of the new auto-draft creation.
Discuss with design how to handle template overwrite/revert.

vindl

Nice work @david-szabo97! ✨

vindl · 2020-10-06T15:08:21Z

lib/templates.php

@@ -177,6 +202,13 @@ function filter_rest_wp_template_collection_params( $query_params ) {
 * @return array Filtered $args.
 */
 function filter_rest_wp_template_query( $args, $request ) {
+	// Create auto-drafts for each theme template files.
+	$block_template_files = gutenberg_get_template_paths();


As already mentioned, accessing these files on each request is going to have a negative impact on performance. We can probably store this info once on theme activation and we'll also need it after theme updates.

vindl · 2020-10-06T15:10:44Z

packages/edit-site/src/components/left-sidebar/navigation-panel/constants.js

+	// General
+	'front-page': {
+		title: 'Front page',
+		description: '',


We could've added "Display the contents of your Front Page" here, or something along the similar lines.

@david-szabo97 @vindl — Let's not forget i18n. Constants files like this should be i18n-ready from the start, otherwise getting everything ready for a testable Site Editor around WP 5.6 will be much more difficult.

@mcsf My fault, I should have caught this in review!
I'll spin up a PR ASAP.

vindl · 2020-10-06T15:16:49Z

packages/edit-site/src/components/left-sidebar/navigation-panel/menus/templates-posts.js

+	);
+
+	return (
+		<NavigationMenu


We could've delayed adding this until we had actual content for it.

## Description Discovered while working on WordPress/wordpress-develop#1267. First introduced in `lib/template-loader.php` in #25739. No longer used per #26650 (where its callsites started using [`_gutenberg_get_template_paths`](https://github.com/WordPress/gutenberg/pull/26650/files#diff-f5b03c388f81fea69d0ababd289047e20deaad43084ad6e00ec14a5613e25136R60) in `lib/templates-sync.php` -- now in [`lib/full-site-editing/block-templates.php`](https://github.com/WordPress/gutenberg/blob/d7714aa8adf19277da1f0ea83b20be1cf234e50c/lib/full-site-editing/block-templates.php#L17)).

david-szabo97 added [Feature] Full Site Editing [Feature] Navigation Component A navigational waterfall component for hierarchy of items. [Status] In Progress Tracking issues with work in progress labels Sep 30, 2020

david-szabo97 added 8 commits September 30, 2020 17:01

Extract everything we can and refactor

da18be9

Autodrafting for theme templates

186b244

Remove unneccessary code

6c720c2

Extend findTemplate

dd60398

Rename args

790ac20

Move optional parameters to the end

5921992

Fix old name

4036921

Show all template parts

5b76047

david-szabo97 force-pushed the add/navigation-site-editor-templates branch from ac95bcf to 5b76047 Compare September 30, 2020 15:01

vindl requested a review from ockham October 1, 2020 15:10

vindl assigned david-szabo97 Oct 1, 2020

david-szabo97 added 8 commits October 1, 2020 20:33

Remove current theme and preview

9e74cc1

Remove unused styles

4195108

Remove current template group

8cb3123

Cleanup component and styles

b9b2c02

Remove template switcher folder

3d6a135

Use original NavigationItem

637354a

Remove NavigationItemWithIcon

f34fc16

Remove unused styles

af092c0

david-szabo97 mentioned this pull request Oct 1, 2020

Navigation Component: Hide navigation item if target menu is empty #25746

Merged

6 tasks

david-szabo97 added 2 commits October 6, 2020 11:48

Format PHP

2cc0c62

Update e2e tests

a369fd7

david-szabo97 requested review from ajitbohra, nerrad, ntwb and talldan as code owners October 6, 2020 11:52

Copons reviewed Oct 6, 2020

View reviewed changes

david-szabo97 added 7 commits October 6, 2020 14:27

Use entityType

34d5078

Use title and excerpt if available

83b3597

Format PHP

d74ae61

Rename constants

51c9075

Standarize activate prop

abfcfa5

Fix title

41c0bd3

Add all templates menu

6a4d721

Copons approved these changes Oct 6, 2020

View reviewed changes

david-szabo97 merged commit aae9404 into master Oct 6, 2020

david-szabo97 deleted the add/navigation-site-editor-templates branch October 6, 2020 14:54

github-actions bot added this to the Gutenberg 9.2 milestone Oct 6, 2020

vindl reviewed Oct 6, 2020

View reviewed changes

This was referenced Oct 6, 2020

Site Editor: Templates Reconciliation Performance #25868

Closed

Site Editor: Overwrite and Revert Templates #25872

Closed

Site Editor: Add missing localization to the templates sidebar #25897

Merged

noahtallen mentioned this pull request Oct 7, 2020

Create system for names and descriptions of FSE templates #25755

Open

This was referenced Feb 23, 2021

Template Navigation: Improve template and content preview performance #29276

Open

Template Navigation: previews are rendered but not shown on smaller screens #29278

Closed

ockham mentioned this pull request May 20, 2021

Templates: Remove now-obsolete gutenberg_get_template_paths() #32066

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Site Editor: Navigation templates #25739

Site Editor: Navigation templates #25739

david-szabo97 commented Sep 30, 2020 •

edited

Loading

github-actions bot commented Sep 30, 2020 •

edited

Loading

david-szabo97 commented Sep 30, 2020 •

edited

Loading

vindl commented Sep 30, 2020

vindl commented Sep 30, 2020

david-szabo97 commented Oct 1, 2020

vindl commented Oct 1, 2020

vindl commented Oct 1, 2020

Copons left a comment

vindl left a comment

vindl Oct 6, 2020

vindl Oct 6, 2020

mcsf Oct 7, 2020

Copons Oct 7, 2020

vindl Oct 6, 2020

Site Editor: Navigation templates #25739

Site Editor: Navigation templates #25739

Conversation

david-szabo97 commented Sep 30, 2020 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

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

david-szabo97 commented Sep 30, 2020 • edited Loading

vindl commented Sep 30, 2020

vindl commented Sep 30, 2020

david-szabo97 commented Oct 1, 2020

vindl commented Oct 1, 2020

vindl commented Oct 1, 2020

Copons left a comment

Choose a reason for hiding this comment

vindl left a comment

Choose a reason for hiding this comment

vindl Oct 6, 2020

Choose a reason for hiding this comment

vindl Oct 6, 2020

Choose a reason for hiding this comment

mcsf Oct 7, 2020

Choose a reason for hiding this comment

Copons Oct 7, 2020

Choose a reason for hiding this comment

vindl Oct 6, 2020

Choose a reason for hiding this comment

david-szabo97 commented Sep 30, 2020 •

edited

Loading

github-actions bot commented Sep 30, 2020 •

edited

Loading

david-szabo97 commented Sep 30, 2020 •

edited

Loading