Data Views Update #1

The Data Views component is a key part of the future of WordPress, used both in the site editor and by early adopter pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. app to a plugin page and use the Data Views component to display a data list.


Table of contents


Consolidate bulk actions UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.

The disparate menu + toolbar UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. for bulk actions is being simplified and relocated to the table footer.

On GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/: Move bulk actions menu to the Footer, consolidate with floating toolbar and total items display

Consolidated bulk actions UI

Updated filtering UX

Updated Filtering UX

To help avoid the filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. 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.

Adjusting density in grid layout

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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Props to @jameskoster and @joen for the preparing the content and @annezazu for reviewing of the post.

#admin-design, #data-views, #dataviews