Gutenbergのリッチテキストの既知の問題

WordPress

経緯

RichTextToolbarButtonは要素のClassを見ないか?
registerFormatTypeで設定しているClassまで見ないようです。問題の動作と対策をまとめてみま…

こちらの記事の現象が開発中のプラグインでも発生したため原因を調査しました。

現象

  1. クラスとタグ名を指定して registerFormatType でフォーマットタイプを登録
  2. ビジュアルエディタのツールボタン等から登録したフォーマットタイプを適用
  3. コードエディタでクラス名を変更または削除
  4. ビジュアルエディタに戻る
  5. 同じタグ名で登録された無関係のフォーマットタイプが適用されているような表示になる
  6. フロントでは5の適用は起こらない

原因

原因はフォーマットタイプの検索時に以下のような実装になっているためです。

  1. クラス名がある場合にクラス名で登録されたフォーマットタイプから検索
  2. 1で見つからなかった場合、タグ名のみで検索
WordPress/gutenberg
The Block Editor project for WordPress and beyond. Plugin is available from the official repository. - WordPress/gutenberg

本来は2の検索時にクラス名がないものに限るべきだと思います。

影響

クラス名の付け外しによって見た目を変えるプラグインすべてでおかしな挙動になる可能性があります。

とくに attributes に値が入っていることを前提としたコードになっている場合に、その attributes を持たない無関係のフォーマットが適用されるとエラーが発生します。

RichTextの開発者のプラグインで実際にエラーを確認することが可能です。

ellatrix/advanced-rich-text-tools
Advanced Rich Text Tools for Gutenberg. Contribute to ellatrix/advanced-rich-text-tools development by creating an account on GitHub.

対応

とりあえずIssueで報告しました。

RichText FormatType which has same tag but different class is applied · Issue #13687 · WordPress/gutenberg
Describe the bug There are cases to be applied not related FormatType to richtext if edit the class on the editor but not applied on the front end To Reproduce ...

2019/3/27 時点での状況

RichTextの開発者のプラグインでも問題が発生するのですが、まだバグとして認識されていないようです。。。

2019/4/22 追記

別のバグの修正によってこのバグも修正されました。

WordPress5.2 にも反映されるようです。

Fix 13776: Format is already registered to handle class name by gziolo · Pull Request #15072 · WordPress/gutenberg
Description Fixes #13776. Custom formats are logging this error: gutenberg/packages/rich-text/src/register-format-type.js Line...

コメント

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