[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
This commit is contained in:
Damián Suárez 2024-02-02 17:04:01 -03:00 committed by GitHub
parent 951e5ecce6
commit 207e8de73d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 42 additions and 15 deletions

View File

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

View File

@ -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": [

View File

@ -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 (
<div className={ 'wp-block-woocommerce-product-text-area-field' }>
<BlockControls { ...blockControlsProps }>
<AligmentToolbarButton
align={ align }
setAlignment={ setAlignment }
/>
<div { ...blockProps }>
{ isRichTextMode && (
<BlockControls { ...blockControlsBlockProps }>
<AligmentToolbarButton
align={ align }
setAlignment={ setAlignment }
/>
<RTLToolbarButton
direction={ direction }
onChange={ changeDirection }
/>
</BlockControls>
<RTLToolbarButton
direction={ direction }
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>
);

View File

@ -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 =