Add oik/contact-field as inner block for oik/contact-form #207

bobbingwide · Sep 9, 2022 · 7b47cb5 · 7b47cb5
1 parent 90693a9
commit 7b47cb5
Show file tree

Hide file tree

Showing 4 changed files with 228 additions and 6 deletions.
diff --git a/src/oik-contact-field/block.json b/src/oik-contact-field/block.json
@@ -0,0 +1,67 @@
+{
+  "apiVersion": 2,
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "name": "oik/contact-field",
+  "title": "Contact field",
+  "category": "common",
+  "icon": "text",
+  "description": "Defines a contact form field",
+  "attributes": {
+    "label": {
+      "type": "string"
+    },
+    "type": {
+      "type": "string",
+      "default": "text"
+    },
+    "name": {
+      "type": "string"
+    },
+    "required": {
+      "type": "boolean"
+    },
+    "length": {
+      "type": "numeric"
+    },
+    "textAlign": {
+      "type": "string"
+    },
+    "className": {
+      "type": "string"
+    },
+    "textColor": {
+      "type": "string"
+    },
+    "backgroundColor": {
+      "type": "string"
+    },
+    "style": {
+      "type": "object"
+    },
+    "fontSize": {
+      "type": "string"
+    },
+    "gradient": {
+      "type": "string"
+    }
+  },
+  "supports": {
+    "html": false,
+    "customClassName": false,
+    "className": false,
+    "color": {
+      "gradients": false,
+      "text": false,
+      "background": false,
+      "link": false
+    },
+    "typography": {
+      "fontSize": false,
+      "lineHeight": false
+    }
+  },
+  "keywords": [ "Contact", "form", "oik" ],
+  "editorScript": "file:../../build/contact-field.js",
+  "editorStyle": "file:../../build/contact-field.css",
+  "style": "file:../../build/style-contact-field.css"
+}
diff --git a/src/oik-contact-field/index.js b/src/oik-contact-field/index.js
@@ -0,0 +1,116 @@
+/**
+ * Implements the Contact field block
+ *
+ * Equivalent to [bw_contact_field label="Name *" type=text name="name" required=y ]
+ *
+ * @copyright (C) Copyright Bobbing Wide 2022
+ * @author Herb Miller @bobbingwide
+ */
+//import './style.scss';
+//import './editor.scss';
+
+
+import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
+
+import { registerBlockType, createBlock } from '@wordpress/blocks';
+import {AlignmentControl, BlockControls, InspectorControls, useBlockProps, PlainText, BlockIcon} from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+import {
+    Toolbar,
+    PanelBody,
+    PanelRow,
+    FormToggle,
+    TextControl,
+    TextareaControl,
+    ToggleControl,
+    SelectControl } from '@wordpress/components';
+import { Fragment} from '@wordpress/element';
+import { map, partial } from 'lodash';
+import { ContactFieldControl } from './contact-field-control';
+
+const fieldTypes =
+
+    [
+        {
+            label: __( 'Text' ),
+            value: 'text',
+        },
+        {
+            label: __( 'Textarea' ),
+            value: 'textarea',
+        },
+        {
+            label: __( 'Email' ),
+            value: 'email',
+        },
+
+    ];
+
+registerBlockType(
+    // Namespaced, hyphens, lowercase, unique name
+    'oik/contact-field',
+    {
+        example: {
+        },
+
+        edit: props=> {
+            const { attributes, setAttributes, instanceId, focus, isSelected } = props;
+            const { textAlign, label } = props.attributes;
+            const blockProps = useBlockProps( {
+                className: classnames( {
+                    [ `has-text-align-${ textAlign }` ]: textAlign,
+                } ),
+            } );
+            const onChangeLabel = (event) => {
+                props.setAttributes({label: event});
+            };
+            const onChangeType = (event) => {
+                props.setAttributes({type: event});
+            };
+            const onChangeRequired = (event) => {
+                props.setAttributes({required: event});
+            };
+            return (
+                <Fragment>
+                <InspectorControls>
+                    <PanelBody>
+                        <PanelRow>
+                            <TextControl label={__("Label", "oik" )} value={attributes.label} onChange={onChangeLabel}/>
+                        </PanelRow>
+                    </PanelBody>
+                    <PanelBody>
+                        <PanelRow>
+                            <SelectControl label={__("Type", "oik" )} value={attributes.type} onChange={onChangeType} options={fieldTypes}/>
+                        </PanelRow>
+                    </PanelBody>
+                    <PanelBody>
+                        <PanelRow>
+                            <ToggleControl label={__("Required?", "oik" )} checked={ !! attributes.required } onChange={onChangeRequired}/>
+                        </PanelRow>
+                    </PanelBody>
+                </InspectorControls>
+
+                    <div { ...blockProps}>
+                    <tr>
+                        <td>
+                            <label for={ attributes.name }>{attributes.label}</label>
+                        </td>
+                        <td>
+                            <ContactFieldControl type={attributes.type} name={attributes.name} required={attributes.required} />
+
+                        </td>
+                    </tr>
+                    </div>
+
+
+                </Fragment>
+            );
+        },
+
+        save() {
+            // Rendering in PHP
+            return null;
+        }
+    }
+);
diff --git a/src/oik-contact-form/block.json b/src/oik-contact-form/block.json
@@ -7,6 +7,12 @@
   "icon": "forms",
   "description": "Displays a Contact form",
   "attributes": {
+    "contact": {
+      "type":   "string"
+    },
+    "email": {
+      "type": "string"
+    },
     "textAlign": {
       "type": "string"
     },

diff --git a/src/oik-contact-form/index.js b/src/oik-contact-form/index.js
@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 
 import { registerBlockType, createBlock } from '@wordpress/blocks';
-import {AlignmentControl, BlockControls, InspectorControls, useBlockProps, PlainText, BlockIcon} from '@wordpress/block-editor';
+import {AlignmentControl, BlockControls, InspectorControls, useBlockProps, PlainText, BlockIcon, InnerBlocks} from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 import {
     Toolbar,
@@ -44,18 +44,51 @@ registerBlockType(
                     [ `has-text-align-${ textAlign }` ]: textAlign,
                 } ),
             } );
