使用数据视图在插件中显示并与数据交互

您是否注意到网站编辑器中的新用户界面（UI），例如页面，模板，或者模式？这个新的UI为管理和导航数据提供了更统一的体验。使用此新界面，用户可以过滤信息，自定义视图并选择特定字段 – 在一个一致的环境中。

站点编辑>模板
站点编辑>页面
站点编辑>模式

随着WordPress过渡到第三阶段：合作，正在进行的努力正在进行中增强管理员体验并在整个平台上结合一种新的视觉语言。

但是这个新界面背后的魔力是什么？这根本不是魔术 – 只是功能强大且通用的数据维护成分。

这DataViews组件（检查原始建议）提供强大的API，以使用不同的布局，例如表，网格或列表来渲染数据集。此外，用户可以多种方式自定义数据：过滤，搜索，分页，分组，分类，现场管理，执行操作等。

只有一个组件给人留下深刻的印象，对吗？

现在您知道WordPress Core正在使用数据视图来改进和合并管理UI，您可能会想知道：我还可以在项目中使用数据视图吗？在我的插件中怎么样？是的，你可以！即使该组件仍在完善中，您也可以在自己的插件中开始使用它。

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

DataViews仍然被认为是实验组件，并且在当前阶段预计会发生破裂的变化。该组件的任何破坏变化都将通过其传达 ChangElog。

让我们构建一个插件！

自从DataViews组件是关于管理数据集的全部内容，让我们在插件中使用它来显示一些数据。

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

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

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

将自定义的React应用程序添加到管理仪表板中。
利用Dataviews组件显示数据集。
添加操作，使用户能够将所选图像上传到媒体库。
构建一个用户友好的UI，向您的用户展示他们的操作，就像他们这样做一样。

本文将向您展示如何使用插件中的Dataviews组件。但是本文启动的项目将在第二篇文章中扩展，该文章将向您展示如何整合媒体库中显示的图像。

这是一个视频，显示了您将在本文中创建的应用程序：

开始之前

要构建此插件，您需要适当的阻止开发环境在您的机器上，包括 Node.js的安装和本地WordPress环境。

您还应该很好地掌握JavaScript并做出反应并熟悉 @wordpress/scripts包裹，尤其是如何运行start和build命令处理JavaScript并创建捆绑资产。

本文中解释的项目的最终代码可在 https://github.com/wptrainingteam/devblog-dataviews-plugin。
在整篇文章中，您会发现链接具体提交与所解释的更改相对应，以帮助您跟踪项目的进度。

在管理屏幕中加载React应用程序

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

这如何使用WordPress React组件作为插件页面博客文章涵盖了如何创建在管理页面上加载React应用程序的插件，因此请参阅该帖子以获取其他说明。这使用Gutenberg数据创建您的第一个应用程序 Block编辑手册中的指南是管理员中一个React应用程序的另一个很好的示例。

创建一个基本插件：

去plugins目录。
创建一个名称的新文件夹devblog-dataviews-plugin。
在此文件夹中，创建一个名为的文件plugin.php。
添加插件标头到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;

接下来，激活插件 DevBlog数据视图插件 从WordPress管理仪表板。

激活后：

在主插件文件夹中，创建一个src目录。
在src文件夹，创建一个空的index.js文件。
在主插件文件夹中，创建一个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": "^28.3.0"
  }
}

打开终端并运行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应用程序附加到特定ID上的HTML上 添加第三方服务中的媒体 页。

您可以通过添加以下代码到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包装并注意代码的更改。你应该看到一个index.js在build/文件夹。

此时，您应该有一个样板代码在您的项目中，在WordPress管理中显示React应用程序，并在媒体下查看新页面称为 添加第三方服务中的媒体 以及该小节中最小的React应用程序的输出。

Spapshot of minimal React app in the admin UI

该项目准备使用DataViewsReact应用中的组件。

显示具有数据视图的数据集

到使用DataViews成分在React应用中，您必须安装@wordpress/dataviews包装并将其导入您的应用程序。

