WordPressのGutenbergを使ってみる

WordPressの新しいエディタである「Gutenberg」はバージョン5.0から同梱される予定ですが、早ければ11月19日にリリースされるようです。
参考:Proposed WordPress 5.0 Scope and Schedule – Make WordPress Core
11.11追記: リリース予定日は11/27に変更になっているようです。

今回はGutenbergを簡単に触ってみたいと思います。
WordPressのバージョンは4.9.8を使用しています。

インストール

Gutenbergは5.0から同梱される予定ですが、現時点ではプラグインとして利用できます。
プラグインの新規追加から「Gutenberg」を検索して追加するか、またはダッシュボードからも追加できます。

ダッシュボードを開いて、「Gutenberg をインストール」をクリックします。

インストール後、有効化します。

これでGutenbergを使用する準備ができました。

使い方

新規投稿画面を開いて、実際に試してみます。
投稿画面は以下のような表示になります。

UIがガラッと変わっていて、これまでのウィジウィグが1つの入力画面に対してテキストを装飾したりする形でしたが、Gutenbergでは見出しや段落、画像、外部サービスの埋め込みなどの要素をブロックとして積み重ねていくような形になります。

本文入力部分にフォーカスすると、左側に「ブロックの追加」アイコン、右側に「見出しの追加」「画像の追加」「ギャラリーの追加」アイコンが表示されます。

まずは右側の3つのアイコンから見てみます。
「見出しの追加」アイコンは見出しやリンク、テキストの装飾を設定できるブロックを追加します。
画面右側で設定を変更することもできます。

「画像の追加」アイコンは画像を追加できるブロックを追加します。

画像追加後にリサイズや、画面右側で設定の追加も行えます。

「ギャラリーの追加」アイコンは画像を複数追加できるブロックを追加します。

先ほどの「画像の追加」と違い、画像を1枚追加した後も、さらに画像をアップロードできます。

画像を追加していくと、以下のように横並びに追加することができます。

画面右側の設定でカラムを変更すると、指定した列数のレイアウトにできます。

次に「ブロックの追加」アイコンを使ってみます。
この中に追加できるブロックが一通りまとまっていて、先ほど試した3つのブロックも入っています。

いくつかの項目に分かれているのでそれぞれを見てみます。
まず「よく使うブロック」ですが、名前の通り過去の履歴からよく使用されるブロックが表示されます。

「インライン要素」は段落中にインライン画像を設置したりできます。

「一般ブロック」は段落や見出し、画像、リストなど、一般的によく使われるブロックがあります。

「フォーマット」はテーブルやブロック、整形済テキストなどといったブロックがあります。

「レイアウト要素」はボタンやカラム、区切り線などレイアウト関連のブロックがあります。

「ウィジェット」は最新の記事やカテゴリ、ショートコードの使用などWordPressの機能を埋め込むブロックがあります。

「埋め込み」はYouTubeやTwitter、Instagramなど外部サービスを埋め込めるブロックが多数用意されています。

試しに「埋め込み」のYouTubeを使ってみます。
設定は埋め込みのiframeタグではなく、YouTubeのページURLで行えます。

以下のように埋め込むことができました。

ここまでの入力を実際に投稿してみると、以下のような内容で出力されました。
(※画像ファイルや改行位置などは変更しています。)

HTML

<h2>H2の見出しです</h2>
<figure class="wp-block-image is-resized">
  <img src="http://XXXXX" alt="" class="wp-image-121" width="300" height="199" srcset="http://XXXXX 1600w, http://XXXXX 300w, http://XXXXX 768w, http://XXXXX 1024w" sizes="(max-width: 300px) 100vw, 300px" />
</figure>
<ul class="wp-block-gallery columns-2 is-cropped">
  <li class="blocks-gallery-item">
    <figure>
      <img src="http://XXXXX" alt="" data-id="122" data-link="http://XXXXX" class="wp-image-122" srcset="http://XXXXX 481w, http://XXXXX 300w" sizes="(max-width: 481px) 100vw, 481px" />
    </figure>
  </li>
  <li class="blocks-gallery-item">
    <figure>
      <img src="http://XXXXX" alt="" data-id="123" data-link="http://XXXXX" class="wp-image-123" srcset="http://XXXXX 1600w, http://XXXXX 300w, http://XXXXX 768w, http://XXXXX 1024w" sizes="(max-width: 1600px) 100vw, 1600px" />
    </figure>
  </li>
  <li class="blocks-gallery-item">
    <figure>
      <img src="http://XXXXX" alt="" data-id="124" data-link="http://XXXXX" class="wp-image-124" srcset="http://XXXXX 1600w, http://XXXXX 300w, http://XXXXX 768w, http://XXXXX 1024w" sizes="(max-width: 1600px) 100vw, 1600px" />
    </figure>
  </li>
</ul>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
  <div class="wp-block-embed__wrapper">
    <iframe width="500" height="281" src="https://www.youtube.com/embed/h2KaYvCHrUI?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
  <figcaption>「青春ブタ野郎はゆめみる少女の夢を見ない」第1弾CM</figcaption>
</figure>

開発者側でCSSを用意しなくても、以下のようなCSSの読み込みが追加されていて、きちんとレイアウトされていました。

gutenbergのstyle.css

感想としては、デフォルトでできることがかなり増えているので、使いこなせれば便利そうな印象ではあります。
ただ、Webにあまり詳しくないクライアントとかだと、ハードルが高いんじゃないかなとも思いました。
あとは今回試していないですが、用意されていないブロックを追加したい場合などのカスタマイズについてもそのうち試してみたいと思います。

Gutenbergはウェブ上でも使い勝手を試せるようになっているので、使ったことのない方は1度触ってみるとよいかもしれません。
新しい Gutenberg 編集エクスペリエンス