WordPressのGutenbergブロックエディターは、コンテンツの作成方法を根本的に変えました。ページの構築における柔軟性と制御権を編集者自身の手に直接渡したのです。開発者にとっては、Reactと現代のJavaScriptを核とした全く新しい開発パラダイムを意味します。この記事では、ゼロからカスタムブロックを作成する方法から始め、動的なブロックの開発やブロックのバリエーションの適用といった高度な機能までを詳しく解説します。読者の皆様に、実践的な開発ガイドを提供することを目的としています。
ブロックエディタのコアアーキテクチャを理解する
グーテンベルクエディタは単一のアプリケーションではなく、複数の独立したパッケージで構成されるエコシステムです。そのアーキテクチャを理解することは、効果的な開発を行うための基盤となります。
エディタとデータ層の分離
エディタのインターフェース自体は、WordPressのデータ層から分離されています。コア部分は… @wordpress/editor このパッケージは、エディタのUIコンポーネントを提供しています。 @wordpress/data このパッケージにより、Reduxのような状態管理が実現されています。この分離により、開発者はブロックのビューやインタラクションロジックに集中することができ、データの永続化はWordPressのコアメカニズムによって自動的に処理されます。
推薦図書 WordPressのカスタム記事タイプをマスターする：作成から公開までの完全な実践ガイド。
ブロックの登録とライフサイクル
各ブロックはすべて、所定の手順を経て処理される必要があります。 registerBlockType この関数は登録処理を行います。この関数は2つのパラメータを受け取ります：ブロックの一意な名前（例： my-plugin/my-custom-block）および、ブロックのすべての設定情報を含むオブジェクトです。
登録後、ブロックは初期化、レンダリング、編集、保存などのライフサイクルを経ます。開発者は主に定義を通じてこれらの処理を制御します。 edit と save エディタ内およびフロントエンドにおけるブロックの表示を制御するための2つの重要な関数です。
ゼロから始めて、あなたの最初のカスタムブロックを作成しましょう。
私たちは、ユーザーが背景色とタイトルを持つヒントボックスを追加できるようにする、シンプルな「ハイライトヒント」ブロックを作成します。
開発環境の設定と基本ファイルの準備
まず、開発環境が準備できていることを確認してください。Node.js および npm の環境が必要です。プラグインのディレクトリ内に新しいプラグインフォルダを作成してください。例えば： my-custom-blocksそのフォルダ内に、以下のコアファイルを作成してください：
- my-custom-blocks.php （プラグインのメインファイル）
- package.json （Node.jsの依存関係やビルドスクリプトを管理するためのもの）
- src/ ディレクトリ（ソースコードを保存するためのもの）
- build/ 目次（ビルドツールによって生成されたディレクトリで、WordPressによって読み込まれます）
はい。 package.json その中で、ビルドスクリプトを設定し、それを導入してください。 @wordpress/scripts この「パッケージ」により、WebpackやBabelなどのツールの設定が大幅に簡素化されます。
{
"name": "my-custom-blocks",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"devDependencies": {
"@wordpress/scripts": "^26.0.0"
}
}プラグインのメインファイル内 my-custom-blocks.php そこでは、あなたは使わなければなりません register_block_type この関数は、WordPressに「どこからデータを取得するか」を指示するためのものです。 build カタログの読み込みブロックに含まれるアセットです。
推薦図書 WordPressテーマ開発ガイド：ゼロから高性能なカスタムテーマを構築する。
<?php
/**
* Plugin Name: My Custom Blocks
*/
function my_custom_blocks_register_block() {
register_block_type( __DIR__ . '/build/highlight-box' );
}
add_action( 'init', 'my_custom_blocks_register_block' );ブロックを作成するためのJavaScriptのソースコードです：
はい。 src ディレクトリ内にファイルを作成します。 highlight-box/index.js ファイルです。これがブロックのメインエントリーファイルです。
import { registerBlockType } from '@wordpress/blocks';
import { RichText, useBlockProps, InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody, PanelRow } from '@wordpress/components';
registerBlockType('my-custom-blocks/highlight-box', {
title: '高亮提示框',
icon: 'warning', // 从 Dashicons 中选择
category: 'design',
attributes: {
title: {
type: 'string',
source: 'html',
selector: '.highlight-title',
},
content: {
type: 'string',
source: 'html',
selector: '.highlight-content',
},
backgroundColor: {
type: 'string',
default: '#fff3cd',
},
},
edit: ({ attributes, setAttributes }) => {
const blockProps = useBlockProps();
const { title, content, backgroundColor } = attributes;
const onChangeTitle = (newTitle) => {
setAttributes({ title: newTitle });
};
const onChangeContent = (newContent) => {
setAttributes({ content: newContent });
};
const onChangeBackgroundColor = (newColor) => {
setAttributes({ backgroundColor: newColor });
};
return (
<>
<inspectorcontrols>
<panelbody title="色設定">
<panelrow>
<colorpalette
value="{backgroundColor}"
onchange="{onChangeBackgroundColor}"
/>
</panelrow>
</panelbody>
</inspectorcontrols>
<div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
<richtext
tagname="h3"
classname="highlight-title"
onchange="{onChangeTitle}"
value="{title}"
placeholder="输入标题..."
/>
<richtext
tagname="p"
classname="highlight-content"
onchange="{onChangeContent}"
value="{content}"
placeholder="输入提示内容..."
/>
</div>
</>
);
},
save: ({ attributes }) => {
const blockProps = useBlockProps.save();
const { title, content, backgroundColor } = attributes;
return (
<div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
<RichText.Content tagName="h3" className="highlight-title" value={title} />
<RichText.Content tagName="p" className="highlight-content" value={content} />
</div>
);
},
});うごきだす npm start 開発モードを開始します（ファイルの変更を監視します）。 npm run build 生産構築を行います。その後、WordPressのエディター内で「デザイン」カテゴリを探すと、「ハイライトポップアップ」ブロックを見つけて使用することができます。
高度な開発：動的なブロックとサーバーサイドレンダリング
静的なブロックの内容は記事の本文中に直接保存されています。しかし、最新の記事一覧やユーザー情報など、リアルタイムで更新が必要なデータを表示するためのブロックについては、動的なブロックを作成する必要があります。動的なブロックは保存時にはいくつかの属性（例えば記事の数など）のみを保存し、フロントエンドでPHPテンプレートを使用してコンテンツを動的に生成します。
静的なブロックを動的なブロックに変換する
まず、ブロックの登録設定を変更し、以下のようにします： save 関数を返値を返すように変更します。 nullそして、もう一つ追加してください。 render_callback 属性（Attribute）。
// 在 registerBlockType 的配置对象中
save: () => {
return null; // 动态区块不在内容中保存 HTML
},その後、PHP側で登録処理のコードを更新し、レンダリング用のコールバック関数を指定します。
function my_custom_blocks_register_dynamic_block() {
register_block_type( __DIR__ . '/build/latest-posts', [
'render_callback' => 'my_custom_blocks_render_latest_posts'
] );
}
add_action( 'init', 'my_custom_blocks_register_dynamic_block' );
function my_custom_blocks_render_latest_posts( $attributes ) {
$posts = get_posts( [
'posts_per_page' => $attributes['numberOfPosts'] ?? 5,
] );
if ( empty( $posts ) ) {
return '<p>記事はありません。</p>'$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
foreach ( $posts as $post ) {
$output .= sprintf(
'<li><a href="/ja/%s/">%s</a></li>'php
esc_url(get_permalink($post));
esc_html(get_the_title($post));
$output .= '';'</ul>';
return $output;
}ブロックテンプレートファイルを使用してレンダリングを行います。
より複雑な動的なブロックについては、テンプレートファイルの使用をお勧めします。プラグインディレクトリ内にテンプレートファイルを作成してください。 templates/latest-posts.php上記のレンダリングロジックをそのファイルに移してください。その後、 render_callback ここで使用されているのは ob_get_clean と include テンプレートを読み込むことで、PHPとHTMLのロジックがより明確になり、メンテナンスも容易になります。
推薦図書 WooCommerceプラグインの使い方ガイド：インストールと設定から店舗運営までの完全な手順。
高度なトピックとベストプラクティス
基本構造と動的なブロックの使い方をマスターしたら、以下のトピックを学ぶことで、より強力で専門的なブロックを開発することができるでしょう。
ブロックのバリエーション機能を実現する
「ブロックバリエーション（Block Variations）」を使用すると、1つの基本ブロックを基に複数のプリセットされたスタイルや設定を作成することができます。例えば、「ハイライトポップアップ」に対して「成功」「警告」「エラー」などのバリエーションを設定することができます。
import { registerBlockVariation } from '@wordpress/blocks';
registerBlockVariation('my-custom-blocks/highlight-box', [
{
name: 'success',
title: '成功提示',
icon: 'yes-alt',
attributes: {
title: '操作成功',
backgroundColor: '#d4edda',
},
isDefault: false,
},
{
name: 'error',
title: '错误警告',
icon: 'dismiss',
attributes: {
title: '发生错误',
backgroundColor: '#f8d7da',
},
},
]);ブロックススタイルとエディタースタイルを活用する
利用する registerBlockStyle この機能により、ブロックにさまざまな視覚的スタイルを適用することができ、ユーザーはサイドバーからスタイルを切り替えることができます。 add_editor_style エディタ内のプレビューがフロントエンドのスタイルと一致するように保証され、見た通りの結果が得られる「What You See Is What You Get（WYSIWYG）」の体験が提供されます。
パフォーマンス最適化とコード分割
ブロックが増えるにつれて、すべてのJavaScriptコードを1つのファイルにまとめてパッケージ化すると、読み込みのパフォーマンスに影響を与えます。そのため、適切な方法を利用することが大切です。 @wordpress/dependency-extraction-webpack-plugin（すでに含まれています） @wordpress/scripts （中）WordPressパッケージに対する外部依存関係を正しく宣言することを確認してください。大規模なプラグインの場合は、必要に応じてロードする機能やコード分割の技術を検討するとよいでしょう。
概要
Gutenbergのブロックエディタの開発は、現代のフロントエンド技術（React、JSX、Webpack）と従来のWordPressのPHP知識を統合したプロセスです。まずはそのアーキテクチャを理解し、静的なブロックの作成を通じてコアAPIを習得し、次に動的なデータを処理するための動的ブロックの機能に進みます。最後に、ブロックのバリエーションやスタイルなどの高度な機能を活用して、ユーザー体験と開発効率を向上させます。明確なコードの構成、パフォーマンスの最適化、十分な国際化対応といったベストプラクティスに従うことで、強力でメンテナンスしやすく、ユーザーフレンドリーなカスタムブロックを構築することができ、Gutenbergエディタの潜在能力を十分に引き出すことができます。
FAQ よくある質問
グーテンベルクブロックを開発するために必ずReactを使用しなければならないのでしょうか？
はい、現在のGutenbergエディターの公式な開発方法は完全にReactに基づいています。理論的には他のフレームワークを使用することも可能ですが、WordPressコアが提供するすべてのコンポーネント、フック、ツールはReactエコシステムを中心に構築されているため、他のフレームワークを使用すると大幅な複雑さや互換性の問題が生じます。
どのようにして自分のブロックにカスタムのサイドバーコントロールを追加できますか？
あなたはそれを使用することができます。 <code>InspectorControls</code> コンポーネントです。ブロック内にあります。 edit 関数内で、それをメインのプレビュー内容と一緒に返します。 <code>InspectorControls</code> 内部では、以下の方法を使用することができます： <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 `@wordpress/components` パッケージに含まれるコンポーネントを使用して、豊富な設定インターフェースを構築します。
動的ブロックと静的ブロックのパフォーマンスにはどのような違いがありますか？
静的なブロックのHTMLコンテンツはデータベースの投稿内容に直接保存されているため、フロントエンドの読み込み速度が非常に速いです。しかし、動的なデータを含めることはできません。動的なブロックはレンダリング時にPHPコードを実行してデータベースを照会する必要があるため、わずかなパフォーマンスの負担が発生しますが、リアルタイムのデータを提供することができます。頻繁に変更されないコンテンツについては、静的なブロックと定期的なキャッシング戦略を組み合わせることを検討できます。高いリアルタイム性が求められるコンテンツについては、動的なブロックを使用する必要があります。
伝統的な小道具エリアや記事のメタボックス内でブロックを使用することはできますか？
はい、これらは「ブロックタイプのガジェット」と「ブロックタイプのメタボックス」と呼ばれています。WordPress 5.8以降、ガジェットエリアも完全にGutenbergブロックエディタによって管理されるようになりました。あなたもそれを使用することができます。 register_block_type の widget_types ブロックをツールバー編集器で使用できるようにするには、関連するパラメーターやAPIを利用します。記事のメタ情報フィールドについては、``を使用することができます。register_post_meta APIを活用し、ブロックを組み合わせることで、より直感的なメタデータ編集インターフェースを作成します。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語