Inconveniences and problems that occurred when a post created with a text editor was converted to an editor with "Switch to block editor" of the Classic Editor plug-in [Note]

テキストエディタで作成した投稿を、Classic Editorプラグインの「ブロックエディターに切り替え」でエディタ変換した時に起こった不都合や不具合【備忘録】

公開日: 使い方など

WordPressのバージョン5.0から採用された、ブロックエディタ(Gutenberg)。5.0以降で初めてWordPressに触れた方はすべての投稿が既にブロックエディタで作成されているので問題ないですが、私のように昔から?サイト作りをしている方のサイトや、5.0以降でスタートした方でも「Classic Editor」でわざわざ?旧エディタへ戻している方は、私と同様に「投稿」や固定ページの中には新旧両方のエディタで作成したものが混在していると思います。

もちろん、Classic Editorプラグインなどを使えば、旧エディタで作成した投稿や固定ページはそのまま旧エディタで編集できるので、全部の投稿や固定ページを1つ1つブロックエディタへ変換していくことを無理にする必要はないのですが、恐らくWordPressからGutenbergがなくなって旧エディタに戻るということは考えにくいですから、できればブロックエディタで編集するようにしていきたいものです。

このサイトも初投稿は2013年、そもそもGutenbergなどというもののかけらもない時代から運営しています。エディタの違いだけでなく、過去記事のためだけに稼働させている装飾系プラグインなどがそのまま有効化されていたりします。いつかは・・・と思いながら、やっと重い腰を上げ、それらのプラグインの整理と共にブロックエディタ化を2021年初頭から進めてきました。その数2000記事超、大変な作業でした。

基本的に旧エディタの投稿を新エディタへ変更するには、Classic Editorプラグインを有効化している状態であれば、普通通り編集画面を開き(旧エディタで作成したものは旧エディタの編集画面が開きます)、右側のサイドバーにある「ブロックエディタへ切り替え」をクリックすれば、本文の内容すべてが「クラシックブロック」という1つのブロックへ入った形へ変換されます。

もちろんこのままでも差し支えはないのですが、このままではブロックエディタならではの「各パーツをブロック(塊)で管理する」「ブロックの移動が簡単にできる」といった特徴がまったく使えない状態なので、クラシックブロックを選択後、ブロック上部に表示される「ブロックへ変換」をクリックすることで、自動的にブロック(塊)へ変換されます。

めでたしめでたし~~、ではありません。前述したように、いくつか変換で問題が発生したのです(まあ2000もあれば当然かも)。

前置きが長くなってしまいましたが、私が古い投稿をブロック化した際に出た不都合(誤変換?)をいくつか紹介しますので、貴サイトで変換した際おかしい本文内容になってしまわないようにするためのチェックポイントとして活用いただければと思います。

「ブロックへ変換」ボタンでブロックが誤変換されてしまう事例

インラインでフォントサイズ指定した箇所が誤変換?される

テキストエディタ上でspanタグなどとインラインCSS要素を使って文字の大きさや色などを指定すると、特に文字サイズの判断がうまくされず、「xs」「xxs」という相対サイズへ変更されてしまうことがありました。

恐らくブロックエディタ側の判断としては「表示はするけど変換していいものかどうかがわからない」ということで、極小サイズや極極小サイズの文字へひとまず変換されるようです。

当然こうなってしまうと、もともとは強調したかった文字なのに逆になってしまうこともありますし、読めない文字サイズとして検索エンジンから低品質と判断されてしまう可能性がありますので、必ずプレビューなどで確認して直すようにしましょう。

画像と上下の段落の位置がずれる

恐らくテキストエディタからの変換のみ、テキストエディタ上で文字列をpタグできちんと囲んでない(WordPressでは補完されるのでタグを入れている方の方が少ないかと思います)からだと思われますが、画像とその下(または上)の段落が入れ替わってしまうことがあります。

これは編集画面上ではなかなか見つけるのが大変なので、必ずプレビューで全文を読んで直すようにしましょう。

ショートコードが段落内でそのままになる(動作には問題なし)

ショートコードを挿入した投稿で、以下のような変換ケースが発生します。

  • ショートコードブロックへ変換される(正しく変換される)
  • 段落ブロックの中にショートコードが混在する

いずれのケースでも有効なショートコードが動作しなくなることはありませんが、できれば正しい形に修正しておくとよいでしょう。

リストの入れ子となっているリストがうまく表現されない

なかなか説明が難しい事柄なのですが、要するに、1つのリストタグ(親リスト)のli要素の中に、別のリスト(子リスト)を入れて構成しているリストが変換されると、誤変換が発生します。

ブロックエディタでは「リストの中のリスト」は作れないようになっているようですので、恐らくは変換しようがない!と判断するのでしょう。

この場合、何となく以下のように変換されるようです。

  • 親リストはそのままリストタグとして「・」ありで変換
  • 子リストはリストタグにはなるものの、すべての接頭辞に「1」がつく

リスト構成によりさまざまなようですのできちんと確認することをおすすめします


いかがでしたか?思い当たる誤変換はありましたか?

このサイトでも変換し始めた頃には気づけなかった誤変換があるかも知れません(いくつかは再更新の際に発見・修正しました)が、未来のため、コツコツ変換していきましょう。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。