feat: Improve developer experience for presets

im3dabasia · Dec 30, 2024 · 37e4e72 · 37e4e72
1 parent d1c9d76
commit 37e4e72
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
@@ -4,6 +4,7 @@
 import { useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -166,6 +167,14 @@ function BoxControl( {
 	} );
 	const sidesToRender = getAllowedSides( sides );
 
+	if ( ( presets && ! presetKey ) || ( ! presets && presetKey ) ) {
+		warning(
+			presets
+				? '`presetKey` is required when `presets` is defined.'
+				: '`presets` is required when `presetKey` is defined.'
+		);
+	}
+
 	return (
 		<Grid
 			id={ id }

diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
@@ -109,7 +109,9 @@ export type BoxControlProps = Pick< UnitControlProps, 'units' > &
 		 * If you provide a list of presets, you must provide a preset key to use.
 		 * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`
 		 */
-		presetKey?: string;
+		presetKey?: BoxControlProps[ 'presets' ] extends undefined
+			? never
+			: string;
 	};
 
 export type BoxControlInputControlProps = UnitControlPassthroughProps & {