[Product Block Editor]: use Label component to render Textarea field …

…block label (#44222) * use Label to render base control label * changelog
woocommerce · Feb 2, 2024 · 4492698 · 4492698
1 parent 207e8de
commit 4492698
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/js/product-editor/changelog/update-text-area-use-label-component b/packages/js/product-editor/changelog/update-text-area-use-label-component
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: use Label component to render Textarea field block label
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/edit.tsx b/packages/js/product-editor/src/blocks/generic/text-area/edit.tsx
@@ -19,6 +19,7 @@ import type {
 } from './types';
 import AligmentToolbarButton from './toolbar/toolbar-button-alignment';
 import useProductEntityProp from '../../../hooks/use-product-entity-prop';
+import { Label } from '../../../components/label/label';
 
 export function TextAreaBlockEdit( {
 	attributes,
@@ -31,6 +32,8 @@ export function TextAreaBlockEdit( {
 		placeholder,
 		help,
 		required,
+		note,
+		tooltip,
 		disabled,
 		align,
 		allowedFormats,
@@ -91,7 +94,14 @@ export function TextAreaBlockEdit( {
 
 			<BaseControl
 				id={ contentId.toString() }
-				label={ label }
+				label={
+					<Label
+						label={ label || '' }
+						required={ required }
+						note={ note }
+						tooltip={ tooltip }
+					/>
+				}
 				help={ help }
 			>
 				{ isRichTextMode && (