@wordpress/create-block

Create Block は公式がサポートするブロック作成方法で WordPress プラグインを使用してブロックを登録します。モダンなビルド設定を提供し追加の構成は必要ありません。PHP、JS、CSS コード、その他プロジェクトの開始に必要なすべてのファイルを生成します。

Create Block は create-react-app から多大な影響を受けました。称賛を @gaearon、Facebook チーム全員、そして React コミュニティに。

説明

WordPress ブロックエディターの基本的な要素は「ブロック」です。ブロックは、プラグインやテーマが自身の機能を登録しエディターの機能を拡張する際に使用されるメインの手段です。

Block API の詳細については ブロックエディターハンドブック を参照してください。

クイックスタート

デモ

ひな形ファイルの保管場所、そして内部のブロック名となる slug を指定するだけで十分です。

$ npx @wordpress/create-block todo-list
$ cd todo-list
$ npm start

(node version 10.0.0 以上、npm version 6.9.0 以上が必要です)

webpack や Babel や ESLint などのツールをインストールしたり構成する必要はありません。それらは自動的に裏側で構成されるためユーザーはコードに集中できます。

使用方法

次のコマンドはブロックを登録する PHP、JS、CSS コードを生成します。

$ npx @wordpress/create-block [options] [slug]

[slug] はオプションです。指定するとクイックモードとなり、ブロックの slug として識別子、ひな形ファイルの出力先、WordPress プラグインの名前に使用されます。構成の残りは、以下に挙げるオプションで上書きしない限り、すべてデフォルト値が設定されます。

オプション:

-V, --version                バージョン番号の出力
-t, --template <name>        テンプレートタイプ名。指定可能な値: "es5", "esnext" (デフォルト: "esnext")
--namespace <value>          ブロック名の内部名前空間
--title <value>              ブロックの表示タイトル
--short-description <value>  ブロックの短い説明
--category <name>            ブロックのカテゴリー名
-h, --help                   使用方法の出力

注意: --version と --help オプションは npm init とは一緒に動作しません。代わりに npx を使用する必要があります。例を参照してください。

サンプル:

  1. 対話モード – プロジェクト名を指定しなければスクリプトは対話モードで動作します。コードが生成される前に、もっとも重要なオプションのいくつかをカスタマイズする機会が得られます。
$ npx @wordpress/create-block
  1. ES5 テンプレート – ESNext や JSX サポートを有効化するビルド手順 (npm start) を実行したくない場合は ES5 テンプレートを選択できます。
$ npm init @wordpress/block --template es5
  1. ヘルプ – 使用例の情報を出力する場合は npx が必要です。
$ npx @wordpress/create-block --help

ブロックのひな形を生成する際、少なくとも slug 名、theme または puglin 名のどちらかと通常は関連する namespace、そして category を指定する必要があります。多くの場合ブロックは、テーマでなくプラグインとペアにすることを推奨します。プラグインを使用していればテーマを変更されてもすべてのブロックが稼働します。

使用可能なコマンド

作成されたディレクトリの中で (es5 テンプレートは除く)、以下のコマンドを実行できます。

$ npm start

開発用のビルドを開始 詳細

$ npm run build

本番用にコアをビルド 詳細

$ npm run format:js

JavaScript ファイルをフォーマット 詳細

$ npm run lint:css

CSS ファイルを lint 詳細

$ npm run lint:js

JavaScript ファイルを lint 詳細

$ npm run packages-update

WordPress パッケージを最新版に更新 詳細

WP-CLI

もう1つの開発者をラクにしてくれる方法が WP-CLI です。WP-CLI は WordPress に対する多くの操作をコマンドラインから実行できますが、その中の1つ wp scaffold block はこのツール、特に ES5 テンプレートの開始ラインとして使用されました。

原文

Code is Poetry.

最終更新日: