Zenn
株式会社HAMWORKS
🤯

【WordPress】ブロックスタイルとブロックパターンの使い分け

ちあき
2024/06/06に公開
WordPress
tech

ブロックに何らかのスタイルをつけたブロックを追加する方法は2種類あります。

  • ブロックスタイル
  • ブロックパターン

それぞれの使い方と、どういう使い分けをしているのかご紹介します。

ブロックスタイル

https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/

デフォルトのコアブロックでも一部のブロックにあります。

例えばボタンブロック。
デフォルトでは塗りつぶしですが、ブロックスタイルを選択すると輪郭スタイルに変える事ができます。

これを自分で作成して作ることができます。
矢印つきのボタンスタイルを追加してみます。

register_block_style でスタイルを登録

functions.phpに記述します。

https://developer.wordpress.org/reference/functions/register_block_style/

functions.php
add_action( 'init', 'custom_block_styles' );
function custom_block_styles(): void {
	register_block_style(
		'core/button',
		array(
			'name'         => 'arrow',
			'label'        => '矢印つき',
		)
	);
}

上記のスタイルだとCSSがエンキューされない状態です。（※テーマ全体に適用しているCSSに書く、とかいう場合ならもちろん適用されます）
ブロックが使われているときだけCSSをエンキューしたい場合は、wp_enqueue_block_styleを使ってブロック用のCSSをエンキューします。

インラインでスタイルをつける方法もありますが、PHPファイルに記述することになるので、あまり使い勝手がよくないと思います。

functions.php
add_action( 'init', 'custom_block_styles' );
function custom_block_styles(): void {
+	wp_enqueue_block_style(
+		'core/button',
+		array(
+			'handle' => 'custom-core-button',
+			'src'    => get_parent_theme_file_uri( 'path/to/button-css-file.css' ),
+			'path'   => get_parent_theme_file_path( 'path/to/button-css-file.css' ),
+		)
+	);

	register_block_style(
		'core/button',
		array(
			'name'         => 'arrow',
			'label'        => '矢印つき',
+			'style_handle' => 'custom-core-button',
		)
	);
}

ブロックスタイルで「矢印つき」を選択した場合にボタンブロックはこのように出力されます。（親のcore/buttonsブロックは省略しています）

<div class="wp-block-button is-style-arrow"><a class="wp-block-button__link wp-element-button">矢印つきボタン</a></div>

ブロックスタイルは.is-style-というクラスが付与されます。なので、CSSではこのように書くことになります。

button.css
.wp-block-button.is-style-arrow {
    ...
}

実際にかなり簡略にした矢印をつけてみます。

button.css
.wp-block-button.is-style-arrow .wp-block-button__link {
    position: relative;
    padding-right: 30px;
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
    content: '>';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

右端のボタンが矢印付きのボタンです。きちんと>が表示されていますね。
今回のスタイルでは.wp-block-button.is-style-arrow .wp-block-button__linkに対してpadding-right: 30px;をCSSでつけていますが、管理画面でCSSを変更するとそちらが優先されます。

ブロックスタイルを作る場合は、こういった管理画面で設定できるスタイルとの兼ね合いをよくよく検討してCSSをつけましょう。

今回のようにボタンだと、こんなことが考えられるかなと思います

  • 矢印の位置配置の仕方
    • position: absoluteでやる
    • display: flexでやる
      • flexを使う場合は、ボタン内で強調文字やイタリック等が入ったりしたときに表示を崩さないように作る必要があることを念頭に入れておいてください
  • 矢印の色
    • 管理画面のテキストカラーを適用できるようにする
    • 画像で固定にする
    • svgでつけて、fillをcurrentcolorにする
  • 余白（主にpadding）
    • 矢印側のpaddingは完全に固定値にする（!importをつけて変更できないようにする）
      • 正直固定にするのは悪手だと思ってます。管理画面で変更できてこそCMSかなと思っているので
    • 初期値としていれておくけど、管理画面で上書きできるようにする

などなど。

ブロックパターン

https://developer.wordpress.org/themes/patterns/

デザインを使いまわしたいけど内容は変えたいときはブロックパターンの出番です。
よく使うのだと、こういう英語と日本語を組み合わせた見出しグループでしょうか。

グループに段落と見出しを入れてもいいですが、毎回これを1から作るのは面倒ですよね。
そういうときにパターンに登録しておくのが便利です。

パターン化したいブロックを選択して、縦の三点リーダーから「パターンを作成」をクリックします。

下図のようなポップアップが表示されるので、名前とカテゴリーを入力し、同期のチェックを外します。

これでパターンを作成できました。

この作り方だとテーマに同梱できない点には注意

Create Block Themeプラグインを入れていても、このポップアップからパターンを作っても「変更内容を保存」でテーマに保存されないので注意が必要です。
テーマに同梱しておきたい場合は、縦の三点リーダーから「スタイルをコピー」し、テキストエディターで作成したPHPファイルにペーストします。

このとき、PHPファイルのディレクトリはpatternsにしておいてください。ここがパターンのディレクトリになります。

patterns/heading-group.php
<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"x-large"} -->
<p class="has-x-large-font-size">ABOUT</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"medium"} -->
<p class="has-medium-font-size" style="font-style:normal;font-weight:700">会社概要</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

