From f0543e0e4acf50419ab0e87d9a26b6cea1fcf3db Mon Sep 17 00:00:00 2001
From: Theofanis Despoudis <328805+theodesp@users.noreply.github.com>
Date: Wed, 5 Jun 2024 15:21:57 +0100
Subject: [PATCH] [Bug] Add missing textarea control handler. (#1898)

* bug(block-editor-utils): add missing TextArea handler

* chore: Add Changeset
---
 .changeset/orange-birds-invent.md             | 23 +++++++++++++++++++
 .../src/controls/TextArea.tsx                 | 21 +++++++++++++++++
 .../block-editor-utils/src/controls/index.ts  |  2 ++
 3 files changed, 46 insertions(+)
 create mode 100644 .changeset/orange-birds-invent.md
 create mode 100644 packages/block-editor-utils/src/controls/TextArea.tsx

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<T extends Record<string, any>>({
+  config,
+  props,
+}: ControlProps<T>) {
+  const onChange = (newContent: string) => {
+    props.setAttributes({ [config.name]: newContent });
+  };
+  return (
+    <TextareaControl
+      label={config.label}
+      value={props.attributes[config.name]}
+      onChange={onChange}
+    />
+  );
+}
+
+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);