[Product Block Editor]: add plain and rich text mode to the Textarea field block (#44191)

* introduce `mode` attribute

* move block props to wrapper el

* render plain text mode

* minor const name change

* changelog

* add toolbar buttons only in rich-text mode

* set rich-text mode as default

packages/js/product-editor/changelog/update-product-editor-text-area-plain-mode

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: add plain and rich text mode to the Textarea field block

packages/js/product-editor/src/blocks/generic/text-area/block.json

@@ -31,6 +31,11 @@
 			"type": "string",
 			"enum": [ "left", "center", "right", "justify" ]
 		},
+		"mode": {
+			"type": "string",
+			"enum": [ "plain-text", "rich-text" ],
+			"default": "rich-text"
+		},
 		"allowedFormats": {
 			"type": "array",
 			"default": [

packages/js/product-editor/src/blocks/generic/text-area/edit.tsx

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { createElement } from '@wordpress/element';
-import { BaseControl } from '@wordpress/components';
+import { BaseControl, TextareaControl } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { BlockControls, RichText } from '@wordpress/block-editor';
 import classNames from 'classnames';
@@ -35,8 +35,10 @@ export function TextAreaBlockEdit( {
 		align,
 		allowedFormats,
 		direction,
+		mode = 'rich-text',
 	} = attributes;
 	const blockProps = useWooBlockProps( attributes, {
+		className: 'wp-block-woocommerce-product-text-area-field',
 		style: { direction },
 	} );
 
@@ -66,11 +68,15 @@ export function TextAreaBlockEdit( {
 		setAttributes( { direction: value } );
 	}
 
-	const blockControlsProps = { group: 'block' };
+	const blockControlsBlockProps = { group: 'block' };
+
+	const isRichTextMode = mode === 'rich-text';
+	const isPlainTextMode = mode === 'plain-text';
 
 	return (
-		<div className={ 'wp-block-woocommerce-product-text-area-field' }>
-			<BlockControls { ...blockControlsProps }>
+		<div { ...blockProps }>
+			{ isRichTextMode && (
+				<BlockControls { ...blockControlsBlockProps }>
 					<AligmentToolbarButton
 						align={ align }
 						setAlignment={ setAlignment }
@@ -81,13 +87,14 @@ export function TextAreaBlockEdit( {
 						onChange={ changeDirection }
 					/>
 				</BlockControls>
+			) }
 
 			<BaseControl
 				id={ contentId.toString() }
 				label={ label }
 				help={ help }
 			>
-				<div { ...blockProps }>
+				{ isRichTextMode && (
 					<RichText
 						id={ contentId.toString() }
 						identifier="content"
@@ -104,7 +111,17 @@ export function TextAreaBlockEdit( {
 						required={ required }
 						disabled={ disabled }
 					/>
-				</div>
+				) }
+
+				{ isPlainTextMode && (
+					<TextareaControl
+						value={ content || '' }
+						onChange={ setContent }
+						placeholder={ placeholder }
+						required={ required }
+						disabled={ disabled }
+					/>
+				) }
 			</BaseControl>
 		</div>
 	);

packages/js/product-editor/src/blocks/generic/text-area/types.ts

@@ -28,6 +28,7 @@ export type TextAreaBlockEditAttributes = ProductEditorBlockAttributes & {
 	align?: 'left' | 'center' | 'right' | 'justify';
 	allowedFormats?: AllowedFormat[];
 	direction?: 'ltr' | 'rtl';
+	mode: 'plain-text' | 'rich-text';
 };
 
 export type TextAreaBlockEditProps =