WordPress 为什么要引入新编辑器 Gutenberg？

点击右上方，关注开源中国OSC头条号，获取最新技术资讯

据 W3Techs 数据显示，有将近 1/3 的网站运行在 WordPress 之上。不过这十多年来，WordPress 的编辑体验并未发生太大变化，引入 Gutenberg（古腾堡）的目的就是为了改变这种现状。

WordPress 当前存在的问题：

破碎的生态

WordPress 的生态是围绕着主题、组件、短代码、菜单选项、页面构建器（page builder）等元素组成的一个破碎的系统，但这些元素又不能不存在，因为它们是构建网站的最佳方式。它们的存在正是为了弥补了 WordPress 自身在满足用户需求方面的不足。

虽然经验丰富的用户可能已习惯这种情况，但对于新用户来说，会有相对糟糕的体验。

Gutenberg 旨在标准化和添加 WordPress 缺乏的这些基础元素。

Gutenberg VS Page Builders

Gutenberg 将会杀死 Page Builder 吗？答案是肯定的，但或许不是你所想的那样。

Page Builder 页面构建器提供灵活的界面（模块、拖放等），为客户提供超出 WordPress 核心的高级定制功能。重申一下，页面构建器提供界面的原因是因为 WordPress 本身没有这个功能。

Gutenberg 的出现，从某种意义上说，可以完全取代 Page Builder 的界面功能。而且由于是 WordPress 5.0 及以上版本默认自带的编辑器，随着时间的推移，其使用率定然会高于其他所有 Page Builder 。不过 Page Builder 也并非就会被“杀死”，未来可以专注于以创新的方式建立最佳的定制体验。毕竟，客户永远不满足于现状，他们的需求在升级，对定制的要求也在不断提高。

当然，Gutenberg 也有很长的路要走。它不仅需要完善体验，倾听社区的意见，解决相关的问题，以赢得社区的信任，托管者也需要花时间去说服他们的客户。Gutenberg 能否帮助 WordPress 取得更好的成绩，我们拭目以待！

内容主要整理自：profitpress

开源社区OSC头条号，每日推送最新优质的技术类文章，涵盖外文翻译，软件更新，技术博客等优质内容。关注开源社区OSC头条号，每日获取最新技术资讯，点击“了解更多”阅读原文章。

WordPress给古腾堡编辑器添加自定义模块

古腾堡编辑器很多站长都表示用不习惯，但是我个人还是挺喜欢用这个编辑器的。比起之前那个默认的输入框， 古腾堡编辑器实用多了、

关于古腾堡编辑器，官方之前给了一个初步的文档，但是那个文档是以插件化为教程进行的，对于主题设计者而言，更希望在自己的主题里直接加入古腾堡自定义模块比较方便，因此本文的方向是在主题里直接往古腾堡编辑器里插入自定义模块。

今天我们来了解下如何给古腾堡编辑器添加自定义模块。

加载古腾堡自定义模板

//加载古腾堡自定义模板function my_gutenberg_block(){//注册古腾堡编辑器wp_register_script( \\\'block-js\\\', get_template_directory_uri() . \\\'/extends/src/blocks.js\\\', array(\\\'wp-blocks\\\', \\\'wp-element\\\', \\\'wp-editor\\\', \\\'wp-i18n\\\'), \\\'1.0.0\\\' );//插入模块//fishtheme/block可自定义, 比如: demo/blockregister_block_type( \\\'fishtheme/block\\\', array(\\\'editor_script\\\' => \\\'block-js\\\') );}add_action( \\\'init\\\', \\\'my_gutenberg_block\\\' );

新建blocks.js

在目前使用的WordPress主题目录下，新建一个src的文件夹，并新建blocks.js。

blocks.js文件路径可以自定义，注意把上面代码里的对应路径也改一下就行。

编辑blocks.js

这个是古腾堡核心文件，基本所有的功能都在这里。

//js代码//引入对应方法, 需要注意的是这里引用了4个方法, 那么在底部也需要window.wp.回调这4个方法//这4个方法的来源是functions.php里的wp_register_script时array()里传入, 需要注意一一对应(function (blocks, element, editor, i18n) {    var el = element.createElement; //用于输出HTML    var RichText = editor.RichText; //用于获取文本输入块    blocks.registerBlockType(\\\'gutenberg-examples/example-03-editable\\\', {        title: \\\'测试模块\\\', //标题        icon: \\\'universal-access-alt\\\', //图标        category: \\\'layout\\\', //对应栏目        attributes: { //模块的属性            content: {                type: \\\'array\\\',                source: \\\'children\\\',                selector: \\\'p\\\',            },        },        //编辑时        edit: function (props) {            //获取模块输入的值            var content = props.attributes.content;            //点击输入框时用的方法            function onChangeContent(newContent) {                //将输入框里的内容输出到模块属性里                props.setAttributes({ content: newContent });            }            //返回HTML            //el的方法格式为: el( 对象, 属性, 值 ); 可以相互嵌套            //例如:            // el(            //     \\\'div\\\',            //     {            //         className: \\\'demo-class\\\',            //     },            //     \\\'DEMO数据\\\'            // );            // 输出为: <div >DEMO数据</div>            return el(                RichText,                {                    tagName: \\\'p\\\',                    className: props.className,                    onChange: onChangeContent,                    value: content,                }            );        },        //保存时        save: function (props) {            //保存时返回的HTML            return el(RichText.Content, {                tagName: \\\'p\\\', value: props.attributes.content,            });        },    });}(    window.wp.blocks,    window.wp.element,    window.wp.editor,    window.wp.i18n));

查看效果

以上步骤完成后，在编辑器页面刷新，然后添加区块，看看是不是添加成功了。

此为官网提供的demo，如果想更深一步的开发自己需要的复杂的模块，请直接参考文章开始的《Block Editor Handbook》。