学会 wordpress 古腾堡区块开发

本文包含注册添加自定义的 wordpress 古腾堡编辑器区块分类和添加自定义的 wordpress 古腾堡编辑器区块，至于为什么要写这篇文章呢？大概就是 WordPress Gutenberg 已经成为 wordpress 中可视化的重要组成部分，国外的开发者有的已经出开发系列教程了。国内的开发者要么都是闷声干大事，专心写自己的 wordpress 主题，集成到主题上赚钱，不出教程；要么就是几个代码丢给你，告诉你这是示例，你去研究，我们自己小白研究又不太懂，了解得不通透；要么啊吧啊吧教你如何使用 Gutenberg 编辑器，还占大部分。总结来说，国内的教程少且不精。在我学习了 1-2 天之后，决定自己写个备忘录，也帮助其他开发者。

好多主题都内置了许多古腾堡区块，并且有的还进行了分类，把他们的区块放在第一，方便用户使用，比如子比主题就是这样的。

这篇文章就教大家如何从 0 开始，建立自己的古腾堡区块，并添加分类。看完这篇文章，你至少能实现一个如下的成果，当然，你也可以举一反三，实现自己的可视化区块。

一、添加古腾堡编辑器区块分类

官方也有文档，但我建议直接看我的代码，如果你看不懂我的代码，那官方的也别看了，选择放弃。

1、代码

function KEKC_block_categories($categories, $post)
{
    $kekc_category = array(
        'slug' => 'kekc',
        'title' => __('KEKC 博客', 'kekc'),
        'icon'  => null,
    );
    $addCategory[0] = $kekc_category ;
    $categories = array_merge($addCategory, $categories);
    return $categories;
}
if (version_compare(get_bloginfo('version'), '5.8', '>=')) {
    add_filter('block_categories_all', 'KEKC_block_categories', 999999, 2);
} else {
    add_filter('block_categories', 'KEKC_block_categories', 999999, 2);
}

2、解释

整体说一下代码实现的功能：添加了一个别名为“kekc”，标题为“KEKC 博客”的古腾堡区块分类。

代码中“$kekc_category”变量是我们要添加的分类；其中“slug”是别名，相当于其他地方调用的 key 值；“title”是显示的标题，其中__(‘内容’, ‘内容说明’)是一种 wordpress 中的写法，在这种写法中翻译文件调用这个内容来对内容进行替换；“icon”是分类的标题。

至于为什么要进行 wordpress 版本的判断，是因为官方在 5.8 的时候对古腾堡编辑器的过滤钩子进行了调整，5.8 及其以上，不再支持 block_categories，而 5.8 以前的版本，不支持 block_categories_all。

二、注册添加古腾堡区块

注册添加古腾堡区块是通过引入前端 js 添加的。其中主要的是 js 文件来新建区块的。

需要两步实现：

1、步骤

引入 js 和 css

使用 wp_register_script 引入 js，使用 wp_register_style 引入 css

注册古腾堡区块

通过 register_block_type 注册区块

2、代码

wp_register_script(
  'kekc-script',
  plugins_url( 'kekc/script.js', __FILE__ ),
  array( 'wp-element', 'wp-blocks', 'wp-editor' )
);

wp_register_style(
  'kekc-style',
  plugins_url( 'kekc/style.css', __FILE__ ),//url 地址
  array(),
  filemtime( plugin_dir_path( __FILE__ ) . 'kekc/style.css' )//版本
);

register_block_type( 'kekc/kekc', array(
  'editor_script' => 'kekc-script',
  'editor_style' => 'kekc-style',
  'style' => 'gutenpride-style'
) );//第一个参数为命名空间/块别名

3、上方 2 中的相关文件

css（就普通的 css，包含的 gilbert 字体自己找一个其他的）：

@font-face {
    font-family: Gilbert;
    src: url(gilbert-color.otf);
    font-weight: bold;
}

.kekc {
  font-family: Gilbert;
  font-size: 64px;
}

js（属于核心文件了，）：

( function( wp ) {
  const el = wp.element.createElement;
  const registerBlockType = wp.blocks.registerBlockType;
  const PlainText = wp.editor.PlainText;

  registerBlockType( 'kekc/kekc', {
    title: 'KEKC 博客',
    icon: 'heart',
    category: 'kekc',/** 这里就是要绑定上面注册的别名，也可以填写已经有的分类，如果你对添加古腾堡编辑器区块分类 */
    attributes: {
      message: {
        type: 'string',
        default: '❤️  我爱 KEKC 博客',
      }
    },

    edit: function( props ) {
      const { message } = props.attributes;
      const updateMessage = message => props.setAttributes( { message: message } );

      return el( 'div', { className: 'kekc' },
        el( PlainText, {
            value: message,
            onChange: updateMessage,
            placeholder: '请输入内容！',
          }
        )
      );
    },

    save: function( props ) {
      const { message } = props.attributes;
      return el( 'div', { className: 'kekc' }, message );
    },
  } );
} )( window.wp );

看完上面的，你大概了解了其添加的过程，但是对于核心文件 js 也是一知半解的。

4、js 文件简单讲解

有两个动作，分别是 edit 和 save，edit 是编辑时在编辑器中展示的 html 内容，而 save 是要保存的 html 内容，edit 和 save 都可以返回静态的 html 内容，这里的 js 配合上前面 1 中《引入 js 和 css》中引入的 css 来控制样式，其中 props 为传递的参数。如果你还想深入了解，可以购买附加资料，快速深入学习。

5、附加资料

一些让你彻底了解并学会 WordPress Gutenberg Block 开发的资料，这些资料我都看完了并且觉得确实非常棒，但请注意，是一些国外开发者出的 4 个插件和 2 个视频，视频需要翻墙、有中文字幕。

其他附加资料链接：https://www.hmmoo.com/wordpress/wordpresstutorials/80.html