+
+          const innerBlocksTemplate = [ ['oik/contact-field', { label: 'Name', type: 'text'}],
+                                        ['oik/contact-field', { label: 'Email', type: 'email'}],
+                                        ['oik/contact-field', { label: 'Message', type:'textarea'}]
+                                    ];
+            const onChangeContact = (event) => {
+                props.setAttributes({contact: event});
+            };
           return (
+              <Fragment>
+                  <InspectorControls>
+                      <PanelBody>
+                          <PanelRow>
+                              <TextControl label={__("Text for Submit button", "oik" )} value={attributes.contact} onChange={onChangeContact}/>
+                          </PanelRow>
+                      </PanelBody>
+                  </InspectorControls>
+
 					<div { ...blockProps}>
-                       <ServerSideRender
-                        block="oik/contact-form" attributes={ props.attributes }
-                    />
+                        { false &&
+                        <ServerSideRender
+                            block="oik/contact-form" attributes={props.attributes}
+                        />
+                        }
+
+                        <table>
+                            <tbody>
+                                <InnerBlocks template={ innerBlocksTemplate } allowedBlocks={ ['oik/contact-field'] }/>
+                            </tbody>
+                        </table>
+                        <input type="submit" value={ props.attributes.contact } />
+
                     </div>
+              </Fragment>
           );
         },
 
 		save() {
-				 // Rendering in PHP
-					return null;
+            const blockProps = useBlockProps.save();
+
+            return (
+                <div { ...blockProps }>
+                    <InnerBlocks.Content />
+                </div>
+            );
 		}
     }
 );