2026年5月20日

WordPressブロックにカスタムスタイルを追加する方法

テーマ・デザイン

はじめに

register_block_style を使うと、Gutenbergブロックのサイドパネルに「スタイル」タブを追加して、選択するだけでCSSクラスが自動付与される機能を実装できます。プラグイン不要で、エディターで視覚的にスタイルを切り替えられます。

症状・原因

ブロックの見た目をエディターで簡単に切り替えたい
ボタンブロックに「アウトライン」「シャドウ」などのバリエーションを追加したい
テーマ独自のブロックスタイルをサイドパネルに表示したい

解決手順

ステップ1：register_block_styleでスタイルを登録する

// functions.php
function mytheme_register_block_styles(): void {

    // ボタンブロックにアウトラインスタイルを追加
    register_block_style('core/button', [
        'name'  => 'outline',
        'label' => 'アウトライン',
    ]);

    // ボタンブロックにシャドウスタイルを追加
    register_block_style('core/button', [
        'name'  => 'shadow',
        'label' => 'シャドウ付き',
    ]);

    // 引用ブロックにボーダースタイルを追加
    register_block_style('core/quote', [
        'name'         => 'bordered',
        'label'        => 'ボーダー付き',
        'is_default'   => false,
    ]);

    // グループブロックにカードスタイルを追加
    register_block_style('core/group', [
        'name'  => 'card',
        'label' => 'カード',
    ]);

    // 画像ブロックに丸型スタイルを追加
    register_block_style('core/image', [
        'name'  => 'circle',
        'label' => '円形',
    ]);
}
add_action('init', 'mytheme_register_block_styles');

ステップ2：スタイルに対応するCSSを書く

選択されたスタイルには .is-style-{name} クラスが自動付与されます。

/* style.css */

/* ボタン：アウトライン */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid currentColor;
    color: var(--wp--preset--color--primary, #2271b1);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary, #2271b1);
    color: #ffffff;
}

/* ボタン：シャドウ付き */
.wp-block-button.is-style-shadow .wp-block-button__link {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-button.is-style-shadow .wp-block-button__link:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

/* 引用：ボーダー付き */
.wp-block-quote.is-style-bordered {
    border-left: 4px solid var(--wp--preset--color--primary, #2271b1);
    padding-left: 1.5rem;
    font-style: normal;
}

/* グループ：カード */
.wp-block-group.is-style-card {
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

/* 画像：円形 */
.wp-block-image.is-style-circle img {
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
}

ステップ3：エディタースタイルにも適用する

/* css/editor-style.css */

/* エディター内でもプレビューを表示 */
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--wp--preset--color--primary, #2271b1);
    color: var(--wp--preset--color--primary, #2271b1);
}

.editor-styles-wrapper .wp-block-group.is-style-card {
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 2rem;
}

ステップ4：既存スタイルの登録解除

// functions.php
function mytheme_unregister_block_styles(): void {
    // Gutenbergデフォルトの「引用：大きな引用」を非表示
    unregister_block_style('core/quote', 'large');

    // ボタンの「塗りつぶし」を非表示（自前スタイルのみにする場合）
    unregister_block_style('core/button', 'fill');
}
add_action('init', 'mytheme_unregister_block_styles');

ステップ5：JavaScriptで登録する（block.json対応）

// src/block-styles.js
import { registerBlockStyle, unregisterBlockStyle } from '@wordpress/blocks';

registerBlockStyle('core/button', {
    name: 'ghost',
    label: 'ゴースト',
});

registerBlockStyle('core/separator', {
    name: 'dotted',
    label: '点線',
});

// functions.php
function mytheme_enqueue_block_styles_script(): void {
    wp_enqueue_script(
        'mytheme-block-styles',
        get_template_directory_uri() . '/js/block-styles.js',
        ['wp-blocks', 'wp-dom-ready'],
        wp_get_theme()->get('Version'),
        true
    );
}
add_action('enqueue_block_editor_assets', 'mytheme_enqueue_block_styles_script');

注意事項

register_block_style はPHPとJavaScript両方で登録できますが、PHPの init フックを使うほうがシンプルです
.is-style-{name} クラスはブロックのルート要素に付与されます。子要素のセレクタを正しく書くため、ブラウザの開発ツールで実際のHTMLを確認してください
エディター内でスタイルのプレビューを表示するには、エディタースタイル（add_editor_style）にも同じCSSを追加する必要があります

まとめ

register_block_style('ブロック名', ['name' => 'スタイル名', 'label' => '表示名']) でスタイルを登録し、.is-style-{name} セレクタでCSSを書きます。エディタースタイルにも同じCSSを追加することでプレビューが一致します。不要なデフォルトスタイルは unregister_block_style で非表示にできます。

Post Views: 16