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

2021-03-08 0 142

wordpress主题wordpress教程_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/block
	register_block_type( \'fishtheme/block\' array(
		\'editor_script\' => \'block-js\'
	) );
}
add_action( \'init\' \'my_gutenberg_block\' );

新建blocks.js

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

wordpress教程wordpress建站_WordPress免插件设置SMTP邮件功效教程

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

一直被模仿,从未被超越!

常见问题
  • 本站所有源码都是通过互联网采集而来,不保证源码得完整性和可用性,如果介意请勿购买!
查看详情
  • 本站源码不提供任何服务帮助。本站只是提供源码,不提供服务帮助!
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务