ブロックエディタ (Gutenberg) でスタイルセレクト機能を再現する
この記事は約 3 分で読めます。
特に段落ブロックで記事を
書いていると文字列の
一部だけ色を変えたいとか、
マーカー線を引きたいとか思う事が
あり、結局クラシックブロックを
使う事が結構あって、
だったら、
「クラシックエディタでいいじゃん！」
みたいに思ったりします。
このような機能を
ブロックエディタに反映するのは
テーマ側でサポートしてくれると
勝手に思って手を付けなかったのですが、
クラシックエディタの
スタイルセレクト機能を
ブロックエディタで再現するという
記事を発見したので試してみました。
スタイルセレクト機能とは
呼び方が合っているかわからないので、
旧エディタの独自スタイル選択ボックスをブロックエディタ … – WEMO
どの機能のことを言っているのか、先に述べておきます。
クラシックエディタでは、うまくカスタマイズしてあげることで、
「スタイル」と表記されたプルダウンメニューを使用することができ、
あらかじめ用意したデザインを適用することができます。
こう言った便利な機能を、
ブロックエディタで使えるようにしていこう、
というのが今回のテーマです。
The process involves activating a built-in but hidden “button" in TinyMCE called styleselect, then defining each style that you want to show in the Styleselect pulldown menu. This article assumes that you are already familiar with the basics of Writing a Plugin and the Plugin API of hooks and filters.
TinyMCE Custom Styles – WordPress Codex – WordPress.org
要は、
クラシックエディタに
搭載されていた便利機能を
アイキャッチ画像や
上記画像のような感じに
ブロックエディタでも
使えるようにしょうと
言う事です。
ブロックに
スタイルを追加する方法では、
プレビュー機能もあり
使いやすくなっています。
まぁ、簡単に書きましたが、
これが、わたしのスキルでは
一筋縄ではいかなくて苦労しました(汗
https://wemo.tech/2165今後の展開
おそらくと言うか、
かなりの確率でテーマ側で
このような機能は装備してくると
信じているのですが、
とりあえず
この方法は、
段落ブロックと
カスタムブロックで再現したので
数回に分けて記事にしたいと思います。
ご自身で出来るよって方は、
わたしの記事更新を待たずに
トライしてみる事をおすすめ致します。
最後まで
ご高覧いただきまして
有難うございました
