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

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

4

ブロックエディタ (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で
テーマに合わせるカスタマイズを行っている
記事もありますので、
こだわりたい方は参考になさってください。

最後に

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

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

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

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
まさに匠！ ブロックライブラリを使ってみよう

PluginsBlock Editor, Custom Blocks, Gutenberg, Plugins

Posted by FOUR 4to6