你是否注意到站点编辑器中针对页面、模板或模式等实体的新用户界面？这个新界面为管理和浏览数据提供了更统一的体验。用户可以在一个一致的环境中筛选信息、自定义视图和选择特定字段。

模板”部分截图” />
页面”部分截图” />
所有模式”部分截图” />

随着 WordPress 过渡到第三阶段：协作，一项持续的努力正在进行，以增强管理体验并在整个平台中融入新的视觉语言。

但这个新界面背后的魔力是什么？其实没有魔法——只是强大且多功能的 DataViews 组件。

DataViews 组件（查看原始提案）提供了一个强大的 API，可以使用表格、网格或列表等不同布局来渲染数据集。此外，用户可以通过多种方式自定义数据：筛选、搜索、分页、分组、排序、字段管理、执行操作等。

对于一个组件来说，这相当令人印象深刻，对吧？

既然你知道 WordPress 核心正在使用 Data Views 来改进和整合管理界面，你可能想知道：我是否也可以在项目中使用 Data Views？在我的插件中呢？是的，你可以！尽管该组件仍在完善中，但你可以在自己的插件中开始使用它。

在本文中，你将学习如何做到这一点。

让我们构建一个插件！

既然 DataViews 组件是关于管理数据集的，让我们在一个插件中使用它来显示一些数据。

首先，从一个 JSON 文件中获取图像列表，并在几种布局中显示它们。接下来，仅使用组件的内置功能，提供工具让用户决定如何显示图像列表并对它们执行操作。

但项目不会止步于此。在即将到来的一篇文章中，我将指导你添加功能，让用户将这些图像添加到媒体库。

在整个过程中，你将学习如何：

• 向管理屏幕添加自定义 React 应用。
• 利用 DataViews 组件显示数据集。
• 添加允许用户将选定图像上传到媒体库的操作。
• 构建用户友好的界面，向用户展示他们正在执行的操作。

开始之前

要构建此插件，你需要在机器上搭建一个合适的区块开发环境，包括安装 Node.js 和一个本地 WordPress 环境。

你还应该熟练掌握 JavaScript 和 React，并熟悉 @wordpress/scripts 包，特别是如何运行 start 和 build 命令来处理 JavaScript 并创建打包资源。

在管理屏幕中加载 React 应用

让我们首先构建一个插件，在 WordPress 管理后台的一个页面上加载一个最小的 React 应用。

要创建一个基本插件：

1. 进入 plugins 目录。
2. 创建一个名为 devblog-dataviews-plugin 的新文件夹。
3. 在此文件夹内，创建一个名为 plugin.php 的文件。
4. 将插件头部信息添加到 plugin.php 文件。

<?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' ) || exit;

接下来，从 WordPress 管理仪表板激活插件 DevBlog Data Views Plugin。

激活后：

1. 在主插件文件夹内，创建一个 src 目录。
2. 在 src 文件夹内，创建一个空的 index.js 文件。
3. 在主插件文件夹中，创建一个 package.json 文件，内容如下。

{
  "name": "devblog-dataviews-plugin",
  "version": "0.1.0",
  "author": "The WordPress Contributors",
  "description": "Plugin with Admin menu option and dataviews",
  "license": "GPL-2.0-or-later",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^30.6.2"
  }
}

打开终端并运行 npm install 以安装项目的依赖项。

插件的基础工作完成后，现在将必要的代码添加到 plugin.php 文件，以创建一个名为 从第三方服务添加媒体 的新 媒体 子页面。

add_action( 'admin_menu', 'devblog_dataviews_admin_menu' );


/**
 * Creates a new Media subpage and set the HTML for it.
 */
function devblog_dataviews_admin_menu() {
	add_media_page(
		__( 'Add Media from third party service', 'devblog-dataviews-plugin' ),
		__( 'Add Media from third party service', 'devblog-dataviews-plugin' ),
		'manage_options',
		'add-media-from-third-party-service',
		function () {
			printf(
				'<h1>%s</h1><div id="add-media-from-third-party-service"></div>',
				esc_html__( 'Add Media from third party service', 'devblog-dataviews-plugin' )
			);
		}
	);
}

接下来，将必要的代码添加到 plugin.php 文件，以在 从第三方服务添加媒体 页面上加载 build/index.js（这将把 React 应用附加到此页面）。

add_action( 'admin_enqueue_scripts', 'devblog_dataviews_admin_enqueue_assets' );

/**
 * Enqueues JS and CSS files for our custom Media subsection page.
 *
 * @param string $hook_suffix The current admin page.
 */
function devblog_dataviews_admin_enqueue_assets( $hook_suffix ) {
	// Load only on ?page=add-media-from-third-party-service.
	if ( 'media_page_add-media-from-third-party-service' !== $hook_suffix ) {
		return;
	}

	$dir = plugin_dir_path( __FILE__ );
	$url = plugin_dir_url( __FILE__ );

	$asset_file = $dir . 'build/index.asset.php';

	if ( ! file_exists( $asset_file ) ) {
		return;
	}

	$asset = include $asset_file;

        wp_enqueue_script(
		'devblog-dataviews-script',
		$url . 'build/index.js',
		$asset['dependencies'],
		$asset['version'],
		array(
			'in_footer' => true,
		)
	);
}

