こんにちは、mimiです。
Gutenberg 3.0 がリリースされて、本年中のWordPress 5.0 リリースが現実味を帯びてきましたね。そろそろ、カスタムブロックの作り方ぐらい予習しておいても良さそうな感じなのでやってみました。
といってもやり方は
Creating Block Types – The new Gutenberg editing experience – WordPress
に全部載っているんですけども。
前提として Gutenberg プラグイン自体もインストールされている必要があります。
1. gutenberg-examples をダウンロード
https://github.com/WordPress/gutenberg-examples をダウンロードします。
これが WordPress のプラグインとして扱われます。ダウンロードしたものをプラグインディレクトリに入れてください。
2. 有効化の前にコメントアウト
現状、2018/06/14の時点では、そのまま有効化するとエラーが出るので、gutenberg-examples-master/index.php 内をいくつかコメントアウトします。
include '01-basic/index.php';
//include '01-basic-esnext/index.php';
include '02-stylesheets/index.php';
include '03-editable/index.php';
//include '03-editable-esnext/index.php';
include '04-controls/index.php';
//include '04-controls-esnext/index.php';
include '05-recipe-card/index.php';
//include '05-recipe-card-esnext/index.php';
ESnext で書いた場合のサンプルも入っているのですが、npm install して build しないと動かないようになっています。
ESnext の記述に慣れておいた方が良いので、書き方はそちらで覚えた方が良いと思いますが、ここでは取り敢えずカスタムブロックを表示することを目標にします。
3. サンプルがレイアウト要素として表示されます
有効化して、記事作成すると、「ブロックの追加」から追加したサンプルがレイアウト要素として表示されます。Example: Basic、Example: Stylesheets、Example: Recipe Cardの３つです。
ちょっとしたカスタムブロックなら、このサンプルを弄るだけで作れると思います。
お試しあれ。
2019/01/08追記：「自作テーマをGutenbergに対応させる」というタグで関連記事を書いていますので良かったら合わせてチェックしてみてください。
