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。

      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)

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

      分类:WordPress教程

      链接:https://www.ztjun.com/1451.html

      版权:

好久不见,甚是想念

相关文章

评论 暂无评论