私のブックマーク
ブックマークを追加
ブックマークを削除.php
WordPress プラグインでブロックを作成する際、通常はプラグインのメイン PHP ファイルでサーバー上にブロックを登録します。これは register_block_type() 関数を使用して行います。
WordPress プラグインの作成に関する詳細は、Plugin Basics およびメイン PHP ファイルの Header Requirements のドキュメントを参照してください。
package.json
package.json ファイルは Node.js プロジェクトを構成するために使用され、技術的にはブロックプラグインが何であるかを示します。このファイルでは、ブロックの npm 依存関係とローカル開発に使用されるスクリプトを定義します。
src folder
標準プロジェクトでは、src (ソース) フォルダーには、JavaScript、CSS、およびブロックの開発に必要なその他のアセットを含む生の未コンパイルコードが含まれています。ここでは、モダンな JavaScript 機能と React コンポーネント用の JSX を利用して、ブロックのソースコードを記述および編集します。
wp-scripts によって提供される build process は、このフォルダーからファイルを取得し、プロジェクトの 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)
style 拡張子 .css、.scss、または .sass のファイルには、ブロックのスタイルが含まれており、ブロックエディターとフロントエンドの両方で読み込まれます。ビルドプロセスでは、このファイルは style-index.css に変換され、通常は block.json の style プロパティを使用して定義されます。
wp-scripts によって内部で使用される webpack 構成には、CSS、SASS、または SCSS ファイルを処理するための css-loader が含まれ、
postcss-loader および sass-loader と連携しています。詳細については、Default webpack config を確認してください。
editor.(css|scss|sass)
editor 拡張子 .css、.scss、または .sass のファイルには、ブロックエディターでブロックに適用される追加のスタイルが含まれています。このファイルは、ブロックのユーザーインターフェースに特有のスタイルに使用されることがよくあります。このファイルはビルドプロセス中に index.css に変換され、通常は block.json の editorStyle プロパティを使用して定義されます。
render.php
render.php ファイル (または block.json の render プロパティで定義された他のファイル) は、フロントエンドからのリクエストがあるときにブロックのマークアップを返すサーバー側プロセスを定義します。定義されている場合、このファイルはフロントエンドでブロックのマークアップをレンダリングする他の方法に優先します。
view.js
view.js ファイル (または block.json の viewScript プロパティで定義された他のファイル) は、ブロックが表示されるときにフロントエンドで読み込まれます。
build folder
build フォルダーには、src フォルダーからのコードのコンパイルおよび最適化されたバージョンが含まれています。これらのファイルは、wp-scripts の build または start コマンドによってトリガーされる build process から生成されます。
この変換プロセスには、ミニファイ、モダン JavaScript からより広範なブラウザと互換性のあるバージョンへのトランスパイル、および効率的な読み込みのためのアセットのバンドルが含まれます。WordPress は最終的に build フォルダーの内容をキューに入れ、ブロックエディターおよびフロントエンドでブロックをレンダリングするために使用します。
wp-scripts ビルドコマンドの webpack-src-dir および output-path オプションを使用して、エントリポイントと出力ポイントをカスタマイズ できます。
