Gutenberg ブロックエディターの機能を拡張してブログの書きやすさを爆上げするプラグイン Snow Monkey Editor をリリースしました!

もともとブログ・メディア向けとを謳っていた Snow Monkey ですが、アップデートを重ねるにつれてコーポレートサイト向けの機能がどんどん強化され、ブログユーザー向けの強みが薄くなってきたな?と感じるようになってきました。

ブログ向けテーマには SWELL などの素晴らしいテーマがありますが、ブログとして Snow Monkey を使っているユーザーさんもいらっしゃいますし、Snow Monkey でブログをやる意味をもうちょっと強化したいな…という意図もあって、Snow Monkey Editor というプラグインをつくりました。

WordPress 公式ディレクトリで配布しているので、WordPress の管理画面からインストールできます。

Snow Monkey Editor の主な機能

  • ブロックツールバーの機能拡張
    部分文字列の文字色・背景色・文字サイズ変更・蛍光ペン、テキストバッジ、書式クリアボタン
  • コアブロックにいくつかのブロックスタイルを追加
  • 各ブロックにブラウザサイズによる非表示機能を追加
    例:スマホサイズのときだけ非表示
  • 各ブロックにロールによる非表示機能を追加
    例:非ログインユーザー、購読者には非表示
  • 各ブロックにロールによる編集ロック機能を追加

ブロックツールバーの機能拡張

ブロックエディターには、標準で文章の文字色や背景色、文字サイズを変更する機能があります。が、標準機能でできるのは「段落ブロック全体」の文字色・背景色、文字サイズを変更できるだけで、「一部分だけ」の文字色や背景色、文字サイズを変更することはできません。

以前一部分だけもできるようにしたいという issue を Gutenberg のリポジトリで見かけた記憶があり、そのうち標準機能として追加されるだろうと思っていたのですが、いつになってもそういう気配は感じないなーという感じになってきたのでつくってみました。

テキスト文字色テキスト背景色テキスト文字サイズテキストバッジ蛍光ペン書式設定のクリアがあります(v0.2.3 現在)。

もちろんそれぞれの書式設定を組み合わせることもできます。一度設定した書式設定の範囲をもう一度範囲指定すると、再度色等の設定を変更することができます。

コアブロックのブロックスタイル

アラート

Snow Monkey は Snow Monkey Blocks プラグインで様々なカスタムブロックを追加することができるようになっており、例えば「アラートブロック」や「吹きだしブロック」などブログを書くにおいても使い勝手が良いブロックを用意しています。ただ、ちょっとした装飾についてはいちいちカスタムブロックを追加するよりも、ばーっと文章を書いたあとにブロックスタイルを切り替えるほうがストレスが少ないな…ということに気づき、アラート系についてはブロックスタイルとしても適用できるようにしました。

リスト

それとリストにも汎用的なスタイルをいくつか用意しました。

付箋

他にもちょっとした装飾として汎用性が高いであろう付箋(大と細)ミニ吹きだしも用意しています。

流体シェイプ

あとは、最近流行りの「流体シェイプ」を画像に適用できたり、白い画像を見やすく配置できるように画像に影をつけたりもできるようにしました。

ボタン

いかにも押したくなるリッチな影付きボタンのブロックスタイルも追加しました。

ブロック拡張機能

ブロック拡張機能はコアブロックと Snow Monkey Blocks にだけ追加されます。もし別のブロックにも拡張機能を追加したい場合は下記の記事を参照してください。
https://snow-monkey.2inc.org/2020/03/05/snow-monkey-editor-v1/

ブラウザサイズによるブロックの非表示機能

web 制作をしていると「これはスマホでは収まらないからスマホでは非表示にして、タブレット・PC ではこっちを代替として表示しよう」みたいなことがしばしばあるかと思います。でもブロックエディターにはそのような機能は用意されていないので、自分で CSS クラスを定義したり、カスタム HTML ブロックでゴニョゴニョしたり、少々面倒だなと思っていました。そこで、Snow Monkey Editor にスマホタブレットPC でそれぞれ非表示にできるようにする機能を入れました。

ロールによるブロックの非表示機能

また、ブラウザサイズだけでなく、ユーザーのロールでもブロックを表示させることもできます。

ロールによるブロックの非表示機能は、render_block フィルターフックが適用される場所でのみ機能します。通常、the_content()the_excerpt() で出力される部分は正しく制限されます。

ロールによるブロックの編集ロック機能

複数人でサイト・ブログを運営している場合、「この部分は管理者だけが編集できるようにしたい」ということがあると思います。そこで、各ブロックごとに、ロールによる編集ロックができるようにしました。

インスペクターの「編集ロック」パネルは、管理者にだけ表示されます。編集ロックされたブロックは透過して表示され、選択することができなくなります(例えば投稿者に対して編集ロックをかけたブロックは、投稿者の場合だけ透過表示&編集できない)。

公開設定

サイトやブログを運営していると「イベントやキャンペーンの開始日時に合わせてこの部分を表示させたい」ということがあると思います。そこで、各ブロックごとにブロックの公開日時を設定できるようにしました。

公開終了設定

公開終了日時も設定できます。

アニメーションの設定

各ブロックごとに、ブロックが画面に入ってきたときに動作するアニメーションを設定することができます。

例えばこんな感じ

アニメーションはモダンブラウザでのみ動作します。IE11 等では動作しませんのでご注意ください。

フィルターフック

ダウンロード

ダウンロードは WordPress 公式ディレクトリ、あるいはお使いの WordPress の管理画面から!

使ってみて、良かったらぜひ上記ページにレビューを書いたりツイート(#wpsnowmonkey)したりしてください!よろしくおねがいします!

レビュー記事

さっそくありがとうございます!

この記事を書いた人

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!