WordPressグーテンベルグのコードエディタの使い方

Gutenbergは、 ブロックエディタとも呼ばれ、段落(文章)や画像、見出し等をブロック単位でHTMLやCSSの知識を必要としない、編集方法になっています。また旧ビジュアルエディタよりさらに機能が追加されテーマのデフォルト装飾に依存することなく装飾をすることも可能になっています。

Gutenbergは、「専門知識がなくてもコンテンツを作成できるようにする」、「インターフェースを改善する」、「コンテンツの作成方法を統一する」ことを目的に開発されました。「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor」 は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。

グーテンベルグのコードエディタ

ソースコードで直接編集をしたいときには画面右端のオプションボタンをクリックします。少し下部にビジュアルエディターとコードエディターが上下に表示されているので、コードエディタをクリックします。

ブロックエディタで編集すると各ブロックがコメントアウトによって囲まれていることを確認できます。コメントアウトを削除してしまうとビジュアルエディタに表示されなくなったり、カラムレイアウトを使っている場合などはレイアウトが崩れてしまったりするので注意が必要です。

Crayon Syntax Highlighter でソースを色分け表示しています。

上記図のように意図しないところに空タグが作られてしまうことがあります。このことによって悪影響が出ることはないといえますが、あまり多いようなら削除しておきましょう。無駄にファイル容量を多くしてしまうと、表示スピードに影響を与えてしまうこともあります。

HTMLタグを手打ち編集される方も多いのではないかと思いますが、ブロックエディタで作成したページに追加もしくは挿入でコードを編集するとコメントアウトで囲むことはされませんので注意が必要です。保存時にWordPressが修正してくれることがありますが、正確でないこともまだあります。ブロックエディタで編集、コードエディタで確認と微調整程度の使い方がいいかもしれません。

ブロックエディタに変換

グーテンベルグ以前に作成したページをブロックエディタに変換するには、ブロックに変換機能を使います。まず、ページを編集モードで読み込みます。ブロックが設定されていないのでページ先頭部に下図のように クラシック と表示されているので、ここをクリックします。

すると ブロックへ変換 と表示されるのでこちらをクリック、これでページ全体がブロック化され、各ブロックがコメントアウトで囲まれます。

なお、ページ全体をブロック化せず、部分的にブロック化した部分をコピー挿入しても表示には問題ないようです。