[Product Block Editor]: disable TextArea RichText instance according …

…to `disabled` attribute value (#46089) * get ready to disable text-area block * changelog * update doc
woocommerce · Apr 4, 2024 · 09a9a90 · 09a9a90
1 parent ad27b98
commit 09a9a90
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/packages/js/product-editor/changelog/update-product-editor-text-area-read-only-attr b/packages/js/product-editor/changelog/update-product-editor-text-area-read-only-attr
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: disable TextArea RichText instance according to `disabled` attribute value
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/README.md b/packages/js/product-editor/src/blocks/generic/text-area/README.md
@@ -32,6 +32,13 @@ Help text that appears below the field, providing additional guidance to the use
 
 Indicates that the field is required.
 
+### disabled
+
+-   **Type:** `Boolean`
+-   **Required:** `No`
+
+Indicates that the field is not editable.
+
 ### tooltip
 
 -   **Type:** `String`

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
@@ -36,7 +36,7 @@ export function TextAreaBlockEdit( {
 		required,
 		note,
 		tooltip,
-		disabled,
+		disabled = false,
 		align,
 		allowedFormats,
 		direction,
@@ -146,7 +146,7 @@ export function TextAreaBlockEdit( {
 						placeholder={ placeholder }
 						required={ required }
 						aria-required={ required }
-						disabled={ disabled }
+						readOnly={ disabled }
 						onBlur={ hideToolbar }
 					/>
 				) }