[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.