Create Block は、ブロックを登録する WordPress プラグインのひな形を作成する公式サポートツールです。PHP、JS、CSS コード、その他、プロジェクトの開始に必要なすべてのファイルを生成します。また構成不要で、モダンなビルド設定を統合します。
Create Block は create-react-app から多大な影響を受けました。称賛を @gaearon、Facebook チーム全員、そして React コミュニティに。
「ブロック」は、モダンな WordPress サイトの基本要素です。WordPress 5.0で導入され、すべての最新の WordPress サイトでページビルダーライクな機能を実現しています。
詳細については Gutenberg ハンドブックのブロック API を参照してください。
クイックスタート
$ npx @wordpress/create-block@latest todo-list
$ cd todo-list
$ npm start
指定した slug (この例では todo-list) は、ひな形プラグインのフォルダ名と内部のブロック名を定義します。生成された WordPress プラグインは、手動でインストールする必要があります。
(node version 20.10.0 以上、npm version 10.2.3 以上が必要です)
使用方法
create-block コマンドは、WordPress プラグインでブロックを登録する PHP、JS、CSS コードのプロジェクトを生成します。
$ npx @wordpress/create-block@latest [options] [slug]
ブロック名は、ブロックを識別する一意の文字列です。ブロック名の構造は
namespace/slugで、namespace はプラグイン、またはテーマの名前です。
ほとんどの場合、ブロックはテーマではなく WordPress のプラグインと組み合わせることを推奨します。プラグインを使用していれば、テーマが変わっても、すべてのブロックが動作することが保証されるためです。
対話モード
slugを指定しなければスクリプトは対話モードで実行され、ひな形プロジェクトに必要な入力 (slug、title、namespace…）を求めるプロンプトが表示されます。
slug
slug の使用はオプションです。
指定すると クイックモード で実行され、以下でslug が使用されます。
- ブロックの slug (ブロックの識別に必要)
- ひな形ファイルの出力先 (フォルダ名)
- WordPress プラグインの名前
構成の残りは以下に挙げるオプションで上書きしない限り、すべてデフォルト値が設定されます。
オプション
-V, --version バージョン番号の出力
-t, --template <name> プロジェクトテンプレートタイプ名。指定可能な値: "static" (デフォルト)、"es5"、外部 npm パッケージ名、ローカルディレクトリへのパス
--variant テンプレートで定義されたブロックのバリエーションを選択
--no-plugin ひな形ブロックファイルのみ
--target-dir <directory> ひな形ファイルの出力先。デフォルトはスラッグ名
--namespace <value> ブロック名の内部名前空間
--title <value> ブロックと WordPress プラグインの表示タイトル
--short-description <value> ブロックと WordPress プラグインの短い説明
--category <name> ブロックのカテゴリー名
--wp-scripts `@wordpress/scripts` パッケージとの統合を有効化
--no-wp-scripts `@wordpress/scripts` パッケージとの統合を無効化
--wp-env `@wordpress/env` パッケージとの統合を有効化
-h, --help 使用方法の出力
–template
この引数はテンプレートとして、外部 npm パッケージ を指定します。
$ npx @wordpress/create-block@latest --template my-template-package
この引数を使用するとまたテンプレートとして ローカルディレクトリ も選択できます。
$ npx @wordpress/create-block@latest --template ./path/to/template-directory
–variant
この引数を使用すると、create-block は組み込みのテンプレートを基に、ダイナミックブロックを生成します。
$ npx @wordpress/create-block@latest --variant dynamic
–no-plugin
この引数を指定すると、create-block パッケージは プラグインなしモード で実行されます。現行ディレクトリにひな形ブロックファイルのみを作成します。
$ npx @wordpress/create-block@latest --no-plugin
–wp-env
この引数を指定すると、create-block パッケージは生成されたプラグインに、プラグイン内で wp-env パッケージを実行するための構成やスクリプトを追加します。生成されたプラグインをビルド、テストする、Docker 利用のローカル WordPress 環境を簡単にセットアップできます。
$ npx @wordpress/create-block@latest --wp-env
–help
この引数を指定すると、create-block パッケージは使用方法の情報を表示します。
$ npx @wordpress/create-block@latest --help
ひな形プロジェクト内で利用可能なコマンド
このコマンドを実行して作成される plugin フォルダは、モダンなビルド環境が設定された node パッケージです。追加の構成を必要ありません。
このフォルダの中には作業を助ける複数のスクリプトが準備されています (scripts パッケージで提供されます)。コマンドの詳細については、ここをクリックしてください。
注意: webpack や Babel や ESLint などのツールのインストールや構成は必要ありません。これらは裏側で自動的に構成されるため、ユーザーはコードに集中できます。
例えば、生成されたフォルダ内から start スクリプトを実行 (npm start) すると、開発用のビルドが自動的に始まります。
外部プロジェクトテンプレート
外部プロジェクトテンプレートの情報については、こちらをクリックしてください。
このパッケージへのコントリビュート
これは、Gutenberg プロジェクトの一部である、個別パッケージです。このプロジェクトは、monorepo として構成されています。複数の自己完結型ソフトウェアパッケージで構成されており、それぞれが特定の目的を持ちます。この monorepo のパッケージは npm で公開され、WordPress や他のソフトウェアプロジェクトで利用されています。
このパッケージや Gutenberg 全体へのコントリビュートの詳細については、プロジェクトのメインのコントリビューターガイドを参照ください。
