ブロックスタイルのバリエーション（Block Style Variations）

ブロックスタイルとは何ですか？

内部的には、ブロックスタイルは .is-style-{name} という名前のブロックのラッピング要素に追加された CSS クラスに過ぎません。これにより、ブロックのデザインを変更するためのカスタム CSS を追加できます。

このスクリーンショットでは、スタイルパネルの下に画像ブロック用に登録された複数のブロックスタイルが表示されており、コアの丸みを帯びたオプションが選択されています：

ここで起こっているのは、コアの WordPress とテーマの両方が画像ブロック用にブロックスタイルを登録しており、ユーザーがそれらのスタイルの1つを選択したということです。その後、登録されたスタイルの CSS がブロックに適用されます。

最終的に、ブロックスタイルはブロックにクラスを追加し、CSS でカスタマイズするための標準的な方法に過ぎません。

ユーザーは一度に1つのスタイルしかブロックに適用できません。標準のデザインツールを使用してそれらを組み合わせることはできません。より多くのオプションを許可する必要がある場合は、カスタムデザインツールを構築することを検討してください。方法については、WordPress 開発者ブログの Beyond Block Styles チュートリアルシリーズをお読みください。

PHP ベースのブロックスタイル

ほとんどのテーマ作成者は、PHP でブロックスタイルを登録したいと考えるでしょう。JavaScript を介してそれらを操作する必要がある場合は、「JavaScript ベースのブロックスタイル」セクションに進んでください。

PHP でのブロックスタイルの登録

ブロックスタイルを登録するには、register_block_style() PHP 関数を使用します。この関数のシグネチャは次のようになります：

register_block_style(
    string $block_name,
    array $style_properties
): bool

この関数は2つのパラメータを受け取り、登録が成功したかどうかに応じて true または false を返します：

• $block_name: ブロックの名前、名前空間とスラッグの両方を含む（例：core/image）。
• $style_properties: スタイルを構成するために使用できる引数の配列：
  • name: (必須) クラスを生成するために使用される一意の識別子/スラッグ（例：is-style-{name}）。
  • label: (必須) 翻訳可能な人間が読めるラベル。
  • inline_style: スタイルが使用されているときに印刷されるインライン CSS。
  • style_handle: スタイルのために読み込む登録済みスタイルシートのハンドル。
  • is_default: スタイルがブロックのデフォルトとして選択されるべきかどうか（デフォルトは false）。

style_handle 現在バグがあります これは、エディタ内でのみスタイルシートをキューに追加し、フロントエンドでは追加しないというものです。そのリンクされたチケットが解決されるまで、その使用は推奨されません。

画像ブロックに「手描き」の外観を与えるブロックスタイルを作成してみましょう。エディタで選択されると次のようになります：

このブロックスタイルを登録するには、register_block_style() 関数を介して構成し、init フックでコールバックとして追加する必要があります。

次のコードをテーマの functions.php ファイルに追加してテストしてください：

add_action( 'init', 'themeslug_register_block_styles' );
function themeslug_register_block_styles() {
    register_block_style( 'core/image', array(
        'name'         => 'hand-drawn',
        'label'        => __( 'Hand Drawn', 'themeslug' ),
        'inline_style' => '.wp-block-image.is-style-hand-drawn img {
            border: 2px solid currentColor;
            overflow: hidden;
            box-shadow: 0 4px  10px 0 rgba( 0, 0, 0, 0.3 );
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
        }'
   ) );
}

inline_style 引数が数行の CSS コードを超える場合は、カスタム ブロックスタイルシート に CSS を追加することをお勧めします。

PHP でのブロックスタイルの登録解除

PHP で登録されたブロックスタイルを登録解除するには、unregister_block_style() 関数を使用します。ここにそのシグネチャがあります：

unregister_block_style(
    string $block_name,
    string $block_style_name
): bool

この関数は2つのパラメータを受け取り、登録が成功したかどうかに応じて true または false を返します：

• $block_name: ブロックの名前、名前空間とスラッグの両方を含む（例：core/image）。
• $block_style_name: PHP を介して登録されたブロックスタイルの名前/スラッグ。

以前に登録した hand-drawn ブロックスタイルを登録解除するには、init フックにアクション関数を追加する必要があります（アクション呼び出しは 99 の後に実行されるように優先度が設定されていることに注意してください。デフォルトは 10）：

add_action( 'init', 'themeslug_register_block_styles', 999 );
function themeslug_register_block_styles() {
    unregister_block_style( 'core/image', 'hand-drawn' );
}

PHP で登録されたブロックスタイルのみを登録解除できます。ブロックスタイルが JavaScript で登録された場合は、JavaScript を使用して登録解除する必要があります。詳細については、以下の「JavaScript でのブロックスタイルの登録解除」セクションを参照してください。

JavaScript ベースのブロックスタイル

