Data Views Update #2

This is the second update on Data Views, a series to provide more frequent information about the latest and greatest, so folks can follow along, provide 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:

  • Documentation on it in the Storybook space.
  • 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 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 page and use the Data Views component to display a data list.
  • 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/, you can chime in or post on issues regarding Data Views development.

🚀 = Shipped | ⚙️ = Work in Progress | 🎨 = Needs feedback


Table of contents

  1. Ensure primary filter visibility 🚀
  2. Re-order table columns in view options 🚀
  3. Re-balance header area in List layout 🚀
  4. Combine Featured Image and Title field display ⚙️
  5. Pin table columns and rows 🎨
  6. Advanced filtering 🎨

Ensure primary 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. visibility 🚀

To provide users with the ability to manage prominence the filter 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. recently moved to a toggle-able panel.

This small update ensures that any primary filters supplied by a data view are made immediately visible by opening the panel automatically.
Related GitHub link: DataViews: load the filter toggle as open if there are primary filters

Re-order table columns in view options 🚀

In addition to toggling field visibility, it is now also possible to re-order table columns within the view options 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.. Related GitHub link: Add: Reorder control at the field level on the new view config UI.

Re-balance headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. area in List layout 🚀

A small change that makes the search bar wider when the screen is narrow, and adjusts the top part of the data view depending on screen size.
Related GitHub link: Data views: Update search appearance in narrow containers

This PR attempts to combine post / page titles with the featured image rather than displaying them as separate columns in a table layout.
Related GitHub link: DataViews: Combine featured image and title in the posts table

Pin table columns and rows 🎨

This change adds the ability to ‘pin’ or ‘freeze’ table rows and columns so that they remain visible regardless of scroll position.

Related GitHub links:

Advanced filtering 🎨

Initial explorations for a new “Advanced” filter type that allows for configurations not ordinarily possible with the standard filter UI.
Related GitHub link: Data views: Advanced filtering

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 for the preparing the content and @annezazu for reviewing of the post.

#admin-design#data-views

#dataviews