WordPress Gutenberg 开发指南：为页面列表添加删除功能

WordPress Gutenberg 开发指南：为页面列表添加删除功能

gutenberg The Block Editor project for WordPress and beyond. Plugin is available from the official repository. 项目地址: https://gitcode.com/gh_mirrors/gu/gutenberg

前言

在 WordPress Gutenberg 开发中，数据管理是一个核心功能。本文将详细介绍如何在自定义界面中实现页面删除功能，这是构建完整 CRUD（创建、读取、更新、删除）功能的重要一环。

功能概述

我们将为页面列表添加一个删除按钮，实现以下功能：

• 点击按钮删除指定页面
• 显示删除操作状态（加载中）
• 处理删除过程中可能出现的错误
• 提供用户友好的反馈通知

实现步骤

第一步：添加删除按钮组件

首先创建基础的删除按钮组件：

import { Button } from '@wordpress/components';

const DeletePageButton = ({ pageId }) => (
  <Button variant="primary">
    Delete
  </Button>
);

然后在页面列表中添加这个按钮：

function PagesList({ hasResolved, pages }) {
  // ...其他代码...
  return (
    <table className="wp-list-table widefat fixed striped table-view-list">
      {/* 表头 */}
      <tbody>
        {pages?.map((page) => (
          <tr key={page.id}>
            <td>{decodeEntities(page.title.rendered)}</td>
            <td>
              <div className="form-buttons">
                <PageEditButton pageId={page.id} />
                <DeletePageButton pageId={page.id} />
              </div>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

第二步：实现删除功能

使用 Gutenberg 的数据模块实现实际的删除操作：

const DeletePageButton = ({ pageId }) => {
  const { deleteEntityRecord } = useDispatch(coreDataStore);
  
  const handleDelete = () => {
    deleteEntityRecord('postType', 'page', pageId);
  };
  
  return (
    <Button variant="primary" onClick={handleDelete}>
      Delete
    </Button>
  );
};

这里使用了 deleteEntityRecord 方法，它是 Gutenberg 数据层提供的核心 API，会自动处理与 WordPress REST API 的通信。

第三步：添加加载状态

为了提升用户体验，我们需要显示删除操作的状态：

const DeletePageButton = ({ pageId }) => {
  const { deleteEntityRecord } = useDispatch(coreDataStore);
  const { isDeleting } = useSelect(
    (select) => ({
      isDeleting: select(coreDataStore)
        .isDeletingEntityRecord('postType', 'page', pageId),
    }),
    [pageId]
  );
  
  const handleDelete = () => deleteEntityRecord('postType', 'page', pageId);
  
  return (
    <Button 
      variant="primary" 
      onClick={handleDelete} 
      disabled={isDeleting}
    >
      {isDeleting ? (
        <>
          <Spinner />
          Deleting...
        </>
      ) : 'Delete'}
    </Button>
  );
};

第四步：错误处理与用户反馈

完整的删除功能需要处理可能出现的错误：

import { store as noticesStore } from '@wordpress/notices';

const DeletePageButton = ({ pageId }) => {
  const { deleteEntityRecord } = useDispatch(coreDataStore);
  const { createSuccessNotice, createErrorNotice } = useDispatch(noticesStore);
  
  const { isDeleting, getLastEntityDeleteError } = useSelect(
    (select) => ({
      isDeleting: select(coreDataStore)
        .isDeletingEntityRecord('postType', 'page', pageId),
      getLastEntityDeleteError: select(coreDataStore)
        .getLastEntityDeleteError,
    }),
    [pageId]
  );
  
  const handleDelete = async () => {
    const success = await deleteEntityRecord('postType', 'page', pageId);
    
    if (success) {
      createSuccessNotice("页面删除成功！", {
        type: 'snackbar',
      });
    } else {
      const lastError = getLastEntityDeleteError('postType', 'page', pageId);
      const message = (lastError?.message || '删除过程中发生错误') + 
        ' 请刷新页面后重试。';
      createErrorNotice(message, {
        type: 'snackbar',
      });
    }
  };
  
  // ...按钮渲染代码...
};

第五步：添加通知组件

为了显示通知消息，需要创建一个通知组件：

import { SnackbarList } from '@wordpress/components';

function Notifications() {
  const notices = useSelect(
    (select) => select(noticesStore).getNotices(),
    []
  );
  const { removeNotice } = useDispatch(noticesStore);
  const snackbarNotices = notices.filter(
    ({ type }) => type === 'snackbar'
  );
  
  return (
    <SnackbarList
      notices={snackbarNotices}
      className="components-editor-notices__snackbar"
      onRemove={removeNotice}
    />
  );
}

然后在主组件中使用它：

function MyFirstApp() {
  return (
    <div>
      {/* 其他组件 */}
      <Notifications />
    </div>
  );
}

技术要点解析

1. 数据流管理：Gutenberg 使用 Redux 风格的数据管理，所有数据操作都通过 store 进行

2. 异步操作处理：deleteEntityRecord 返回 Promise，可以方便地处理异步操作

3. 错误处理机制：通过 getLastEntityDeleteError 获取详细的错误信息

4. UI 反馈系统：使用 WordPress 标准的 Snackbar 通知组件提供一致的用户体验

最佳实践建议

1. 错误消息优化：根据不同的错误代码提供更具体的错误提示

2. 确认对话框：重要操作前添加确认对话框，防止误操作

3. 批量操作支持：考虑添加批量删除功能

4. 权限检查：在执行删除前检查用户权限

总结

通过本文，我们完整实现了 WordPress Gutenberg 中的页面删除功能，包括：

• 基础删除功能实现
• 操作状态反馈
• 错误处理机制
• 用户通知系统

这些技术不仅适用于页面删除，也可以应用于其他自定义内容的删除操作。理解这些核心概念后，开发者可以构建更复杂的数据管理界面。

gutenberg The Block Editor project for WordPress and beyond. Plugin is available from the official repository. 项目地址: https://gitcode.com/gh_mirrors/gu/gutenberg