[Merl 1149] Add TextControl field (#1560)

* Feat: (editor-utils) EditorForm component.

* Refactor: Removed unused code in Edit.tsx

* Testing: Add unit tests.

* Feat:(editor-utils) Text Control.

* Chore: Changeset

* Style: Border set in EditorForm only.

* Tests:(block-editor-utils) Update snapshots.

.changeset/quick-nails-listen.md

@@ -0,0 +1,5 @@
+---
+'@faustwp/block-editor-utils': patch
+---
+
+Feat: Handle TextControl fields in block-editor-utils.

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+    root: true,
     env: {
       browser: true,
       es6: true,

packages/block-editor-utils/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  "rules": {
+    "@typescript-eslint/no-unsafe-call": "off",
+    "@typescript-eslint/restrict-template-expressions": "off"
+  }
+};

packages/block-editor-utils/src/components/EditorForm.tsx

@@ -8,6 +8,7 @@ const styles = {
   form: {
     padding: '0 10px',
     margin: '20px 0',
+    border: '1px solid black',
   } as React.CSSProperties,
   icon: {
     marginRight: '10px',
@@ -42,7 +43,6 @@ function EditorForm<T extends Record<string, any>>({
         <Icon size={24} icon={blockJson.icon} style={styles.icon} />
         {blockJson.title}
       </h3>
-      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-call */}
       {fields.map((field: Field) => {
         const ControlField = loadedControls[field.control];
         if (!ControlField) {

packages/block-editor-utils/src/components/InspectorFields.tsx

@@ -20,7 +20,6 @@ function InspectorFields<T extends Record<string, any>>({
   return (
     <InspectorControls key="FaustBlockInspectorControls">
       <>
-        {/* eslint-disable-next-line @typescript-eslint/no-unsafe-call */}
         {fields.map((field: Field) => {
           const ControlField = loadedControls[field.control];
           if (!ControlField) {
@@ -29,7 +28,6 @@ function InspectorFields<T extends Record<string, any>>({
           return (
             <PanelBody
               className="faust-inspector-form-field"
-              // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
               key={`inspector-controls-panel-${field.name}`}>
               <ControlField config={field} props={props} />
             </PanelBody>

packages/block-editor-utils/src/controls/Text.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TextControl } from '@wordpress/components';
+import { ControlProps } from '../types/index.js';
+
+function Text<T extends Record<string, any>>({
+  config,
+  props,
+}: ControlProps<T>) {
+  const onChange = (newContent: string) => {
+    props.setAttributes({ [config.name]: newContent });
+  };
+  return (
+    <TextControl
+      label={config.label}
+      value={props.attributes[config.name]}
+      onChange={onChange}
+    />
+  );
+}
+
+export default Text;

packages/block-editor-utils/src/controls/index.ts

@@ -0,0 +1,4 @@
+import registerControl from '../helpers/registerControl.js';
+import Text from './Text.js';
+
+registerControl('text', Text);

packages/block-editor-utils/src/helpers/registerControl.ts

@@ -0,0 +1,16 @@
+import { addFilter } from '@wordpress/hooks';
+import { Control, FieldControl } from '../types/index.js';
+
+function registerControl(name: FieldControl, control: Control) {
+  addFilter(
+    'faustBlockEditorUtils.controls',
+    'faust-block-editor-utils',
+    (controls: { [key: string]: Control }) => {
+      // eslint-disable-next-line no-param-reassign
+      controls[name] = control;
+      return controls;
+    },
+  );
+}
+
+export default registerControl;

packages/block-editor-utils/src/registerFaustBlock.ts

@@ -7,6 +7,7 @@ import {
 import DefaultSaveFn from './components/Save.js';
 import DefaultEditFn from './components/Edit.js';
 import { BlockFC, ConfigType } from './types/index.js';
+import './controls/index.js';
 
 export interface RegisterFaustBlockMetadata<T extends Record<string, any>> {
   // The block.json metadata object

packages/block-editor-utils/tests/components/Edit.test.tsx

@@ -95,7 +95,7 @@ describe('<Edit />', () => {
       <div
         aria-label="Faust block editor form"
         class="faust-editor-form"
-        style="padding: 0px 10px; margin: 20px 0px;"
+        style="padding: 0px 10px; margin: 20px 0px; border: 1px solid black;"
       >
         <h3
           class="faust-editor-form__heading"

packages/block-editor-utils/tests/components/EditorForm.test.tsx

@@ -57,7 +57,7 @@ describe('<EditorForm />', () => {
       <div
         aria-label="Faust block editor form"
         class="faust-editor-form"
-        style="padding: 0px 10px; margin: 20px 0px;"
+        style="padding: 0px 10px; margin: 20px 0px; border: 1px solid black;"
       >
         <h3
           class="faust-editor-form__heading"