DataViews component

[youknowriad]

In light of the discussions in #53233 and #50430 it became clear that we need to work new powerful views, that support several features:

• Rendering table layouts to show posts, pages, templates,.. CPTs.
• Rendering grid/gallery layouts to show the same entities (or other entities, think patterns, media) in a Grid format.
• Allow a high level of customizations: Filtering, searching, pagination, grouping, sorting, hiding and showing fields/columns...
• Allow actions and bulk actions.
• Potentially allow users to create and save custom views.
• Potentially allow users to edit data/content inline.
• Potentially allow users to create new fields inline.
• Offer strong extensibility APIs for plugins to be able to customize everything: adding new layouts, adding new fields, hiding/showing fields, adding actions and bulk actions.
• Potentially have the ability to offer the same kind of views for frontend (new connected blocks with filtering/customization capabilities)

We might not get to everything right away but I'm creating this issue to track and coordinate the initial steps (non exhaustive) for this ambitious undertaking.

Iterations

WordPress 6.5

Stable:

• "Side Editor > Pages > Manage all pages": table and grid layouts + default views in the sidebar.
• "Site Editor > Templates > Manage all templates": table and grid layouts + default views in the sidebar.
• "Site Editor > Patterns": grid layout.
• "Site Editor > Patterns > Manage all template parts" : table and grid layouts + default views in the sidebar.

Experimental (enable the "new admin views" experiment with the Gutenberg plugin active):

• "Side Editor > Pages > Manage all pages": has also list layout + custom views in the sidebar.
• "Site Editor > Templates > Manage all templates": has also list layout.
• "Site Editor > Patterns > Manage all template parts" : has also list layout.

Task list

DataViews component

• Table layout
  • Data views table layout: Enable fields to be visually combined with title #58012
  • Support defining actions per row. Table: Quick-actions #55096
  • Add support for reordering fields.
  • Implement a group by config.
  • DataViews: Visually hide the featured image column header #59129
• Grid layout
  • @youknowriad Implement a new layout (or view type): Grid/Gallery.
  • @oandregal Support hiding the "preview field" in the Grid view. DataViews: make mediaField not hidable #56643
  • Add support for reordering fields.
  • Implement a group by config.
• List layout
  • @oandregal Implement the "email list" like design for the side by side view. DataViews: iterate on list view #56746
  • @oandregal Filters: display them condensed, in a dropdown + reduce the width of the view frame. DataViews: make filters footprint more condensed #56983
  • @oandregal Clicking the Frame should go to edit view DataViews: improve preview #57116
  • @oandregal Trigger the page details. DataViews: make it the root for pages and add details #57578
  • Follow-up: open the details panel in the content frame (not the whole page). This is consumers' territory (Pages page). Prior work: DataViews: add details for pages in list layout #57523
  • Keyboard navigation: potentially use arrow up/down to navigate through the list. DataViews: navigate through list items via arrow keys #57895 [Data Views] Updating keyboard navigation in list layouts #59637
  • Field rendering: make sure contents are truncated to the space available. For example, title should not take more than one line.
  • Set proper labels using aria-labelledby (see) and do not use H3 for the primary field (see).
  • Preview should be a toggle-able field
  • Explore: add action items after the button to trigger the page details (see).
  • @oandregal Rename the "list" layout to "table" and "side-by-side" to "list" (side by side can still be side by side as a label but internal name should be list). Align data view icon usage #56602
  • Data views: Fix preview element display consistency  #57649
• General
  • @ntsekouras Extract the component to a dedicated package (a bundled package to begin with)
  • Add some e2e tests: sorting, filtering, visibility...
  • DataViews: fix search, filter, view actions row #55905
  • Data view: Bulk actions #55098
  • Data view: Search & Filtering #55100
• Field API
  • Refactor to allow the rendering to be generated using a fields description.
  • Defining the API for field and field types registration.
  • Explore inline field editing Data views: quick-editing #55101
  • Custom field creation, maybe ? Data view: Custom field creation #55102
