外部プロジェクトテンプレート

プロジェクトの設定の共有方法をお探しですか ? npm でホストされる外部プロジェクトテンプレートを作成できます。または、ローカルディレクトリ内にも作成できます。これらの npm パッケージは、カスタム .mustache ファイルを提供でき、WordPress プラグイン または、ブロックのためのツールに含まれるデフォルトのファイルを置き換えられます。また、ひな形生成プロセス中に使用されるデフォルトの構成値を上書きできます。

プロジェクトテンプレート構成

構成オブジェクトを返すパッケージのメインファイル (デフォルトでは index.js) の提供は必須です。いくつかのオプションを使用して、ひな形生成プロセスをカスタマイズできます。

pluginTemplatesPath

このオプションフィールドは、WordPress プラグインシェルに関連するファイルテンプレートを上書きできます。パスは、拡張子が .mustache で終わるテンプレートファイルのある場所を指します (ネストしたフォルダもサポートされます)。設定されない場合、ツールは自身のテンプレートセットを使用します。

例:

const { join } = require( 'path' );

module.exports = {
	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
};

blockTemplatesPath

このオプションフィールドは、個々のブロックに関連するファイルテンプレートを上書きできます。パスは、拡張子が .mustache で終わるテンプレートファイルのある場所を指します (ネストしたフォルダもサポートされます)。設定されない場合、ツールは自身のテンプレートセットを使用します。

例:

const { join } = require( 'path' );

module.exports = {
	blockTemplatesPath: join( __dirname, 'block-templates' ),
};

assetsPath

この設定はテンプレートからひな形の生成時、WordPress プラグインが使用する画像やフォントなどの処理の必要のない静的なアセットを準備する場合に便利です。アセットのある場所を指すパスを指定します。アセットは生成されたプラグインの assets サブフォルダーにコピーされます。

例:

const { join } = require( 'path' );

module.exports = {
	assetsPath: join( __dirname, 'plugin-assets' ),
};

defaultValues

defaultValues フィールドを使用してデフォルトのテンプレート構成を上書きできます。

例:

module.exports = {
	defaultValues: {
		slug: 'my-fantastic-block',
		title: 'My fantastic block',
		dashicon: 'palmtree',
		version: '1.2.3',
	},
};

テンプレートファイルでは以下の構成可能変数が使用されます。テンプレートの作者は、ユーザーが指定しない場合に使用されるデフォルト値を変更できます。

プロジェクト:

  • wpScripts (デフォルト: true) – @wordpress/scripts パッケージとの統合を有効可し、package.json に共通スクリプトを追加する。
  • wpEnv (デフォルト: false) – @wordpress/env パッケージとの統合を有効可し、package.json に env スクリプトを追加する。
  • customScripts (デフォルト: {}) – package.json に追加するカスタムスクリプトのリスト。デフォルトのスクリプトも上書きできる。
  • npmDependencies (デフォルト: []) – wpScripts が有効な時、npm install でプロジェクトにインストールされるリモート npm パッケージのリスト
  • npmDevDependencies (デフォルト: []) – wpScripts が有効な時、npm install --save-dev でプロジェクトにインストールされるリモート npm パッケージのリスト
  • customPackageJSON (デフォルトなし) – 生成されたパッケージの追加プロパティを定義できます。json ファイル。

プラグインヘッダーフィールド (詳細):

  • pluginURI (デフォルトなし) – プラグインのホームページ
  • version (デフォルト: '0.1.0') – プラグインの現行のバージョン番号
  • author (デフォルト: 'The WordPress Contributors') – プラグイン作者の名前
  • license (デフォルト: 'GPL-2.0-or-later') – プラグインのライセンスの短い名前
  • licenseURI (デフォルト: 'https://www.gnu.org/licenses/gpl-2.0.html') – ライセンスの完全なテキストへのリンク
  • domainPath (デフォルトなし) – 翻訳へのカスタムドメインパス。(詳細)
  • updateURI: (デフォルトなし) – プラグインのカスタム更新 URI。(関連 dev note)

