My First

Gutenberg Plugin

Ryo Utsunomiya(@ryo511)

Gutenberg MeetUp vol.1

2018-03-01

自己紹介

  • 宇都宮　諒（うつのみや　りょう）​
  • 株式会社 一休 宿泊事業本部 マーケティング部
  • 職種は「フロントエンドエンジニア」
  • 主なお仕事
  • ​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の進化は小康状態。キャッチアップするなら今のうち
Made with Slides.com