古腾堡编辑器很多站长都表示用不习惯，但是我个人还是挺喜欢用这个编辑器的。比起之前那个默认的输入框， 古腾堡编辑器实用多了、关于古腾堡编辑器，官方之前给了一个初步…
古腾堡编辑器很多站长都表示用不习惯，但是我个人还是挺喜欢用这个编辑器的。比起之前那个默认的输入框， 古腾堡编辑器实用多了、
关于古腾堡编辑器，官方之前给了一个初步的文档，但是那个文档是以插件化为教程进行的，对于主题设计者而言，更希望在自己的主题里直接加入古腾堡自定义模块比较方便，因此本文的方向是在主题里直接往古腾堡编辑器里插入自定义模块。
今天我们来了解下如何给古腾堡编辑器添加自定义模块。
加载古腾堡自定义模板
//加载古腾堡自定义模板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》。