6ヶ月前に投稿

ブロックエディタ (Gutenberg) でスタイルセレクト機能を再現する

2019年1月27日

この記事は約 3 分で読めます。

4.5

特に段落ブロックで記事を
書いていると文字列の
一部だけ色を変えたいとか、
マーカー線を引きたいとか思う事が
あり、結局クラシックブロックを
使う
事が結構あって、
だったら、
クラシックエディタでいいじゃん!
みたいに思ったりします。

このような機能を
ブロックエディタに反映するのは
テーマ側でサポートしてくれると
勝手に思って手を付けなかったのですが、

クラシックエディタの
スタイルセレクト機能
ブロックエディタで再現するという
記事を発見したので試してみました。

スタイルセレクト機能とは

呼び方が合っているかわからないので、
どの機能のことを言っているのか、先に述べておきます。
クラシックエディタ
では、うまくカスタマイズしてあげることで、
「スタイル」
と表記されたプルダウンメニューを使用することができ、
あらかじめ用意したデザインを適用することができます。
こう言った便利な機能を、
ブロックエディタで使えるようにしていこう、
というのが今回のテーマです。

旧エディタの独自スタイル選択ボックスをブロックエディタ … – 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

要は、
クラシックエディタに
搭載されていた便利機能

アイキャッチ画像や
上記画像のような感じに
ブロックエディタでも
使えるようにしょう

言う事です。

ブロックに
スタイルを追加する方法では、
プレビュー機能もあり
使いやすくなっています。

まぁ、簡単に書きましたが、
これが、わたしのスキルでは
一筋縄ではいかなくて
苦労しました(汗

今後の展開

おそらくと言うか、
かなりの確率でテーマ側で
このような機能は装備してくる

信じているのですが、

とりあえず
この方法は、
段落ブロックと
カスタムブロックで再現したので
数回に分けて記事にしたいと思います。

自身で出来るよって方は、
わたしの記事更新を待たずに
 トライしてみる事をおすすめ致します。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ブロックエディタ (Gutenberg) でスタイルセレクト機能を再現する