まさに匠！ ブロックライブラリを使ってみよう

2019年2月6日2019年10月8日

ブロックエディタ (Gutenberg) を
もっと便利に使いたいけど
カスタマイズは難しくて出来ない、
よくわからない、
そんなあなたにおすすめなのが
「ブロックライブラリ」。

ブロックライブラリとは

Gutenbergではブロックという概念が導入された。
コアだけでも様々なブロックが存在する
——そしてそのいくつかは明らかにいらない——のだが、
そのブロックをさらに拡張することができる。
こうしたものをブロックライブラリと呼ぼう。

Before Gutenberg – ブロックライブラリを知っておこう – Capital P

ようするに
既存のブロックの他に
実用的で便利な機能を搭載したブロックを追加して、
装飾を施しデザインされたページをつくる事が出来る、
そんな便利なワードプレスのプラグインです。

そんな匠のブロックを
組み立てて物語を創る！

これは素直に良い！と思います。

• 「SANGO Gutenberg」

• 「Snow Monkey Blocks」

ご紹介の
ブロックライブラリ、
開発元のテーマに最適化されているのですが、
 どのテーマでも使用することができる利点があります。

もちろん、いくつかの制限があり、
そのテーマでなければ
使えないブロックがあったり、
スタイルの最適化が必要になったり、
(開発元のテーマ以外では)
「こりゃ使えね～」ってなる場合も
あるかもしれませんが、
トータル的には、ほぼ便利に使えます。

SANGO Gutenberg

SANGOは、Webメディア「サルワカ」
から生まれた有料WordPressテーマです。

SANGOでは、
Gutenberg専用のプラグインを用意しています。

このプラグイン、
SANGOでなくても使えます。

こちらのプラグインは、SANGOおよびWordPressの最新バージョンとの互換性のみを考慮して開発されます。Ver1.6以下では使用できないことにご注意ください。
Gutenbergにはテーマに関わらず利用できるWordPress標準のスタイルが多く含まれています。SANGOでは、これらの標準スタイルはそのまま活かしていく方針です。

SANGOでGutenberg（グーテンベルク）を始めよう | SANGO …

ブロック自体は三つですが、
標準のブロックを使いやすく
カスタムしている点は
さすが！の一言です！

見出し、引用、リストなどを挿入すると、SANGO標準のスタイルと同じ装飾でエディター上に表示されます。テーマカスタマイザーで選択しているメインカラーやアクセントカラーがこれらのスタイルに反映されます。
この他にも「ボタン」や「画像」などの一般ブロックにSANGO Gutenberg独自のスタイルバリエーションを追加しています。

https://saruwakakun.com/sango/gutenberg-introduction#SANGOGutenberg

「タイトル付ボックス」という名前の
SANGOオリジナルのブロック、
これが秀逸です。

「吹き出し」のブロック、
これも使い勝手がよく設計されています。

Snow Monkey Blocks

ノーコーディングで美しいサイトをつくれる機能性と、
クリーンなコードによる高い拡張性を備えた
WordPress テーマ、Snow Monkey。

Snow Monkey Blocks は、
ブロックエディタ (Gutenberg) で
「これをやりたかったけどできない」を「できる」ように、
実用的で便利なブロックを追加するプラグインです。

「アラートボックス」「吹き出し」「囲み枠」「ボタン」「FAQ」
「アイコン付きのリスト」「価格表」「レーティングボックス」
「ステップ（タイムライン表示）」「お客様の声」

など、
便利な機能がたくさん搭載されています。

たくさんの
ブロックが追加されます。

とにかく、
これで全て足りるのでは？
これが匠の業ですね！

Snow Monkey Blocksの注意点

Snow Monkey Blocks のブロックのデザインは
FontAwesome5 のJS＋SVG描画版が使われています。
Luxeritas WordPress Theme では
FontAwesome5 のCSS版が使われており、
そのままSnow Monkey Blocks を有効にすると、
一部 FontAwesome のアイコンが表示されなくなります。

newの横のFontAwesomeは
？に化けてしまった・・・。

そこで以下のコードを子テーマのfunctions.phpに追記し
Snow Monkey BlocksのFontAwesomeを
読み込まないようにする必要があります。

add_filter( 'snow_monkey_blocks_enqueue_fontawesome', '__return_false' );

Snow Monkey Blocks をCSSで
テーマに合わせるカスタマイズを行っている
記事もありますので、
こだわりたい方は参考になさってください。

こちらもおすすめ

最後に

テーマに依存したブロックライブラリを
利用し投稿を量産すると、
結果的にそのテーマを
使い続けなければならなくなる。

そういった意味では、
このような汎用ライブラリは
ある意味スタンダードなのかもしれません。

あくまで、
個人的主観と言う事を付け加えさせて頂きます。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました