立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 155|回复: 0

[Wordpress 通用教程] WordPress编辑器Gutenberg创建自定义Block模块的方法

[复制链接]

977

主题

2132

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
16245

推广达人宣传达人突出贡献荣誉管理论坛元老

QQ
发表于 2019-12-23 16:41:33 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在写这篇文章前,本来还在考虑写一个TinyMCE的教程,来自定义一个在后台编辑就可以所见即所得的模块功能。然而突然想到wordpress的新编辑器Gutenberg本身不就是以这样的目的来开发的吗?虽然Gutenberg现在还在测试阶段,但在今年晚些时候就将和WordPress5.0正式版一起上线。因此,就放弃了写TinyMCE教程的想法,直接上“如何创建Guntenberg自定义Block”的教程吧!
什么是Gutenberg
当你看到这篇文章时,无论WordPress是否已经更新到5.0,Gutenberg终将成为WordPress未来的编辑器。它是一个以JavaScript(React)为驱动的编辑器,以“Block 模块”的形式,让用户在写文章时能更方便的自定义文章排版。
  • 截止文章发布时,WP5.0尚未发布,Gutenberg以插件的形式向旧版本提供测试和开发
  • 详见:WordPress官方介绍
要实现的功能
在开始这个教程前,先介绍最终要实现的效果:我想要实现的是一个Tips功能,将有4种类型的Tip,分辨是四种颜色。用户插入模块后,可以编辑自己输入的文字内容。在鼠标选定此模块时,将出现4个Tip类型选择器,分别是蓝色(info)、绿色(success)、橙色(worning)、红色(error)。点击相应的色彩按钮后,用户输入的文字内容背景将变成对应的色彩。
实现此功能的原理:通过点击对应的色彩选择器,来修改class,从而改变tip的类型。如:class为“.tip.info”就显示蓝色、class为“.tip.success”就显示绿色。代码如下:
  1. <div class="tips info">
  2.     <p>蓝色效果示例</p>
  3. </div>

  4. <div class="tips success">
  5.     <p>绿色效果示例</p>
  6. </div>
复制代码
效果示例:

WordPress编辑器Gutenberg创建自定义Block模块的方法

WordPress编辑器Gutenberg创建自定义Block模块的方法
开始创建PHP部分
首先在主题的function.php中用注册需要的脚本、样式:
  1. function register_pandastudio_tips() {
  2.     wp_register_script(
  3.         'pandastudio-tips',
  4.         get_stylesheet_directory_uri().'https://static.wpdaxue.com/blocks/tips.js',
  5.         array( 'wp-blocks', 'wp-element' )
  6.     );

  7.     wp_register_style(
  8.         'pandastudio-tips',
  9.         get_stylesheet_directory_uri().'https://static.wpdaxue.com/blocks/tips.css',
  10.         array( 'wp-edit-blocks' )
  11.     );

  12.     register_block_type( 'pandastudio/tips', array(
  13.         'editor_script' => 'pandastudio-tips',
  14.         'editor_style'  => 'pandastudio-tips',
  15.     ) );
  16. }
  17. if (function_exists('register_block_type')) {
  18.     add_action( 'init', 'register_pandastudio_tips' );
  19. }
复制代码
在上面的代码中,将主题目录下的 tips.js 和 tips.css 引入到了Gutenberg编辑器中,由于WordPress5.0以前的版本在未安装Gutenberg插件的状态没有注册block的方法(register_block_type),因此需要在添加action的时候先判断一下是否存在这个方法,否则在老版本的WordPress中会报错。
CSS部分
接下来是CSS样式,这里仅作示例,可以写任何你喜欢的样式:
  1. .tip {
  2.     background: #eef6fd;
  3.     padding: 8px 20px !important;
  4.     border-left-width: 3px !important;
  5.     border-left-style: solid;
  6.     border-left-color: #38a3fd;
  7.     border-radius: 0 5px 5px 0 !important;
  8.     margin: 0 0 10px 0 !important;
  9.     box-shadow: none !important;
  10. }

  11. .tip p {
  12.     margin: 5px 0 !important;
  13. }

  14. .tip:before {
  15.     background: #38a3fd;
  16.     border-radius: 50%;
  17.     color: #fff;
  18.     content: "i";
  19.     font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  20.     font-size: 16px;
  21.     height: 21px;
  22.     line-height: 21px;
  23.     margin-left: -32px;
  24.     margin-top: 5px;
  25.     position: absolute;
  26.     text-align: center;
  27.     width: 21px;
  28. }

  29. .tip ol {
  30.     margin: 0;
  31. }

  32. .tip.success {
  33.     border-left-color: #86cc00;
  34.     background: #f0f8e5;
  35. }

  36. .tip.success:before {
  37.     background: #86cc00;
  38.     content: "√";
  39. }

  40. .tip.worning {
  41.     border-left-color: #ff7800;
  42.     background: #fcf2e9;
  43. }

  44. .tip.worning:before {
  45.     background: #ff7800;
  46.     content: "!";
  47. }

  48. .tip.error {
  49.     border-left-color: #ed0000;
  50.     background: #fcf1f1;
  51. }

  52. .tip.error:before {
  53.     background: #ed0000;
  54.     content: "×";
  55. }

  56. .tip.inlineBlock {
  57.     display: inline-block;
  58. }

  59. .tip.error p {
  60.     padding: 0 !important;
  61. }
