FSWPブロック開発者 は何をしますか？
常に適用される基本スキル: fswp-developer/references/lean-coding.md（少なく書き、再利用を優先）、fswp-developer/references/coding-standards.md（コーディング標準、ドキュメント、i18n、アクセシビリティ）、および fswp-security-engineer（入力、出力、認可）。
コアブロックを優先して使用し、コアブロックとパターンでは要件を表現できない場合にのみカスタムブロックを作成します。公式リファレンス: fswp-developer/references/official-docs.md にあるブロックエディターハンドブックのリンクを参照。各APIの最低WordPressバージョンをプロジェクトの宣言済み最低バージョンと照合してください。
構造
blocks/my-block/
block.json 名前、タイトル、カテゴリ、属性、supports、render、editorScript、viewScriptModule、style
edit.js エディターUI（useBlockPropsを使用）
save.js 静的マークアップ、動的ブロックの場合は省略
render.php 動的ブロックのサーバーレンダリング
view.js フロントエンドの挙動（モジュール）
style.scss / editor.scss
メタデータからの登録: init で register_block_type( __DIR__ . '/build/my-block' )（init コールバックには名前付き関数を使用）。"apiVersion": 3（WordPress 6.3以降で標準）を設定し、"$schema": "https://schemas.wp.org/trunk/block.json" を追加。フィールドごとのリファレンスは、Block Editor Handbook で検証済み: references/block-json.md。
決定
| 質問 | 選択肢 |
|---|---|
| 出力が保存済み属性のみに依存する | 静的ブロック（save.js） |
| 出力がライブデータに依存し、再保存なしで変更が必要、またはロジックを含む | 動的ブロック（render.php）; save は null または InnerBlocks のみを返す |
| ネストされたコンテンツ | allowedBlocks と template を指定した InnerBlocks |
| 属性をデータ（投稿メタ、カスタムソース）にバインドする | ブロックバインディングAPI（register_block_bindings_source）、最低WordPressバージョンが許可する場合 |
| 既存ブロックの代替プリセット | 新しいブロックではなく、ブロックバリエーションまたはスタイル |
| 再利用可能なレイアウト | ブロックではなくパターン |
ルール
- 属性: すべての属性に
typeとdefaultを指定し、マークアップまたはコメントから一貫してソースを取得し、render.phpで検証する。 - コントロールを自作する代わりに
supports（color、spacing、typography、align、anchor）を使用する。 - エディターマークアップは
useBlockProps()を使用し、動的PHPではget_block_wrapper_attributes()を使用する。 render.php（block.json のrender、WordPress 6.1以降）は$attributes、$content、$block（WP_Blockオブジェクト）を受け取る。ページ上のブロックインスタンスごとに1回読み込まれるため、内部で関数やクラスを宣言せず、他のファイルから共有コードを呼び出す。- スクリプト vs モジュール:
viewScriptは従来のスクリプト（WordPressスクリプトに依存するものすべて）用、viewScriptModule（6.5以降）は Interactivity API などのスクリプトモジュール用。これらは互換性がないため、依存関係を混在させない。 render.phpではすべてをエスケープする（fswp-security-engineer）; 属性はユーザー入力である。- 出荷済みの静的ブロックの保存済みマークアップを変更すると、既存のコンテンツが壊れる。古い
save、属性、migrate関数をdeprecatedエントリとして追加し、その後ブロックを変更する。 - 文字列をJSとPHPで翻訳する（テキストドメインを指定した
__()）;wp_set_script_translationsまたは block.json のtextdomain。 - フロントエンドスクリプトはブロックがレンダリングされる場所でのみ読み込む（block.json の
viewScriptModule/scriptがこれを実現する）。
パターン
パターン、バリエーション、ブロックフック、バインディングの詳細: references/patterns-variations.md。Interactivity API の詳細（サーバーレンダリング、非同期アクション、data-wp-each、ウォッチャー、パフォーマンス）: references/interactivity.md。
PHPでは register_block_pattern()（および register_block_pattern_category()）で登録するか、テーマの patterns/ ディレクトリにファイルとして配置する。パターンはプリセットと翻訳済みテキストを使用する; リモート画像は使用しない; 明確なタイトル、カテゴリ、キーワードを付与する。
Interactivity API
サーバーレンダリングされたマークアップに小さなリアクティブな動作を追加。フレームワーク不要。
"supports": { "interactivity": true }と"viewScriptModule": "file:./view.js"で有効化。- マークアップディレクティブ:
data-wp-interactive="namespace"、data-wp-context='{"open":false}'、data-wp-on--click="actions.toggle"、data-wp-bind--hidden="!context.open"、data-wp-class--is-open="context.open"、data-wp-text="state.label"。 view.js内のストア:import { store, getContext } from '@wordpress/interactivity'; store( 'namespace', { state: {...}, actions: { toggle() { const c = getContext(); c.open = !c.open; } } } );- サーバーステートを
wp_interactivity_state( 'namespace', array(...) )でシードし、初回描画が正しくフラッシュが発生しないようにする。ステートはシリアライズ可能に保つ。 - 名前空間ですべてを分離し、衝突を防ぐ; シークレットをステートやコンテキストに決して入れない（両方ともページに出力される）。
- アクセシビリティのために、
aria-expandedとフォーカス処理をステートに結び付け、キーボード操作をテストする。
ビルドとテスト
npx @wordpress/create-block で開始点を作成; @wordpress/scripts で build、start、lint-js、lint-style、test-unit-js を実行。ビルド済みファイルを src/、package.json、ロックファイルとともに配布する（コンパイルコードのディレクトリルール）。エディター（挿入、編集、保存、リロード、コードビューへの切り替え）とフロントエンドでテストする。fswp-qa-engineer に引き継ぐ。