あくまで当記事公開時点の話ですが、プラグイン作成者がコメントをだしているので引用してメモ的に紹介しておきたいと思います。
AddQuicktagをGutenberg対応させるための記事ではないのでその点はご了承ください。
プラグイン作成者のコメント
上記の2つ目より以下を引用します。
The plugin don’t work on the Gutenberg Editor, only on Classic editor. Currently we haven’t support for Gutenberg. However currently we haven’t requirements from users for implement support for Gutenberg.
However you can use reusable blocks inside Gutenberg. Maybe this helps you to use your custom input on Quicktags?
1つ目も少し踏まえて要約すると以下のようになるかと思います。
- AddQuicktagは、クラシックエディタ(クラシックブロック)でのみ動作する
- 再利用ブロックで対応可能だと考えている
- 現在の状態とは別に対応してほしいというような要望はもらっていない
1つめに関しては、クラシックブロックはほぼTinyMCE(旧ビジュアルエディタ)なので、そこで使えていたように使えます。ただし、クラシックブロックにはテキストモードがないため、テキストモードで使えていたボタンはGutenbergでは使えません。
2つめの再利用ブロックに関しては、例えばpタグブロックを選んでサイドバーに独自クラスを入れて使った場合、そのブロックを再利用ブロックに追加(ブロック上部に附属しているツールバーから選択可能)することで、そのブロックを再び使うことができるためです。
また、仮にクラシックブロック以外で使えるように対応されたとしても、ツールバーにアイコンボタンを追加して使う形にしかならないもようです。全く新しいアプローチをとって自由な対応を行う可能性もないとはいえませんが(Gutenbergの中身はJSなので独自仕組みを作れば恐らく可能でしょう)。
カスタム例
前項の参考URLで知った情報も参考にしつつツールバーに任意のボタン追加を試しました。
- Gutenberg(ブロックエディタ)メモ: 任意のHTMLタグを範囲選択で挿入可能なボタンをRichTextのツールバーに追加する
- Gutenberg(ブロックエディタ)メモ: 任意のHTMLタグを範囲選択で挿入可能なツールバーを付ける
RichTextの方は構築方法がまだマシではありますが、何れにせよ以前のAddQuicktagのボタンのような使いやすさは望めなさそうです。
結び
エディタ用のプラグインが対応しているか、あるいは今後対応するのかしないのかは重要な問題となります。
この系統は公式ディレクトリのサポートフォーラムに投稿されている場合が多いと思われるので、各自必要に応じて自分で確認することをお勧めします。
対応しないといっていた所が突然対応したり最悪プラグインの提供やサポートをやめる可能性もあり、必要となったその時点での正しい情報が必要になりますので。
関連記事
Gutenberg(ブロックエディタ)に関連する記事一覧。
- [Gutenberg対応版]WordPressで複数のCSSをまとめてインラインCSSとして出力する
- @wordpress/create-blockで一つのプラグインに複数のブロックを入れる
- @wordpress/wp-env と @wordpress/create-block で簡単にブロック開発環境を作る
- 3度目のブロック開発環境(Docker Desktopとcreate-block)
- Gutenberg(ブロックエディタ)メモ
- Gutenberg(ブロックエディタ)メモ -Gutenbergの使い方で迷うところ
- Gutenberg(ブロックエディタ)メモ -ハンドブックでわからないところ1
- Gutenberg(ブロックエディタ)メモ -ハンドブックでわからないところ2
- Buttonを使う(MediaUploadとRichTextも含む)
- metaデータを設定する
- Templatesとplaceholderを使う
- Toggleを使う
- カスタムHTMLを使う
- サイドバー(Inspector)を設定する
- サイドバーを作ってcheckboxを使う
- サイドバーを作ってラジオボタンを使う
- ショートコードの代替案的なブロックを作る
- ラジオボタンでクラスを変更可能なコードエディタブロックを作る
- 登録されているショートコードの一覧を表示したブロックを作る
- AddQuicktagのGutenberg対応に関して [現在表示中]
- Classic Editorプラグインに関して
- wp_is_mobile関数を利用して出し分け機能をもったブロックを作る
- 任意のHTMLタグを範囲選択で挿入可能なツールバーを付ける
- 任意のHTMLタグを範囲選択で挿入可能なボタンをRichTextのツールバーに追加する
- 自動でテーマCSSの指定箇所をGutenberg用CSSとして用いる方法の検討
- 自動で出力されるブロック用のCSSを取除く
- Gutenberg関連の参考サイト:メモ
- WPのsetMeta()で複数のキーと値を保存する
- WPのブロックエディタでTypeError: Cannot read property ‘firstChild’ of nullのエラー:メモ
- WPのブロックエディタでUncaught Error: Minified React error #321のエラー:メモ
- WPのブロックエディタでタグをドロップダウンで変更する:メモ
- WPのブロックエディタでブロック追加用ボタンを表示させる:メモ
- WPのブロックエディタで親の値を子に設定する:メモ
- WPのブロック作成メモ
- WPの独自ブロックが設定されている時のみCSSやJSをフロントに表示する方法
- ブロック作成時のclassNameに関するメモ
- ブロック開発の環境構築におけるwp-scriptsとCreate Guten Blockのメモ
3人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。