WordPress Gutenberg 插件侧边栏开发指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00880/article/details/148415128

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 编辑器中，插件侧边栏是一个强大的扩展点，允许开发者为编辑器右侧区域添加自定义功能面板。本文将详细介绍如何从零开始创建一个功能完整的插件侧边栏。

核心概念

插件侧边栏是 Gutenberg 编辑器的重要组成部分，它位于编辑器右侧区域，通过点击顶部工具栏的图标展开。与区块设置侧边栏不同，插件侧边栏是完全独立的自定义区域。

开发准备

在开始开发前，请确保：

已创建基本的 WordPress 插件结构
熟悉基本的 JavaScript 和 PHP 开发
了解 React 基础概念（Gutenberg 编辑器基于 React 构建）

开发步骤详解

第一步：创建基础侧边栏结构

首先需要注册一个基本的侧边栏框架：

(function(wp, React) {
  const el = React.createElement;
  const registerPlugin = wp.plugins.registerPlugin;
  const PluginSidebar = wp.editor.PluginSidebar;

  registerPlugin('my-plugin-sidebar', {
    render: function() {
      return el(
        PluginSidebar,
        {
          name: 'my-plugin-sidebar',
          icon: 'admin-post',
          title: '我的插件侧边栏',
        },
        '这里将放置内容'
      );
    },
  });
})(window.wp, window.React);

对应的 PHP 注册代码：

function sidebar_plugin_register() {
  wp_register_script(
    'plugin-sidebar-js',
    plugins_url('plugin-sidebar.js', __FILE__),
    array('wp-plugins', 'wp-editor', 'react')
  );
}
add_action('init', 'sidebar_plugin_register');

function sidebar_plugin_script_enqueue() {
  wp_enqueue_script('plugin-sidebar-js');
}
add_action('enqueue_block_editor_assets', 'sidebar_plugin_script_enqueue');

第二步：添加样式和交互控件

接下来我们为侧边栏添加样式和输入控件：

(function(wp) {
  const el = React.createElement;
  const registerPlugin = wp.plugins.registerPlugin;
  const PluginSidebar = wp.editor.PluginSidebar;
  const TextControl = wp.components.TextControl;

  registerPlugin('my-plugin-sidebar', {
    render: function() {
      return el(
        PluginSidebar,
        {
          name: 'my-plugin-sidebar',
          icon: 'admin-post',
          title: '我的插件侧边栏',
        },
        el(
          'div',
          { className: 'plugin-sidebar-content' },
          el(TextControl, {
            label: '元数据字段',
            value: '初始值',
            onChange: function(content) {
              console.log('内容已变更为', content);
            },
          })
        )
      );
    },
  });
})(window.wp);

添加基本样式（plugin-sidebar.css）：

.plugin-sidebar-content {
  padding: 16px;
}

更新 PHP 依赖：

wp_register_script(
  'plugin-sidebar-js',
  plugins_url('plugin-sidebar.js', __FILE__),
  array('react', 'wp-plugins', 'wp-editor', 'wp-components')
);

第三步：注册元数据字段

在 PHP 中注册元字段：

register_post_meta('post', 'sidebar_plugin_meta_block_field', array(
  'show_in_rest' => true,
  'single' => true,
  'type' => 'string',
));

第四步：连接输入控件与元数据

使用 WordPress 数据钩子连接前端与后端：

const MetaBlockField = function() {
  const metaFieldValue = wp.data.useSelect(function(select) {
    return select('core/editor').getEditedPostAttribute('meta')['sidebar_plugin_meta_block_field'];
  }, []);

  return el(TextControl, {
    label: '元数据字段',
    value: metaFieldValue,
    onChange: function(content) {
      console.log('内容已变更为', content);
    },
  });
};

第五步：实现数据双向绑定

完整实现数据更新功能：

const MetaBlockField = function() {
  const metaFieldValue = wp.data.useSelect(function(select) {
    return select('core/editor').getEditedPostAttribute('meta')['sidebar_plugin_meta_block_field'];
  }, []);

  const editPost = wp.data.useDispatch('core/editor').editPost;

  return el(TextControl, {
    label: '元数据字段',
    value: metaFieldValue,
    onChange: function(content) {
      editPost({
        meta: { sidebar_plugin_meta_block_field: content },
      });
    },
  });
};