クラシックエディターからブロックエディターに切り替えた時に苦戦した事まとめ。

WordPressのクラシックエディターからブロックエディターに切り替えて苦戦している方も多いでしょう。

というか僕もその一人(汗)

ここではクラシックエディターからブロックエディターに切り替える時に苦戦した事と解決策をまとめておきます。

ぜひ参考にしてみて下さい。

ブロックエディターで空白の行が作れない時の対処法。

ブロックエディターでは空白の行が作れない。

クラシックエディターではエンターキーを2回押すだけで空白の行を作る事が出来、自分は意味のまとまりで区切られるポイントで空白の行を入れ、読みやすくなるように配慮していました。

クラシックエディターの編集画面
クラシックエディターの編集画面ではエンターキーを2回押すと空白の行が作れる。

↓ ↓ ↓

表示してみると空白の行がある。
実際に表示してみても空白の行がしっかりある。

しかし、これがブロックエディターでは出来ないのです。

ブロックエディターの編集画面では空白の行が存在するように見えるものの、実際に記事を表示してみると空白の行が無く行間が詰まって見えます。

ブロックエディターの編集画面
ブロックエディターの編集画面ではエンターキーを2回押すと空白の行が作れるように見えるが…

↓ ↓ ↓

表示してみると
実際に表示してみると空白の行が無くなっている。

対処法:スペーサーブロックを使用する。

ブロックエディターで空白の行を表示させるには「スペーサーブロック」というブロックを使用します。

クラシックエディターではエンターキーを2回押すだけで空白の行を作成できましたが、ブロックエディターではスペーサーブロックを使わないといけないのが多少面倒くさいですね。

ただし、面倒くさいと言っても再利用ブロックかカスタムプリセットに登録しておけば、細かい設定などもそのまま毎回お手軽に使えます。

要は慣れですね、慣れ。

ちなみに自分はテーマはSANGOを使用していますが、スペーサーブロックの高さを59pxに設定すると、クラシックエディターでエンターキーを2回押して作成した空白の行と全く同じスペースを生み出す事が出来ました。

対処法:クラシック版の段落ブロックを使用する。

もう一つの対策としては「クラシック版の段落ブロック」を使用する事です。

クラシック版の段落ブロックは、その中ではクラシック版と同じ編集方法が出来るという優れものです。

このブロックの中ではエンターキーを2回押すだけで空白の行がしっかり作れるのです。

ブロックエディターで文字の装飾が上手くいかない時の対処法。

ブロックエディターでは文字の装飾がクラシック版と全然違う。

文字を赤くしたり、黄色マーカーを引いたりする事はよくあると思いますが、実はその文字装飾の際の色がブロックエディターとクラシックエディターでは全然違います。

自分は最初にそれに大きく戸惑いました。

下記画像はブロックエディターでの文字の色を変更する画面ですが、クラシックエディターでの文字色と微妙に色が違うという…

ネットで調べてみるとカラーコードを入力して好きな色も使えるようなのですが、なぜかそれが出来ない。

ブロックエディターでの文字装飾画面

僕は赤い色での強調薄い黄色マーカーでの強調を文章中でよく使うのですが、クラシックエディターで実現できていたその色がブロックエディターでは実現できないという事になると困ってしまいました。

カツオ
カツオ

超焦りましたよ。

対処法:クラシック版の段落ブロックを使用する。

文字の装飾に関してのトラブルもクラシック版の段落ブロックを使用する事で解決できました。

クラシック版のブロックはクラシックエディターと同じような記事編集が可能になるので、昔からのWordPressユーザーにとっては凄く嬉しい。

クラシック版のブロック

クラシック版のブロックでは何の問題もなく、文字の装飾が可能でした。

ちなみにブロックエディターでの、クラシック版のブロック内の編集バーはプラグイン・Advanced Editor Tools (旧名 TinyMCE Advanced)で色々設定できます。

対処法:ブロックエディターでの装飾に慣れる。

現在の自分はブロックエディターでの装飾になれており、クラシック版の段落ブロックはほぼ使用していません。

ブロックエディターにはブロックエディターでの装飾方法がありますので、それを上手く利用していると思います。

クラシック版のブロックがなぜか表示されない時の対処法。

クラシック版のブロックが目立つのはプラグインAdvanced Editor Toolsがあるから。

ちなみにここまで大活躍の「クラシック版のブロック」ですが、これ目立つように表示されるのはプラグインAdvanced Editor Toolsがインストール・有効化されているからです。

Advanced Editor Toolsを削除したり、停止するとクラシック版のブロックは一気に目立たなくなります。

(目立たなくなるというかは「クラシック版のブロック」は無くなって「クラシック」というブロックになります)

対処法:「ブロック挿入ツールを切り替え」から選択する。

クラシック版のブロックを使いたい場合は、ブロックエディター画面の左上の「ブロック挿入ツールを切り替え」から「クラシック」を選択する事が可能です。

クラシック

ただ、この「クラシック」というブロックは、プラグインAdvanced Editor Toolsが有効化されている時に出てくる「クラシック版のブロック」とは似ていて、少し違います。

「クラシック」よりも「クラシック版のブロック」の方が使い勝手が良いので、プラグインAdvanced Editor Toolsはあった方が良いかもしれません。

用語の意味が分からない時の対処法。

ブロックエディターの用語が良く分からない。

クラシックエディター派だった自分がブロックエディターを使い始めると最初はマジで用語が分かりませんでした。

ブロックエディターを使うとかそれ以前の問題です(涙)

対処法:覚えましょう。

用語が分からないのであれば意味を覚えていくしかありません。

主なものを下記にまとめておきますので、覚えましょう。

カラム1つのブロックを縦に最大6個まで分割できるブロック。テキストや画像を横並びに出来る。
グループグループ化は複数のブロックをまとめる機能。まとめられたグループは一括で編集などが可能。
プルクオートプルクオートブロック内のテキストは強調される。引用した文章を引用ブロックよりもさらに目立たせたい時に使う。
ロックブロックの移動と削除は選択制でロックできる。ロックされたブロックは編集は出来るが、移動と削除は出来ない。
再利用ブロック一度作成したブロックを再利用ブロックとして登録すると、他の場所でも使いまわせる。「再利用ブロックを管理」から再利用ブロックを編集するとサイト内にある全ての再利用ブロックが上書きという形で編集される。
スペーサー本記事の最初の段でも説明したスペーサーブロック。スペーサーブロックは行間を調節するのに使う。

ブロックへ変換した時に不具合が出た時の対処法。

ブロックへ変換するとちょっとデザインが乱れる。

クラシックエディターで編集した記事をブロックエディターで編集しようとすると「ブロックへ変換」という事をしなくてはいけません。

ブロックへ変換

クラシックエディターで書いた記事は、最初は記事全体がクラシック版のブロックでくくられている状態です。

なので、このままではブロックエディターの特徴であるブロックを並べ替えたり削除したり、という柔軟な編集は不可能です。

ブロックエディターらしい編集をするには「ブロックへ変換」という個所をクリックする必要があります。

そしてブロックへ変換すると、表のデザインが崩れたり行間が変わってしまったりするので厄介なのです。

対処法:頑張って修正する。

これに関して言うと、頑張って修正するしかありません。

ブロックへ変換すると一部デザイン的な部分が崩れてしまうのは仕方ないようです。

クラシックエディターで書いた記事を、ブロックエディターで編集しようとした際に起こる不具合としては

  • 空白の行が消える。
  • 表のデザイン(色や文字揃え)が乱れる。
  • テーマのオリジナル機能で執筆した部分が上手く表示されない。

というようなものを確認しました。

カッパ君
カッパ君

多分、これ以外にもあるかも知れませんが…

これについてはクラシックエディターで書いた記事をブロックへ変換する際に避けては通れない道でしょう。

なので、あらかじめ練習用のドメインを用意して、そこにクラシックエディターの記事をコピペしてブロックへ変換して様子を見てみるなど予習的な事をするのが良いでしょうね。

最終的には手作業で地道にやるというのは、ある程度は避けられないと感じました。

この記事のまとめ。

バリバリのクラシックエディター派だった自分がブロックエディターに移行していく際に直面した問題をまとめてきました。

一応ブロックエディターにも対応してきたつもりではありますが、正直まだまだ問題にぶつかったりする事もあるでしょう。

カツオ
カツオ

まだクラシックエディターで書いてるブログも持ってるので完全なブロックエディター派じゃないですしね(汗)

今後も何か問題点などあれば備忘録的に追記していきたいと思います。

今回の内容は以上です。

カッパ君
カッパ君

最後までお読み頂きありがとうございました!

コメントはお気軽にどうぞ(承認制なので誹謗中傷は削除されます)

14 − 10 =