您可以安装此软件包并添加作为项目的依赖性从项目根源的以下命令中：

npm i @wordpress/dataviews --save

现在创建一个App.js档案下的文件src文件夹主要版本的主要版本App成分：

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


// 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包裹，所以两者的样式@wordpress/dataviews和@wordpress/components无论您在哪里使用，都必须加载软件包DataViews成分。

您可以使用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 App所使用并包含的样式@wordpress/dataviews。

要生成最终的CSS文件，进口src/style.scss来自src/index.js文件：

import "./style.scss";

和npm start跑步，您会看到一个新的style-index.css在build文件夹。

该生成的文件是您可以在WordPress中招募的文件。添加以下代码在devblog_dataviews_admin_enqueue_assets功能中的功能plugin.php：

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

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

现在是时候定义了DataViews 组件的道具。让我们从data支柱！

Dataviews组件是一个非常强大且通用的组件，它需要通过其道具进行大量输入数据才能正常工作。在以下一节中定义其道具的值之前，您将无法看到正在行动中的数据视图。在那之前有一定的耐心。这是值得的。

Dataviews Props

数据

最重要的一块DataViews组件需求是要显示的数据。

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

为了简单起见，该项目使用本地JSON文件使数据集可以使用，但是Dataviews组件的一个很好的用例正在将其连接到第三方REST API，从而可以在WordPress中进行动态数据集成。

这是该项目使用的数据列表中包含的项目的一个示例：

dataPhotos = [
{
   id: "nwPxPBWY5JI",
   slug: "a-blue-bird-sitting-on--nwPxPBWY5JI",
   width: 2818,
   color: "#c0c0d9",
   height: 4235,
   alt_description: "a blue bird sitting on top of a plant",
   urls: {
     raw: "https://images.unsplash.com/photo-raw-...",
     full: "https://images.unsplash.com/photo-full-...",
     regular: "https://images.unsplash.com/photo-regular-...",
     small: "https://images.unsplash.com/photo-small-...",
     thumb: "https://images.unsplash.com/photo-thumb-...",
     small_s3: "https://images.unsplash.com/photo-small_s3-...",
   },
   topics: ["health", "travel"],
   user: {
      first_name: "Clayton",
      last_name: "Chase",
      url: "https://chasemade.com",
    },
},
{...},
...
]

复制并粘贴文件的内容这里进入src/data.js文件并将该文件的内容导入到dataPhotos恒定src/App.js。

import { dataPhotos } from './data';

数据已经准备好了显示与数据视图一起显示。

字段

接下来，您必须定义如何在DataViews组件和要为每个字段启用的特定功能。

为此，这fields支柱 Dataviews组件的期望是一系列对象，其中每个对象都包含每个字段的配置设置。您可以用来定义字段配置的某些属性是：

id：该领域的标识符。
label：该字段的名称将在UI中显示。
getValue：返回字段值的函数。
render：自定义反应组件渲染字段。
elements：通过此值过滤的有效值集。设置此值可以通过此值来过滤器。
type：该字段的类型。
enableSorting：是否可以通过给定字段对数据进行排序。
enableHiding：是否可以隐藏字段。
enableGlobalSearch：该字段是否可搜索。
filterBy：过滤器的配置。
- operators：该领域支持的操作员列表。
- isPrimary：是否是主要过滤器。

查看关于fields支柱 dataviews组件的所有这些属性中的每个属性的完整信息

您必须首先确定Dataviews组件中的数据提供哪些功能。这意味着您需要确定可以对哪些字段进行分类，过滤，隐藏和搜索。

排序： 默认情况下，所有字段都是可排序的。要将特定字段排除在排序之外，请设置enableSorting到false对于那些字段。该项目可以为Image和Topics字段。
搜索：默认情况下，无法搜索字段。要启用特定字段的搜索功能，请设置enableGlobalSearch到true。该项目使搜索ID，Author，和Description字段。
隐藏：默认情况下，所有字段都是可隐藏的。要将特定字段排除在隐藏之外，请设置enableHiding到false对于那些字段。该项目禁用隐藏的Image场地。
过滤：要通过一个字段进行过滤，您必须将值传递给elements该领域的属性。预期值是具有属性的对象数组label和value。与filterBy属性，您可以通过定义来微调此过滤行为operators和isPrimary特性。该项目可以通过Topics场地。

