はじめに
WordPress 5.0以降標準搭載のGutenbergブロックエディターでは、ブロックスタイルを独自に登録することでコンテンツ編集者がデザインを簡単に切り替えられるようになります。register_block_style()・theme.json・editor-style.cssを組み合わせることで、エディター画面とフロントエンドの表示を統一したまま高品質なデザインを実現できます。
症状・原因
- デフォルトのブロックスタイルだけでは記事のデザインバリエーションが作れない
- エディター上のプレビューとフロントエンド表示でデザインが異なってしまう
- theme.jsonで設定したスタイルがブロックエディターに反映されない
解決手順
ステップ1：register_block_style()でカスタムスタイルを追加する
<?php
// initフックでブロックスタイルを登録する
add_action( 'init', 'my_register_block_styles' );
function my_register_block_styles() {
// 「引用ブロック」に「影付き」スタイルを追加する
register_block_style( 'core/quote', [
'name' => 'shadow', // CSSクラス名（is-style-shadow）
'label' => '影付き', // エディターに表示する名前
'inline_style' => '
.wp-block-quote.is-style-shadow {
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
border-left: 4px solid #0073aa;
background: #f7fbff;
padding: 1.5em 2em;
border-radius: 4px;
}
',
] );
// 「ボタンブロック」に「グラデーション」スタイルを追加する
register_block_style( 'core/button', [
'name' => 'gradient-brand',
'label' => 'ブランドグラデーション',
'inline_style' => '
.wp-block-button.is-style-gradient-brand .wp-block-button__link {
background: linear-gradient(135deg, #0073aa 0%, #00a0d2 100%);
border: none;
border-radius: 30px;
padding: 14px 32px;
font-weight: 700;
letter-spacing: 0.05em;
}
',
] );
// 「グループブロック」に「カード型」スタイルを追加する
register_block_style( 'core/group', [
'name' => 'card',
'label' => 'カード',
// インラインではなく外部CSSで管理する場合はstyle_handleを指定する
'style_handle' => 'my-block-styles',
] );
}ステップ2：エディタースタイルCSSを読み込む
<?php
// テーマのfunctions.phpでエディタースタイルを有効化する
add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
// エディタースタイルのサポートを有効化する
add_theme_support( 'editor-styles' );
// エディター用CSSファイルを登録する（テーマディレクトリ相対パス）
add_editor_style( 'assets/css/editor-style.css' );
// 複数のCSSファイルを登録することも可能
add_editor_style( [
'assets/css/editor-base.css',
'assets/css/editor-blocks.css',
// Googleフォントも指定できる
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
] );
}
// フロントエンドとエディター共用のブロックスタイルCSSを登録する
add_action( 'init', 'my_register_block_style_assets' );
function my_register_block_style_assets() {
wp_register_style(
'my-block-styles',
get_template_directory_uri() . '/assets/css/block-styles.css',
[],
wp_get_theme()->get( 'Version' )
);
}ステップ3：theme.jsonでグローバル・ブロック別スタイルを設定する
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "brand-primary",
"color": "#0073aa",
"name": "ブランドカラー（メイン）"
},
{
"slug": "brand-accent",
"color": "#e74c3c",
"name": "アクセントカラー"
}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "Noto Sans JP, sans-serif",
"slug": "noto-sans-jp",
"name": "Noto Sans JP"
}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--noto-sans-jp)",
"fontSize": "1rem",
"lineHeight": "1.8"
},
"blocks": {
"core/heading": {
"typography": {
"fontWeight": "700",
"letterSpacing": "0.02em"
},
"color": {
"text": "var(--wp--preset--color--brand-primary)"
}
},
"core/paragraph": {
"spacing": {
"margin": {
"bottom": "1.5em"
}
}
}
}
}
}ステップ4：不要なブロックスタイルを削除する
<?php
// enqueue_block_editorでスクリプトを読み込んでJSでスタイルを削除する
add_action( 'enqueue_block_editor_assets', 'my_unregister_block_styles' );
function my_unregister_block_styles() {
// インラインスクリプトで不要なスタイルを削除する
wp_add_inline_script(
'wp-blocks',
"
wp.domReady( function() {
// 「イメージ」ブロックの「角丸」スタイルを削除する
wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' );
// 「引用」ブロックの「大きな引用」スタイルを削除する
wp.blocks.unregisterBlockStyle( 'core/quote', 'large' );
// 「テーブル」ブロックの「ストライプ」スタイルを削除する
wp.blocks.unregisterBlockStyle( 'core/table', 'stripes' );
} );
"
);
}ステップ5：ブロックスタイルバリエーションとエディタープレビューを整える
<?php
// ブロックスタイル用のJavaScriptファイルを登録してエディタープレビューを制御する
add_action( 'enqueue_block_editor_assets', 'my_block_style_editor_scripts' );
function my_block_style_editor_scripts() {
wp_enqueue_script(
'my-block-styles-editor',
get_template_directory_uri() . '/assets/js/block-styles-editor.js',
[ 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ],
wp_get_theme()->get( 'Version' ),
true
);
// エディター上でフロントと同じフォントを読み込む
wp_enqueue_style(
'my-editor-google-fonts',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
[],
null
);
}
// PHP側でもブロックスタイルのバリエーションを動的に登録する例
add_action( 'init', 'my_dynamic_block_styles' );
function my_dynamic_block_styles() {
// ACFカスタムフィールドで定義されたカラーパレットに基づいてスタイルを生成する
$brand_colors = get_option( 'my_brand_colors', [] );
foreach ( $brand_colors as $slug => $color ) {
register_block_style( 'core/group', [
'name' => "color-{$slug}",
'label' => "カラー: {$slug}",
'inline_style' => ".wp-block-group.is-style-color-{$slug} { background-color: {$color}; padding: 2em; border-radius: 8px; }",
] );
}
}注意事項
- theme.jsonの優先順位: theme.jsonのスタイルはCSSの特異性が低いため、エディタースタイルCSSで上書きする場合は具体的なセレクタを使用してください。
- WordPressバージョン互換性:
register_block_style()はWordPress 5.3以降でのみ利用可能です。古いバージョンのサポートが必要な場合は条件分岐を追加してください。 - フルサイト編集（FSE）テーマ: ブロックテーマでは
functions.phpでなくtheme.jsonが設定の主体になります。両方に記述すると競合する場合があります。
まとめ
register_block_style()・add_editor_style()・theme.jsonを組み合わせることで、エディターとフロントエンドで一貫したデザインシステムを構築できます。不要なスタイルはunregisterBlockStyle()で削除してエディターをすっきりさせると、コンテンツ編集者の操作性が向上します。関連記事：WordPressをHeadless CMSとしてNext.jsフロントエンドと連携する方法