次に、作ったPHPファイルにファイルヘッダーをつけます。

https://developer.wordpress.org/themes/patterns/registering-patterns/#registering-patterns

patterns/heading-group.php
+<?php
+/**
+ * Title: Heading Group
+ * Slug: custom/heading-group
+ * Categories: featured
+ */
+?>
　<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":　{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
　<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"x-large"} -->
　<p class="has-x-large-font-size">ABOUT</p>
　<!-- /wp:paragraph -->

　<!-- wp:paragraph {"style":{"typography":　{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"medium"} -->
　<p class="has-medium-font-size" style="font-style:normal;font-weight:700">会社概要</p>
　<!-- /wp:paragraph --></div>
　<!-- /wp:group -->

これでパターンから選択できるようになります。

同期とは？

同期がオンになっていると、デザインだけでなく入力内容も同じものが表示されます。
入力内容を変更したら、このパターンを使用した箇所すべてで内容が変更されます。

使い所としては、ブログの著者情報やCTAボタンでしょうか🤔

なお、同期ブロックはテーマに含めることができないので、Git等でバージョン管理に含めたい場合はテンプレートパーツで作っておくことをおすすめします。

スタイルをつけてブロックを組み合わせるだけでなく、追加CSSクラスにクラス名をいれておけば、運用時にいちいち「ここのスタイルを変えるには追加CSSクラスに◯◯というクラスを入れて…」なんて説明の手間も省けます。

<!-- wp:button {"className":"arrow-button"} -->
<div class="wp-block-button arrow-button"><a class="wp-block-button__link wp-element-button">ボタン</a></div>
<!-- /wp:button -->

パターン側はこのブロックで作っておき、.wp-block-button.arrow-button に対してCSSでスタイルを当てます。
ここではブロックスタイルのときにつくったスタイルをそのまま流用しました。

ブロックスタイルは塗りつぶしのままですが、矢印がついていることが確認できます。

ブロックスタイルを使っていないので、輪郭を選択して矢印を表示させることも可能です。

どういう使い分け方をしているのか

まず、複数ブロックを組み合わせるという前提があるならばパターン一択です。
ブロックスタイルはあくまでブロック単体に対してスタイルをつける方法なので、「上にブロックがあるとき、このブロックは自動的に◯◯というスタイルになる！」というような使い方はできません。

ブロック単体であれば、テーマでのデフォルトでの状態やユースケースを考えたりしながらどちらが適しているかを考えます。

リストのマーカーをチェックマークにしたい場合

デザインを見て、投稿ページや固定ページ内で何度も汎用的に使いそうなスタイルだと仮定します。
リストのブロックスタイルから「チェックマーク」というスタイルを選べるようにしたほうが使い勝手がよさそうです。

ブロックスタイルだと、入力したあとでもスタイルを変えられるのがよいですね。

パターンでももちろん同様のことはできますが、ある程度入力したあとでパターンからデザインを当てるということはできないので、注意が必要です。

見出しの横にボーダーをつけたい場合

場所に限らず、どのページのどの場所でも同じスタイルのときは、スタイルを作らずにデフォルトの状態に対してスタイルをつけることを検討します。

functions.php
add_action( 'init', 'custom_block_styles' );
function custom_block_styles(): void {
    wp_enqueue_block_style(
        'core/heading',
        array(
            'handle' => 'custom-core-heading',
            'src'    => get_parent_theme_file_uri( 'styles/blocks/core/heading.css' ),
            'path'   => get_parent_theme_file_path( 'styles/blocks/core/heading.css' ),
        )
    );
}

例えばh2がいつもボーダーつきの場合はこんな感じのスタイルになるでしょうか。

heading.css
h2.wp-block-heading {
    border-left: 5px solid #000;
    padding-left: 10px;
}

ただし、見出しブロックはエディター上で左寄せ・中央寄せ・右寄せが選択できるので、右寄せにしたときボーダーはどうする？は考えておく必要があるかなと思います。（ex:右寄せのときはボーダーは右側に変わる、など）

でないと、こういうことになります。

どういう作り方をするにも関わらず、こういうスタイルを使われることも想定してスタイルを作ることをおすすめします。（Theme Unit Testが有用です）

話がそれたので戻します。

通常使うスタイルではなく、例えばページタイトルなどの要所で使う場合を考えます。

ブロックスタイルでやるのなら、「左ボーダー」というスタイルを作ります。それなら、テキスト配置が右のときはブロックスタイルをつけなければいいだけですよね。右にボーダーをつけたいのなら、「右ボーダー」というスタイルもつけます。

functions.php
<?php
add_action( 'init', 'custom_block_styles' );
function custom_block_styles(): void {
    wp_enqueue_block_style(
        'core/heading',
        array(
            'handle' => 'custom-core-heading',
            'src'    => get_parent_theme_file_uri( 'styles/blocks/core/heading.css' ),
            'path'   => get_parent_theme_file_path( 'styles/blocks/core/heading.css' ),
        )
    );

    register_block_style(
        'core/heading',
        array(
            'name'         => 'left-border',
            'label'        => '左ボーダー',
        )
    );

    register_block_style(
        'core/heading',
        array(
            'name'         => 'right-border',
            'label'        => '右ボーダー',
        )
    );
}

次はパターンの場合を考えます。
見出しブロック自体にボーダーをつける方法がありません。追加CSSクラスにクラス名を入れて解決する方法はありますが、CSSを増やすということは多かれ少なかれコストもかかります。

そこで、ブロックの組み合わせで実現できないかを考えます。

グループブロックと組み合わせることで実現しました。
ボーダーのサイズや余白等、エディター上で完結します。あとは、これをパターンに入れればデザインの使いまわしが可能です。

このボーダーつきのスタイルをブロックスタイル、パターンどちらで扱うかはかなり悩ましいです。

私なら、実装コストが低いパターンを選択します。もしかしたら今後見出しブロックに対してボーダーをつけられるようになる可能性もあるので、下手に見出しブロックにボーダーを付けないほうがいいのかな…とも考えたり。

まとめ

簡単にまとめると、既存ブロックのバリエーションをつけるのならブロックスタイル、それ以外はパターンという感じですね。もちろん、ブロックスタイルをつけたものを含めてパターンを作る、というのもありです。

私も未だに作りながら模索しているので、このあたりはたくさん作って勘をつかむのがいいと思います。

株式会社HAMWORKS
株式会社HAMWORKS

HAMWORKSは企画・マークアップ・JavaScript/TypeScript・CMS構築までトータルでサポートする制作会社です WordPress・Movable Typeの設計・実装 から React / Next.js といったフロントエンドフレームワークを活用したWebアプリケーション構築まで対応しています

Discussion