Advancing site editor index views

[SaxonF]

Related #55083 #53322

What problem does this address?

As part of the admin track of work we want to start adopting some of the new UX paradigms within the site editor index views.

layout-motion.mp4

Pages and templates within the site editor currently drill-down the navigation sidebar showing a list of records, but what we want to work towards is always using the "content frame" for lists, including the "side by side" layout type which lets you quickly preview posts before editing. This also solves the weird "manage pages" and "manage templates" links that currently exist. The goal of this work is bring those "manage" pages forward so they are visible when visiting /pages or /templates, much like /patterns.

Tasks

Replace current pages with manage pages

Replace the existing pages view that shows pages in sidebar and update with the "manage pages" view. For this piece of work we can keep the "custom views" as experimental.

Old

New

Criteria:

• Clicking "pages" in top level navigation opens pages data views with "side by side" layout type enabled by default. Site Editor: update index view for pages #59950
• custom views for pages include default views [All, Published, Draft, Scheduled, Utility, Trash]
• Pages data view: Provide access to edit posts page (when set as homepage), plus utility 'pages' #60772
• When in side by side layout, clicking an item previews in the frame on right.
• Clicking the frame expands into edit mode
• Each item in side by side has an "edit" icon that expands frame into edit mode
• Each item in side by side has an ellipsis icon that triggers page actions [Delete, rename, edit]
• When in table view, clicking a page title should open editor
• When a block theme is active, provide a link to edit the page template from the pages list #41716
• Mobile: show the content frame. Pages: display content frame in mobile when canvas is not edit #60409
• Pages: "Trash" view should default to table layout
• Pages data view: mark homepage and posts page #57763

Replace current templates with manage pages

Much like pages, we want to do the same for templates.

Old

New

Criteria:

• Clicking "templates" in top level navigation opens templates data views with "grid" layout type enabled by default. Site Editor: update index page for templates #59792
• Use grid layout by default with loading indicator. Index view for Templates & Parts: use grid layout as default #60069
• Clicking template name in table view opens editor
• Custom views for templates include default views [All, pages, posts, utility, custom]
• When in side by side layout, clicking an item previews in the frame on right.
• Clicking the frame expands into edit mode
• Each item in side by side has an "edit" icon that expands frame into edit mode
• Each item in side by side has an ellipsis icon that triggers templates actions

Updates patterns to remove template parts management

The current patterns page makes use of the new data views but we still have a "manage template parts" link. We should aim to remove that link and bring the missing functionality over to the patterns view.

Criteria:

• Clicking patterns in top level opens current patterns page
• The template parts group that currently sits below pattern categories should be moved to the top Patterns: remove "Template parts" sidebar group #60359
• "Manage template parts" link should go away Patterns: remove "Manage all parts" page & link #60689
  • Template parts: set backpath to patterns page #60667
  • Patterns page: add edit & view revision actions to parts #60659
  • Template parts in patterns page: add author field #60372
  • Patterns: add a "All Template Parts" section #60775
• "Manage all my patterns" should go away Patterns: remove manage all of my patterns link #60345
• "Table" layout type should be added to patterns data views Patterns page: enable table layout #60337
• Clicking a pattern in table view should open editor Patterns page: enable table layout #60337
• Consolidate Patterns & Template Parts categories (comment):
  • "All patterns" view should include template parts (probably the most challenging part).
  • The separate menus should ideally converge (mockup).
  • We need to settle on a more intuitive name for the "General" category.
  • Align or differentiate the "Header" + "Headers" categories.
  • Update the creation flow (mockup).

[youknowriad]

Thanks for opening this issue, these are some nice flows.

Left sidebar remains at the top level with "templates" selected UNLESS "custom views" experiment is enabled

I think this one is going to be challenging to pull off, I'd navigate to "custom views" (or default views if the experiment is disabled) on the first iteration. We'd need stronger routing to be able to stay in the top view in the sidebar while navigating to templates.

"Manage template parts" link should go away

This item is also to be addressed with care, currently the patterns list view doesn't show "template parts", so it might mean "merging them", adding fields to filter one or the other... It might require its own issue for clarity.

[oandregal]

Index for templates #59792

@SaxonF the screenshot for templates uses the table layout, though the texts mentions grid layout. Which one should be the default? The PR uses the existing (table).

[oandregal]

#59858 makes the list layout stable, so it becomes available for Pages, Templates, and Parts without the experiment enabled.

[oandregal]

Updates index for pages #59950

[oandregal]

#60069 explores using grid layout for templates.

[annezazu]

Adding the tracking label to this as it tracks work across the experience and is part of the broader Overview issue of Data Views and Admin Redesign.

[oandregal]

#60337 enables table layout for patterns.

[oandregal]

#60345 removes "Manage all of my patterns" link.

[oandregal]

#60359 looks at template parts in patterns (needs feedback on target design).

[oandregal]

#60409 to display the content frame for Pages in mobile.

[oandregal]

#60372 adds the author field & filter to the template parts in the Patterns page.

[getdave]

I'm wondering if any of this work should/could be extended to the Navigation (Menus) section?

In the past, we've received feedback that users would like to be able to edit (including ability to create) menus within the sidebar but I'm not sure that (especially editing) fits with the new UX paradigm outlined here.

Questions:

1. Do we see Navigation making use of these new data views?
2. Do we think Navigation Menus should be partially editable from these views, and if so how would that work?

Update: I noticed in #53322 there is a UI (see Example of the "drill down" below) which allows for drill down into individual entities from the "List" layout. This drill down could expose the UI for editing the Navigation Menu.

Example of the "drill down"

Also I notice the term "Navigation" is being used a lot to described moving through "stacks" in the UI. That's fine, but just noting we may need to be careful to distinguish menus by referring to them as "Navigation Menus".

[oandregal]

#60659 adds edit and viewRevision actions to parts in Patterns page.

[oandregal]

#60667 sets the backPath for Template Parts to the Patterns page.

[oandregal]

#60689 removes the "Manage all parts" link, page, and code.

[oandregal]

#60775 adds a "All template parts" section in the Patterns sidebar. It's a pre-requisite for #60689.

[oandregal]

There's been a lot of activity in the Patterns screen and we're almost there: #60689 removes the "Manage template parts" link and old code. After this one lands, I'm focusing a bit on the DataViews component again – improving the list layout with actions, etc.

[oandregal]

#60689 has landed and all listed tasks for Patterns are implemented. It's been a bit more involved than expected, and there's probably other things we need to polish now that this is ready.

Next, I'm planning to look at the task related to the DataViews component (list layout).

[SaxonF]

I wanted to highlight this issue because although it is not directly tied to data views it does become more important to solve after we've added the new 3 column layout. Once we close this work out, and the inspector, we should follow it up with responsive changes.

[oandregal]

Based on @jameskoster comment, I've added some more tasks for consolidating Patterns/Parts:

Consolidate Patterns & Template Parts categories (#60689 (comment)):

• "All patterns" view should include template parts (probably the most challenging part).
• The separate menus should ideally converge (Pattern / Template Part Unification - the technical challenges #57011 (comment)).
• We need to settle on a more intuitive name for the "General" category.
• Align or differentiate the "Header" + "Headers" categories.
• Update the creation flow (Pattern / Template Part Unification - the technical challenges #57011 (comment)).