ブロックのファイル構成

Topics

  • ブロックの定義と登録に関するフォルダとファイル
    • <plugin-file>.php
    • package.json
    • src フォルダ
    • block.json
    • index.js
    • edit.js
    • save.js
    • style.(css|scss|sass)
    • editor.(css|scss|sass)
    • render.php
    • view.js
    • build フォルダ
  • その他の情報

テーマを変更しても引き続きブロックを利用できるように、プラグインによるブロックの登録 を推奨します。create-block ツールを使用すると、ブロック登録用のプラグイン作成に必要な、ファイルセットのひな形を素早く作成できます。

create-block が生成するファイルセットは、ブロックの定義や登録に関連するファイルセットの良いリファレンスになります。

ブロックのファイル構成の図解を開く

ブロックの定義と登録に関するフォルダとファイル

Top ↑

<plugin-file>.php

ブロックは通常 WordPress プラグインを使用してブロックエディターに追加されます。プラグインのメインの PHP ファイルでは、通常サーバー側でブロックが登録されます。

WordPress プラグインの作成の詳細については Plugin Basics、プラグインヘッダーの説明と、ヘッダーに挿入可能な追加フィールドについては Plugin Header requirements を参照してください。

Top ↑

package.json

package.json は Node.js プロジェクトの構成ファイルです。このファイル内に、ブロックの NPM 依存と、ローカルでの作業に使用するスクリプトを定義します。

Top ↑

src フォルダ

標準的なプロジェクトでは、ブロックファイルを src フォルダに配置します。デフォルトの wp-scripts によるビルドプロセス ではこのフォルダからファイルを取得し、build フォルダ内にバンドルされたファイルを生成します。

Top ↑

block.json

このファイルにはブロックのメタデータが含まれています。クライアントとサーバーの両方で使用され、ブロックの定義と登録を簡素化します。

他のデータとしてはブロックの動作、出力、スタイルに関係するファイルのパスを定義するプロパティを提供します。ビルドプロセスがある場合、この block.json は、生成されたファイルと一緒に保存先フォルダ (通常は build フォルダ) に配置されます。したがって指定するパスも、これらのファイルのバンドルされたバージョンを対象とします。

block.json で定義可能な、ブロックの動作や出力、スタイル関連のファイル設定と最も関連性の高いプロパティを以下に挙げます。

  • editorScript プロパティ。通常、バンドルされた index.js ファイル (ビルドで src/index.js から出力される) のパスを設定します。
  • style プロパティ。通常、バンドルされた style-index.css ファイル (ビルドで src/style.(css|scss|sass) から出力される) のパスを設定します 。
  • editorStyle プロパティ。通常、バンドルされた index.css ファイル (ビルドで src/editor.(css|scss|sass) から出力される) のパスを設定します。
  • render プロパティ。通常、バンドルされた render.php ファイル (src/render.php からコピーして出力される) のパスを設定します。
  • viewScript プロパティ。通常、バンドルされた view.js ファイル (ビルドで src/view.js から出力される) のパスを設定します。
ビルド出力の図解を excalidraw で開く

Top ↑

index.js

index.js ファイル (または block.json の editorScript プロパティで定義されたファイル) は、エディタでのみロードされる JavaScript のエントリーポイントファイルです。このファイルは registerBlockType 関数を呼び出し、クライアント側でブロックを登録します。標準的な構成では edit.js と save.js ファイルをインポートして、ブロックの登録に必要な関数を取得します。

Top ↑

edit.js

edit.js は一般に、ブロックのためにエディターで使用される React コンポーネントの格納に使用されます。通常、単一のコンポーネントをエクスポートし、index.js ファイル内の registerBlockType 関数の edit プロパティに渡されます。

Top ↑

save.js

save.js は、データベースに保存される静的な HTML マークアップを返す関数をエクスポートします。index.js ファイル内の registerBlockType 関数の save プロパティに渡されます。

Top ↑

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 構成 を参照してください。

Top ↑

editor.(css|scss|sass)

.css.scss.sass のいずれかの拡張子を持つ editor ファイル。エディターのコンテキストでのみブロックに適用される追加スタイルが含まれます。このファイルはビルド処理で index.css に変換され、通常は block.json の editorStyle プロパティで定義されます。

Top ↑

render.php

render.php ファイル (または block.json の render プロパティで定義されたファイル) は、フロントエンドからのリクエストがあったときにブロックのマークアップを返すサーバー側の処理を定義します。このファイルが定義されていると、フロントエンドでブロックのマークアップをレンダーするする他の方法に優先されます。

Top ↑

view.js

view.js ファイル (または block.json の viewScript プロパティで定義されたファイル) は、ブロックが表示されたときにフロントエンドで読み込まれます。

Top ↑

build フォルダ

標準的なプロジェクトでは wp-scripts の build コマンドまたは start コマンドによって起動されたビルドプロセス で生成されたファイルが、build フォルダに格納されます。

wp-scripts のビルドコマンドの webpack-src-dir と output-path オプションを使用して、 エントリと出力の場所をカスタマイズできます

Top ↑

その他の情報

原文

最終更新日: