dashboard-create-screen

ダッシュボード画面作成スキル

client/dashboard に新しい画面を作成し、ルートの自動検出と登録を行います。

ステップ 1：利用可能なルートを検出する

まず、すべてのルーターファイルを見つけ、利用可能なルートを抽出します。

ルーターファイルを見つける

Glob を使ってルーターファイルを検出します：

client/dashboard/app/router/*.tsx
client/dashboard/app/router/*.ts

各ファイルからルートを抽出する

各ルーターファイルで Grep を使い、ルート情報を抽出します。

エクスポートされたルート定数を見つける：

export\s+const\s+(\w+Route)\s*=\s*createRoute

親子関係を抽出する：

getParentRoute:\s*\(\)\s*=>\s*(\w+Route)

パスセグメントを抽出する：

path:\s*['"]([^'"]+)['"]

コンポーネントのインポートパスを抽出する：

import\(\s*['"]([^'"]+)['"]\s*\)

ルート情報をまとめる

検出した各ルートについて、次の情報を記録します。

• ルート変数名（例：siteBackupsRoute）
• 親ルート名（例：siteRoute）
• パスセグメント（例：'backups'）
• ソースファイルのパス
• コンポーネントのディレクトリ（インポートパスから導出）

ステップ 2：ナビゲーションメニューを検出する（ルート選択後）

メニューの検出は、ユーザーが親ルートを選択した後に行います。ルートの場所を基準にメニューを探します。

メニューの検索パスを決める

選択された親ルートのインポートパスに基づいて、メニューを検索する場所を決めます。

1. 親ルートの遅延インポートからコンポーネントのディレクトリを抽出します

   • 例：import('../../sites/backups') → client/dashboard/sites/ を検索
   • 例：import('../../me/profile') → client/dashboard/me/ を検索

2. Glob を使って、その領域のメニューファイルを見つけます：

   client/dashboard/{area}/**/*-menu/index.tsx
   

3. トップレベルのルートについては、アプリレベルのメニューも確認します：

   client/dashboard/app/*-menu/index.tsx
   

メニュー情報を抽出する

検出した各メニューファイルで Grep を使い、次の項目を探します。

既存のメニュー項目のパターン：

<ResponsiveMenu\.Item\s+to=

メニュー内のルート参照：

to=\{?\s*[`'"/]([^`'"}\s]+)

これにより、メニューの構造と新しい項目を追加する場所を把握できます。

メニュー項目のパターン

メニュー項目には ResponsiveMenu.Item を使用します。

<ResponsiveMenu.Item to="/path/to/screen">
	{ __( 'Menu Label' ) }
</ResponsiveMenu.Item>

条件付きメニュー項目では、機能のサポート状況を確認します。

{ siteTypeSupports.featureName && (
	<ResponsiveMenu.Item to={ `/sites/${ siteSlug }/feature` }>
		{ __( 'Feature' ) }
	</ResponsiveMenu.Item>
) }

ステップ 3：ユーザー入力を収集する

AskUserQuestion を使って、ユーザーに次の項目を尋ねます。

1. 親ルート：検出されたルートをソースファイルごとにまとめて提示
2. 画面名：小文字とハイフンを使用（例：custom-settings）
3. ルートパス：URL のパスセグメント（例：custom-settings）
4. ページタイトル：人が読めるタイトル（例：Custom settings）
5. ページの説明（任意）：タイトルの下に表示する説明
6. ナビゲーションメニューに追加しますか？：はい、またはいいえ

ステップ 4：ファイルの場所を決める

選択された親ルートのインポートパスに基づいて、コンポーネントの作成場所を決めます。

パターン： 親ルートが ../../sites/backups からインポートしている場合、新しい画面は client/dashboard/sites/{screen-name}/ に作成します。

sites 領域の場合： client/dashboard/sites/{screen-name}/index.tsx me 領域の場合： client/dashboard/me/{screen-name}/index.tsx その他の領域の場合： 親ルートのインポートパスと同じパターンに従います

ステップ 5：コンポーネントファイルを作成する

標準レイアウトを使用して、基本的なコンポーネントを生成します。

画面テンプレート

import { __ } from '@wordpress/i18n';
import { PageHeader } from '../../components/page-header';
import PageLayout from '../../components/page-layout';

export default function {ComponentName}() {
	return (
		<PageLayout
			header={
				<PageHeader
					title={ __( '{PageTitle}' ) }
					description={ __( '{PageDescription}' ) }
				/>
			}
		>
			{/* Content goes here */}
		</PageLayout>
	);
}

ステップ 6：ルートを登録する

親ルートと同じルーターファイルにルート定義を追加します。

ルート定義のパターン

ファイル内の他のルートエクスポートの後に追加します。

export const {routeName}Route = createRoute( {
	head: () => ( {
		meta: [
			{
				title: __( '{PageTitle}' ),
			},
		],
	} ),
	getParentRoute: () => {parentRoute},
	path: '{routePath}',
} ).lazy( () =>
	import( '{componentImportPath}' ).then( ( d ) =>
		createLazyRoute( '{routeId}' )( {
			component: d.default,
		} )
	)
);

ルートツリーに接続する

create*Routes() 関数内で親ルートが使用されている箇所を見つけ、新しいルートを追加します。

スタンドアロンルート（メイン領域ルートの直接の子）の場合：

// Find the routes array (e.g., siteRoutes, meRoutes)
// Add the new route to the array
siteRoutes.push( newScreenRoute );

ネストされたルート（機能ルートの子）の場合：

// Find where parent uses .addChildren()
// Add the new route to the children array
parentRoute.addChildren( [ existingRoute, newScreenRoute ] )

ステップ 7：ナビゲーションメニュー項目を追加する（任意）

ユーザーがナビゲーションメニュー項目の追加を希望した場合、検出したメニューファイルに追加します。

対象のメニューファイルを特定する

ルートの領域に基づいて、ステップ 2 で検出したメニューを使用します。

1. 親ルートのインポートパスから領域（例：sites、me、plugins）を抽出します
2. client/dashboard/{area}/**/*-menu/index.tsx を Glob で検索します
3. 複数のメニューが見つかった場合、ユーザーに提示して選択してもらいます
4. 領域固有のメニューが見つからない場合は、client/dashboard/app/primary-menu/index.tsx に切り替えます

メニュー項目の追加

対象のメニューファイルを読み、適切な場所を見つけてください（通常は閉じタグ </ResponsiveMenu> の直前です）。

親ルートのパスと新しい画面のパスからルートパスを組み立てます：

• 親パスが /sites/$siteSlug で、画面のパスが analytics の場合 → /sites/${ siteSlug }/analytics
• 親パスが /me で、画面のパスが api-keys の場合 → /me/api-keys

メニュー項目を挿入します：

<ResponsiveMenu.Item to={ `{fullRoutePath}` }>
	{ __( '{PageTitle}' ) }
</ResponsiveMenu.Item>

既存パターンとの一致

既存のメニュー項目を確認し、パターンを合わせてください：

• メニューで siteSlug を含むテンプレートリテラルを使用している場合は、同じパターンを使用します
• メニューで単純な文字列を使用している場合は、単純な文字列を使用します
• メニュー項目に条件付きのラッパーがある場合は、必要かどうかをユーザーに確認します

条件付きメニュー項目

画面に機能制限が必要な場合（メニュー内の類似項目が条件を使用しているか確認してください）：

{ siteTypeSupports.{featureName} && (
	<ResponsiveMenu.Item to={ `/sites/${ siteSlug }/{routePath}` }>
		{ __( '{PageTitle}' ) }
	</ResponsiveMenu.Item>
) }

コーディング規約

client/dashboard/docs/ に記載されているコーディング規約に従ってください。