DataForm: support registering 3rd party controls

[oandregal]

Closes #74856

What?

Adds support for registering custom controls in DataForm via a new settings prop.

  // Register custom controls via settings prop                                                                                                                                                                                                                          
  <DataForm                                                                                                                                                                                                                                                              
      data={ product }                                                                                                                                                                                                                                                   
      fields={ fields }                                                                                                                                                                                                                                                  
      form={ form }                                                                                                                                                                                                                                                      
      onChange={ setProduct }                                                                                                                                                                                                                                            
      settings={ {                                                                                                                                                                                                                                                       
          controls: {                                                                                                                                                                                                                                                    
              starRating: StarRatingControl,                                                                                                                                                                                                                             
          },                                                                                                                                                                                                                                                             
      } }                                                                                                                                                                                                                                                                
  />                                                                                                                                                                                                                                                                     

Custom controls can be referenced by string name:

  {                                                                                                                                                                                                                                                                      
      id: 'rating',                                                                                                                                                                                                                                                      
      label: 'Rating',                                                                                                                                                                                                                                                   
      type: 'integer',                                                                                                                                                                                                                                                   
      Edit: 'starRating',                                                                                                                                                                                                                                                
  }                                                                                                                                                                                                                                                                      

Or with additional configuration via EditConfig:

  {                                                                                                                                                                                                                                                                      
      id: 'rating',                                                                                                                                                                                                                                                      
      label: 'Rating (3 stars)',                                                                                                                                                                                                                                         
      type: 'integer',                                                                                                                                                                                                                                                   
      Edit: {                                                                                                                                                                                                                                                            
          control: 'starRating',                                                                                                                                                                                                                                         
          starCount: 3,                                                                                                                                                                                                                                                  
      },                                                                                                                                                                                                                                                                 
  }                                                                                                                                                                                                                                                                      

Why?

Field authors can already declare custom Edit controls:

  {                                                                                                                                                                                                                                                                      
      id: 'rating',                                                                                                                                                                                                                                                      
      label: 'Rating (3 stars)',                                                                                                                                                                                                                                         
      type: 'integer',                                                                                                                                                                                                                                                   
      Edit: ( { data, field, onChange } ) => { /* custom control */ } 
  }                                                                                                                                                                                                                                                                      

However, this is not serializable as so cannot be used in places like JSON or PHP. By allowing 3rd parties to register their own custom controls as if they were core ones, we unlock serialization for them.

How?

• Added a new settings prop to DataForm with a controls object that maps control names to React components.
• Custom controls take precedence over built-in controls, allowing overrides.
• Custom controls can be referenced by string name (Edit: 'starRating') or with config (Edit: { control: 'starRating', starCount: 3 }).
• Added new "Register Controls" story to highlight this use case.

Testing Instructions

1. Run the Storybook: npm run storybook:dev
2. Navigate to DataViews → DataForm → Register Controls
3. Verify the star rating controls render correctly (support label and required/custom validation).

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Flaky tests detected in 394688b.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/21358235925
📝 Reported issues:

• [Flaky Test] should close the inserter when clicking on the toggle button #48005 in /test/e2e/specs/editor/various/inserting-blocks.spec.js
• [Flaky Test] should hide a block completely by selecting "Omit from published content" #74883 in /test/e2e/specs/editor/various/block-hiding.spec.js

[jorgefilipecosta]

Should we just reuse this interface in FormControls in dataform-controls/index.tsx:30-32 and CustomControls in field-types/index.tsx:72-74?

[jorgefilipecosta]

Could we just do customControls && type in customControls to avoid creating a keys array just to check existence?

[jorgefilipecosta]

This memoization is useless if consumers just do:
settings={ {
controls: {
starRating: StarRatingControl,
},
} }
As we did on our story packages/dataviews/src/dataform/stories/register-controls.tsx. Not sure about what the correct solution should be but I guess we shgould update our story to use an object reference that does not chnages on rerender. We may also document that because of performance settings should not change on every rerender.

[jorgefilipecosta]

This should probably be: control: Exclude<string, FieldTypeName | 'textarea' | 'text'>;
So on "config.control === 'textarea'", TypeScript narrows to EditConfigTextarea instead of EditConfigTextarea | EditConfigCustom.

Suggested change

	control: string;
	control: Exclude<string, FieldTypeName | 'textarea' | 'text'>;

[jorgefilipecosta]

Do we need & { validity?: FieldValidity } here? It seems DataFormControlProps already includes it.