Gutenberg にカスタムブロックを追加してみよう

こんにちは、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の3つです。

日本語化してない時に撮ったスクショですみません。

ちょっとしたカスタムブロックなら、このサンプルを弄るだけで作れると思います。
お試しあれ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください