通过这篇wordpress教程,你就能了解一个古登堡编辑器区块时如何制作的了。

作为目前WordPress主推的新版本编辑器,古腾堡编辑器前途无量,但默认的一些古腾堡编辑器的区块不够我们日常编辑文章,这个时候,我们就可以开发一些自己的古腾堡编辑器区块,方便我们日常编辑文章。

通过这篇wordpress开发教程,你就能开发自己的古腾堡编辑器区块了,当然。能够有效的自定义模块,才是古腾堡编辑器最有优势的地方。

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

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

怎么给古腾堡编辑器添加自定义区块? - WordPress开发-Npcink

加载古腾堡自定义模板

  1. //加载古腾堡自定义模板
  2. function my_gutenberg_block(){
  3. //注册古腾堡编辑器
  4. 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' );
  5. //插入模块
  6. //fishtheme/block可自定义, 比如: demo/block
  7. register_block_type( 'fishtheme/block', array(
  8. 'editor_script' => 'block-js'
  9. ) );
  10. }
  11. add_action( 'init', 'my_gutenberg_block' );

新建blocks.js

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

blocks.js文件路径可以自定义,注意把上面代码里的对应路径也改一下就行。

编辑blocks.js

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

  1. //js代码
  2. //引入对应方法, 需要注意的是这里引用了4个方法, 那么在底部也需要window.wp.回调这4个方法
  3. //这4个方法的来源是functions.php里的wp_register_script时array()里传入, 需要注意一一对应
  4. (function (blocks, element, editor, i18n) {
  5.  var el = element.createElement; //用于输出HTML
  6.  var RichText = editor.RichText; //用于获取文本输入块
  7.  blocks.registerBlockType('gutenberg-examples/example-03-editable', {
  8.  title: '测试模块', //标题
  9.  icon: 'universal-access-alt', //图标
  10.  category: 'layout', //对应栏目
  11.  attributes: { //模块的属性
  12.  content: {
  13.  type: 'array',
  14.  source: 'children',
  15.  selector: 'p',
  16.  },
  17.  },
  18.  //编辑时
  19.  edit: function (props) {
  20.  //获取模块输入的值
  21.  var content = props.attributes.content;
  22.  //点击输入框时用的方法
  23.  function onChangeContent(newContent) {
  24.  //将输入框里的内容输出到模块属性里
  25.  props.setAttributes({ content: newContent });
  26.  }
  27.  //返回HTML
  28.  //el的方法格式为: el( 对象, 属性, 值 ); 可以相互嵌套
  29.  //例如:
  30.  // el(
  31.  // 'div',
  32.  // {
  33.  // className: 'demo-class',
  34.  // },
  35.  // 'DEMO数据'
  36.  // );
  37.  // 输出为: <div class="demo-class">DEMO数据</div>
  38.  return el(
  39.  RichText,
  40.  {
  41.  tagName: 'p',
  42.  className: props.className,
  43.  onChange: onChangeContent,
  44.  value: content,
  45.  }
  46.  );
  47.  },
  48.  //保存时
  49.  save: function (props) {
  50.  //保存时返回的HTML
  51.  return el(RichText.Content, {
  52.  tagName: 'p', value: props.attributes.content,
  53.  });
  54.  },
  55.  });
  56. }(
  57.  window.wp.blocks,
  58.  window.wp.element,
  59.  window.wp.editor,
  60.  window.wp.i18n
  61. ));

查看效果

以上步骤完成后,在编辑器页面刷新,然后添加区块,看看是不是添加成功了。

此为官网提供的demo。

现在起,让您的站点焕然一新

日主题FheRf子主题,一次购买 永久使用

如果点击咨询购买按钮无法唤起QQ,请手动添加QQ1156488585(请注明主题咨询)

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源