[Site Editor] Templates list screen overview

[kevin940726]

Based on the design in #29630 (comment), derived from TODOs in #36379. Here are the list of tasks we should do for the new Templates list screen.

👀 Needs design
🔺 Blocker for 5.9 Beta
⚠️ Blocker for 5.9 Release

🔨   Features

• "Add New" button hasn't been implemented (Implement "Add New" for templates list in Site Editor #36592) (🔺 )
  • Block Template creation is using empty content instead of the appropiate fallback #36648
  • Error handling and loading state
• "Actions" button for each template item
  • Implement "Clear customizations" (Add 'Clear customizations' button to template list page #36802)
  • Implement "Delete" for custom templates
  • Optimistic updates for "Remove template"
  • Snackbars for successful/failed actions (Add success and error snackbars to the templates list page #36808)
  • Ability to undo an action
• Show recently edited user in "Added by" column (designs here - [Site Editor] Templates list screen overview #36597 (comment), PR here - Show theme, plugin or author in Added By column with appropriate icon or avatar #36763)
  • Show plugin name when template is added by a plugin
  • Indicate when a template has been customized
• Remove the "Styles" link in the navigation panel (Remove the Styles link in Site Editor #36637) (⚠️ )
• Site Editor: Set the <title> on the list page to be same as the CPT name #36805
• Provide a way to edit the description for custom templates ([Site Editor] Templates and Template Parts screens - Provide a way for users to add a description to custom templates. #36664)
• Provide a way to edit the title of custom templates (Site Editor: Provide a way to edit custom template names #36773)
• Add client side routing for Site Editor #36488

💅   Styles

• The screen is not responsive (⚠️ , 👀 )
  • Collapse the nav panel on smaller screens (Update navigation sidebar responsiveness #36638)
• Make the template row clickable and add hover styles (👀 )
• Consider adding icons to menu items (https://cloudup.com/chpQIrvKePJ, Add icons to navigation sidebar items #36893)

🐛   Bugs

• Show all templates and template parts on the site editor list screens #36761 (⚠️ )
• Highlight "Site" in the navigation panel #36762 (⚠️)
• Update link href (Add templates list page for site editor #36379 (comment)) (⚠️ )
• Site Editor: Template part is missing after exiting focus mode #36937 (⚠️ )
• Site Editor: "Site" menu item is active when editing a template #36821 (⚠️ )
• Handle unsaved changes warning when leaving the editor (Add client side routing for Site Editor #36488 (comment))

🧹   Enhancements and Maintenance

• Site Editor: Avoid client side redirection in initial load #36873 (@Mamaduka is working on this)
  • If it can't be done before 5.9, try improving the code quality of existing client side redirection (Add client side routing for Site Editor #36488 (comment))
• Some dead code hasn't been deleted yet
• Highlight templates that are used for specific pages (IE home page, posts page, privacy page). This should be extensible (Mark templates that are used for key pages #36612).
• Consider replacing "Template Parts" menu with area-based alternatives (Replace "Template Parts" list with area-based alternative #36613)

Accessibility ⚠️

• Use table layout in templates list screen #36707
• Fix site editor region navigation #36709
• Consider adding aria-current to the active link in the navigation sidebar (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current).
• Move focus to the navigation toggle button or a custom "skip to content" link when navigating
  • Editor: when Toggle navigation receives state false, focus #37265
  • Reset focus after route navigation in Site Editor #37314

Feel free to assign yourself to any of the above tasks if no one is working on them. Also any helps or discussions are healthy too either in the comments below or creating a separate issue referencing this.

[jameskoster]

The screen is not responsive (⚠️ , 👀 )

Overall the screen is responsive as demonstrated in #36379 (comment). However it would be nice if the nav drawer automatically closed itself when you resize the window from desktop orientation down to mobile.

[jameskoster]

"Styles" link in the navigation sidebar (👀 )
Making it a toggle button seems weird in a nav. What should we do about it?

Personally I am in favor of removing the styles link for now. I agree it feels very strange to actually use as implemented. We already highlight Styles in the welcome guide:

And will no doubt surface it in any adjustments we make to the wp-admin welcome banner. Not to mention the 5.9 about page...

[kevin940726]

Personally I am in favor of removing the styles link for now. I agree it feels very strange to actually use as implemented.

I agree. Let's remove this from the list?

[talldan]

Show recently edited user in "Added by" column

@jameskoster I had a look at adding this column for the author or user that last edited, but it looks template parts and templates don't support the author field. We will have to make some changes to the REST API code already shipped to WordPress core to support this.

A lot of templates (and I think template parts) are also shipped with the theme as files, so won't have an author. Do you think it's worth continuing to pursue adding this column?

Here's the data we get for a template from the REST API:

For template parts we might consider adding an 'Area' column, but they also generally don't seem to have a description:

Not really a lot to work with.

[talldan]

Overall the screen is responsive as demonstrated in #36379 (comment). However it would be nice if the nav drawer automatically closed itself when you resize the window from desktop orientation down to mobile.

#36638 tackles this.

[jameskoster]

Thanks for looking in to that @talldan. The basic principle of the "added by" column was to:

1. Clarify the original source of the template, whether that be

• A theme.
• A plugin.
• A custom template created by a user at the site.

2. In the case of templates supplied by themes and plugins, inform the user whether those templates have been customised or not.

FWIW, here's the original design:

Would I be correct in assuming we can tell whether the template is custom, or has been customised, by the existence of that template in the db? If we cannot tell the actual author, perhaps we can just display something generic?

Seems we can use the theme in the API data for theme supplied templates. I'm not sure about plugins, but I know WooCommerce are working on adding block templates, so perhaps someone can chime in there cc @nerrad @Aljullu.

[talldan]

Would I be correct in assuming we can tell whether the template is custom, or has been customised, by the existence of that template in the db?

Yeah, I think we can use the same logic that determines whether the clear customizations UI is shown, so that should be possible 👍

I'll do some more exploration into adding author support tomorrow (edit: I mean Monday 😄 ).

Thanks for the other clarifications, that helps a lot.

[Mamaduka]

Yes, we can use WP_Block_Template::$source for this column. The plugins can change this value when adding templates.

gutenberg/lib/full-site-editing/class-wp-block-template.php

Lines 63 to 68 in d718cb0

	/**
	* Source of the content. `theme` and `custom` is used for now.
	*
	* @var string
	*/
	public $source = 'theme';

The author support is something we can add after 5.9. I think most of the custom templates will have a single author.

[paaljoachim]

I added feedback to the now merged PR: #36379 (comment)

Here are some of the things I noticed while giving feedback. (Let me know if this should be added else where.)
The WP black menu area is too wide and can be thinner. Site title can use truncation if needed.
< Dashboard font size is 13px and should be 14px the same as the Editor menu items.
Clicking Site or Styles should not close the left WP menu (plus it is also very slow to close). Clicking W is a fast way to open and close. W should have a shortcut.
Templates and Template Parts could contain a column for the date a specific template was created.
3 dot menu can contain a duplicate option.

[tjcafferkey]

I'm not sure about plugins, but I know WooCommerce are working on adding block templates, so perhaps someone can chime in there

@jameskoster yeah, we check the db for any templates that have been customized based on the template files we've provided. We then set the property custom as a means to identify if the template has indeed been customized.

I hope this has answered your question. Let me know if not 🙂

[jameskoster]

@tjcafferkey I was more curious about how y'all supply the templates, and whether how the API indicates that those templates were added by WooCommerce in any way?

@paaljoachim I think most of those warrant separate issues.

[tjcafferkey]

I was more curious about how y'all supply the templates, and whether how the API indicates that those templates were added by WooCommerce in any way?

@jameskoster We use the get_block_templates filter to add the templates from WooCommerce. We also indicate its from WooCommerce by setting woocommerce as the theme and source value here and here. Hope this helps.

[paaljoachim]

I made the following issues:

[Site Editor] WP menu area - make the screen thinner and add truncation to site title.
#36657

[Site Editor] WP Menu area - Adjust < Dashboard text to 14px font.
#36658

[Site Editor] WP left menu area - Do not close menu area when selecting Site or Styles
#36659

[Site Editor] Adding a shortcut to W icon to open and close the WP left menu area.
#36660

[Site Editor] Templates and Template Parts screens - add Published date.
NEW title and focus: Templates and Template Parts screens - Provide a way for users to add a description to custom templates.
#36664

[Site Editor] Templates list screen - Add duplicate to 3 dot menu.
#36665

EDIT 27 Nov - Adding in the following issue:
Site Editor: Add New - Custom/General template
#36860

[talldan]

@jameskoster We use the get_block_templates filter to add the templates from WooCommerce. We also indicate its from WooCommerce by setting woocommerce as the theme and source value here and here. Hope this helps.

Hmm, it's a shame we didn't opt for something like source: 'plugin' to match the way source: 'theme' works. The current way makes it hard to detect whether a plugin is the source—the only option seems to be to check that the source is different to 'custom' or 'theme'. If other sources are added later this becomes brittle code.

Is the way this is defined likely to be consistent across plugins?

[kevin940726]

@jameskoster I noticed that there's currently no way to edit a template part's name, neither in the site editor nor in the list page. Is this feature planned?

In addition, I think we also need a way to delete a template/part in the editor.

[talldan]

@kevin940726 It is possible to edit the name/title in the 'Advanced' section of the block sidebar:

[kevin940726]

Oh I see! It's still counter-intuitive though and we should probably support that in focus mode.

[tjcafferkey]

Hmm, it's a shame we didn't opt for something like source: 'plugin' to match the way source: 'theme' works. The current way makes it hard to detect whether a plugin is the source

@talldan I am going to look at seeing if I can make a change to update this so the source is plugin for our WooCommerce implementation, it makes much more sense.

[talldan]

Thanks @tjcafferkey, appreciate that. BTW, I have a PR as well that tries to implement showing the plugin name - #36763, I'll update that.

I'll have a think about how we can make this work consistently across plugins too, this might need some documentation.

[tjcafferkey]

I'll have a think about how we can make this work consistently across plugins too, this might need some documentation.

Yeah, that would be great @talldan. As it might be confusing, because at the moment we have the source as plugin and then the theme as woocommerce when the templates are not coming from a theme. If you'd like me to read over the documentation when you have something, I'd be more than happy to do so.

I've also opened a PR for the change described above

[jameskoster]

we should probably support that in focus mode.

In addition to renaming, we also need a way to add descriptions (#36664). It may make sense to tackle these items together as they are closely related.

[Mamaduka]

@kevin940726 I started working on server-side page context/redirection, and I think it might be better to push this enhancement post 5.9.

I will create a separate issue for tracking.

[alexstine]

@kevin940726 My PR ##37265 should take care of this hopefully.

"Move focus to the navigation toggle button or a custom "skip to content" link when navigating"

[noisysocks]

I believe we can close this now that WP 5.9 is wrapped up. Nice work again, everyone!