diff --git a/.changeset/orange-birds-invent.md b/.changeset/orange-birds-invent.md new file mode 100644 index 000000000..b66849c91 --- /dev/null +++ b/.changeset/orange-birds-invent.md @@ -0,0 +1,23 @@ +--- +'@faustwp/block-editor-utils': patch +--- + +Adds missing TextAreaControl handler when specifing a `control: 'textarea'` in Component.config.editorFields. + +Adding this configuration to your blocks will render TextAreaControls component in the editor. + +```js +// Component.js + +Component.config = { + name: 'CreateBlockBlockB', + editorFields: { + textArea: { + type: 'string', + label: 'My Message', + location: 'editor', + control: 'textarea' // <--- Render a TextAreaControl field in the Gutenberg editor + }, + }, +}; +``` diff --git a/packages/block-editor-utils/src/controls/TextArea.tsx b/packages/block-editor-utils/src/controls/TextArea.tsx new file mode 100644 index 000000000..4e4139956 --- /dev/null +++ b/packages/block-editor-utils/src/controls/TextArea.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { TextareaControl } from '@wordpress/components'; +import { ControlProps } from '../types/index.js'; + +function TextArea>({ + config, + props, +}: ControlProps) { + const onChange = (newContent: string) => { + props.setAttributes({ [config.name]: newContent }); + }; + return ( + + ); +} + +export default TextArea; diff --git a/packages/block-editor-utils/src/controls/index.ts b/packages/block-editor-utils/src/controls/index.ts index f2c210dd9..528e489b1 100644 --- a/packages/block-editor-utils/src/controls/index.ts +++ b/packages/block-editor-utils/src/controls/index.ts @@ -7,6 +7,7 @@ import Select from './Select.js'; import Radio from './Radio.js'; import Range from './Range.js'; import Rich from './RichText.js'; +import TextArea from './TextArea.js'; registerControl('text', Text); registerControl('number', NumberField); @@ -16,3 +17,4 @@ registerControl('select', Select); registerControl('radio', Radio); registerControl('range', Range); registerControl('rich-text', Rich); +registerControl('textarea', TextArea);