在旧版本只需要使用post_submitbox_misc_actions就能很方便的对提交区块做定制。新版wordpress切换成了"古腾堡"编辑器，这个钩子对于新编辑器无效。下面我们来看看应该对新编辑器做定制。

案例需求

每篇文章都有一个设置-是否提交到百度站长收录。

概括下就是
1. 需要在”设置区“原”发布区“增加一个开关并且传到后端做储存。


2. 每次进入编辑器要拿到数据库里储存的相应状态。

实现

官方文档建议把无关POST的字段放入meta中并储存在wp_postmeta表里。

思路
- 在后端添加meta相关字段并设置默认值
- 前端能拿到数据并呈现
- 前端交互能联动控件做出相应改变
- 前端数据提交以后后端能收到并处理

PHP部分

使用register_post_meta方法来注册一个自定义的meta字段

//添加 push2baidu 字段
add_action('init', function() {
    register_post_meta('post', 'push2baidu', [
            'show_in_rest' => true,
            'type' => 'boolean',
            'single' => true,
            'default' => true,
    ]);
});

添加所需js

//按需加载依赖
wp_enqueue_script(
        'gutenberg_plugin',
        plugin_dir_url( __FILE__ ).'admin/assets/js/gutenberg.js',
        ['wp-edit-post', 'wp-plugins', 'wp-i18n', 'wp-element', 'wp-data', 'wp-components', 'wp-compose'],
        0.1
);

JS部分

保存到上面加载依赖的路径

//以ES5方式呈现方便直接运行
const {
  element: { createElement: el },
  i18n: { __ },
  plugins: { registerPlugin },
  editPost: { PluginPostStatusInfo },
  components: { ToggleControl },
  data: { useSelect },
  coreData: { useEntityProp },
} = wp;

registerPlugin('post-status-info-plugin', {
  render: () => {
    const postType = useSelect((select) => select('core/editor').getCurrentPostType(), []);
    const [ meta, setMeta ] = useEntityProp('postType', postType, 'meta');
    return el(
      PluginPostStatusInfo,
      { },
      el(
        ToggleControl,
        {
          name: 'push2baidu',
          label: __( '提交给百度站长快速收录' ),
          checked: meta['push2baidu'],
          onChange: (push2baidu) => {
            setMeta(
              Object.assign( {}, meta, { push2baidu })
            );
          },
        }
      )
    );
  }
});

数据流向

• 显示：前端通过数据绑定，js代码所见既是useEntityProp方法取到数据库里设置的meta字段“push2baidu”，如果为empty则使用register_post_meta设置的default值(例为true)，组件渲染既开关状态为on。
• 操作：当点击开关之后，JS走到组件的onChange方法，通过数据绑定设置了该组件的值产生联动。
  
• 后端：提交时请求会带上这个字段发送到后端，由于之前后端已经注册过这个meta字段所以直接”新增/修改“wp_postmeta这个表里相关记录。
  

感受

觉得在后台使用这种前后端分离的方式做开发非常的舒服，只是对php程序员提出了更高的js方面的要求（起码要与时俱进的去学习React或者习惯JSX的写法，还要折腾一大堆的前端环境相关的东西）。组件化开发的同时其实可以抛弃掉大量css的编写，让ui更加统一和谐。

转载请注明：攻壳tech » 新版wordpress编辑器增加字段和相关显示组件