Marker AnimationプラグインをGutenbergエディタに対応させました

WordPress

Marker Animationプラグインは蛍光ペンを引くようなアニメーションを設定できるようにするWordPressのプラグインです。

technote-space/marker-animation
WordPress plugin to add underline animation. Contribute to technote-space/marker-animation development by creating an account on GitHub.

表示されるとマーカーで線を引くようなアニメーションが開始されます。

一度画面から外れた後に再び表示されたときに再度アニメーションを行うようにもできます

マーカーの色も自由に設定できます。

マーカーの色も自由に設定できます。

文字を太くしないことも可能です。

ゆっくり塗ることもできますし、少し遅れてアニメーションを開始することもできます

ストライプデザインのマーカーも追加しました。

リセット

ツールバーにボタンを追加

Gutenbergのツールバーにボタンを追加する方法は以前紹介しました。

Gutenbergエディタ(ブロックエディタ)にボタンを追加する
WordPressのバージョンが5.0になり、エディタが新しくなりました。これまでのTinyMCEとは異なりReactを利用したモダンな実装になっており、エディタへの機能の追加方法も大きく変わりました。ここでは選択した文字列を特定のクラスを

下線を引いたり文字色を変えたりするのに便利な機能を追加することができるのですが、いくつもボタンを追加すると横に長くなってしまいます。

Marker Animationプラグインではマーカーの色や太さ、マーカーを引く速さなどをセットにした設定をいくつも保存できるため、ドロップダウン形式でまとまるようにボタンを追加しました。

プレビュー表示

引いたマーカーと同じ色で表示できるようにしました。

Marker Animationは色を自由に設定できるため、あらかじめ決められたクラスにCSSで色を付けておくことができません。

後から設定を変えてもその色になるような仕組みになっています。

既知の問題

Gutenberg側にバグと思われる動作があり、設定で追加したものを削除したとき等にエディタ側のみでおかしな動きをする可能性があります。

Gutenbergのリッチテキストの既知の問題
経緯こちらの記事の現象が開発中のプラグインでも発生したため原因を調査しました。現象クラスとタグ名を指定して registerFormatType でフォーマットタイプを登録ビジュアルエディタのツールボタン等...

2019/5/20 追記

WordPress v5.2 でこの現象は解消されました。

要望・バグ報告等

technote-space/marker-animation
WordPress plugin to add underline animation. Contribute to technote-space/marker-animation development by creating an account on GitHub.

今後の予定

technote-space/marker-animation
WordPress plugin to add underline animation. Contribute to technote-space/marker-animation development by creating an account on GitHub.

コメント

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