复制代码
JavaScript(ES5)部分
接下来重点来了,由于Gutenberg是用JS驱动的,因此,最重要的是tip.js才对。先上代码,再做讲解:
  1. var el = wp.element.createElement,
  2.     registerBlockType = wp.blocks.registerBlockType,
  3.     RichText = wp.blocks.RichText;

  4. var el = wp.element.createElement,
  5.     registerBlockType = wp.blocks.registerBlockType,
  6.     RichText = wp.blocks.RichText;

  7. registerBlockType('pandastudio/tips', {
  8.     title: '提示框',
  9.     icon: 'info',
  10.     category: 'layout',
  11.     attributes: {
  12.         content: {
  13.             type: 'array',
  14.             source: 'children',
  15.             selector: 'p',
  16.         },
  17.         typeClass: {
  18.             source: 'attribute',
  19.             selector: '.tip',
  20.             attribute: 'class',
  21.         }
  22.     },
  23.     edit: function(props) {
  24.         var content = props.attributes.content,
  25.             typeClass = props.attributes.typeClass || 'tip info',
  26.             isSelected = props.isSelected;

  27.         function onChangeContent(newContent) {
  28.             props.setAttributes({ content: newContent });
  29.         }

  30.         function changeType(event) {
  31.             var type = event.target.className;
  32.             props.setAttributes({ typeClass: 'tip ' + type });
  33.         }

  34.         var richText = el(
  35.             RichText, {
  36.                 tagName: 'p',
  37.                 onChange: onChangeContent,
  38.                 value: content,
  39.                 isSelected: props.isSelected,
  40.                 placeholder: '请输入...'
  41.             });

  42.         var outerhtml = el('div', { className: typeClass }, richText);

  43.         var selector = el('div', { className: 'panda tipSelector' }, [
  44.             el('button', { className: 'info', onClick: changeType }, '蓝色'),
  45.             el('button', { className: 'success', onClick: changeType }, '绿色'),
  46.             el('button', { className: 'worning', onClick: changeType }, '橙色'),
  47.             el('button', { className: 'error', onClick: changeType }, '红色'),
  48.         ])

  49.         return el('div', {}, [outerHtml, isSelected && selector]);

  50.     },

  51.     save: function(props) {
  52.         var content = props.attributes.content,
  53.             typeClass = props.attributes.typeClass || 'tip info';

  54.         var outerHtml = el('div', { className: typeClass }, el('p', {}, content));

  55.         return el('div', {}, outerHtml);
  56.     },
  57. });
复制代码
wp.element.createElement 是一个创建dom元素的方法,由于Gutenberg是基于React的,所以这实质上就是React的方法。由于我们写的是ES5的写法,所以才用得到。如果用JSX来写,然后再编译的话,就不需要了。
registerBlockType 是WordPress在Gutenberg中提供的创建块的方法,直接用就好。到本文发布为止,官方还没有关于此方法的详细文档(正式发布之后应该就有了)。
RichText 官方的说法是提供一个供用户编辑的输入框。类似于React的Controlled Components。
registerBlockType的icon参数:图标可以任意从WordPress的Dashicons里面选择。
attributes 用于定义从保存的内容中提取Block属性值的策略。提供了一种从保存的标记映射到Block的JS表示形式的方法
可以看到,edit和save是两个最复杂的参数,前者提供了在WordPress后台的Gutenberg中如何渲染和显示Block,后者提供了如何在WordPress中将Block存储和在前台显示。
Edit:
在这一个示例中,我创建了一个outerHtml来放置包含tips类型的div,内部的用户编写的内容则是用RichText创建的:
<div class="tips info">  <!-- 这是outerHtml -->    <p>蓝色效果示例</p>    <!-- 这是RichText --></div>
并且创建了4个button按钮,在onClick点击时触发changeType事件,将按钮的class添加到outerHtml的class里面去。在edit最后return的时候通过isSelected来判断Block是否被用户选中,只有被选中的情况下,才显示Tips类型选择的4个button按钮。
SAVE:
保存和显示时候的状态就相对简单多了,只需要用创建dom的createElement方法创建出最终结果的html即可。
以上就是开发这样一个带有选项功能的Gutenberg Block的简单方式。由于大量运用了比较新的前端技术,因此WP开发者需要好好学习才可以跟上步伐咯。

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、15056962695免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!


加入道勤网VIP-www.daoqin.net-享受建站指导服务!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条



 
 
技术支持
在线客服
点击这里给我发消息
点击这里给我发消息
道勤建站群:
3群建站-美工交流-道勤
道勤美工群:
3群建站-美工交流-道勤
工作时间:
8:00-18:00
客服热线:
15056962695
官方微信扫一扫
发布主题 上个主题 下个主题 快速回复 返回列表 联系我们 官方QQ群

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号|赞助我们  

GMT+8, 2020-1-26 08:49

Powered by DaoQin! X3.2 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表