Snow Monkey Blocks を自分のテーマに合うように余白調整してみた

WordPress のプラグイン Snow Monkey Blocks (Gutenberg 用のカスタムブロック集) だが、Snow Monkey テーマに最適に調整されているので、Snow Monkey ではないテーマを使っていると余白が整わない可能性がある。

余白を調整したい場合は、自分で CSS を追加しなければならない。以下の例は、Balloon ブロックを margin を使い、ブロックの下の部分の余白を指定することで、余白が生まれるようにしているもの。

.wp-block-snow-monkey-blocks-balloon {
  	margin: 0 0 +2em 0;
}

Snow Monkey Blocks Baloon ブロックの改行

Balloon ブロックだが、英語の単語が単語の途中で改行されてしまう問題が起こったので以下の CSS を追加して対応してみた。この件は、キタジマさんに連絡してあるので、次のアップデートで直るのではと予想している。

.smb-balloon__body {
  	word-break: normal;
}

Snow Monkey Blocks のクラス名一覧表

CSS を追加する際に書き出す必要があったので、リファレンスにもなるように Snow Monkey Blocks のクラスの一覧表を作ってみた。

Block 名	クラス名
共通ブロック
Step	wp-block-snow-monkey-blocks-btn.wp-block-snow-monkey-blocks-step
Ballon	wp-block-snow-monkey-blocks-balloon
Button box	wp-block-snow-monkey-blocks-btn-box
Icon list	wp-block-snow-monkey-blocks-list
Alert	wp-block-snow-monkey-blocks-alert
Button	wp-block-snow-monkey-blocks-btn
Box	wp-block-snow-monkey-blocks-box
Pricing table	wp-block-snow-monkey-blocks-pricing-table
Rating box	wp-block-snow-monkey-blocks-rating-box
FAQ	wp-block-snow-monkey-blocks-faq
Testimonial	wp-block-snow-monkey-blocks-testimonial
セクション
Section	wp-block-snow-monkey-blocks-section
Section (with image)	wp-block-snow-monkey-blocks-section-with-image
Section (with background image)	wp-block-snow-monkey-blocks-section-with-bgimage
Section (with items)	wp-block-snow-monkey-blocks-section-with-items

Snow Monkey の Gutenberg プラグインを試してみたで、どのようなブロックがあるのか見ることができます。Snow Monkey Blocks は以下のデポジトリィにあります。