応用編: ブロックエディタ対応 - WordPressオリジナルテーマ作成

ブロックエディタとは？

Gutenberg（ブロックエディタ）は、WordPress 5.0から標準となった新しい編集システムです。すべてのコンテンツを「ブロック」として扱い、直感的な操作が可能です。

💡 ブロックエディタの特徴

段落、見出し、画像などをブロック単位で管理
ドラッグ&ドロップで並び替え可能
リアルタイムプレビュー
再利用ブロックで効率化
カスタムブロックで機能拡張

基本的なブロックエディタ対応

テーマをブロックエディタに対応させるための最低限の設定です。

STEP 1: ブロックエディタのサポート宣言

functions.phpfunction mytheme_setup() {
    // ブロックエディタ用のスタイルを有効化
    add_theme_support('wp-block-styles');
    
    // 幅広・全幅ブロックを有効化
    add_theme_support('align-wide');
    
    // エディタースタイルシートを有効化
    add_theme_support('editor-styles');
    
    // エディタースタイルシートを追加
    add_editor_style('editor-style.css');
    
    // レスポンシブ埋め込みを有効化
    add_theme_support('responsive-embeds');
}
add_action('after_setup_theme', 'mytheme_setup');

STEP 2: エディタースタイルの作成

editor-style.css（新規作成）/* エディタ内のスタイル */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
    color: #1976D2;
    margin-top: 2em;
    margin-bottom: 1em;
}

/* 段落 */
p {
    margin-bottom: 1.5em;
}

/* リンク */
a {
    color: #0073aa;
    text-decoration: underline;
}

/* ブロッククォート */
blockquote {
    border-left: 4px solid #0073aa;
    padding-left: 1.5rem;
    font-style: italic;
    color: #666;
}

✅ これだけで基本対応完了

この設定により、エディタ内での表示とフロントエンドの表示が一致し、直感的な編集が可能になります。

カラーパレットのカスタマイズ

ブロックエディタで使えるカラーをテーマ独自のものに変更できます。

functions.phpfunction mytheme_setup() {
    // カスタムカラーパレット
    add_theme_support('editor-color-palette', array(
        array(
            'name'  => 'メインブルー',
            'slug'  => 'main-blue',
            'color' => '#1976D2',
        ),
        array(
            'name'  => 'アクセントオレンジ',
            'slug'  => 'accent-orange',
            'color' => '#FF6B35',
        ),
        array(
            'name'  => 'ダークグレー',
            'slug'  => 'dark-gray',
            'color' => '#333333',
        ),
        array(
            'name'  => 'ライトグレー',
            'slug'  => 'light-gray',
            'color' => '#F5F5F5',
        ),
        array(
            'name'  => 'ホワイト',
            'slug'  => 'white',
            'color' => '#FFFFFF',
        ),
    ));
    
    // デフォルトカラーを無効化（オプション）
    add_theme_support('disable-custom-colors');
}
add_action('after_setup_theme', 'mytheme_setup');

CSSでの対応

style.css/* テキストカラー */
.has-main-blue-color {
    color: #1976D2;
}

.has-accent-orange-color {
    color: #FF6B35;
}

/* 背景カラー */
.has-main-blue-background-color {
    background-color: #1976D2;
}

.has-accent-orange-background-color {
    background-color: #FF6B35;
}

フォントサイズのカスタマイズ

functions.phpfunction mytheme_setup() {
    // カスタムフォントサイズ
    add_theme_support('editor-font-sizes', array(
        array(
            'name' => '小',
            'size' => 14,
            'slug' => 'small'
        ),
        array(
            'name' => '標準',
            'size' => 16,
            'slug' => 'normal'
        ),
        array(
            'name' => '中',
            'size' => 20,
            'slug' => 'medium'
        ),
        array(
            'name' => '大',
            'size' => 28,
            'slug' => 'large'
        ),
        array(
            'name' => '特大',
            'size' => 36,
            'slug' => 'huge'
        ),
    ));
    
    // カスタムフォントサイズを無効化（オプション）
    add_theme_support('disable-custom-font-sizes');
}

