Using Data Views to display and interact with data in plugins

Have you noticed the new User Interface (UI) in the Site Editor for entities such as Pages, Templates, or Patterns? This new UI provides a more unified experience for managing and navigating data. With this new interface, users can filter information, customize views, and select specific fields—all in one, consistent environment.

Site Editor > Templates
Site Editor > Pages
Site Editor > Patterns

As WordPress transitions into Phase 3: Collaboration, an ongoing effort is underway to enhance the admin experience and incorporate a new visual language across the platform.

But what’s the magic behind this new interface? It’s no magic at all—just the powerful and versatile DataViews component.

The DataViews component (check the original proposal) provides a powerful API to render datasets using different layouts such as tables, grids, or lists. Additionally, users can customize the data in many ways: filtering, searching, pagination, grouping, sorting, field management, performing actions, and more.

Pretty impressive for just one component, right?

Now that you know WordPress Core is using Data Views to improve and consolidate the admin UI, you might be wondering: Could I also use Data Views in my projects? How about in my plugins? Yes, you can! Even though the component is still being refined, you can start using it in your own plugins.

In this article, you’ll learn how to do just that.

DataViews is still considered an experimental component, and breaking changes are expected at its current stage. Any breaking changes to this component will be communicated through its Changelog.

Table of Contents

Let’s build a plugin!

Since the DataViews component is all about managing datasets, let’s use it in a plugin to display some data.

First, let’s take a list of images from a JSON file and display them on several layouts. Next, using only the component’s built-in features, let’s provide the tools so users can decide how to display the list of images and perform actions on them.

But the project won’t stop there. In an article to come, I’ll guide you through adding functionality to let users add these images to the Media Library.

Throughout this whole process, you’ll learn how to:

Add a custom React app to the admin screens.
Leverage the DataViews component to display datasets.
Add actions that enable users to upload selected images to the Media Library.
Build a user-friendly UI that shows your users what they’re doing, as they do it.

This article will show you how to use DataViews component from a plugin. But the project started in this article will be expanded in a second article that will show you how to integrate the images displayed in the Media Library.

Here’s a video showing what the app you’ll create in this article will look like:

Before you start

To build this plugin, you’ll need a proper Block Development Environment on your machine, including the installation of Node.js and a Local WordPress environment.

You should also have a good grasp of JavaScript and React and be familiar with the @wordpress/scripts package, especially how to run the start and build commands to process JavaScript and create bundled assets.

The final code of the project explained in this article is available at https://github.com/wptrainingteam/devblog-dataviews-plugin.
Throughout the article, you’ll find links to specific commits corresponding to the changes being explained, to help you track the project’s progress.

Loading a React app in an admin screen

Let’s start by building a plugin that loads a minimal React app on a page in the WordPress admin.

The How to use WordPress React components for plugin pages blog post covers how to create a plugin that loads a React app on an admin page, so please refer to that post for additional explanations. The Create your First App with Gutenberg Data guide in the Block Editor Handbook is another great example of a React app in the admin.

To create a basic plugin:

Go to the plugins directory.
Create a new folder named devblog-dataviews-plugin.
Inside this folder, create a file named plugin.php.
Add the plugin header to the plugin.php file.

<?php

/**
 * Plugin Name: Dataviews Images Media
 * Description: Displays a dataset of images for upload to the Media Library.
 * Version: 0.1.0
 * Requires at least: 6.6
 * Text Domain: dataviews-images-media
 */

defined( 'ABSPATH' )