Gutenbergカスタムブロックの作り方

Gutenbergカスタムブロックの作り方のメモです。
WordPress公式から提供されている「Block Development Examples」を参考に、「create-block」を利用して制作します。

Block Development Examplesを参考にする

WordPressのGitHubアカウントから、カスタムブロックの制作方法を学べるサンプルブロックが提供されています。「Gutenberg Examples はメンテナンス終了となります。今後は、Block Development Examples をご確認ください。」とのことです。デモサイトも用意されています。以下は、付属のREADMEファイルの説明を参考に一覧にしたものです。

個人的な色分け分類

• グレー色：基本的なブロック。
• 青色：よく使う機能のブロック。
• ピンク色：管理画面等のブロック。
• 緑色：特殊なブロック。
• 赤色：インタラクティビティAPIブロック。

READMEファイルの説明

1. basic-esnext-a2ab62
   基本-ESNext。
   この例の目的は、ESNext（ES6）での基本的なブロックの作り方を紹介することです。
2. editable-block-1b8c51
   編集可能な-ブロック。
   この例の目的は、編集可能なブロックの作成方法と、コアコンポーネントの拡張方法を紹介することです。このブロックはまたブロックのe2eテストの使い方も示しています。
3. minimal-block-no-build-e621a6
   最小限-ブロック-ビルド不要。
   この例では、プレーンなJavaScriptを使用して定義された最小限のブロックを登録するプラグインが含まれているため、ビルドプロセスは必要ありません。
4. minimal-block-ca6eda
   最小限-ブロック。
   この例には、JSXを使用して定義された最小ブロックを登録するプラグインが含まれているため、JSX構文をブラウザが理解できるJSコードに変換するビルドプロセスが必要です。
5. block-static-rendering-b16608
   ブロック-静的-レンダリング。
   この例の目的は、静的レンダリングによるブロックの実装を紹介することです。
6. block-dynamic-rendering-64756b
   ブロック-動的-レンダリング。
   この例の目的は、動的レンダリングによるブロックの実装を紹介することです。
7. stylesheets-79a4c3（斜めのブロック）
   スタイルシート。
   この例では、異なるソースを使用してブロックにスタイルを適用する方法を示しています。
8. block-supports-6aa4dd（block.jsonのサポートによるカラーの変更）
   ブロック-サポート。
   この例の目的は、block.jsonで「サポート」を持つブロックの実装を紹介することです。
9. recipe-card-744e8a（レシピカード）
   レシピ-カード。
   このブロック例の目的は、レシピカード（画像と文章）の作り方を紹介することです。
10. inner-blocks-dcd824（インナーブロック）
    インナー-ブロック。
    この例の目的は、InnerBlocksコンポーネントによって、内部に他のブロックを受け入れるカスタムブロックを作成する方法を示すことです。
11. basic-block-translations-3df23d（翻訳）
    基本-ブロック-翻訳。
    この例の目的は、ブロックの中で翻訳を使う方法を紹介することです。
12. dynamic-block-b0bce7（動的ブロック）
    動的-ブロック。
    この例の目的は、動的なブロックの作り方を紹介することです。
13. settings-sidebar-82c525（右パネルでカラー変更）
    設定-サイドバー。
    この例の目的は、ブロックにカスタム設定サイドバーコントロールを実装する方法を示すことです。
14. copyright-date-block-09aac3（右パネルにテキスト欄とスイッチ）
    コピーライト-データ-ブロック。
    この「Copyright Date」ブロックは、静的・動的レンダリング、ブロックサポート、カスタム属性、カスタム設定パネルを利用しています。
15. block-toolbar-ab967f（ツールバーに外部サイトへのボタン）
    ツールバーブロック。
    この例の目的は、選択されたブロックに、カスタム 「ブロック・ツールバー 」コントロールを実装する方法を示すことです。
16. format-api-f14b86（ツールバーにボタン等を追加）
    フォーマット-API。
    この例の目的は、ブロックツールバーで使われるカスタムフォーマットを定義する方法を紹介することです。
17. plugin-sidebar-9ee4a6（画面右上にボタン）
    プラグイン-サイドバー。
    この例では、スロットを使ってブロックエディタのトップツールバーに新しい項目を追加する方法を示しています。
18. data-basics-59c8f8（管理画面のページに検索フォーム）
    データ-基本。
    この例では、WordPressの管理ページにReactアプリを作成する方法を示しています。
19. non-block-react-wp-data-56d6f3（管理画面のページにカウンター）
    非-ブロック-React-wp-data。
    この例の目的は、「wp-data」の使用を示すミニReactアプリでダッシュボードを拡張する方法を紹介することです。
20. meta-block-bb1e55（ブロック入力欄）
    メタ-ブロック。
    この例の目的は、メタブロックの使い方を紹介することです。
21. post-meta-modal-2502fb
    投稿-メタ-モーダル。
    この例では、従来のカスタムフィールドメタボックスを使わずに、カスタム投稿メタデータを定義できるモーダルを投稿エディタに追加します。
22. slotfill-2fb190（デモサイトでエラー）
    スロットフィル。
    この例の目的は、SlotとFillコンポーネントの使い方を紹介することです。
23. interactive-blocks-demos-99def1（カウンターブロック5個）
    双方向の-ブロック-デモ。
    この例の目的は、Gutenbergでインタラクティビティのブロックを作成するさまざまな方法を紹介することです。この例では、ブロックにインタラクティビティ機能を追加する方法を示します。
24. interactivity-api-block-833d15（toggleボタンで開閉）
    インタラクティビティ-API-ブロック。
    このブロックは create-block-interactive-template で作成され、インタラクティビティAPI を使用したインタラクティビティブロックの基本構造を示しています。
    注意：このブロックの動作には Gutenberg 17.2 以上が必要です。
25. interactivity-api-quiz-1835fa（Openボタンで開閉）
    インタラクティビティ-API-クイズ。
    この例の目的は、2つのブロック間で情報を通信するためにインタラクティビティAPIを使用する方法を示すことです。
26. interactivity-api-countdown-3cd73e（カウントダウンブロック3個、ツールバーに日付ボタン）
    インタラクティビティ-API-カウントダウン。
    インタラクティビティブロックの構築。
    注意： このブロックの動作には Gutenberg 17.2 以上が必要です。

create-blockを利用する

WordPress公式サポートツールの create-block を利用します。
ここではデスクトップ上にcreate-blockフォルダを生成していますが、開発環境のプラグインフォルダ内に入れてプラグインとして動作確認することもできます。

1. Node.jsをインストールします。
2. コマンドプロンプトを起動します。

ここでは、デスクトップに移動しておきます（Windows11の場合）。
cd C:\Users\XXXXX\Desktop

WordPress公式サポートツールのCreate Blockを生成します。
npx @wordpress/create-block create-block

create-blockフォルダに移動します。
cd create-block

3. 自作ファイルがなければ一旦終了します。

4. 自作したファイルをcreate-block/srcフォルダ内に入れます。

5. 次回起動から。

create-blockフォルダに移動します（XXXXX部分は変更）。
C:\Users\XXXXX\Desktop\create-block

フォーマットします。
npm run format

JSのチェックをします。
npm run lint:js

CSSのチェックをします。
npm run lint:css

ビルドします。buildフォルダ内に完成ファイルが生成されます。
npm run build

※その他：コードの変更を検知するたびに、自動的にチェック・ビルドしてくれます。
npm run start