Gutenbergと旧エディターを併用する

Gutenbergプラグインのインストールを確認する

Gutenbergと旧エディターの併用も、かなり安定してきました。

とはいえ、すぐにGutenberg完全対応にすることは、現段階ではまだお勧めしません。
特に、WordPress 4.9.Xで緻密に作ったサイトや、旧エディターで作り込んだページがある場合は、段階を追ってGutenberg対応型に馴染ませていくほうが無難です。

ここでは、旧エディターで書いたページをGutenberg対応型にする方法をご紹介します。

  1. Gutenbergプラグインのインストール&有効化
  2. 旧エディターページをGutenbergで開いてみる
  3. クラシックブロック上で入力・更新してみる
  4. ブロックへ変換する

1. Gutenbergプラグインのインストール&有効化

WordPress 5にしたら、Gutenbergがデフォルトエディターになるはずですが、タイミングによってはGutenbergプラグインがインストールされなかったり、自動アップデートの際にGutenbergの有効化まで共にOFFになってしまう場合があります。

まずは、[インストール済みプラグイン]を確認しましょう。

  • 「Gutenberg」がリストにある
  • [有効化]されている(メニュー記述が「停止」のみならばOK)
Gutenbergプラグインのインストールを確認する
▲Gutenbergがインストール&有効化されていることを確認する

2. 旧エディターページをGutenbergで開いてみる

旧エディターページをGutenbergで開くには、[投稿一覧]画面で投稿名をクリックするか、「編集」をクリックします。

旧エディターページをGutenbergで開く
▲投稿名をクリックする

投稿名をクリックすると、(通常は)Gutenberg環境で開きます。旧エディターでの画面とは異なっていることを確認しましょう。

Gutenbergエディターで開くと、右側に[文書][ブロック]のパネルが表示されます。右上には「下書きへ切り替え」[プレビュー][更新]といったボタンが並んでいます。

旧エディターで作ったページ全体が、「クラシック」という箱(ブロック)でくるまれていることを確認しましょう。これが、Gutenbergエディターの特徴です。

旧エディターページをGutenbergで開く
▲旧エディターページをGutenbergで開く

※Classic Editorプラグインもインストール&有効化している場合、投稿名をクリックしたときに自動的に旧エディターで開いてしまう場合があります。その場合は、[投稿設定]の「デフォルトエディター」で「ブロックエディター」を選択し直してください。

3. クラシックブロック上で入力・更新してみる

Gutenbergでは、すべてのコンテンツをそれぞれ専用の「ブロック」で整理しています。[クラシック]ブロックは、このGutenbergブロックの1つですが、少し特殊な位置づけになっています。

Gutenbergのブロックには、それぞれ専用のブロックコード(コメントタグ)が付与されています。[クラシック]ブロックだけは、このブロックコードがありません。
「旧エディターページの救済ブロック」と考えるとよいかもしれません。

Gutenbergで旧エディターページを開くと、この[クラシック]ブロックでコンテンツ全体がまるごと包まれます。

[クラシック]ブロック内でテキストの編集をして、[更新]してみましょう。

旧エディターページをGutenbergで編集
▲少し編集して更新してみる

それで、何の問題もなく更新された場合は、そのページは、Gutenbergに完全対応に移行しても問題ありません。

▲[更新しました]と表示されたら、Gutenberg対応OKです。

◆エラーメッセージが出てしまった場合は……

以下のようなエラーメッセージが出てしまった場合は、このページのどこかに問題があるので、旧エディターを使ってページを編集してください。

なお、エラーメッセージが出た場合、すべてのページがNGなのではなく、旧エディターで作ったページのみ(あるいはこのページのみ)がNGです。

新たに1から作るページは、Gutenbergで作っても問題は発生しません。

旧エディターページが更新失敗
▲エラーが出てしまった場合は……

※エラーが出てしまった場合の対処方法は、
WordPress5「真っ白画面」の直し方」を参照してください。

4. ブロックへ変換する

旧エディターで記事を追加して更新したときに、「更新しました」と表示されて何のエラーも出なかった場合は、Gutenbergへ移行できます。ブロックへ変換して、Gutenbergの機能をフルに利用しましょう。

[クラシック]と記載されたタイトルバー左端のボタンをクリックし、表示されるメニューで[ブロックへ変換]を選択します。

 

ブロックへ変換する
▲メニューで[ブロックへ変換]を選択

ブロックへ変換すると、あまりにスムーズに変換されるので、何が起きたかわかりにくいかもしれません。右側の[パネル]を確認しましょう。

スムーズに変換できると、[クラシック]の表示が変化します。下例の場合では、「WordPressが……」から「……整えていきたいです。」までが、[段落]ブロックに変換されたことがわかります。
ここまでの範囲に枠線が表示され、1つの段落であることが把握できます。

[段落]ブロックを選択する

さらに、次の部分、「新エディター……」をクリックしてみると、[見出し]ブロックに変換されたことがわかります。H2(見出し2)に変換されています。旧エディター上でH2の設定をしていたので、正しく変換されたわけです。

[見出し]ブロックを選択する

同様にして、それぞれをクリックしていくと、右側のパネル表示が変化します。画像をクリックすると、[画像]ブロックになったことがわかります。
[画像]ブロックでは、Altテキスト(代替テキスト)や画像サイズなどを設定できます。
旧エディターで設定していた場合は、自動的に受け継がれます。

[画像]ブロックを選択する

複数のブロックをまとめて選択する

ブロックは複数を選択できます。[段落]ブロックや[見出し]ブロックのように、同じテキスト系ブロックはドラッグして複数をまとめて選択できます。
[段落]ブロックと[画像]ブロックのようにタイプが異なる場合は、1つ目でクリック、2つ目で[Shift]+クリックして複数選択できます。

複数のブロックを選択すると、「2個のブロック」のように、パネル表示が変わります。

複数のブロックを選択すると、何がよいことがあるの????

それは、また次回に。

Gutenbergのブロック機能は、かなり楽しいです。
ぜひ、使い倒してみてください。


【新刊のご案内】

はじめてのデザイン&カスタマイズ入門

はじめてのデザイン&カスタマイズ入門
2019年2月8日発売予定(技術評論社)

↓ シェア: