2026年11月7日

WordPressのGutenberg Scripting Package利用方法

カスタマイズ

はじめに

Gutenbergは、WordPressのブロックエディタとして広く使用されています。この記事では、Gutenbergのスクリプティングパッケージを利用して機能を拡張する方法について説明します。

Gutenbergのスクリプトを使用することで、カスタムブロックを作成したり既存のブロックに新しい機能を追加することができます。これにより、WordPressサイトの設計とユーザー体験を大きく向上させることができます。

症状・背景

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

カスタムブロックの開発
既存のGutenbergブロックに新機能を追加する必要がある場合
WordPressサイトのUI/UX改善のためにカスタマイズが求められる場合
テーマやプラグインの機能強化

手順・設定方法

ステップ1: Gutenbergスクリプトのインストールと導入

# WordPressテーマディレクトリに移動します。
cd wp-content/themes/your-theme/

# ディレクトリを作成してGutenbergスクリプトを保存します。
mkdir -p js/blocks/
touch js/buckets/my-custom-block.js

# 以下にカスタムブロックのJavaScriptコードを追加します。

// カスタムブロックの登録
wp.blocks.registerBlockType( 'my-plugin/my-custom-block', {
    title: 'My Custom Block',
    icon: 'smiley',
    category: 'common',
    attributes: {},
    edit: function() { return wp.element.createElement( 'p', {}, 'Hello World!' ); },
    save: function() { return null; }
} );

ステップ2: カスタムブロックのスタイル追加

# カスタムブロックのCSSファイルを作成します。
touch js/blocks/my-custom-block.css

// 以下にカスタムブロックのCSSコードを追加します。

.my-custom-block {
    color: #333;
}

// CSSファイルをJavaScriptファイルから読み込みます。
import './my-custom-block.css';

ステップ3: カスタムブロックの機能拡張

# カスタム属性とセーブ関数を追加します。

wp.blocks.registerBlockType( 'my-plugin/my-custom-block', {
    title: 'My Custom Block',
    icon: 'smiley',
    category: 'common',
    attributes: { content: { type: 'string' } },
    edit: function() {
        return wp.element.createElement(
            wp.editor.InnerBlocks,
            { template: [ ['core/paragraph'] ] }
        );
    },
    save: function( props ) {
        const blockContent = wp.blockEditor.useBlockProps.save();
        return wp.element.createElement(
            'div',
            { ...blockContent, className: 'my-custom-block' },
            props.attributes.content
        );
    }
} );

ステップ4: カスタムブロックのデバッグとトラブルシューティング

# ブロックエディタでの問題を診断します。
console.log( wp.blocks.getBlockType( 'my-plugin/my-custom-block' ) );

// 必要に応じてブラウザの開発者ツールを使用してCSSやJavaScriptの問題をチェックします。

注意事項

カスタムブロックを作成する際は、既存のGutenbergブロックのAPIを十分理解しておくことが重要です。
セキュリティ上の注意: ユーザー生成コンテンツが含まれる場合、適切なエスケープ処理を行うこと。
パフォーマンス/運用上の注意: JavaScriptファイルは最適化し、必要に応じてCDNを使用すること。

まとめ

1. ブロックの登録: wp.blocks.registerBlockType を使用してカスタムブロックを登録します。

2. スタイルの追加: CSSファイルを作成してブロックの視覚的要素を強化します。

3. 機能拡張: 属性とセーブ関数を定義することで、既存のGutenbergブロックに新機能を追加できます。

4. デバッグ: デベロッパーツールを使用してカスタムコードの問題を検出します。

5. パフォーマンス最適化: JavaScriptファイルは最小限に保ち、必要に応じてCDNを利用することでサイトの読み込み時間を改善します。