diff --git a/packages/js/product-editor/changelog/update-product-editor-text-area-plain-mode b/packages/js/product-editor/changelog/update-product-editor-text-area-plain-mode new file mode 100644 index 00000000000..44c7a6951c2 --- /dev/null +++ b/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 diff --git a/packages/js/product-editor/src/blocks/generic/text-area/block.json b/packages/js/product-editor/src/blocks/generic/text-area/block.json index 0ae0c745bb2..100c1587ef2 100644 --- a/packages/js/product-editor/src/blocks/generic/text-area/block.json +++ b/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": [ 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 index ff1d5b0d23b..6927893ea32 100644 --- a/packages/js/product-editor/src/blocks/generic/text-area/edit.tsx +++ b/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,28 +68,33 @@ 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 ( -
- - +
+ { isRichTextMode && ( + + - - + + + ) } -
+ { isRichTextMode && ( -
+ ) } + + { isPlainTextMode && ( + + ) }
); diff --git a/packages/js/product-editor/src/blocks/generic/text-area/types.ts b/packages/js/product-editor/src/blocks/generic/text-area/types.ts index 43422e85827..b977433583b 100644 --- a/packages/js/product-editor/src/blocks/generic/text-area/types.ts +++ b/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 =