My First

Gutenberg Plugin

Ryo Utsunomiya(@ryo511)

Gutenberg MeetUp vol.1

2018-03-01

自己紹介

• 宇都宮　諒（うつのみや　りょう）​
• 株式会社 一休 宿泊事業本部 マーケティング部
• 職種は「フロントエンドエンジニア」
• 主なお仕事
  • 宿泊予約サービスのUI改善
  • 一休コンシェルジュの改善（の手伝い）
• ​WordPress歴
  • ​ユーザとして3年くらい
  • 開発者として半年くらい
• ​Twitter: @ryo511
• 個人ブログ( https://ryo511.info/ )

一休コンシェルジュ

• 上質なホテル・旅館を紹介するメディア
• powered by WordPress!

https://www.ikyu.com/concierge/​

今日は、

Gutenbergに対応した

プラグインの作り方についてお話しします

既存プラグイン:AmazonJS

• Amazonのアフィリエイトリンクを記事中に挿入するためのプラグイン
• Gutenberg非対応、最終更新2年前

最近作ったプラグイン

• AmazonJSをベースに開発
• Gutenberg対応済み 💪

使い方

{DEMO}

Gutenbergプラグインの構造

• 通常のWordPressプラグインと変わらない

• enque_block_editor_assets アクションでブロックのJSを読み込む

<?php
// index.php

/**
 * Register Block JavaScript file.
 */
add_action( 'enqueue_block_editor_assets', function () {
	wp_enqueue_script(
		'amazon-block',
		plugins_url( 'build/index.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element' )
	);
} );

Gutenbergの基本はブロック

• 記事の編集に使用する、再利用可能な部品

ブロックの登録

import AmazonBlock from '../components/AmazonBlock';

wp.blocks.registerBlockType( 'amazon-block/amazon-block', {
	title: 'Amazon',
	icon: 'cart',
	category: 'common',
	attributes: {
		// 省略
	},
	edit( { attributes, setAttributes } ) {
		return (
			<AmazonBlock
				attributes={ attributes }
				setAttributes={ setAttributes }
			/>
		);
	},
	save( { attributes } ) {
		// 省略
	},
} );

ブロックのライフサイクル

1. edit() で初期状態を出力（保存されたコンテンツを編集する際は、以前の状態の復元）

2. ユーザがコンテンツを入力
3. save() の結果をDBに保存
4. DBに保存されたコンテンツを配信

ブロックはReactで作る

/* global React */
import { EventEmitter } from 'events';
import Search from './Search';
import SelectTemplate from './SelectTemplate';
import AffiliateItem from './AffiliateItem';

export default class AmazonBlock extends React.Component {

	// constructorとcomponentDidMount は省略

	render() {
		const { item, template } = this.props.attributes;
		if ( item && template ) {
			return <AffiliateItem item={ item } template={ template } />;
		} else if ( item ) {
			return <SelectTemplate item={ item } event={ this.event } />;
		}
		return <Search event={ this.event } />;
	}
}

必要な知識

• WordPressプラグインの作り方（最低限でOK）

• HTML, CSS
• JavaScript
• React.js
• Gutenberg特有の知識

あると良い知識

• ES2015以降のJavaScript(ES.Next)

• Babel, Webpack等を使用したビルドパイプラインの作り方

無くても良い知識

• FLuxアーキテクチャとRedux(wp.data)

  • 小規模なプラグインならReduxは不要

React.js

• 最も人気のあるJavaScriptライブラリの１つ

• npmでは2017年に5900万回ダウンロードされた
  • 参考値：jQuery 4600万、Angular 1100万、Vue.js 800万
• フロントエンドエンジニアの求人で「React経験x年以上」としているものも多い
• 最近はAPIの大きな統廃合もなく、枯れてきたといえるのでは

React入門

• 今読むなら『React入門』がおすすめ

  • 2018年2月に出たばかり
  • Reduxを扱ってる日本語書籍は他に無い
• CodeGridにもReactやFluxの入門記事がある
• 英語が読めるなら公式ドキュメントが一番コスパが高い

Gutenberg特有の知識

• Gutenbergには独特の概念や仕組みがある

• 「ブロック」の概念はGutenberg独自
• フィルタのような、WordPress本体と同様の拡張ポイントもある
• ブロックのattributesがpost_contentにHTMLコメントで埋め込まれる、といった仕組みの部分は理解が必要

Gutenberg Handbook

• Gutenbergを拡張するためのドキュメント

• 質・量ともにまだまだ
• 開発の速度にドキュメントが追いついていない
  • コアのブロックではバリバリ使ってるのにUndocumentedなAPIがあったり
• 有志による日本語翻訳が進行中

使用したライブラリ

• "dependencies": {},

  • React等、開発に必要な最低限のライブラリは、グローバル変数から参照できる
• "devDependencies": {"babel", "webpack"}
  • ReactのJSXのビルド
  • ES.Nextのビルド

開発時に苦労したこと

• Gutenbergのドキュメントが不足しているので、デバッグ時にはコアのソースを追うことが多かった

• Reactに関しては、Redux使うか迷ったくらい（結局使わなかった）

まとめ

• Gutenbergプラグインの開発はそれほど難しくはない
• Gutenberg対応プラグインの開発には、WordPress開発の知識に加え、モダンJavaScriptの知識が必須
• モダンJavaScriptの進化は小康状態。キャッチアップするなら今のうち