Gutenberg のバージョンごとの互換性について

gutenberg WordPress

Gutenberg プラグインのバージョン v5.9 から editor パッケージのいくつかのコンポーネントを使用すると以下のようなメッセージが出るようになりました。

wp.editor.BlockFormatControls is deprecated and will be removed. Please use wp.blockEditor.BlockFormatControls instead.

将来的に editor パッケージから除かれるため、 block-editor パッケージからコンポーネントを使用するように修正する必要があるようです。

互換性の考慮

現状の確認

  • block-editor パッケージが導入されたのは Gutenberg v5.2(WP v5.2) から
  • block-editor パッケージに editor からブロック用コンポーネントが移されたのは Gutenberg v5.3 (WP v5.2)
  • 将来的に editor からブロック用コンポーネントは削除される

必要な対応

Gutenberg v5.2(WP v5.2)以上のみに対応する場合

プラグインの対応バージョンを常に最新のバージョンのみにする場合などは特に困ることはありません。

指示通りに block-editor のコンポーネントを使用するように修正するだけです。

Gutenberg v5.0(WP v5.0)にも対応させる場合

単純に block-editor のコンポーネントを使用するように修正するとWP v5.1 などではエラーになります。

const { BlockFormatControls } = wp.blockEditor;
Uncaught TypeError: Cannot destructure property `BlockFormatControls` of 'undefined' or 'null'.
JavaScriptで判断

wp.blockEditor があるかどうかで Gutenberg v5.2 かそれ未満かの判断が可能です。

また wp.blockEditor.BlockEdit などの有無で Gutenberg v5.3 かそれ未満かの判断が可能です。

したがって以下のようなコードで互換性を持たせることが可能です。

const { BlockFormatControls } = wp.blockEditor && wp.blockEditor.BlockEdit ? wp.blockEditor : wp.editor;
PHPでの判断の必要性

JavaScript からの判断だけでは完全に互換性を持たせることはできません。

作成したJavaScriptを実行するには wp_enqueue_script で読み込ませる必要があり、この際に依存するパッケージを指定します。

この時に存在しないパッケージを指定するとスクリプトは読みこまれません。

したがって Gutenberg v5.2 未満 (WP v5.2未満)で以下のようなことをするとJavaScriptが動作しません。

wp_enqueue_script( 'test-script', 'path/to/javascript/index.js', [
	'wp-block-editor',
	'wp-components',
	'wp-compose',
	'wp-element',
	'wp-editor',
] );

wp-block-editor を取り除けば動きますが、Gutenberg v5.2 以上(WP v5.2以上)では block-editor パッケージを使用しているため、そちらで思わぬ誤動作が起こる可能性があります。

したがってPHP側でもどのバージョンで動いているかを知る必要があります。

PHPで判断

WP v5.0 から利用可能な wp_default_packages_scripts を使用することでWP本体で使用されているパッケージごとのバージョンを取得できます。

wp_default_packages_scripts() | Function | WordPress Developer Resources
Registers all the WordPress packages scripts that are in the standardized js/dist/ location.
$scripts = new WP_Scripts();
wp_default_packages_scripts( $scripts );

// $scripts->registered

ただし、ブロックエディタに関係ないパッケージに関する情報も帰ってくるため、適切にフィルタして使用する必要があります。

またGutenbergプラグインが有効な場合は、この情報は意味がなく別途プラグインで使用されているものを取得する必要があります。

しかしGutenbergプラグインにはパッケージごとのバージョンを取得する関数は用意されていません。

ただ、ここではパッケージの有無だけわかればよいので、gutenberg/build にあるディレクトリで判断することは可能です。

  1. Gutenbergプラグインが有効かどうか判定
    1. 有効な場合、 plugins/gutenberg/build/block-editor の有無を判定
    2. 無効な場合、 $scripts->registered のキーに wp-block-editor があるかどうかを判定
  2. wp-block-editor が有効な場合は依存するパッケージに追加

とすれば正しく互換性を持たせることが可能です。

もしバージョンまで知りたい場合はGutenbergプラグインのバージョンを使用して、別の場所から取得してくる必要がありそうです。

まとめ

Gutenbergにバージョンを取得する簡単な方法がないため、WP v5.0 未満のクラシックエディタにも対応していたプラグインは困ることになるでしょう。

Gutenbergで正しく動かすために WP v5.2 が必要な場合、プラグインの要求するバージョンを上げる必要がありますが、そうすると WP v5.2 未満は対応外になってしまいます。

Requires at least: 5.2

以下のようにエディタごとに要求するバージョンを指定できればいいのですが現在はできません。

Requires at least for block editor: 5.2
Requires at least for classic editor: 4.8

ここで示したように互換性を持たせることで何とかまだ対応はできるかもしれませんが、今後どうなるかはわかりません。

あえて互換性を持たせることを難しくしてバージョンの引き上げを促しているのかもしれません。

私はどちらにも対応していたプラグインで、すでにクラシックエディタを切り捨てました。

クラシックエディタのサポート終了 · Issue #119 · technote-space/marker-animation
クラシックエディタ用のJSは残したまま ブロックエディタ内のクラシックエディタも含めて、今後動作の確認をしない旨をReadmeなどに表記 v2.0.0 (2019/6/1予定) 以降でのクラシックエディタの動作 クラシックエディタに追加してあるボタンとスタイルメニューは削除 クラシックエディタでも class で囲う記...

WordPressのプラグインはボランティアみたいなものなので、いつまでも遅れたエディタに対応し続ける必要はなく、それよりもブロックエディタでの操作性の向上などに注力したほうがいいと考えています。

コメント

タイトルとURLをコピーしました