ブロックメタデータ (詳細):

  • folderName (デフォルト: src) – block.json ファイル、および、blockTemplatesPath で設定したフォルダに含まれるブロックテンプレートから生成されたオプションのブロックファイルの場所
  • $schema (デフォルト: https://schemas.wp.org/trunk/block.json) – ブロック妥当性検査 (validation) で使用されるスキーマの URL
  • apiVersion (デフォルト: 2) – ブロック API バージョン (関連 dev note).
  • slug (デフォルトなし) – ブロック名の識別に使用されるブロックスラッグ
  • namespace (デフォルト: 'create-block') – ブロック名の内部名前空間
  • title (デフォルトなし) – ブロックの表示タイトル
  • description (デフォルトなし) – ブロックの短い説明
  • dashicon (デフォルトなし) – ブロックの識別を助けるアイコンプロパティ。(利用可能な値)
  • category (デフォルト: 'widgets') – ユーザーの参照と検索のため、ブロックはカテゴリーにグループ分けされる。コアで提供されるカテゴリーは、textmediadesignwidgetsthemeembed
  • attributes (デフォルトなし) – ブロック属性。(詳細).
  • supports (デフォルトなし) – オプションのブロック拡張サポート機能。(詳細.
  • editorScript (デフォルト: 'file:./index.js') – エディタースクリプト定義
  • editorStyle (デフォルト: 'file:./index.css') – エディタースタイル定義
  • style (デフォルト: 'file:./style-index.css') – フロントエンドとエディターのスタイル定義
  • render (デフォルトなし) – フロントエンドで表示する前に、サーバー上でブロックタイプをレンダリングする際に使用される PHP ファイルへのパス。
  • customBlockJSON (デフォルトなし) – 生成された block.json ファイルに対する、追加のプロパティを定義できる
  • transformer (デフォルト: ( view ) => view ) – create-block ツールによって生成されたすべての変数を受け取り、値のオブジェクトを返す関数。既存の値を修正したり、新しい変数を追加する機能を提供する

transformer の例

この例は、slug 変数に生成した値を追加します。

transformer: ( view ) => {
    const hex = getRandomHexCode();
      return {
         ...view,
         slug: `${ view.slug }-${ hex }`,
      };
},

この例は、関連する mustache テンプレート内で {customVariable}} として使用できる、新しいカスタム変数を作成します。

transformer: ( view ) => {
      return {
         ...view,
         customVariable: `Custom Value`,
      };
},

variants

variants はテンプレートのバリエーションの作成に使用されます。variants は自身の値を提供することで、任意の defaultValues を上書きできます。

module.exports = {
	defaultValues: {
		slug: 'my-fantastic-block',
		title: 'My fantastic block',
		dashicon: 'palmtree',
		version: '1.2.3',
	},
	variants: {
		primary: {},
		secondary: {
			title: 'My fantastic block - secondary variant',
		},
	},
};

variants には --variant フラグを使用してアクセスできます (例: --variant secondary)。

variant が提供されなければ、もし variant が定義されていれば、最初の variant が使用されます。

Mustache 変数は、ファイル内の内容を条件付きで出力するために使用できる variants のために作成されます。書式は {isVARIANT_NAMEVariant}} です。

{{#isPrimaryVariant}}
This content is only rendered if `--variant primary` is passed.
{{/isPrimaryVariant}}

{{#isSecondaryVariant}}
This content is only rendered if `--variant secondary` is passed.
{{/isSecondaryVariant}}


原文

s
検索
c
新規投稿を作成する
r
返信
e
編集
t
ページのトップへ
j
次の投稿やコメントに移動
k
前の投稿やコメントに移動
o
コメントの表示を切替
esc
投稿やコメントの編集をキャンセル