プロジェクトの設定の共有方法をお探しですか ? 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) で使用されるスキーマの URLapiVersion
(デフォルト:2
) – ブロック API バージョン (関連 dev note).slug
(デフォルトなし) – ブロック名の識別に使用されるブロックスラッグnamespace
(デフォルト:'create-block'
) – ブロック名の内部名前空間title
(デフォルトなし) – ブロックの表示タイトルdescription
(デフォルトなし) – ブロックの短い説明dashicon
(デフォルトなし) – ブロックの識別を助けるアイコンプロパティ。(利用可能な値)category
(デフォルト:'widgets'
) – ユーザーの参照と検索のため、ブロックはカテゴリーにグループ分けされる。コアで提供されるカテゴリーは、text
、media
、design
、widgets
、theme
、embed
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}}