为了启用主题字段的过滤器，我们需要使用当前项目的原始数据来解决。每个照片项的主题值以以下格式出现：

[
  { topics: ["nature", "water"] }, 
  { topics: ["nature", "mountain"] }
]

但是elementsProp期望以下内容：

[
  { label: "Nature", value: "nature" }, 
  { label: "Water", value: "water" }, 
  { label: "Mountain", value: "mountain" }
]

这elementsProp期望一系列独特的主题，每个主题由label和value财产。

在设置DataViews组件的设置过滤器时，需要调整您的数据，可能会出现很多。因此，让我们编写一个执行以下操作的JavaScript函数：

从具有重复主题的数组列表中获取独特主题列表。
将主题转换为正确的格式elements属性fields支柱。

创建一个src/utils.js并添加以下可导出的getTopicsElementsFormat功能。

/**
 * Retrieves the unique topics from an array of photos.
 */
export const getTopicsElementsFormat = ( photos ) => {
	const topics = photos.reduce( ( acc, photo ) => {
		return acc.concat( photo.topics );
	}, [] );
	return [ ...new Set( topics ) ].map( ( topic ) => {
		return {
			label: topic
				.replace( /_/g, ' ' )
				.replace( /\b\w/g, ( l ) => l.toUpperCase() ),
			value: topic,
		};
	} );
};

此功能利用 reduce 阵列的方法，内置设置对象（获取独特价值的集合）和正则表达式replace 字符串的方法将数据塑造为所需的格式。

最后，您需要定义如何显示每个字段的最终值DataViews成分：

与getValue属性，您可以指定一个确定字段值的函数。此值将用于搜索，排序和显示字段。例如：
- 要通过其数字值对字段进行排序，您可以使用此功能将字符串转换为数字。
- 您可以通过结合原始数据的多个属性来创建复合值。该组合值将是该字段的默认显示值，也将由搜索功能使用。
与render属性，您可以定义一个自定义反应组件，该组件控制字段值的显示方式。如果您想以特定方式格式化值或在显示屏中包含其他元素（例如图标或按钮），这将很有用。

现在您可以更好地了解可以通过fields道具，让我们定义将传递给的一系列现场项目Dataviews成分。

添加以下代码到src/App.js文件：

import { getTopicsElementsFormat } from "./utils";


...


// "fields" definition
const fields = [
	{
		id: 'img_src',
		label: 'Image',
		render: ( { item } ) => (
			<img alt={ item.alt_description } src={ item.urls.thumb } />
		),
		enableSorting: false,
	},
	{
		id: 'id',
		label: 'ID',
		enableGlobalSearch: true,
	},
	{
		id: 'author',
		label: 'Author',
		getValue: ( { item } ) =>
			`${ item.user.first_name } ${ item.user.last_name }`,
		render: ( { item } ) => (
			<a target="_blank" href={ item.user.url } rel="noreferrer">
				{ item.user.first_name } { item.user.last_name }
			</a>
		),
		enableGlobalSearch: true,
	},
	{
		id: 'alt_description',
		label: 'Description',
		enableGlobalSearch: true,
	},
	{
		id: 'topics',
		label: 'Topics',
		elements: getTopicsElementsFormat( dataPhotos ),
		render: ( { item } ) => {
			return (
				<div className="topic_photos">
					{ item.topics.map( ( topic ) => (
						<span key={ topic } className="topic_photo_item">
							{ topic.toUpperCase() }
						</span>
					) ) }
				</div>
			);
		},
		filterBy: {
			operators: [ 'isAny', 'isNone', 'isAll', 'isNotAll' ],
		},
		enableSorting: false,
	},
	{
		id: 'width',
		label: 'Width',
		getValue: ( { item } ) => parseInt( item.width ),
		enableSorting: true,
	},
	{
		id: 'height',
		label: 'Height',
		getValue: ( { item } ) => parseInt( item.height ),
		enableSorting: true,
	},
];

布局

这DataViews组件需要知道将为用户提供的布局。这是设置的这defaultLayouts支柱。

使用数据范围显示的三个当前可能的布局是：

table。
grid。
list。

如果defaultLayouts为空，数据视图将启用使用空布局数据的所有布局类型。

添加以下代码定义defaultLayouts我们将传递给defaultLayouts道具DataViews启用表和网格视图的组件：

// "defaultLayouts" definition
const primaryField = 'id';
const mediaField = 'img_src';

const defaultLayouts = {
	table: {
		layout: {
			primaryField,
		},
	},
	grid: {
		layout: {
			primaryField,
			mediaField,
		},
	},
};

列表视图（又称“并排”视图）实际上是用作侧边栏视图，以便在每个项目都有详细的视图时。您可以在网站编辑器的页面视图。该项目上没有每个项目的详细视图，因此此处未使用列表布局。

这defaultLayouts道具应该是包含命名属性的对象table，grid，或者list，取决于要启用的布局。这些属性中的每一个都应包含一个layout属性，该属性具有该特定布局类型的配置。

该项目用于配置布局的属性是：

primaryField：在每个行/卡/项目中要突出显示字段的ID。由表，网格和列表布局使用。
mediaField：用于渲染每张卡的媒体的字段ID。由网格和列表布局使用。

还有其他用于网格布局的属性，例如badgeFields和columnFields。

视图

这 view目的表示数据视图配置的状态（数据集的渲染方式，哪些字段可见…等）。它应使用对象初始化，并在视图设置更改时进行更新。开发人员有责任确保每当用户通过UI修改视图选项时，视图值会始终如一地更新。这onChangeView每次通过UI更改视图设置时，都会调用回调，使其成为更新视图状态的理想场所。

这view设置以具有以下属性的序列化对象的形式定义：

type：查看类型，之一table，grid，list。
search：应用于数据集的文本搜索。
filters：以以下属性形式应用于数据集的过滤器：
- field：该过滤器的哪个字段与。
- operator：它是哪种类型的过滤器操作员。
- value：用户从该字段定义传递给“元素”属性的用户选择的值。
perPage：每页显示的记录数。
page：可见的当前页面。
sort：排序一个字段的设置：
- field：用于对数据集进行排序的字段。
- direction：用于排序的方向，是“ ASC”或“ DESC”之一。
fields：在UI中可见的字段及其显示的特定顺序。
layout：配置特定于特定布局类型。可以在此处使用用于定义默认值的相同属性来更新布局配置。

在React App组件中设置以下代码src/App.js之前return组件：

import { useState } from "@wordpress/element";
...
	// "view" and "setView" definition
	const [ view, setView ] = useState( {
		type: 'table',
		perPage: 10,
		layout: defaultLayouts.table.layout,
		fields: [
			'img_src',
			'id',
			'alt_description',
			'author',
			'topics',
			'width',
			'height',
		],
	} );

这view对象需要将显示将显示的字段及其应显示的顺序的默认列表。如果您不提供此默认值fields财产的view，诸如向右或向左的运动列之类的功能无法正常工作。

与 useState React Hook，一个view状态变量和一个setView定义更新它的方法。这setView方法可以直接通过onChangeView回调，以便每次UI都会更改，更改Dataview设置，view对象已直接更新，并且对反应组件进行刷新。

但是还需要更新数据以反映用户选择的过滤器，订单和其他设置。恩！这听起来很容易处理，对吗？

我有个好消息给你。这@wordpress/dataviews包裹让我们涵盖了此操作的filterSortAndPaginate功能。此功能将根据视图配置将过滤，排序和分页应用于原始数据，返回过滤后的数据和分页信息。

