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;
}
追記 (2018/10/08): キタジマさんからこの件でメッセージをいただきました。ありがとうございます。

overflow-wrap: break-word; (word-wrap: break-word;) に変更を考えているとのことでした。テストしたところ、このワタシガミルモノでは、overflow-wrap が Balloon ブロックには効かなかったので、とりあえずは word-break で対応を続けます。Snow Monkey Blocks がアップデートされたら、この件を再考したいと思います。iPhone などの英単語が途中で改行されてしまうのを防ぎたいので、overflow-wrap が効いたとしても normal に指定する必要がありそうです。

Snow Monkey Blocks のクラス名一覧表

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

Block 名クラス名
共通ブロック
Stepwp-block-snow-monkey-blocks-btn.wp-block-snow-monkey-blocks-step
Ballonwp-block-snow-monkey-blocks-balloon
Button boxwp-block-snow-monkey-blocks-btn-box
Icon listwp-block-snow-monkey-blocks-list
Alertwp-block-snow-monkey-blocks-alert
Buttonwp-block-snow-monkey-blocks-btn
Boxwp-block-snow-monkey-blocks-box
Pricing tablewp-block-snow-monkey-blocks-pricing-table
Rating boxwp-block-snow-monkey-blocks-rating-box
FAQwp-block-snow-monkey-blocks-faq
Testimonialwp-block-snow-monkey-blocks-testimonial
セクション
Sectionwp-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 は以下のデポジトリィにあります。

Snow Monkey Blocks
シンヤB
アーティスト、教育者、ドラマトゥルク。詳しくは、プロフィールをご覧ください。