最后，创建 JavaScript 代码，将一个最小的 React 应用附加到 从第三方服务添加媒体 页面 HTML 上的特定 ID。

你可以通过将以下代码添加到 src/index.js 来实现：

import domReady from '@wordpress/dom-ready';
import { createRoot } from '@wordpress/element';

const App = () => {
  return (
    <div>
      <p>Our React app</p>
    </div>
  );
};

domReady( () => {
	const root = createRoot(
		document.getElementById( 'add-media-from-third-party-service' )
	);
	root.render( <App /> );
} );

运行 npm start 以使用 wp-scripts 包启动构建过程并监视代码更改。你应该会在 build/ 文件夹中看到一个生成的 index.js。

此时，你的项目中应该有一个样板代码，用于在 WordPress 管理后台显示 React 应用，并且可以在“媒体”下看到一个名为 从第三方服务添加媒体 的新页面，以及该子部分中最小 React 应用的输出。

项目已准备好在 React 应用中使用 DataViews 组件。

使用 Data Views 显示数据集

要在 React 应用中使用 DataViews 组件，你必须安装 @wordpress/dataviews 包并将其导入你的应用。

你可以安装此包并将其添加为项目的依赖项，在项目根目录下运行以下命令：

npm i @wordpress/dataviews@4.9.1 --save

现在在 src 文件夹下创建一个 App.js 文件，其中包含主 App 组件的新版本：

import { DataViews } from '@wordpress/dataviews/wp' ;


// source "data" definition 
// "defaultLayouts" definition 
// "fields" definition 


const App = () => {
    // "view" and "setView" definition
    // "processedData" and "paginationInfo" definition
    // "actions" definition 


    return (
        <DataViews
            data={ processedData }
            fields={ fields }
            view={ view }
            onChangeView={ setView }
            defaultLayouts={ defaultLayouts }
            actions={ actions }
            paginationInfo={ paginationInfo }
        />
    );
};


export default App;

这个新文件定义了一个 App 组件并将其导出以供其他地方使用。

目前，这个 App 组件只是导入了 DataViews 组件，并使用一些尚未定义的值传递给其属性：

• data – 表示要处理的数据集的一维对象数组。必须处理和更新此数据以反映应用的筛选、排序和分页选项。
• fields – 数据集中每条记录的显示设置和功能。
• view – 数据集如何显示给用户的配置。
• onChangeView – 每次视图配置更改时将调用的回调函数。
• defaultLayouts – 用户可用的视图类型。
• actions – 可以对每条记录执行的操作集合。
• paginationInfo – 数据集中的项目总数和总页数。

在屏幕上看到有意义的内容之前，你需要定义 DataViews 组件所需的所有这些值。但在定义这些值之前，有几件事你必须处理。

首先，从这个文件导入新的 App 组件，而不是你之前创建的临时组件。从 src/index.js 执行此操作：

import domReady from '@wordpress/dom-ready';
import { createRoot } from '@wordpress/element';

import App from './App';

domReady( () => {
	const root = createRoot(
		document.getElementById( 'add-media-from-third-party-service' )
	);
	root.render( <App /> );
} );

现在，有一件重要的事情需要提供给 DataViews 组件：它的样式。

样式

DataViews 组件使用了 @wordpress/components 包的几个组件，因此无论你在哪里使用 DataViews 组件，都必须加载 @wordpress/dataviews 和 @wordpress/components 包的样式。

你可以使用 wp-components 句柄来加载所有 @wordpress/component 包组件的样式。但对于 @wordpress/dataviews 的样式，在该组件的当前阶段，你必须直接从 node_modules 文件夹导入它们。

在你的插件中创建一个 src/style.scss 文件并添加以下代码：

@import "@wordpress/dataviews/build-style/style.css";


#add-media-from-third-party-service {
  background: white;
  .topic_photos {
    display: flex;
    flex-wrap: wrap;
    span {
      background-color: rgb(166, 165, 165);
      color: white;
      padding: 2px 4px;
      margin: 2px;
    }
  }
}

此代码导入了 @wordpress/dataviews 样式，并为你的项目添加了一些额外的样式。

你需要从这个 CSS 文件生成最终的 CSS 文件，该文件将加载在 React 应用所在的同一页面上，并包含 @wordpress/dataviews 的样式。

要生成最终的 CSS 文件，从 src/index.js 文件导入 src/style.scss：

import "./style.scss";

在运行 npm start 的情况下，你将看到在 build 文件夹下生成了一个新的 style-index.css 文件。

这个生成的文件是你可以排队加载到 WordPress 中的文件。在 plugin.php 中的 devblog_dataviews_admin_enqueue_assets 函数末尾添加以下代码：

wp_enqueue_style(
  'devblog-dataviews-styles',
  $url . 'build/style-index.css',
  array( 'wp-components' ),
  $asset['version'],
);

此代码在 React 应用所在的页面上排队加载生成的 build/style-index.css，其中包含 DataViews 组件样式。此外，它通过添加 wp-components 作为依赖项，为该页面加载 @wordpress/components 样式。

现在是时候定义 DataViews 组件属性所需的值了。让我们从 data 属性开始！

DataViews 属性

数据

DataViews 组件最重要的部分是显示数据。

对于这个项目，你将使用一个包含照片数据列表的本地 JSON 文件。列表中的每个项目都包含有关照片的信息，例如描述、作者、多个 URL 和相关主题。