• Actions
  • View revisions: include a count.
• DataViews: Implement Kanban layout #57024
• DataViews: Add summary table footer #57270
• DataViews: Group by field #57967
• Pagination
  • Polish the pagination and think about alternative ways to load incomplete data. Data views: Pagination #55095
  • Manual pagination can go backwards into negative page numbers. Data View: Pagination error on manual input #55937
  • Core Data: Retrieve the pagination totals in the getEntityRecords calls #55164

A11y

• DataViews Field rendering: Context should be not be assumed by fields when rendering #56320
• DataViews: Improve keyboard accessibility in table layout #56328
• DataViews: Improve keyboard accessibility in grid layout #56330
• [Data Views] Don't fully disable buttons that will change state based on user action #56396
• [Data Views] Table layout: add aria-sort to column headings as appropriate #56853
• Display a dash(-) when a field renders no value. Use the same treatment like template description that had a11y feedback(will be merged soon).
• [DataViews] When we hide fields from the columns in table view, there is a focus loss #57341
• Make sure we don't render nested buttons (or any nested interactive element) (see DataViews: iterate on list view #56746 (comment))
• DataViews: Backing template data view with session storage #57860

Bugs

• @andrewhayward Ensure filter inputs have accessible names. DataViews: add labels to "in-filters" #56001
• Handle better when/how we render the Placeholder in grid view. If the field needs to provide a component that uses hooks etc.., the actual field could render nothing, but the mediaField?.rendercall would return a React element. Currently we only check for null.
• Templates data view: Switching author sort order doesn't always work #57978
• Data views: Improve title display for untitled records #56154
• Data views: Table headers are no longer sticky #58977
• DataViews: Active page is not highlighted properly in list view. #60708
• DataViews: Routing related issues. #60709

Related

• Add post status as an entity to core-data and use it in the page list page. Add status entity and use it in "admin views" experiment #55050
• Store the total items and total pages per core-data query (extract from the headers) DataViews: Update the data views component to pass an view object #55154 (comment)
• Data views: Grid layout – make page, template, pattern preview a link #57691
• Data views table layout: Enable fields to be visually combined with title #58012
• Make 'Add' buttons consistent across data views, simplify labels #58198

Site Editor

Sidebar

• Consolidate the sidebar navigation: default views (pages, templates, parts use activeView as URL parameter) & custom URL parameters (patterns use categoryId/categoryType as URL parameters). Allow users to share their state with other users via URL.
• Implement custom views.
• DataViews option persistence #57669
• DataViews: Frame title should match current view #56199
• Data views: Show total count in menu item #57072

Pages

• Implement a new page in the site editor that serves as a starting point: Let's use a page list as an example. [Experimental]: First version of pages list in site editor #54966
• Make the list view the default for Pages DataViews: make it the root for pages and add details #57578
• "Add page" button DataViews: add new page button in Pages #57685
• Add "404", "Search" and "Front page" to sidebar DataViews: add footer to Pages sidebar #57690 and DataViews: add front page to pages page sidebar #57759
• Add UI to create and save views.
• Consider view visibility (personal views, shared views...).
• Consider improving the loading experience of these pages and components. See comment Add status entity and use it in "admin views" experiment #55050 (review)
• Data views: Posts page experience is buggy #57762
• Pages data view: Update title field so that homepage and posts page are marked with a badge #57763
• Visualise page hierarchy in table layout
• Author field: include gravatar (to match Templates list)
• Add e2e tests.

Templates

• Reimplement the template list using data views with feature parity.
• Support filtering by author. (should we support author type too?)
• Implement a grid view using the block preview as a media field. (@ntsekouras )
• Enable list layout. @oandregal DataViews: add list layout to templates #57014
• Explore using the list layout to replace the existing "templates" page (avoid two different template lists)
• Merge the "list" view with the existing parent "templates page" of the site editor.
• Work on the performance of the Grid view, polish its design and mark it as stable.
• Templates data view: Default sort order #57114
• Data views: Double scrollbar in templates list layout #57594
• Templates: Hide description field when switching to List layout #57596
• Templates List /Table layout: Hide preview field #57597
• Data views table layout: Enable fields to be visually combined with title #58012
• Templates: Enable users to quickly browse by author/source #58111
• Add e2e tests.
• Remove all tracks from the old page (styles, components, etc.).
• Templates dataview: Make it possible to toggle Author field #58512

