WordPress古腾堡Gutenberg添加彩色渐变框

新的编辑器采用Block块的方式插入文章，把内容分成各种块，方便内容的调整和修改，同时也大大的扩展了编辑器的功能。

目前相关的中文内容还是很少，需要了解更多内容可以参考官方介绍

• Gutenberg官方网站
• Gutenberg 开发API
• WordPress 官方图标

如图所示，通过创建自定义块可以更方便的调整文章内容功能和效果，以实现上图的自定义块为例，一步一步的创建。

创建自定义的过程大致分为三步，只要按照我的教程一步一步的来，还是很简单的

1. 在function中注册相关的脚本文件
2. 编辑块Block的JS文件
3. 编辑块的css外观

找到你主题的 function.php文件，在最下方添加以下代码：

1. // 古腾堡编辑器扩展
2. function duxq_block() {
3. wp_register_script( //引入核心js文件
4. 'duxq_block',
5. get_stylesheet_directory_uri().'/gradient/gradient.js',
6. array( 'wp-blocks', 'wp-element' )
7. );
9. wp_register_style( //引入css外观样式文件
10. 'duxq_block',
11. get_stylesheet_directory_uri().'/gradient/gradient.css',
12. array( 'wp-edit-blocks' )
13. );
15. register_block_type( 'duxq/block', array(
16. 'editor_script' => 'duxq_block',
17. 'editor_style' => 'duxq_block',
18. ) );
19. }
20. if (function_exists('register_block_type')) { //判断是否使用古腾堡编辑器
21. add_action( 'init', 'duxq_block' );
22. }

• wp_register_script () 引入核心的js文件
• wp_register_style() 引入css外观样式文件
• 最后我们检测一下是否使用古腾堡，然后排队注册

块是的核心就是JS文件控制的，要实现的所有功能也是靠这个就是文件

1. (function(blocks, editor, element, components, _) {
2. var el = element.createElement;
3. var RichText = editor.RichText;
4. var AlignmentToolbar = editor.AlignmentToolbar;
5. var BlockControls = editor.BlockControls;
6. var Fragment = element.Fragment;
8. /*---------渐变框自定义块---------*/
9. blocks.registerBlockType('aduxq/button', {
10. title: '渐变框',
11. category: 'layout',
12. icon: {
13. src: 'marker',
14. foreground: '#20a0ff'
15. },
16. description: '八种不同的渐变框',
17. attributes: {
18. content: {
19. type: 'array',
20. source: 'children',
21. selector: 'div',
22. },
23. alignment: {
24. type: 'string',
25. },
26. typeClass: {
27. source: 'attribute',
28. selector: '.an_q',
29. attribute: 'class',
30. }
31. },
32. edit: function(props) {
33. var content = props.attributes.content,
34. typeClass = props.attributes.typeClass || 'gradient b1',
35. alignment = props.attributes.alignment,
36. isSelected = props.isSelected;
37. function onChangeContent(newContent) {
38. props.setAttributes({
39. content: newContent
40. })
41. }
42. function changeType(event) {
43. var type = event.target.className;
44. props.setAttributes({
45. typeClass: 'an_q ' + type
46. })
47. }
48. function onChangeAlignment(newAlignment) {
49. props.setAttributes({
50. alignment: newAlignment
51. })
52. }
53. var richText = el(RichText, {
54. tagName: 'div',
55. onChange: onChangeContent,
56. value: content,
57. isSelected: props.isSelected,
58. placeholder: '按钮'
59. });
60. var outerHtml1 = el('div', {
61. className: typeClass
62. },
63. richText);
64. var outerHtml = (el(element.Fragment, null, el(BlockControls, null, el(AlignmentToolbar, {
65. value: alignment,
66. onChange: onChangeAlignment,
67. })), outerHtml1));
68. var selector = el('div', {
69. className: 'duxq anz'
70. },
71. [el('button', {
72. className: 'gradient b1',
73. onClick: changeType
74. },
75. ''), el('button', {
76. className: 'gradient b2',
77. onClick: changeType
78. },
79. ''), el('button', {
80. className: 'gradient b3',
81. onClick: changeType
82. },
83. ''), el('button', {
84. className: 'gradient b4',
85. onClick: changeType
86. },
87. ''), el('button', {
88. className: 'gradient b5',
89. onClick: changeType
90. },
91. ''), el('button', {
92. className: 'gradient b6',
93. onClick: changeType
94. },
95. ''), el('button', {
96. className: 'gradient b7',
97. onClick: changeType
98. },
99. ''), el('button', {
100. className: 'gradient b8',
101. onClick: changeType
102. },
103. ''), ]);
105. return el('div', {
106. style: {
107. textAlign: alignment
108. }
109. },
110. [outerHtml, isSelected && selector])
111. },
112. save: function(props) {
113. var content = props.attributes.content,
114. alignment = props.attributes.alignment,
115. typeClass = props.attributes.typeClass || 'gradient b1';
116. if (alignment) {
117. var outerHtml = el('div', {
118. style: {
119. textAlign: alignment
120. }
121. },
122. el('div', {
123. className: typeClass
124. },
125. content))
126. } else {
127. var outerHtml = el('div', {
128. className: typeClass
129. },
130. content)
131. }
132. return outerHtml
133. },
134. })
135. })(window.wp.blocks, window.wp.editor, window.wp.element, window.wp.components, window._, );