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

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

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

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

加载古腾堡自定义模板

1
2
3
4
5
6
7
8
9
10
11
//加载古腾堡自定义模板

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/block

    register_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



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




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
//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 class="demo-class">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》。
		    					    			
			    					    					    				    					    			
 原文链接：https://xiaohost.com/1451.html，转载请注明出处。