The Data Views component is a key part of the future of WordPress, used both in the site editor and by early adopter plugin developers. It’s being built collaboratively with the goal to streamline, standardize, and improve its functionality. This component will play a crucial role in future WordPress versions and is central to the Admin Design efforts.
This update is the start of a series to provide more frequent information about the latest and greatest, so folks can follow along, give feedback, and explore using this component. It builds on the initial update shared in June and will share biweekly updates going forward as it remains helpful.
To get started in learning more, you can find documentation on it in the Storybook space. A post on the Developer blog, Using Data Views to Display and Interact with Data in Plugins, explains how to add a React app to a plugin page and use the Data Views component to display a data list.
Table of contents
- Consolidate bulk actions UI
- Updated filtering UX
- Update view options UI
- Adjust density in grid layout
- De-emphasizing bulk actions in Grid layout
- Quick-edit marches on
Consolidate bulk actions UI
The disparate menu + toolbar UX for bulk actions is being simplified and relocated to the table footer.
On GitHub: Move bulk actions menu to the Footer, consolidate with floating toolbar and total items display
Updated filtering UX
To help avoid the filter UI dominating the view – particularly in List layout – all filter controls have moved to a dedicated drawer, the visibility of which can be toggled as needed.
On GitHub Move filter UI into a toggle-able panel to improve experience on narrow viewports/containers
Update view options UI
View options have moved out of a menu and into a popover.
On GitHub: Graduate data view options out of a menu to allow more design expression
Adjust density in grid layout
In Grid layout, it’s now possible to change the size of the preview / number of columns in view options.
On GitHub Update: Move item size control to the new view config UI.
De-emphasizing bulk actions in Grid layout
Checkboxes in Grid layout now only appear on hover / focus-within, and the styling of selected items has been updated.
On GitHub Update: De-emphasize bulk actions on Grid layout.
Quick-edit marches on
The Quick-edit experience and Data Forms component continues to evolve. Have a play in Storybook.
If you have feedback, feel free to comment ideally on GitHub issues labeled “Data Views” or find us in the #design channel in Slack.
Props to @jameskoster and @joen for the preparing the content and @annezazu for reviewing of the post.