这filterSortAndPaginate提取三个论点：

原始数据。
查看配置对象。
字段配置。

并返回具有以下属性的对象：

data：过滤数据。
paginationInfo：对象，带有分页信息由paginationInfoDataviews的道具。

让我们从@wordpress/dataviews包装并将以下代码添加到Appnull反应组件：

import { ..., filterSortAndPaginate } from "@wordpress/dataviews";
import { ..., useMemo } from "@wordpress/element";
...

	// "processedData" and "paginationInfo" definition
	const { data: processedData, paginationInfo } = useMemo( () => {
		return filterSortAndPaginate( dataPhotos, view, fields );
	}, [ view ] );

在此代码中，这useMemoReact Hook 用于缓存结果filterSortAndPaginate并优化计算资源。每个结果都返回useMemo与其输入值相关联并在内部保存，因此第二次useMemo以相同的输入值调用，返回值将从缓存的结果中传递（优化调用到filterSortAndPaginate）。

每当视图状态变量都会改变时，useMemo调用功能，它将返回processedData和paginationInfo值是从其内部缓存或调用的结果filterSortAndPaginate。

和上面的代码，考虑到用户可以修改的视图设置，我们已经建立了数据视图来管理数据的必要逻辑和变量。

动作

为了完成本文涵盖的项目的一部分，让我们添加一个可以在数据视图的每个项目上启动的简单操作。该动作将打开一个新窗口，其中每个照片项的原始URL。

这DataViews成分actionsProp接受可以在每个项目上执行的操作集合。

添加以下代码到src/App.js：

	// "actions" definition
	const actions = [
		{
			id: 'see-original',
			label: 'See Original',
			callback: ( [ item ] ) => {
				const urlImage = item.urls.raw;
				window.open( urlImage, '_blank' );
			},
		},
	];

该动作已通过以下属性定义：

id– 动作的唯一标识符。
label– 对UI中要显示的动作的用户描述。
callback– 以记录为输入并执行所需操作的回调功能。

查看这里可用于定义数据视图项的操作并实现其他行为的属性的完整列表。

在这一点上，你src/App.js应该看起来像这样：

import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
import { useState, useMemo } from '@wordpress/element';
import { getTopicsElementsFormat } from './utils';
import './style.scss';

// source "data" definition
import { dataPhotos } from './data';

// "defaultLayouts" definition
const primaryField = 'id';
const mediaField = 'img_src';

const defaultLayouts = {
	table: {
		layout: {
			primaryField,
		},
	},
	grid: {
		layout: {
			primaryField,
			mediaField,
		},
	},
};

// "fields" definition
const fields = [
	{
		id: 'img_src',
		label: 'Image',
		render: ( { item } ) => (
			<img alt={ item.alt_description } src={ item.urls.thumb } />
		),
		enableSorting: false,
	},
	{
		id: 'id',
		label: 'ID',
		enableGlobalSearch: true,
	},
	{
		id: 'author',
		label: 'Author',
		getValue: ( { item } ) =>
			`${ item.user.first_name } ${ item.user.last_name }`,
		render: ( { item } ) => (
			<a target="_blank" href={ item.user.url } rel="noreferrer">
				{ item.user.first_name } { item.user.last_name }
			</a>
		),
		enableGlobalSearch: true,
	},
	{
		id: 'alt_description',
		label: 'Description',
		enableGlobalSearch: true,
	},
	{
		id: 'topics',
		label: 'Topics',
		elements: getTopicsElementsFormat( dataPhotos ),
		render: ( { item } ) => {
			return (
				<div className="topic_photos">
					{ item.topics.map( ( topic ) => (
						<span key={ topic } className="topic_photo_item">
							{ topic.toUpperCase() }
						</span>
					) ) }
				</div>
			);
		},
		filterBy: {
			operators: [ 'isAny', 'isNone', 'isAll', 'isNotAll' ],
		},
		enableSorting: false,
	},
	{
		id: 'width',
		label: 'Width',
		getValue: ( { item } ) => parseInt( item.width ),
		enableSorting: true,
	},
	{
		id: 'height',
		label: 'Height',
		getValue: ( { item } ) => parseInt( item.height ),
		enableSorting: true,
	},
];
const App = () => {
	// "view" and "setView" definition
	const [ view, setView ] = useState( {
		type: 'table',
		perPage: 10,
		layout: defaultLayouts.table.layout,
		fields: [
			'img_src',
			'id',
			'alt_description',
			'author',
			'topics',
			'width',
			'height',
		],
	} );

	// "processedData" and "paginationInfo" definition
	const { data: processedData, paginationInfo } = useMemo( () => {
		return filterSortAndPaginate( dataPhotos, view, fields );
	}, [ view ] );

	// "actions" definition
	const actions = [
		{
			id: 'see-original',
			label: 'See Original',
			callback: ( [ item ] ) => {
				const urlImage = item.urls.raw;
				window.open( urlImage, '_blank' );
			},
		},
	];
	return (
		<DataViews
			data={ processedData }
			fields={ fields }
			view={ view }
			onChangeView={ setView }
			defaultLayouts={ defaultLayouts }
			actions={ actions }
			paginationInfo={ paginationInfo }
		/>
	);
};