CSSでの対応

style.css.has-small-font-size {
    font-size: 14px;
}

.has-normal-font-size {
    font-size: 16px;
}

.has-medium-font-size {
    font-size: 20px;
}

.has-large-font-size {
    font-size: 28px;
}

.has-huge-font-size {
    font-size: 36px;
}

カスタムブロックスタイルの追加

既存のブロックに独自のスタイルバリエーションを追加できます。

functions.phpfunction mytheme_register_block_styles() {
    // ボタンブロックにカスタムスタイルを追加
    register_block_style(
        'core/button',
        array(
            'name'  => 'outline-button',
            'label' => 'アウトライン',
        )
    );
    
    // 引用ブロックにカスタムスタイルを追加
    register_block_style(
        'core/quote',
        array(
            'name'  => 'fancy-quote',
            'label' => '装飾付き引用',
        )
    );
}
add_action('init', 'mytheme_register_block_styles');

スタイルの定義

style.css と editor-style.css/* アウトラインボタン */
.wp-block-button.is-style-outline-button .wp-block-button__link {
    background-color: transparent;
    border: 2px solid #0073aa;
    color: #0073aa;
}

.wp-block-button.is-style-outline-button .wp-block-button__link:hover {
    background-color: #0073aa;
    color: #fff;
}

/* 装飾付き引用 */
.wp-block-quote.is-style-fancy-quote {
    border-left: 5px solid #FFD700;
    background: #FFFBF0;
    padding: 2rem;
    border-radius: 8px;
}

.wp-block-quote.is-style-fancy-quote::before {
    content: '"';
    font-size: 4rem;
    color: #FFD700;
    line-height: 1;
}

カスタムブロックの作成（基本）

完全オリジナルのブロックを作成します。React/JavaScriptの知識が必要です。

開発環境のセットアップ

コマンドライン# @wordpress/create-block を使用
npx @wordpress/create-block my-custom-block

# プラグインディレクトリに移動
cd my-custom-block

# 開発サーバー起動
npm start

シンプルなカスタムブロックの例

block.json{
    "name": "mytheme/alert-box",
    "title": "アラートボックス",
    "category": "common",
    "icon": "info",
    "description": "情報を強調表示するアラートボックス",
    "supports": {
        "html": false
    },
    "attributes": {
        "content": {
            "type": "string",
            "default": ""
        },
        "type": {
            "type": "string",
            "default": "info"
        }
    }
}

edit.jsimport { useBlockProps, RichText } from '@wordpress/block-editor';
import { SelectControl } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {
    const blockProps = useBlockProps();
    
    return (
        <div {...blockProps}>
            <SelectControl
                label="タイプ"
                value={attributes.type}
                options={[
                    { label: '情報', value: 'info' },
                    { label: '警告', value: 'warning' },
                    { label: '成功', value: 'success' },
                ]}
                onChange={(type) => setAttributes({ type })}
            />
            <RichText
                tagName="p"
                value={attributes.content}
                onChange={(content) => setAttributes({ content })}
                placeholder="メッセージを入力..."
            />
        </div>
    );
}

save.jsimport { useBlockProps, RichText } from '@wordpress/block-editor';

export default function Save({ attributes }) {
    const blockProps = useBlockProps.save();
    
    return (
        <div {...blockProps} className={`alert-box alert-${attributes.type}`}>
            <RichText.Content tagName="p" value={attributes.content} />
        </div>
    );
}

ブロックパターンの登録

あらかじめ設定されたブロックの組み合わせを登録できます。

