プロジェクト構成の共有方法をお探しですか ? 外部プロジェクトテンプレートを作成できます。これは 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 ファイル。
プラグインヘッダーと readme フィールド (詳細については、ヘッダーの要件と readme を参照してください)。
pluginURI(デフォルトなし) – プラグインのホームページversion(デフォルト:'0.1.0') – プラグインの現行のバージョン番号requiresAtLeast(デフォルト:'6.7') – プラグインが動作する WordPress の最小バージョンrequiresPHP(デフォルト:'7.4') – プラグインの利用に必要な PHP の最小バージョンtestedUpTo(デフォルト:'6.7') – プラグインがテストされた WordPress の最大バージョン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) で使用されるスキーマの URLapiVersion(デフォルト:2) – ブロック API バージョン (関連 dev note).slug(デフォルトなし) – ブロック名の識別に使用されるブロックスラッグnamespace(デフォルト:'create-block') – ブロック名の内部名前空間title(デフォルトなし) – ブロックの表示タイトルdescription(デフォルトなし) – ブロックの短い説明dashicon(デフォルトなし) – ブロックの識別を助けるアイコンプロパティ (利用可能な値)category(デフォルト:'widgets') – ユーザーの参照と検索のため、ブロックはカテゴリーにグループ分けされる。コアで提供されるカテゴリーは、text、media、design、widgets、theme、embedtextdomain(デフォルトはslug値) – 文字列を翻訳可能にするためのテキストドメイン (詳細)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 が使用されます。
ファイル内の内容を条件付きで出力するために使用できる variants のために Mustache 変数が作成されます。書式は {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}}
また variants は、pluginTemplatesPath、blockTemplatesPath、assetsPath を定義することで、自身のファイルも定義できます。これらを定義すると、プロジェクトテンプレートで定義されたパスを上書きします。variant がテンプレートで定義されたファイルの一部を必要としない場合、該当する変数に null を渡すことで、それらのファイルのひな形生成をスキップできます。
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',
blockTemplatesPath: join(
__dirname,
'custom-path',
'block-templates'
),
assetsPath: null, // Will not scaffold any assets files even if defined by the main template.
},
},
};