export default App;

这DataViews现在可以显示组件！

转到您的管理面板和 添加第三方服务中的媒体“媒体”设置的子页面。您应该看到这样的东西：

该布局应反映所有设置和处理DataViews已调用组件：

桌子和网格布局可供选择。
按主题过滤。
一些要排序的列。
触发每个项目的动作。
隐藏并显示列。
更改列的位置。
根据用户选择的设置更新要显示和页面的数据。

该项目的第一部分的代码可用这里。还有一个现场演示由操场提供动力的项目。

有一个组件（DataViews组件），您已经从插件构建了一个高级UI，以显示自定义数据，包括几种布局类型，搜索，过滤器，订购，分页和在项目上的自定义操作。

总结

这 @wordpress/dataviews包裹在 WP管理员重新设计。这@wordpress/dataviews包装也有一个Dataforms组件旨在通过使用声明的方法来简化和标准化管理员的UI创建（您定义所需的内容，并且系统创建它）并共享与DataViews组件相同的API。

未来计划利用这些组件来增强和统一管理UI 快速编辑和媒体库。

牢记可扩展的构建@wordpress/dataviews包装为插件和第三方开发人员打开了令人兴奋的新机会。要了解有关可扩展性数据查看的计划工作的更多信息，请务必查看这个跟踪问题。

现在您已经建立了一个与DataViews组件，您可能会更容易理解核心中使用的代码以在网站编辑器中实现新UI的代码页面，模式，和模板使用Dataviews组件

请继续关注本文的第二部分，您将学习如何进一步进行该项目并从数据视图UI中添加图像。

资源

块编辑手册上的数据查看文档
数据查看示例在故事书中（检查代码使用DataViews 组件和使用的数据对于此示例）
Dataforms故事书中的组成示例

道具 @Greenshady，@NDIEGO，@韦尔奇，@BPH，@玛丽鲍姆，@Oandregal 和 @eidolonnight 提供反馈并审查此帖子。

使用数据视图在插件中显示并与数据交互

让我们构建一个插件！

开始之前

在管理屏幕中加载React应用程序

显示具有数据视图的数据集

样式

Dataviews Props

数据

字段

布局

视图

动作

总结

资源

By zhuon

Related Post

发表回复取消回复

You Missed

ChangElog

使用数据视图在插件中显示并与数据交互

在WordPress中注册自定义纵横比6.6

开发人员有什么新功能？（2024年8月）

让我们构建一个插件！

开始之前

在管理屏幕中加载React应用程序

显示具有数据视图的数据集

样式

Dataviews Props

数据

字段

布局

视图

动作

总结

资源

By zhuon

Related Post

发表回复 取消回复

You Missed

发表回复取消回复