Box Control: Add Runtime Check & Conditional Types for presets and presetKey Props

[im3dabasia]

Follow up to this Comment: #67688 (comment)

What?

• Added a runtime warning when only one of presets or presetKey props is defined.
• Introduced conditional types to ensure presetKey is required if presets is specified.

Why?

• Prevents potential misconfigurations by ensuring that both props are used correctly together.
• Enhances type safety and developer experience by enforcing clear prop relationships.

How?

• Implemented a runtime check for the presets and presetKey props to trigger a warning if only one is defined.
• Updated TypeScript types to make presetKey non-optional when presets is provided.

Testing Instructions

1. Define only one of the presets or presetKey props in a component. (For my testing purposes I used the BoxControl storybook)
2. Ensure a runtime warning is displayed.
3. Verify that presetKey is required when presets is defined.

Screencast

Screen.Recording.2025-01-03.at.1.18.21.PM.mov

[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: im3dabasia <[email protected]>

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

[im3dabasia]

Hi @mirka
When you have a moment, Please review my PR.

Thank you 🙇

[ciampo]

This is not the correct way to define conditional types. You can test by yourself, by trying to define BoxControl with only one prop between presets and presetKey — if the types were defined correctly, TS should error. But it doesn't.

We have other examples of such conditional types in the codebase (example). I also put together a quick TS playground to show how the proposed approach doesn't work, and how a correct approach would work. Hope it helps!

If not, happy to provide the code to implement the conditional types in the PR.