functions.phpfunction mytheme_register_block_patterns() {
    register_block_pattern(
        'mytheme/hero-section',
        array(
            'title'       => 'ヒーローセクション',
            'description' => 'トップページ用のヒーローエリア',
            'categories'  => array('featured'),
            'content'     => '
                <!-- wp:cover {"url":"https://example.com/hero.jpg","dimRatio":30} -->
                <div class="wp-block-cover">
                    <div class="wp-block-cover__inner-container">
                        <!-- wp:heading {"level":1,"textAlign":"center"} -->
                        <h1 class="has-text-align-center">サイトタイトル</h1>
                        <!-- /wp:heading -->
                        
                        <!-- wp:paragraph {"align":"center"} -->
                        <p class="has-text-align-center">キャッチコピーをここに入力</p>
                        <!-- /wp:paragraph -->
                        
                        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                        <div class="wp-block-buttons">
                            <!-- wp:button -->
                            <div class="wp-block-button">
                                <a class="wp-block-button__link">詳しく見る</a>
                            </div>
                            <!-- /wp:button -->
                        </div>
                        <!-- /wp:buttons -->
                    </div>
                </div>
                <!-- /wp:cover -->
            ',
        )
    );
}
add_action('init', 'mytheme_register_block_patterns');

幅広・全幅ブロックのスタイリング

align-wide サポートを有効にした場合の対応です。

style.css/* コンテナの最大幅 */
.entry-content {
    max-width: 800px;
    margin: 0 auto;
}

/* 幅広ブロック */
.entry-content .alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* 全幅ブロック */
.entry-content .alignfull {
    max-width: 100%;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

theme.jsonによる統合設定

WordPress 5.8以降では、theme.jsonで一元管理できます。

theme.json（テーマルートに配置）{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "メインブルー",
                    "slug": "main-blue",
                    "color": "#1976D2"
                },
                {
                    "name": "アクセントオレンジ",
                    "slug": "accent-orange",
                    "color": "#FF6B35"
                }
            ]
        },
        "typography": {
            "fontSizes": [
                {
                    "name": "小",
                    "slug": "small",
                    "size": "14px"
                },
                {
                    "name": "標準",
                    "slug": "normal",
                    "size": "16px"
                },
                {
                    "name": "大",
                    "slug": "large",
                    "size": "28px"
                }
            ]
        },
        "layout": {
            "contentSize": "800px",
            "wideSize": "1200px"
        }
    }
}

💡 theme.jsonのメリット

CSSとJavaScriptが自動生成される
エディタとフロントエンドの設定を統一管理
パフォーマンスの最適化
将来的な拡張性

ブロックの無効化

特定のブロックを非表示にすることも可能です。

functions.phpfunction mytheme_allowed_block_types($allowed_blocks, $editor_context) {
    // すべてのブロックを取得
    $blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();
    
    // 無効にしたいブロックを削除
    unset($blocks['core/verse']);
    unset($blocks['core/preformatted']);
    
    return array_keys($blocks);
}
add_filter('allowed_block_types_all', 'mytheme_allowed_block_types', 10, 2);

まとめ

ブロックエディタ対応により、以下のことが実現できます：

✅ モダンな編集体験の提供
✅ 直感的なコンテンツ作成
✅ 独自ブロックで機能拡張
✅ ブランドカラーの統一管理

🚀 次のステップ

ブロックエディタをマスターしたら、REST APIを学んで、さらに高度なアプリケーション開発に挑戦しましょう。

🧩 ブロックエディタ対応（Gutenberg）

ブロックエディタとは？

💡 ブロックエディタの特徴

基本的なブロックエディタ対応

STEP 1: ブロックエディタのサポート宣言

STEP 2: エディタースタイルの作成

✅ これだけで基本対応完了

カラーパレットのカスタマイズ

CSSでの対応

フォントサイズのカスタマイズ

CSSでの対応

カスタムブロックスタイルの追加

スタイルの定義

カスタムブロックの作成（基本）

開発環境のセットアップ

シンプルなカスタムブロックの例

ブロックパターンの登録

幅広・全幅ブロックのスタイリング

theme.jsonによる統合設定

💡 theme.jsonのメリット

ブロックの無効化

まとめ

🚀 次のステップ