2019.02.15

Gutenberg用の文章修飾プラグインを開発しました

DropDown

Gutenberg

RichText

ツールバー

プラグイン

リッチテキスト

Gutenberg エディタのツールバーに文章修飾用のボタンを追加するプラグインを作成しました。

導入手順

最新版をGitHubからダウンロード
release.zip
「プラグインのアップロード」からインストール
プラグインを有効化

使用方法

プラグインを有効化した時点で以下のボタンが使えます。

文字色変更
背景色変更
文字サイズ変更
いくつかの蛍光ペン（次に説明する設定の例）

設定の追加

設定を追加するとボタンの種類を増やしたりボタンのアイコンを変えたりすることができます。

管理画面左メニューから「Add RichText Toolbar Button」⇒「設定管理」に移動
「新規追加」
設定名やスタイル等の情報を入力
「公開」ボタンを押下

設定管理ページでは設定のエクスポート・インポートを行うことができます。

設定の詳細

タグ名

span や cite などのタグを指定します。
何も指定しない場合は span が使用されます。

クラス名

クラス名を指定します。
他のボタンで使用されているものを指定するとエラーになります。
何も指定しない場合は 投稿IDを使用した被らないもの が自動で使用されます。

スペース区切りで複数のクラスを指定することも可能です。

また、例えばテーマで用意されているデザイン用のクラスを指定しておくと、そのデザインのクラスの付け外しができるボタンを追加することができます。

設定のページではテーマの style.css が自動で読み込まれるので、プレビューで確認しながら設定することができます。

Gutenbergエディタに対応しているテーマであればエディタでもスタイルが反映されます。

グループ名

同じグループ名のボタンが複数あった場合にドロップダウンでまとまります。
多くのボタンを追加する場合に横に広がりすぎるのを防ぐことができます。
何も指定しない場合はドロップダウンになりません。

アイコン

ボタンに表示するアイコンを指定します。
dashicon や URL等の画像を指定することができます。

スタイル

適用するデザインを指定します。
セレクタを除いた部分を記述します。

プロパティ: 値

before や after のような疑似クラスは次のルールで記述します。

[疑似クラス] プロパティ: 値

例：

display: block;
padding: 10px;
background: #f0f9ff;
border: 1px solid #acf;
[before] font-family: "Font Awesome 5 Free";
[before] content: "\f06a";
[before] font-size: 1.2em;
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #9cf;
[before] border-right: 1px solid #acf;

いくつかのプリセットを用意したので参考にしてください。

テーマの用意したスタイルを適用するだけであれば入力は不要です。