JavaScript を介してブロックスタイルを登録または登録解除するには、enqueue_block_editor_assets フックで JavaScript ファイルを読み込む必要があります。

まず、テーマ内に /assets/js/block-editor.js ファイルを作成します（この名前や場所は変更できますが、以下の例ではこの名前と場所を前提としています）。

次に、テーマの functions.php ファイルにこのコードを追加してスクリプトをキューに追加します：

add_action( 'enqueue_block_editor_assets', 'themeslug_block_editor_assets' );
function themeslug_block_editor_assets() {
    wp_enqueue_script(
        'themeslug-block-editor',
        get_theme_file_uri( 'assets/js/block-editor.js' ),
        array(
            'wp-blocks',
            'wp-dom-ready',
            'wp-edit-post'
        )
    );
}

JavaScript でのブロックスタイルの登録

JavaScript を介してブロックスタイルを登録するには、registerBlockStyle() 関数を使用します。この関数は、register_block_style() PHP 関数と同様に機能します。単に JavaScript 構文を使用します。

以前の例を使用して、「手描き」画像ブロックスタイルを登録します。このコードを /assets/js/block-editor.js ファイルに追加します：

wp.blocks.registerBlockStyle( 'core/image', {
    name: 'hand-drawn',
    label: 'Hand Drawn'
} );

このスタイルがデフォルトのブロックスタイルである場合は、isDefault 引数を true に設定することもできます（デフォルトでは false です）。

カスタム CSS を追加するには、カスタム ブロックスタイルシート を読み込むか、他の手段で CSS を追加する必要があります。

JavaScript でのブロックスタイルの登録解除

unregisterBlockStyle() JavaScript 関数もあり、これは unregister_block_style() PHP 関数に相当します。これを使用して、JavaScript で登録されたブロックスタイルを登録解除できます。

ブロックスタイルが登録されるタイミングと登録解除されるタイミングの間に競合が発生しないようにするために、ブロックスタイルがすでに登録された後に登録解除する必要があります。これを行う最良の方法は、wp.domReady のコールバック関数内に追加することで、DOM が読み込まれた後に登録解除されることを保証します。

JavaScript で登録した hand-drawn ブロックスタイルを登録解除するには、/assets/js/block-editor.js ファイルにこれを追加します：

wp.domReady( function () {
    wp.blocks.unregisterBlockStyle( 'core/image', 'hand-drawn' );
} );

JavaScript で登録されたブロックスタイルのみを登録解除できます。ブロックスタイルが PHP で登録された場合は、PHP を使用して登録解除する必要があります。詳細については、上記の「PHP でのブロックスタイルの登録解除」セクションを参照してください。

theme.json を介したブロックスタイルのカスタマイズ

コアの WordPress ブロックスタイルのデザインをカスタマイズすることが可能です。これにより、望む外観を得るためにカスタム CSS を全く追加する必要がないかもしれません。

可能であれば、この方法を使用してカスタマイズすることをお勧めします。なぜなら、外観 > エディタ > スタイル インターフェースに表示されるからです。さらに、テーマのユーザーは必要に応じて自分自身で変更を加えることができます。

コアのボタンブロックのアウトラインスタイルを変更して、ダブルボーダー効果を生み出すドロップシャドウを持たせてみましょう：

これを行うには、theme.json ファイルを開きます。styles.blocks.core/button.variations.outline プロパティをターゲットにする必要があります。これは、theme.json を介して追加できる他のスタイルと同様に機能します。

次のコードスニペットを theme.json ファイルに試してみてください：

{
    "version": 2,
    "styles": {
        "blocks": {
            "core/button": {
            "variations": {
            "outline": {
            "border": {
            "color": "var:preset|color|black",
            "radius": "0",
            "style": "solid",
            "width": "3px"
            },
            "shadow": "var:preset|shadow|outlined",
            "spacing": {
            "padding": {
            "top": "0.5rem",
            "bottom": "0.5rem",
            "left": "1.5rem",
            "right": "1.5rem"
            }
            }
            }
            }
            }
        }
    }
}

それを調整して、自分の好みにカスタマイズしてください。その後、他のブロックスタイルを変更するのを楽しんでください。

現在、theme.json を介してカスタム登録されたブロックスタイルをカスタマイズすることはできません。現時点では、コアの WordPress によって登録されたスタイルのみをスタイリングできます。詳細については、関連する GitHub の機能リクエスト を確認してください。

以下は、theme.json を介してカスタマイズできるコアの WordPress ブロックとそのスタイルです：

• core/button: outline, fill
• core/image:rounded
• core/quote: plain
• core/site-logo: rounded
• core/separator: wide, dots
• core/social-links: logos-only, pill-shape
• core/table: stripes
• core/tag-cloud: outline

コアブロックのスタイリングについて詳しく知りたい方は、WordPress 開発者ブログの theme.json を介したコアブロックスタイルのカスタマイズ をお読みください。