投稿が消える!?「Gutenberg」の影響を実際に検証して調査してみた

Gutenberg移行の影響について
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

WordPress5.0が発表されました。
バージョンアップの準備はされましたか?
デフォルトエディタが「Gutenberg」に変更されることで、不安な方もいらっしゃるのではないでしょうか。

WordPressの公式から5.0へのバージョンアップに問題がないと発表されていますが、
「投稿が消えたり、サイトが見れなくなるのでは?」と心配される声もよくお伺いします。

今回は、実際に稼働中のWordPressサイトに「Gutenberg」をインストールして、その影響範囲を調べてみました。
※影響が出る場合の対策も合わせて解説しますので、是非参考にして下さい。

(調査日時:2018年11月15日)

「Gutenberg」のインストール

「Gutenberg」を試すのに使用するのは、今回は『wp.makeブログ』のテストサイトで行います。

wp.makeサンプルブログ

特に具体的な記事の方がわかりやすいですので、今回はテキスト、画像、リスト、表などの要素がある、「セキュリティにおすすめのプラグイン特集」の記事を例に挙げて解説します。

現在のエディター画面はこちらです。
(プラグインで管理画面を変えています。)

wp.make編集画面

WordPress4.9.8などにアップデートをすると、ダッシュボードに「Gutenberg」のお試しの画面が表示されます。

Gutenbergのインストール

インストールをクリックしますと、有効化ボタンが表示されます。

Gutenbergの有効化

「有効化」ボタンをクリックします。
下の様に「Gutenberg」の紹介のサンプル記事が表示されるとインストールの準備は完了です。

Gutenbergサンプル画面

こちらの記事のエディター画面を見てみましょう

このように新エディタ「Gutenberg」(のビジュアルエディター)に編集画面が変更されています。
(エディターの見た目を変更するプラグインは無効化されているとこがわかります。)

Gutenberg編集画面

Gutenbergの使用方法は下記で解説していますので参考にして下さい。既存の記事への影響を確認してみましょう。

>>Gutenbergの使用方法に関してはこちら

Gutenbergへの移行なら既存記事に影響はない

「Gutenberg」へ変更して、既存の記事に影響はないか確認してみましょう。
記事URLにアクセスしてみましょう。

Gutenberg移行後の既存記事

特に変化はありません。
では、エディター画面に移動してみましょう。

記事本文をクリックしてみましょう。
メニュー部分の左上に「クラシック」と表示されています。
この「クラシック」というのは、ブロックのフォーマット名のことです。

クラシックボックス

では次にクラシックブロックとは何なのか、「Gutenberg」のブロックの概念を簡単に解説していきます。

Gutenbergのブロックとは?

「Gutenberg」では、「ブロック」という新しい概念が採用されています。
見出し・テキストのまとまり(段落)・画像・箇条書きのリストといった、特定の意味合いを持つまとまりを一つのブロックとして扱います。

それぞれのブロックを一つのグループとして扱うので、ブロック全体に背景色をつけたり、ブロック同士の位置を簡単に入れ替える事ができる様になります。

ブロックの設定メニュー

ブロックが採用されたことで、旧エディターよりも直感的な操作をすることが可能となりました。

クラシックブロックとは?

クラシックブロックは、テキストや段落・画像などのようなブロックのフォーマットのひとつです。
複数のブロック要素をまとめて扱える、という特徴があります。(旧エディタと同じ仕様です。)

Gutenbergでは、ブロック要素をひとつひとつ設定していくと、下の様にブロックの数が多く煩雑になってしまっています。

ブロックの説明

現状でも複数のブロックを選択することは可能です。
まとめて設定を変更する項目については「サポート予定」となっております。
(下図のように複数ブロックの位置を上下に入れ替る事は可能です)

複数ブロックの操作について

煩雑になりがちなGutenbergの編集画面ですが、クラシックブロックならブロック内に見出し・テキスト・画像などを使用できるので、複数のブロック要素をまとめて操作することが可能です。

クラシックブロックなら複数ブロックを入れられる

クラシックブロックの中の要素をそれぞれのフォーマットに分割することも簡単に出来ます。

既存の記事は全てクラシックブロックで登録されます

旧エディターで作成された既存の記事は、デフォルトで下の様に全体がクラシックブロックとして登録されています。

既存記事はクラシックブロックとして登録される

クラシックブロックは、旧エディターと同じで「TinyMCE」形式の記事が編集できるので、記事が表示されます。
この状態であれば、既存の記事には大きな問題はありません。
(ただし、テーマやプラグイン等で出力時に入力されたデータを整形している場合など、表示が崩れる場合もあります。)

既存の記事を編集する際に、クラシックボックスから通常のボックスへ変換した際の影響を検証しています。
「既存記事を編集しない」という方も、クラシックボックスの特性がわかりますので是非、参考にしてみて下さい。

記事が消えた!?「ブロックへ変換」落とし穴とは

旧エディターの記事がデフォルトで変換されるクラシックブロック。
このクラシックブロックには、「ブロックへ変換」という内部に含まれる要素をブロック単位に分割するという機能があります。
この機能を使用することで、クラシックブロックを通常のブロックに簡単に変換できます。

クラシックをブロック単位に分割

ブロックに変換を実行後

旧エディターから移行した記事も、ワンクリックで通常のブロックに分割出来る
のですが、既存の記事にこの「ブロックへ変換」を使用する場合には注意が必要です。

