クラシックエディタからブロックエディタへ移行するとデザインが崩れる対策

【グーテンベルク】クラシックエディタからブロックエディタへ移行するとデザインが崩れる対策【wordpress】

クラシックエディタの公式サポートは2021年12月31日までの予定なんだけど、なにか対策してる?
焦る旧エディタの人
そうなの!?

対策というか、その情報さえしらなかったわ!
oh・・・。
クラシックエディタの公式サポートは、2021年12月31日までの予定と明言しています。
「サポートが終了すると使えなくなる」という事もなくて、「以降も十分に機能させるために可能な限りのことを行う」という事も言っています。



ですが、「サポートを終了する」といっている以上、使い続けるのはリスクじゃないですか?
今回の記事は
  • クラシックエディタとブロックエディタを共存させる
  • ブロック化失敗例(画像あり)
  • ブロック化成功例(画像あり)

こんな内容になっています。

クラシックエディタとブロックエディタを共存させる

クラシックエディタとブロックエディタを共存させる

結論からいうと、

  • 今までの記事(クラシックエディタで書いた記事)はクラシックエディタで編集。
  • これからの記事はグーテンベルク(ブロックエディタ)で書いていく

今のうちにブロックエディタでの記事作成に慣れておくと、クラシックエディタのサポートが終了しても特に困る事なく記事を書いていけます。

サポート終了後でも”クラシックエディタを継続させる”という活動もある様ですが、突然の終了というリスクへの対処はしておきましょう。

共存方法

このブログでのブロック化の方法になります。
使用しているテーマによっては有効でない可能性もあります。

プラグイン【クラシックエディタ】の設定 or 【設定】→【投稿設定】でブロックエディタとクラシックエディタの両方を使える様になります。

エディタ切り替え選択

この画像の様に【ユーザーにエディターの切り替えを許可】を【はい】にしておけばOK

それではテキストエディタで作った下の画像の記事をブロック化していきます。

旧エディタで作成した記事画像

ブロック化の失敗例

①クラシックエディタで書いた記事を【ブロックエディタで編集】しようとするとこんな画面が出てきます。

ブロック化設定画面

この時点でデザインは完全に崩れちゃってますね。

②ここから【解決】【HTMLに変換】もしくは下画像の様に【ブロックへ変換】を選んでみます。

ブロック化選択


③デザインの崩れた状態でブロック化が完成

ブロック化でデザイン崩れ

こんな感じで崩れた状態で保存してしまうと、ここからの手直しはかなり大変で、記事をもう1度作成するくらいの修正が必要になるので、できれば避けたいですよね。

ちなみにミスクリックでデザインが崩れてしまったら保存をせずに【戻る】をクリックして前のページに戻りましょう。
自動保存などがされていない状態だと、ブロック化されていない編集前の状態まで戻れるのでやり直しがききます。

ブロック化の成功例

それではどの様にブロック化すればデザイン崩れが起きないのか紹介します。

①クラシックエディタで書いた記事を【ブロックエディタで編集】をはじめると下の画面になります。

ブロック化崩れなし

②右上の【 ⋮ 】マークをクリックすると

  • クラシックブロックに変換
  • ブロックのリカバリーを試行

のメニューが出てきます。
この2つのメニューのどちらを選択しても、ブロック化によるデザイン崩れを防ぐことができます。

なんて簡単なのでしょう。

ブロック化成功

これでブロック化が完了しました。

すごく簡単なのですが、設定を間違えると修正にとてつもない作業量が必要になるのでこの方法は絶対におさえておきましょう。

過去に「ブロックエディタ」→「クラシックエディタ」→「ブロックエディタ」と変更し、デザインが崩れまくった僕が言うのですから間違いありません。

グーテンベルクに慣れておこう

クラシックエディタは公式でサポートを終了すると明言しているので、対策は必須ですね。
今からグーテンベルクに慣れておけば、どちらに転んでしまっても大丈夫なのでぜひ慣れておきましょう。

ブロックエディタを使うとYouTubeやTwitterを埋め込んだりする【iframe】タグや、コードを記述する【Highlight Code Block】などのプラグインが不要になります。

つまり使用するプラグインの数を減らせるのです。

知っている人も多いと思いますが、使っているプラグインが多くなるとサイトの表示スピードが遅くなりますよね。

サイトの表示スピードが遅くなるとGoogleからの評価が悪くなるので、検索順位に悪影響が出ます。

今後サイトの表示スピードをさらに重視するとGoogleが明言しているのでこちらも対策は必須です。

エディタをグーテンベルクにする事はこういった事への対策にもなります。

今回は以上になります。