Patterns

• Reimplement the patterns pages using data views with feature parity.
• Add e2e tests.
• Remove all tracks from the old page (styles, components, etc.).
• Disable bulk actions on theme-supplied patterns #58737
• Add bulk actions
  • Patterns page: Remove "Manage all patterns" link #58210

Template parts

• Reimplement the template parts list using data views with feature parity. DataViews: Update template parts view #57952
• Add e2e tests.
• Remove all tracks from the old page (styles, components, etc.).

WordPress 6.6

Goals #59659:

• "Site Editor > Pages": use dataviews with list layout by default.
• "Site Editor > Templates": use dataviews with grid layout by default.
• "Site Editor > Patterns": add table layout + consolidate patterns & template parts.

The focus for the DataViews package is making the list layout stable as well as polishing every interaction and APIs to support the above goals.

Backlog

See also issues and PRs tagged with the [Feature] Data Views label.

Layout API

• List
  • Preview should be a toggle-able field.
  • Add support for actions. See comment and pages.
• Grid
  • Data views grid layout: Allow users to adjust grid density, and consumers to set default density #60630
• Improve keyboard navigation
  • List [Data Views] Updating keyboard navigation in list layouts #59637
  • Table DataViews: Improve keyboard accessibility in table layout #56328
  • Grid DataViews: Improve keyboard accessibility in grid layout #56330
• Enable rendering the fields differently per layout:
  • As badges Data views: Add ability to display fields as a badge in grid layout #60284
  • As columns Update field display in grid layout #60083, Data Views: Rename displayAsColumnFields to columnFields API #60504
• New layouts: DataViews: Implement Kanban layout #57024
• Add support for reordering fields
• Showcase hierarchy in table/list layout #55957
• DataViews: Group by field #57967
• DataViews option persistence #57669
• Data Views: Revisit layout config structure #60507
• Data views: Surface actions menu on right-click #59608
• Data views: quick-editing #55101

Field API

• Refactor to allow rendering to be generated using a field type.
• Defining the API for field and field types registration.
• Data view: Custom field creation #55102
• Handle better when/how we render the Placeholder in grid view. If the field needs to provide a component that uses hooks etc.., the actual field could render nothing, but the mediaField?.rendercall would return a React element. Currently we only check for null.

Other components:

• Extensibility DataViews: Extensibility #61084
• Data view: Search & Filtering #55100
• Data view: Bulk actions #55098
• DataViews: Add summary table footer #57270
• Custom views
  • Custom data views: Offer a dedicated way to save changes #56205
  • Data views: Show total count in menu item #57072
  • Consider view visibility (personal views, shared views, etc.).
  • To become stable: advance more in the "customize your admin experience" so we're able to place them everywhere (top-level, in a submenu, etc).
• URL & state
  • DataViews: Routing related issues. #60709
  • DataViews: Active page is not highlighted properly in list view. #60708
  • Should users be able to share a URL with their state (filters, search, etc).?
  • Consolidate the sidebar navigation: default views (pages, templates, parts use activeView as URL parameter) & custom URL parameters (patterns use categoryId/categoryType as URL parameters).
  • My Patterns: the pagination doesn't keep the state after click on a pattern  #59003

[oandregal]

For the 6.6 iteration, the whole of the activity is happening elsewhere.

For example, #59659 tracks migrating all index pages to use DataViews (which was listed here in the 6.5 cycle), tracking tasks for components (filters, bulk actions, etc.), and other related efforts, such as #59689.

I've updated this issue description for 6.6 to reflect the major areas of the DataViews component, leaving any other thing out, as they already have their own tracking issue.