WordPress Gutenberg Block扩展开发案例

因工作需要，设计一个block工具，丰富Gutenberg编辑器，解放自己需要协助编辑添加form表单的工作。

需求与设计

花费一些时间先粗略阅读下官方文档，了解大概的结构，然后设计流程和效果草图。

设计稿

脑海中要有一个大概的草图，然后绘制出来，后期根据

环境与工具

• windows7 PHPStudy
• php7.2.x
• WordPress5.2.4
• nodejs 6.14.4 – 调试javascript代码
• 安装 create-guten-block，用于省略PHP代码编写，专注于 js 开发 (老实说，多一些这些代码生成工具，感觉自己要失业)
• 开始开发测试版本：

npx create-guten-block form-block

cd form-block
npm start

实现

Javascript 代码

import './editor.scss';
import './style.scss';

const {
	__
} = wp.i18n;
const {
	registerBlockType,
	query
} = wp.blocks;

const el = wp.element.createElement,
Fragment = wp.element.Fragment,
{ InspectorControls, InnerBlocks } = wp.editor,
{ PanelBody, TextControl, SelectControl} = wp.components;

registerBlockType('cgb/form-custom', {
	title: __('Form custom'),
	description: __('This a custom form column.'),
	category: 'layout',
	icon: 'feedback',
	keywords: [
		__('shopping cart'),
		__('form'),
		__('layout')
	],
	attributes: {
		action: {
			type: 'string',
			default: '/order/cart_add.php'
		},
		method: {
			type: 'string',
			default: 'GET'
		},
        prt: {
        	type: 'number',
        	default: 1
        }
	},
	edit: function(props) {
		const { attributes: { 
				action, method, prt 
			}, 
			setAttributes 
		} = props;
		console.log(props);
		return [
			el(InspectorControls, null, 
				el(Fragment, null, 
					el(PanelBody, 
						{ title : __('Form Settings') },
						el('div', { className: 'form-column-setting'},
							el(SelectControl, {
								label: __('Method'),
								type: 'string',
								value: method,
								options:  [ 
									{value:'GET', label: 'get'},
									{value:'POST', label: 'post'}, 
									{value:'DELETE', label: 'delete'}, 
									{value:'PUT', label: 'put'} ],
								onChange: function(option_v){
									setAttributes({method:option_v});
									return option_v;
								}
							}),
							el(SelectControl, {
								label: 'Product',
								type: 'string',
								value: prt,
								options:  [ 
									{value:1, label: 'ORF cDNA'}, 
									{value:23, label: 'Lentivirus'}, 
									{value:33, label: 'AAV'} ],
								onChange: function(prt){
									setAttributes({prt:prt});
									return prt;
								}
							}),
							el(TextControl, {
								label: 'Link',
								type: 'string',
								value: action,
								onChange: function(action){
									setAttributes({action:action});
									return action;
								}
							})
						)
					)
				)
			), // settings
			el(Fragment, null, 
				el('form', // create from
					{ 
						action: action, 
						method: method, 
						className:'editor-form-display' }, // attributes 
					el('div', {
						className: 'innerblocks-wrap',
						style: {
	                        minHeight: '0'
                      	}
					},
					el(InnerBlocks,{template:''})
					), // create div
					el('input', {type:'hidden', name:'prt', value: 1}),  // create hidden input
					el('button', {type:'button', name:'submit', className: 'form-btn form-btn-default'}, 'add to cart') // create button
				)
			) // editor:visual/text
		];
	},
	save: function(props) {
		const { attributes: { action, method, columns, prt } } = props;
		return el('form', {action: action, method: method}, 
			el('div', {className: props.className}, 
				el(InnerBlocks.Content, null)), 
				el('input', {type:'hidden', name:'prt', value: prt}), 
				el('button', {
					type:'submit', 
					name:'submit', 
					className: 'btn btn-default'
				}, 'add to cart' ) ) ;
	}
});

最终效果

• Gutenberg 编辑器端效果：
  
  • 编辑器切换为代码模式：

<!-- wp:cgb/form-custom {"prt":"23"} -->
<form action="/order/cart_add.php" method="GET" class="wp-block-cgb-form-custom"><div><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div><input type="hidden" name="prt" value="23"/><button type="submit" name="submit" class="btn btn-default">add to cart</button></form>
<!-- /wp:cgb/form-custom -->

知识参考

• block document

• 官网block文档 可能会 409,不行就上面的链接 – May 6th,2020 访问正常了

  • Component Reference
    • SelectControl
    • TextControl

感谢

因为前段时间WordPress官方网站409，感谢@倡萌提供的文档，解决特殊时期无法访问官方文档的问题。