ブロックのファイル構成
Topics
WordPress のカスタムブロックの開発における最良の登録方法は、テーマではなく、プラグインです。プラグインを使用すれば、ユーザーがテーマを変更してもブロックにアクセスできることが保証されます。テーマに直接ブロックを埋め込む方が適切な状況もありますが、このガイドではプラグイン内に格納されたブロックに焦点を当てます。具体的には、create-block ツールで生成されるファイルの構造を詳しく説明します。
create-block ツールの構造に従うことは必須ではありませんが、信頼できるリファレンスとして役立ちます。生成されるファイルには、ブロックの定義と登録に必要なすべて含まれています。この構造に従うことで、一貫性を保つことができ、ブロックが整理され、メンテナンスしやすくなります。
<plugin-file>.php
WordPress のプラグインでブロックを作成する場合、通常はプラグインのメインの PHP ファイル内でサーバー上にブロックを登録します。登録には register_block_type() 関数を使用します。
WordPress プラグイン作成の詳細については Plugin Basics、プラグインヘッダーの説明と、ヘッダーに挿入可能な追加フィールドについては Plugin Header requirements を参照してください。
package.json
package.json ファイルは Node.js プロジェクトの構成に使用されます。Node.js プロジェクトは、技術的には、ブロックプラグインです。package.json ファイルでは、ブロックの npm 依存関係とローカル開発で使用するスクリプトを定義します。
src フォルダ
標準的なプロジェクトでは、src (ソース) フォルダに、ブロックの開発に必要な JavaScript、CSS、その他のアセットを含む、コンパイルされていない生のコードを格納します。このフォルダで、最新の JavaScript 機能や React コンポーネントの JSX を利用しながら、ブロックのソースコードを書き、編集します。
wp-scripts が提供するビルドプロセスは、このフォルダからファイルを取り出し、プロジェクトの build フォルダに本番用のファイルを生成します。
block.json
block.jsonファイルはブロックのメタデータを含み、クライアントサイドとサーバーサイドの環境間で定義と登録を効率化します。
このファイルは、ブロック名、説明、attributes、supportsなどのほか、ブロックの機能、外観、スタイルに責任のある重要なファイルの位置を含みます。
ビルドプロセスが適用されると、block.json ファイルと他の生成されたファイルは指定されたフォルダ (多くは buildフォルダ) に移動されます。この結果、block.json 内で指定されたファイルパスは、これら処理済みの、バンドルされたバージョンのファイルを指すようになります。
block.json で定義できる最も重要なプロパティのいくつかを挙げます。
editorScript: 通常、src/index.jsからビルドされる、バンドルしたindex.jsファイルのパスを設定します。style: 通常、src/style.(css|scss|sass)からビルドされる、バンドルしたstyle-index.cssファイルのパスを設定します。editorStyle: 通常、src/editor.(css|scss|sass)からビルドされる、バンドルしたindex.cssのパスを設定します。render: 通常、src/render.phpからコピーされる、バンドルしたrender.phpのパスを設定します。viewScript: 通常、src/view.jsからビルドされる、バンドルしたview.jsのパスを設定します。
index.js
index.js ファイル (または block.json の editorScript プロパティで定義されたファイル) は、ブロックエディターでのみロードされる JavaScript のエントリーポイントファイルです。このファイルには、クライアント側でブロックを登録するため、registerBlockType 関数を呼び出す責任があり、一般にはブロックの登録で必要な機能の取得のため、edit.js と save.js ファイルをインポートします。
edit.js
edit.js ファイルには、ブロックの編集ユーザーインターフェイスのレンダリングに責任のある React コンポーネントが含まれます。ユーザーはブロックエディターでブロックのコンテンツや設定を操作したり、カスタマイズできます。このコンポーネントは index.js ファイルの registerBlockType 関数の edit プロパティに渡されます。
save.js
save.js は、WordPress データベースに保存される静的な HTML マークアップを返す関数をエクスポートします。この関数は index.js ファイル内の registerBlockType 関数の save プロパティに渡されます。
style.(css|scss|sass)
拡張子 .css、.scss、.sass を持つ style ファイル。ここにはブロックエディターとフロントエンドの両方に読み込まれるブロックのスタイルが含まれます。このファイルはビルドプロセスで style-index.css に変換され、通常は block.json の style プロパティを使用して定義されます。
wp-scriptsが内部的に使用する webpack の構成では、css-loader と postcss-loader や sass-loader が連結されていて、CSS、SASS、SCSS ファイルを処理できます。詳細については デフォルトの webpack 構成 を参照してください。
editor.(css|scss|sass)
拡張子が .css、.scss、.sass の editor ファイルには、ブロックエディター内でブロックに適用される追加スタイルが含まれます。多くはブロックのユーザーインターフェイスに特化したスタイルに使用されます。このファイルはビルド時に index.css に変換され、通常は block.json の editorStyle プロパティで定義されます。
render.php
render.php ファイル (または block.json の render プロパティで定義された任意のファイル) には、フロントエンドからのリクエストに対してブロックのマークアップを返す、サーバー側の処理を定義します。定義があると、フロントエンドでブロックのマークアップをレンダーするする他の方法に優先されます。
view.js
view.js ファイル (または block.json の viewScript プロパティで定義された任意のファイル) は、ブロックが表示されるときにフロントエンド内に読み込まれます。
build フォルダ
build フォルダには src フォルダのコードのコンパイルし、最適化されたバージョンが格納されます。これらのファイルは wp-scripts の build コマンドまたは start コマンドによって起動された ビルドプロセス で生成されます。
この変換プロセスには、最小化 (ミニファイ)、モダンな JavaScript から幅広いブラウザと互換性のあるバージョンへのトランスパイル、効率的な読み込みのためのアセットのバンドルなどが含まれます。WordPressは 最終的に build フォルダのコンテンツをエンキューし、ブロックエディター内とフロントエンド上でブロックのレンダーに使用します。
wp-scriptsのビルドコマンドのwebpack-src-dirとoutput-pathオプションを使用して、 エントリと出力の場所をカスタマイズできます。
その他の情報
最終更新日: