🛠️ ブロックオーバーライドガイド

✨ 概要

Nodeblocksコンポーネントは、ブロックオーバーライドを通じて強力なカスタマイズ機能を提供します。このパターンにより、基本的な機能を維持しながら、コンポーネントの構造、スタイリング、動作を完全にカスタマイズできます。

このガイドではCreateOrganizationコンポーネントを例として使用していますが、同じパターンはブロックオーバーライドをサポートするすべてのNodeblocksコンポーネントに適用されます。

🚀 基本的なオーバーライドパターン

ブロックオーバーライドパターンは、defaultBlocksとdefaultBlockOrderを受け取るレンダー関数を使用し、任意のブロックを変更または置換できます：

<CreateOrganization onCreateOrganization={handleSubmit}>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      // ここで特定のブロックをオーバーライド
    },
    blockOrder: defaultBlockOrder
  })}
</CreateOrganization>

🎨 スタイルカスタマイズ例

sxプロップ（MUI）またはインラインstyleを使用してブロックの外観をカスタマイズ：

ライブエディター

function StyledOrganizationForm() {
  return (
    <CreateOrganization 
      onCreateOrganization={console.log}
      termsOfUseUrl="#terms-of-service"
      privacyAgreementUrl="#privacy-policy"
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          title: {
            ...defaultBlocks.title,
            props: {
              ...defaultBlocks.title.props,
              children: '🏢 組織登録',
              sx: { 
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
              },
            },
          },
          description: {
            ...defaultBlocks.description,
            props: {
              ...defaultBlocks.description.props,
              children: '以下のフォームに入力して組織プロフィールを作成してください',
            },
          },
          form: {
            ...defaultBlocks.form,
            props: {
              ...defaultBlocks.form.props,
              sx: {
                background: 'rgba(255, 255, 255, 0.9)',
                borderRadius: '20px',
                padding: '24px',
                boxShadow: '0 8px 32px rgba(0,0,0,0.08)',
              },
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </CreateOrganization>
  );
}

結果

🔧 完全なカスタマイズ例

カスタムラベル、スタイリング、フィールド設定を使用したネストされたブロックオーバーライドを示す包括的な例：

ライブエディター

function AdvancedOrganizationForm() {
  return (
    <CreateOrganization 
      onCreateOrganization={(formData) => {
        console.log('組織データ:', formData);
      }}
      termsOfUseUrl="#terms"
      privacyAgreementUrl="#privacy"
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          // カスタムタイトル
          title: {
            ...defaultBlocks.title,
            props: {
              ...defaultBlocks.title.props,
              children: '🏢 会社登録',
            },
          },
          
          // カスタム説明
          description: {
            ...defaultBlocks.description,
            props: {
              ...defaultBlocks.description.props,
              children: '組織を登録するには、すべての必須フィールドに入力してください',
            },
          },
          
          // ネストされたフォームオーバーライド
          form: {
            ...defaultBlocks.form,
            props: {
              ...defaultBlocks.form.props,
              children({defaultBlocks, defaultBlockOrder}) {
                return {
                  blocks: {
                    // アカウント責任者セクションのオーバーライド
                    accountHolder: {
                      ...defaultBlocks.accountHolder,
                      props: {
                        ...defaultBlocks.accountHolder.props,
                        children({defaultBlocks}) {
                          return {
                            blocks: {
                              sectionTitle: {
                                ...defaultBlocks.sectionTitle,
                                props: {
                                  ...defaultBlocks.sectionTitle.props,
                                  children: '👤 アカウント責任者情報',
                                },
                              },
                              nameField: {
                                ...defaultBlocks.nameField,
                                props: {
                                  ...defaultBlocks.nameField.props,
                                  label: '氏名',
                                  placeholder: '氏名を入力してください',
                                },
                              },
                              emailField: {
                                ...defaultBlocks.emailField,
                                props: {
                                  ...defaultBlocks.emailField.props,
                                  label: 'ビジネスメール',
                                  placeholder: 'company@example.com',
                                },
                              },
                              contactField: {
                                ...defaultBlocks.contactField,
                                props: {
                                  ...defaultBlocks.contactField.props,
                                  label: '電話番号',
                                  placeholder: '03-1234-5678',
                                },
                              },
                            },
                            blockOrder: ['sectionTitle', 'nameField', 'emailField', 'contactField'],
                          };
                        },
                      },
                    },
                    
                    // 会社情報セクションのオーバーライド
                    companyInformation: {
                      ...defaultBlocks.companyInformation,
                      props: {
                        ...defaultBlocks.companyInformation.props,
                        children({defaultBlocks}) {
                          return {
                            blocks: {
                              sectionTitle: {
                                ...defaultBlocks.sectionTitle,
                                props: {
                                  ...defaultBlocks.sectionTitle.props,
                                  children: '🏢 会社情報',
                                },
                              },
                              companyName: {
                                ...defaultBlocks.companyName,
                                props: {
                                  ...defaultBlocks.companyName.props,
                                  label: '会社名',
                                  placeholder: '株式会社サンプル',
                                },
                              },
                              homePageUrl: {
                                ...defaultBlocks.homePageUrl,
                                props: {
                                  ...defaultBlocks.homePageUrl.props,
                                  label: 'ウェブサイトURL',
                                  placeholder: 'https://www.example.com',
                                },
                              },
                              additionalInformation: {
                                ...defaultBlocks.additionalInformation,
                                props: {
                                  ...defaultBlocks.additionalInformation.props,
                                  label: '会社概要',
                                  placeholder: '会社の簡単な説明...',
                                },
                              },
                            },
                            // カスタムブロック順序 - 選択したフィールドのみ表示
                            blockOrder: ['sectionTitle', 'companyName', 'homePageUrl', 'additionalInformation'],
                          };
                        },
                      },
                    },
                    
                    // カスタム送信ボタン
                    submitButton: {
                      ...defaultBlocks.submitButton,
                      props: {
                        ...defaultBlocks.submitButton.props,
                        children: '🚀 組織を登録',
                      },
                    },
                  },
                  // カスタムフォームセクション順序
                  blockOrder: ['accountHolder', 'companyInformation', 'compliance', 'submitButton'],
                };
              },
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </CreateOrganization>
  );
}

結果

🎯 主要なオーバーライド概念

1. ブロックオーバーライド構造

プロパティ	説明
`blocks`	変更または置換可能なコンポーネント定義を含むオブジェクト
`blockOrder`	ブロックのレンダリング順序を制御する配列
`defaultBlocks`	ライブラリが提供する元のコンポーネント構造
`defaultBlockOrder`	参照用の元のレンダリング順序

2. ネストされたオーバーライド

ネストされた構造を持つコンポーネント（セクションを持つフォームなど）の場合、childrenプロップを使用してネストされたブロックにアクセス：

form: {
  ...defaultBlocks.form,
  props: {
    ...defaultBlocks.form.props,
    children({defaultBlocks, defaultBlockOrder}) {
      return {
        blocks: {
          // ここでネストされたブロックをオーバーライド
        },
        blockOrder: defaultBlockOrder,
      };
    }
  }
}

3. 完全なブロック置換

デフォルトブロックを完全にカスタムコンポーネントに置換：

blocks: {
  description: <p className="custom-description">カスタムコンテンツをここに</p>,
}

4. 選択的フィールド表示

blockOrderを変更してどのフィールドを表示するかを制御：

// AccountHolderセクションで特定のフィールドのみ表示
blockOrder: ['sectionTitle', 'nameField', 'emailField']

// CompanyInformationセクションで特定のフィールドのみ表示
blockOrder: ['sectionTitle', 'companyName', 'homePageUrl', 'additionalInformation']

📐 ベストプラクティス

常にデフォルトpropsをスプレッドして既存の機能を維持：

props: { ...defaultBlocks.title.props, children: 'カスタムタイトル' }

意味のあるブロック名を使用してメンテナンス性を向上
blockOrderの一貫性を維持（意図的にフィールドの順序変更や削除を行う場合を除く）
TypeScriptを活用してブロックオーバーライド関数の型安全性を確保
バリデーションやフォーム動作をカスタマイズする際は十分にテスト

🚀 利点

利点	説明
🎨 完全なUI制御	コンポーネントの外観のあらゆる側面をカスタマイズ
🔧 柔軟な構造	必要に応じてブロックの順序変更、削除、追加が可能
📱 機能の維持	組み込みのバリデーション、状態管理、アクセシビリティを保持
🔄 段階的な拡張	デフォルトから始めて段階的にカスタマイズ

プロのヒント: 小さなオーバーライド（ラベルやスタイルの変更など）から始めて、徐々に複雑さを構築しましょう。ブロックオーバーライドパターンは強力ですが、propsのスプレッドとコンポーネント構造に細心の注意が必要です。

✨ 概要​

🚀 基本的なオーバーライドパターン​

🎨 スタイルカスタマイズ例​

🔧 完全なカスタマイズ例​

🎯 主要なオーバーライド概念​

1. ブロックオーバーライド構造​

2. ネストされたオーバーライド​

3. 完全なブロック置換​

4. 選択的フィールド表示​

📐 ベストプラクティス​

🚀 利点​