Gutenberg(ブロックエディタ)メモ: Classic Editorプラグインに関して

Cat WEBサイト構築Tag , by cubismer
WordPressのGutenberg
WordPressのGutenberg

名称が似ていてややこしいでのすが、ブロックやコンポーネントではなくプラグインの「Classic Editor」に関してのメモとなります。

大した内容ではありませんが、一応まとめておきたいと思います。

概要

Classic EditorはGutenbergがコアにはいるWordPress5.0以降でも、4.x以下のバージョンのエディタ(ビジュアルエディタとテキストエディタ)を使えるようにするプラグインです。

Gutenbergとそれ以前のエディタには違いが大きすぎるため、Gutenbergに対応するための猶予期間を作るような位置づけの模様です。

そのため、以下のページにあるように一応期限が示されています。

2つ目の記事や3つ目の投稿で確認できますが、2022年以降も使えるというような記述もあります。

サポートがなくなってもメンテをする方がいれば他のプラグインの状態と大差がなくなり、サポート期限が問題なのかどうかという点からして微妙なのですが、現状ではどこまでClassic Editorが使えるのかは不明という印象です。

使い方

詳しい使い方ではなく、個人的に少しつまづいた点を中心にした簡易な内容を記載します。

プラグインのページ

肝心のプラグインですが、4.9でGutenbergの紹介が管理画面に出た際にインストールボタンがでています。

が、それをせずに情報を消して後からインストールをしようとすると、名前が普通なのでどれがそれなのかが分かりにくく悩む事があります。

具体的には以下のページのプラグインが該当しますので、管理画面のプラグイン検索に「Classic Editor」といれて出てきたものがあっているのか不安な場合の参考にしてください。

初期エディタとして設定
Classic Editorの設定
Classic Editorの設定

Classic Editorを有効化した時点では、投稿画面を開いた際のエディタがブロックエディタ(Gutenberg用の投稿画面)になっています。

初期画面をClassic Editorに変更する場合は、以下のようにします。

  1. サイドバーから「設定」を選び、「投稿設定」に移動
  2. 「すべてのユーザーのデフォルトエディター」の項目を「Classic Editor」に変更

なお、切替自体を無効化したい場合にはその下の「ユーザーにエディターの切り替えを許可します。」を「いいえ」に変更します。

※現在はプラグインを有効化した時点で「クラシックエディタ」になっているため特に変更の必要はありません。

出力されるブロックエディタ用CSS

5.0にした時点でhead内には以下のようにブロック用CSSのlink要素が出力されます。


<link rel='stylesheet' id='wp-block-library-css'  href='https://example.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0' type='text/css' media='all' />

これは前項でClassic Editorを選び「ユーザーにエディターの切り替えを許可します。」を「いいえ」に変更しても消えません。
消す場合は以下の記事の方法を参照してください。

新規投稿の場合

新規投稿する場合、「新規追加」ボタンは前項の初期エディタで設定したエディタの影響を受けて指定したエディタで表示されます。

既存記事を編集する場合

以下の何れかを選んで編集できます。

  • 投稿一覧の各記事にマウスオーバーしてでてくる「Classic Editor」を選ぶ
  • 投稿画面サイドバー(「ブロック」タブ選択時)にある「エディター」の「クラシックエディターに切り替え」を選ぶ

なお、上記はそのままClassic EditorからGutenbergへ切り替える際にも転用できます。

ブロックエディタで更新してClassic Editorに戻した場合

ブロックエディタで更新してClassic Editorに戻すと以下のようなコメントが付いた状態で表示されます。


<!-- wp:heading -->
<h2>h2<strong>太字</strong><em>斜体</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"dropCap":true,"textColor":"luminous-vivid-orange","fontSize":"small"} -->
<p class="has-text-color has-drop-cap has-small-font-size has-luminous-vivid-orange-color">pタグ</p>
<!-- /wp:paragraph -->

このコメントを解釈してGutenbergはブロックエディタのブロックを作成しており、コメントを書き換えることでブロックを変えたり、壊したりという状態が発生する可能性があります。

「Classic Editorを使いつづける中で間違ってブロックエディタを使った」という場合には以下の何れかの対応になると思います。

  • コメントを削除する
  • コメントは残したまま無視する

このブロック用コメントはHTML上はあくまでコメントアウトされた部分に過ぎず、削除しても問題ありません。
同様の理由で残して無視しても問題ありません。

ただし、コメントを削除する場合は今後も考えて開始コメントと終了コメントの両方を削除する方が安全です。コメントが破損している状態でブロックエディタで表示させるとエラーの原因になりえますので。

ブロックエディタで追加した装飾

<!-- wp:paragraph {"dropCap":true,"textColor":"luminous-vivid-orange","fontSize":"small"} -->
<p class="has-text-color has-drop-cap has-small-font-size has-luminous-vivid-orange-color">pタグ</p>
<!-- /wp:paragraph -->

上記はブロックエディタでPタグに文字色とドロップキャップとフォントサイズを指定した場合のコメントです。

ブロックエディタからClassic Editorに戻した場合でも、クラス名が追加された部分はもとよりコメントで指定された指示も反映されます。

結び

Classic Editorはあくまで入力を以前の旧エディタに変更するだけで、サイト表示時や投稿データの出力時に行われる処理はClassic Editorがあってもなくてもかわりません。

Gutenbergへの移行を半ば強制的に行う方針になった場合はClassci Editorは使えなくなる可能性がありますが、Gutnebergへの反発が継続するようならClassci Editorは残り続ける可能性もあります。

対して、Gutenbergの仕組みを一度導入してしまうとなかったことにはできないでしょうから(ブロックに必要なJSの存在があるため)、Gutenberg自体はどういう形であれ今後も使えるようにすると思われます。

関連記事

Gutenberg(ブロックエディタ)に関連する記事一覧。

2人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