首页 WordPress教程 WordPress给古腾堡编辑器添加自定义模块
正文 评论

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》。

-=||=-收藏赞 (0)
更多主题
单栏极简文艺WordPress博客主题:Diaspora主题
¥ 0 关注:20,837
详情
简约黑白WordPress个人博客主题:Personal主题
¥ 0 关注:20,642
详情
v1.0.0
小程序收录免费WordPress主题:XCX主题
¥ 0 关注:20,570
详情
v1.0.0
一款简约单栏的免费WordPress博客主题:itheme主题
¥ 0 关注:18,499
详情
功能丰富切轻量的WordPress虚拟资源主题:Rizhuti主题
¥ 599 关注:18,414
详情
大气优雅免费WordPress博客主题:HONEY主题
¥ 0 关注:15,293
详情
回复
暂无评论

不要再留垃圾评论了,主题君整理资源不容易,留几句鼓励的话吧。