Wrap ColorPicker in BaseControl for label.

pods-framework · Jun 17, 2024 · 8ac165d · 8ac165d
1 parent be0ca38
commit 8ac165d
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/ui/js/blocks/src/blocks/components/RenderedField.js b/ui/js/blocks/src/blocks/components/RenderedField.js
@@ -296,12 +296,24 @@ const RenderedField = ( {
 			);
 		}
 		case 'ColorPicker': {
+			const {
+				label,
+			} = fieldOptions;
+			const instanceId = useInstanceId( ColorPicker );
+			const id = `inspector-color-control-${ instanceId }`;
+
 			return (
-				<ColorPicker
-					color={ fieldValue }
-					onChangeComplete={ ( value ) => changeHandler( value.hex ) }
-					disableAlpha
-				/>
+				<BaseControl
+					label={ label }
+					id={ id }
+					key={ name }
+				>
+					<ColorPicker
+						color={ fieldValue }
+						onChangeComplete={ ( value ) => changeHandler( value.hex ) }
+						disableAlpha
+					/>
+				</BaseControl>
 			);
 		}
 		case 'html': {