既存の記事で試してみましょう。
「ブロックへ変換」をクリックします。

記事の大半が消えました。

ブロックへ変換で記事が消えた!

原因を探ってみましょう。

ブロック要素をまたぐHTMLのブロックタグは中身ごと消える

ブロック要素をまたぐ形でHTMLタグを設定していると中身ごと消えてしまう、という事でした。

再度、消える前の編集画面をコードエディターにして確認ましょう。
「Gutenberg」には、「戻る」「進む」ボタンがあるので、予期せぬ事態でも簡単にやり直せます。

wp.makeブログではhタグの見出しの範囲を明確にするために、その前後をsectionタグで囲っています。

見出しごとにsectionでくくっている

sectionタグの中には、見出し・テキスト・リストなど、複数のブロック要素が存在します
このような状態で「ブロックへ変換」を行なった場合に、sectionタグがその中身ごと削除されてしまいます。

sectionだけでなくdivも消える

sectionよりも使用頻度が多いdivタグでも同じ現象が起こります。

こちらも検証してみましょう。
まず、記事の最初のプラグインの紹介部分をsectiondivに変更します。
2つ目以降のsectionタグは削除します。

sectionをdivに変更

実際の画面はコチラです。

divでくくった部分

これをビジュアルエディターモードにして、「ブロックへ変換」します。

divでくくった部分が消えた

divで囲んだ部分が消えて、二つ目のプラグインの紹介が表示されてしまいました。
divは、cssの設定などにもよく利用されるタグですので、これは結構影響出る人も多いのではないでしょうか。

心当たりのある方は、解決策が発見されるまで「ブロックへ変換」機能は触らない方がいいでしょう。

フォーマットにないHTMLブロック要素タグは中身ごと消える

また、こちらは先ほどよりも影響範囲は狭いでしょうが、フォーマットにないHTMLブロック要素タグは中身ごと消えてしまいます。

具体的には、下図のようにpタグではなくdivでテキストを囲っている場合です。
下には比較のためにインライン要素であるspanで囲ったテキストを設置してあります。

divとspanでくくったテキスト

クラシックブロックのままなら問題なく表示されます。

クラシックブロックなら表示される

このクラシックブロックを「ブロックへ変換」してみましょう。

divで囲まれた部分が消えた

divタグが中身のテキストごと消えてしまいました。
divに対応するブロックのフォーマットがないため、このような処理となっていると考えられます。

すぐ下のspanを使ったテキストは消えていません

コードを確認してみますと、spanが消え、自動で前後にpタグが挿入されています。
テキストのみを打ち込んでいる場合も同様に前後に自動でpタグが挿入されます。

span前後に自動でpタグが挿入される

まとめますと、編集画面でdivやsectionといったブロック要素のタグを使っている場合は要注意ですね。
現状、こうしたタグを使う場合はクラシックブロックとして使うしかない様です

ビジュアルモードにするとプレーンのspanタグが消える

これは、旧エディターのTinyMCEからあった仕様ですが、Gutenbergでも健在です。

検証のために、コードエディターでclassを指定したspanタグclass指定のないspanタグを設定しました。

class指定ありと指定なしのspanタグについて

これをビジュアルモードに切り替えて、戻してみましょう。

ビジュアルエディターからコードエディターに戻すと

class指定のないspanタグは消えてしまいました。
(中身のテキストは残っています)

旧エディターからの仕様なので、記事の移行にはあまり影響しないと思われますが、別のフォーマットからWordPressに乗り換える際には影響が出る可能性があります。
プレーンのspanにCSSで装飾をかけている場合は注意が必要です。

心配な人は「Classic Editor」プラグインを使いましょう

ここまでで「Gutenberg」への移行を実際に検証した結果として、騒がれているほど影響はないのかなと個人的には感じました。
世界最大のCMSなので、考えられていますね。

影響はないといっても、特に「Gutenberg」への移行を急ぐ必要はないでしょう。
WordPress5.0にアップデートしても、「Classic Editor」というプラグインを使えば現状のエディターのまま利用できます。

Classic Editorプラグインのインストール

「Classic Editor」は、長期的にサポートしていくと明言されています。
これから「Gutenberg」向けのプラグインもどんどん開発されていくでしょうから、メリットを感じた段階で移行すれば問題ありません.。

まとめ

実際に「Gutenberg」をインストールして、既存記事の編集に影響がありそうなポイントをご紹介しました。
個別のプラグインに関しては状況がわかり次第お伝えしていきます。

「Gutenberg」への移行で影響が大きそうな人

  • 既存の記事をよく編集する人
  • プラグインなどで編集画面をカスタマイズしている人

「Gutenberg」への以降で影響が少ない人

  • 既存記事はあまり編集しないという人
  • 編集画面をカスタマイズしていない人

今回の記事が「Gutenberg」への移行の影響を心配されている方の参考になれば幸いです。
正式リリースはまだですので、今後も最新情報がわかり次第、お伝えしていきます。

>>WordPressのアップデートが心配だという方はこちらからご相談ください。

wp.makeの保守サービス

ワードプレスのバージョンアップセキュリティ対策
お悩みではないですか?
「何かが起きる前に!」
WordPressのプロフェッショナル集団が対応します。
初期費用は一切頂きません。月額4万円〜
SSL対応、定期バックアップもお任せ下さい。