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，感謝@倡萌提供的文檔，解決特殊時期無法訪問官方文檔的問題。