2026年7月2日

WordPressのGutenbergブロックにAlignSupportを追加する

カスタマイズ

はじめに

Gutenbergブロックエディタは、WordPressにおいて新たなコンテンツ作成と編集の標準となっています。しかし、デフォルトでは全てのブロックが同じ水平中央配置や左寄せなどの特定の位置指定をサポートしていない場合があります。この記事では、そのような制約を克服し、ユーザーが任意のブロックに対してカスタム位置指定（AlignSupport）機能を追加する方法について説明します。

症状・背景

このテーマが必要になる主な場面:

ユーザーが特定のブロックに対して水平中央配置や右寄せなどの位置調整を行いたい場合
既存のGutenbergブロックに不足しているAlignSupport機能を追加したい場合
カスタムブロックを作成する際に、デフォルトで提供されていないAlignSupport機能を含めたい場合

手順・設定方法

ステップ1: Gutenbergエディタ内でのブロックの位置指定有効化

# WordPressのカスタムブロックで使用するfunctions.phpファイルを開く。
// add_theme_support( 'align-wide' );
add_theme_support( 'editor-styles' );

# ブロックが水平中央配置をサポートするように設定します。
function enable_custom_align() {
    wp_enqueue_script(
        'custom-align',
        get_template_directory_uri() . '/js/custom-align.js',
        array(),
        null,
        true
    );
}
add_action( 'admin_enqueue_scripts', 'enable_custom_align' );

# ブロックが水平中央配置をサポートするように設定します。
function add_block_editor_assets() {
    wp_enqueue_script(
        'align-support-js',
        get_template_directory_uri() . '/js/align-support.js',
        array(),
        null,
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'add_block_editor_assets' );

# ブロックが水平中央配置をサポートするように設定します。
function add_block_supports() {
    $custom_align = array(
        'align' => array( 'wide', 'full' ),
        'default' => 'wide'
    );
    foreach ( $custom_align['align'] as $alignment ) {
        wp_add_inline_script('block-editor', 'wp.blocks.registerBlockStyle( "core/paragraph", {name: "' . esc_attr( $alignment ) . '", label: "'.esc_attr($alignment).'"} );');
    }
}
add_action( 'enqueue_block_editor_assets', 'add_block_supports' );

ステップ2: カスタム位置指定のCSSとJavaScriptを追加

# ブロックが水平中央配置、左寄せ、右寄せなどのカスタム位置調整に対応するCSSを生成します。
function add_custom_align_styles() {
    wp_enqueue_style(
        'custom-align-styles',
        get_template_directory_uri() . '/css/custom-align.css',
        array(),
        null
    );
}
add_action( 'enqueue_block_editor_assets', 'add_custom_align_styles' );

# JavaScriptファイル内でカスタム位置指定の機能を追加します。
(function($){
    wp.blocks.registerBlockStyle('core/paragraph', {name: 'center', label: '中央'});
})(jQuery);

ステップ3: カスタムブロックとの連携

# カスタムブロック内でAlignSupport機能を有効化します。
function register_custom_block() {
    wp_register_script(
        'custom-block-js',
        get_template_directory_uri() . '/js/custom-block.js',
        array(),
        null,
        true
    );
    
    $block_attributes = array(
        'align' => array( 
            'type' => 'string', 
            'default' => 'wide'
        )
    );

    wp_register_style(
        'custom-block-style',
        get_template_directory_uri() . '/css/custom-block.css',
        array(),
        null
    );
    
    $script = <<< JS
(function(blocks, editor, components) {
    const registerBlockStyle = blocks.registerBlockStyle;
})(wp.blocks, wp.editor, wp.components);
JS;

    wp_add_inline_script( 'custom-block-js', $script );

}
add_action('init', 'register_custom_block');

ステップ4: ブロックの位置指定機能をテストする

# WordPressのダッシュボードから新規投稿を作成し、Gutenbergエディタでカスタムブロックを使用します。
// 新しい投稿を作成して確認します。
post_id = wp.data.select('core/editor').getEditedPostId();
wp.data.dispatch('core/blocks').updateBlockAttributes(post_id, {clientId: block.clientId, attributes: {align: 'wide'}});

注意事項

カスタムブロックを追加する際には、必ず他の既存のブロックと競合しないようにすること。
CSSやJavaScriptファイルに正しいパスが設定されていることを確認すること。
ブロックエディタを使用する全てのユーザーに対してカスタム位置指定機能が適切に表示されるようにテストを行うこと。
セキュリティ上の注意：カスタムコードを追加する際には、不正なアクセスやSQLインジェクションなどのセキュリティリスクを考慮すること。
パフォーマンス/運用上の注意：カスタムブロックの追加は、ウェブサイトのパフォーマンスに影響を与える可能性があるため、適切にテストと最適化を行うこと。

まとめ

1. AlignSupport機能: カスタムブロックが水平中央配置や左寄せなどの位置調整に対応するように追加できます。

2. CSS/JavaScriptの追加: ブロックがカスタム位置指定に対応するために必要なCSSとJavaScriptを適切に設定します。

3. カスタムブロックとの連携: カスタムブロック内でAlignSupport機能を使用できるようにするには、特定のフックやアクションが必要です。

4. テスト: カスタム位置指定機能が正しく動作していることを確認するために、テスト環境で複数の場合同時にチェックします。

5. セキュリティとパフォーマンス: ブロックエディタでのカスタマイズは、適切なセキュリティ対策と最適化が必要です。

Post Views: 7