【WordPress】GutenbergのブロックAPIを使って、カスタムブロックをブラウザー上からサクッと作成して操作などを試す方法

WordPress

WordPressの新エディター「Gutenberg」の話なんですが、「GutenbergのブロックAPIを使って、独自のブロック（「カスタムブロック」って呼ぶらしい）を作成しよう」と考えているテーマやプラグイン開発者の方もいらっしゃると思います。僕もその中の一人で、ただいま作り方を勉強している最中です。

ところで、どう勉強すればいいかわからない場合はドキュメントを一通り読むといいそうです。が、英文ですし、なかなかボリュームが多いですし、気軽に手を付けることができない・・・という方もいらっしゃると思います。

そんな方のために、取っ掛かりとしてブラウザー上からサクッとブロックを作成する方法がドキュメント内に紹介されています。

  • いつかはがっつりGutenbergのカスタムブロックについて勉強したいんだけど、今の時点では入り口付近をちょっとだけ知りたい
  • 小さく始めることで「自分でも作れるかもしれない」という自信や手応えを少しでも掴みたい

などお考えの方は、ご参考ください。

GutenbergのブロックAPIを使って、カスタムブロックをサクッと作成して操作などを試す方法

まずは、WordPressでGutenbergが使える状態を前提として、ブラウザーはGoogle Chromeを使います。

WordPressの管理画面から、投稿または固定ページを選んで（新規作成でもいいです）編集画面を開きます。

Google Chromeのデベロッパーツールを開いて（Macを例にすると、ページ内で右クリックをして「検証」で開けます）Consoleのタブに切り替えます。

次に、Gutenbergのextensibilityページに掲載されている以下のコードをコピー&ペーストします。

var el = wp.element.createElement;

wp.blocks.registerBlockType( 'mytheme/red-block', {
 title: 'Red Block',
 icon: 'universal-access-alt',
 category: 'layout',
 edit: function() {
  return el( 'div', { style: { backgroundColor: '#900', color: '#fff', padding: '20px' } }, 'I am a red block.' );
 },
 save: function() {
  return el( 'div', { style: { backgroundColor: '#900', color: '#fff', padding: '20px' } }, 'I am a red block.' );
 }
} );

すると「Red Block」という名前のブロックがレイアウト要素内に作成されます。

この追加された「Red Block」を試しに使ってみると、下の画像のように背景色とテキスト色で装飾された「I am a red block.」という文字が追加されます。

追加したブロックは保存もできます。また、今回Consoleで追加したコードがなんとなく読める方は、title、icon、category、editなどの値をお好みで変えて挙動を確認するのもいいかもですね。勉強になるとは思います・・・

カスタムブロックを作成するまでの操作を動画にしました

おまけ：次のステップは「gutenberg-examples」プラグインを試してみる

ブラウザーからのブロック作成がうまくいけば、その次のステップとしてgutenberg-examplesプラグインを一度試して、プラグインのソースコードを参考にして開発を進める流れが個人的にはいいのではないかと思います。

お盆期間中にgutenberg-examplesプラグインを試してみたのですが、ビルドが必要だったりESNextに触れるきっかけもあったので、個人的には「難易度がそれなりに高めだなぁ〜」と感じることもありましたが、これもいい機会だと思って勉強しています。

ちょっとした内容ですが、このページが何かのご参考となりましたら幸いです。

おまけ2：Gutenbergを触るライブ配信をやってみました

「カスタムブロックはもとより、そもそもGutenbergをあまり触っていないので、よくわかっていない・・・」という方も多くいらっしゃると思います。

・旧エディターと比べてどれくらい操作性が変わったのか
・文章を書いたり画像を追加したり、これまでと同じように記事を作ることができるのか
・見出しや文字色の変更など、装飾はできるのか
・過去記事を「Gutenberg」に対応するにはどうすればいいのか

などを題材に「Gutenbergをとにかく触ってみる」ライブ配信を先日やりました。その様子がYouTubeにアップロードされています。

配信そのものにまだ慣れていない＋内容を結構詰めこんだこともあって、1時間近い長めの動画となってしまったのですが、動画を一通り視聴すると「エディターがGutenbergに変わることで、どうなるんだろう。どこに気をつけたほうがいいんだろう」など「Gutenbergについてこれから勉強したい方」にとって、ある程度の情報は得られるとは思います。

また、ライブ配信中にはチャット欄でコメントもいただいていますので、YouTubeの動画とチャット欄を合わせてご視聴いただけますと嬉しいです！

著者:bouya Imamura