ANNAIマガジン
Gutenberg screen
この記事の目次

Gutenbergが正式リリース!

米国時間の2018年12月6日にWordPress 5.0が正式リリースされました。
(日本語訳:https://ja.wordpress.org/2018/12/07/wordpress-5-0-bebo/

そしてこのリリースには以前から注目されていた新しいブロックベースのエディターGutenbergがデフォルトで搭載されています。当然Githubでも公開されていますが、開発元であるノルウェーのFrontkom社のサイトを見るとWordPressのみならずDrupal向けの開発もしています。それならばDrupalにも組み込めるのではちょっと探してみるとすでに
https://drupalgutenberg.org/ というサイトでDrupalに組み込んだデモサイトまで公開されています。ということでますます期待を膨らませて試してみることにしました。

Gutenbergはどこが違う?

とは言ってもいきなりDrupalに組み込んでも本来のWordPress内での使い勝手との違いがわからないので最新のWordPress 5.0.2をインストールしてさわってみました。

WordPressユーザーのブログなどを参考にしてまとめると、

  • 記事の見出しも本文も全てがブロックとして定義される
  • テキストは段落毎にブロックになる
  • 見出し、リスト、画像、引用、テーブルなどのリッチテキストエディターの要素は殆どがブロックになる
  • 最新投稿や最新コメントなどの従来はエディターに組み込めなかったWidgetもブロックとして使用できる

などの多彩な機能があるようで、実際WordPress内ではこれらが確認できました。

ただし、Gutenbergが使えるのはあくまでWordPressコンテンツの投稿やページの本文のみでコメントなどは従来通りシンプルテキストです。また例えばアカウントのBiographical Infoなどのテキスト入力もシンプルテキストのままです。

Drupal8へのインストールは簡単か?

すでにベータ版がモジュールとして公開されているのでインストールは簡単です。
機能拡張にはGutenbergのセクションが追加されます。

Gutenberg Section

(Gutenberg Cloudはhttps://gutenbergcloud.org/ に公開されたGutenberg用の種々のブロックを使用するための機能ですが、今回はテストしていません。)

同時に環境設定>>コンテンツ作成>>テキストフォーマットとエディターに「Gutenberg Blocks」が追加されます。

Gutenberg環境設定

 

Gutenbergを使用するには?

インストール後はコンテンツタイプ毎にGutenbergを使用するかどうかを「Enable Gutenberg experience」で設定すればそのコンテンツタイプの編集にGutenbergが使用できます。

コンテンツタイプ設定

もし既に従来のエディター(以降クラシックエディターと言います)で作成したコンテンツがあれば表示は可能ですが編集画面では「Classic」という空白のブロックになって編集できません。ただしその前後にGutenbergのブロックは配置できます。

クラシックエディター混在

WordPressの場合と同様にGutenbergが使用できるのはコンテンツへの入力のみでコンテンツに対するコメント入力はクラシックエディターのままです。

新しいコンテンツタイプを定義した場合でも「Enable Gutenberg experience」をオンにするとコンテンツタイプ内の最初に定義されたフォーマット付き長文の編集にGutenbergが使用されます。

新コンテンツタイプの設定

それ以外のフィールドは編集画面ではなく画面の右サイドバーの一番下の「MORE SETTINGS」の領域で編集します。領域の幅が狭いのが難点です。

新コンテンツタイプ残りのフィールド編集

コンテンツは通常通りコンテンツタイプの表示管理で定義した順序で表示されます。

新コンテンツタイプ表示

コンテンツエディターとしての使い勝手は?

編集の画面はこんな感じです。

Gutenberg編集画面

画面の右端のカラムにドキュメントやブロックの設定が表示されていますが、これを閉じるともっとシンプルになります。

Gutenbergシンプルな編集画面

ページの任意の場所にブロックを配置できるという点はOneNoteに近いイメージですが、OneNoteでも各ブロックの書式設定は全体共通のメニューバーまたはリボンを使います。一方Gutenbergは編集中のブロックの左上にブロック固有のツールバーが表示されます。筆者も色々とエディターやワープロなどを使ってきましたがこのようなUIはあまり記憶にありません。そしてページ全体のツールバーは極めてシンプルです。

Gutenberg Menu

左からブロックの追加・Undo・Redo・Content structure表示・Block Navigationという5つの機能しかありません。ちなみにブロックは入れ子が可能で、その構造を表示してナビゲートするのがBlock Navigationボタンです。

全体の感触をつかんだ後とにかく多機能ということでまずはCover、Table、YouTube、Image、Button、Embedなどと色々なブロックを埋め込んだページを作りました。ブロックの複製機能もあり、ドラッグアンドドロップで移動もできるので色々と試行錯誤しながらページを編集できました。

Gutenbergで複雑なページ

例えばTableブロックでは行の背景を交互に塗りつぶす機能があったり、ImageをアップロードせずにURLのみで指定するなどのクラシックエディターでは標準では使えない機能があります。パラグラフのテキストの文字色・背景色がデフォルトで設定可能というのも従来にはない機能です。

ということで色々とページを作ってみましたが、突然エラーが発生することもありました。例えば以下のような2カラムのページの各カラムにイメージを挿入したページです。

Gutenbergで2カラムのページ
このページを保存後再度編集しようとすると編集画面で、
Gutenberg再編集エラー
「This block contains unexpected or invalid content」というメッセージが表示されて、「Resolve」か「Convert to HTML」が要求されます。ここで「Resolve」をクリックして表示される画面で、
Gutenbergエラー修復
右下の「Convert to Blocks」をクリックすると修復されます。修復後は再度編集してもエラーは発生しなくなります(念のためWordPressでもテストしましたが同様の現象が発生しました)。

現状ではこれ以外に、

  • 「Recent content」ブロックによる直近のコンテンツ一覧が編集やプレビューでは動作するがパブリッシュすると動作せずに空白となる。
  • インラインイメージのブロックが動作しない(WordPress版ではイメージの選択・アップロード画面に移動)。

などの不具合が検証環境では発生しています。

以上のようにクラシックエディターよりはかなりリッチな内容のページが作成できることが確認できました。また「Drupal Blocks」として現状では直近のコンテンツまたはコメントの一覧やオンライン中のユーザーリストなどの15種類のブロックが提供されており、従来ならばBasic PageとBlockモジュールの組み合わせで編集していたようなページもGutenbergだけで作成できる場合もあると思います。

ParagraphsモジュールをインストールしてGutenbergのブロックに相当する各種のparagraph typeを事前に作成しておけばページ編集時に自由に任意の数のparagraph typeを追加できるようになるのでGutenbergと同様な複雑な構成のページを作成できます。しかしParagraphsを用いたページ編集はGutenbergに比べるとWYSIWYGではなくプレビュー画面と編集画面の切替が発生するので編集効率や操作性は悪いというのが実感です。

もちろん限界もあります。構成要素が自由に配置できるとなるとOneNoteとかPowerPointみたいなページが作れると一瞬期待しましたが残念ながらレイヤーの概念がなく、またOfficeでは標準装備の図形の描画機能もないのでGutenbergだけで実用的なプレゼンスライドを作成するのはまだまだ難しいようです。

新しいテキストフォーマットの活用

実は環境設定のテキストフォーマットにGutenbergを使用するテキストフォーマットを追加すればもう少しコンテンツ編集の自由度が高まります。

テキストフォーマットの追加の画面でテキストエディターとしてGutenbergを選択すると以下の4種のフィルターが使用可能になり、どのDrupal Blockを使用するか、どのようなURLの埋込みを許可するかなどコンテンツのレンダリングを制御できます。
Gutenberg4つのテキストフォーマットフィルター

(これらのフィルター以外にデフォルトのCKEditor用のフィルターも「有効なフィルター」として表示されていますがそれらの指定は殆どが無効です。)
このテキストフォーマットに任意の名前を付けて保存するとフォーマット付き長文の編集でその名前が使えます。これにより実際は「Enable Gutenberg experience」をオンにしなくても下図のように任意のコンテンツタイプでGutenbergが使えると言うことになります。一方「Enable Gutenberg experience」をオンにすると下図のようなテキストフォーマットの選択メニューがなくなり最初の長文フィールドのテキストフォーマットが自動的に「Gutenberg Blocks」(Gutenbergモジュールインストール時に設定されるテキストフォーマット)に設定された「コンテンツエディターとしての使い勝手は?」の章で示したような編集画面になります。

Gutenbergテキストフォーマット付き編集画面
従って複数のフォーマット付き長文を持つようなコンテンツタイプもこのようなテキストフォーマットを追加後は以下のように通常の編集画面内でエディターを使い分けて編集できるようになり操作性が向上します
GutenbergでTEXTAREAが2つあるコンテンツタイプ

ただし、現在のところ編集画面内で複数のGutenbergエディターを選択しても最初に選択したフィールドのエディターでしか入力できないようです。例えば上の図で下にあるDetailフィールドでGutenbergを選択しても以下のようになるだけでDetailフィールド用のエディターが表示されません。
Gutenbergは2つめのTEXTAREAでは無効
実はこのようなテキストフォーマットを追加するとコメント入力のエディターでもGutenbergが選択できるようになり入力もできるのですが残念ながら現在のバージョンでは保存やプレビューボタンが動作しません。

検証環境

OSはmacOS Mojave (バージョン 10.14.2)です。WordPressでの検証にはBitnami (https://bitnami.com/stack/wordpress/installer )からダウンロードしたMac版のインストーラを用いて以下の環境で確認しました。

  • WordPress 5.0.2
  • Apache 2.4.37
  • MySQL  8.0.13
  • PHP 7.2.13

Drupalについてはhttps://dev.acquia.com/downloads からダウンロードしたAcquia Dev Desktopをインストールした以下の環境を用いました。

  • Drupal 8.6.5
  • Apache 2.4.29
  • MySQL 5.6.41
  • PHP 7.2.9

DrupalのGutenbergモジュールは2019年1月10日公開の8.x-1.0-beta5を使用しました。ベータ版ですので既存の環境へのインストールは容易に原状復旧できるように準備した上で慎重にお願いします。

 
フッターの採用情報
 
Kuniyoshi Toneの写真

この記事を書いた人: Kuniyoshi Tone

ANNAI株式会社

デジタルマーケティングを担当。金剛山を遠くに眺めて大阪からリモートワークしています。

 

関連コンテンツ