Adding Multiple Block Element

[kashem]

I am trying to build a block which will have:
Headline
Image
Description

I have just started and practicing with the example block creation plugin. Initially, I tried to add another text Element. But I get some error. How can I actually add multiple elements? Any tutorial or code reference that might help me? Thank you very much in advance for the help.

/**
* Block Dependencies
*/

import icon from "./icon";
import "./style.scss";
import "./editor.scss";

/**
* Internal Block Dependencies
*/
const  { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText, TextControl }  = wp.editor;

/**
* Register Block
*/

export default registerBlockType(' multipleelementblock/Multiple Element',{
    title : __('WP Multiple Element Block',' multipleelementblock'),
    description : __('Create Multiple Element Block') ,
    category : "common",
    icon : {
      background : "#0073AA",
      src : icon
    } ,
    keywords :[
      __('Multiple Element Block',' multipleelementblock'),
      __('Add Multiple Element',' multipleelementblock')
    ] ,
    supports : {
      id : true
    },
    attributes :  {
         message : {
              type    :  "array",
              source  :  "children",
              selector : ".message2"
         },
         title : {
               type: 'string',
               source: 'html',
               selector: '.title'
         }
    } ,
    edit : props => {
        const {
           attributes  : { message, title},
           className,
           setAttributes
        } = props;

        const onChangeMessage = message => {
            setAttributes( { message:message });
        };

      return  (
        <div className = {className}>
        <h2>{ __('Call To Action',' multipleelementblock')}</h2>
        <RichText
           tagName = "div"
           multiline ="p"
           placeholder = { __('Add your text',' multipleelementblock')}
           onChange = {onChangeMessage}
           value ={title}
           />

           <TextControl
            label={__("Additional CSS Class",' multipleelementblock')}
            tagName = "h3"
            placeholder = { __('Add your Headline',' multipleelementblock')}

           />

        </div>

      );
    },
    save : props =>  {
       const {
         attributes : { message }
       } = props;
       return (
         <div>
         <h2> { __("Call to action"," multipleelementblock")} </h2>
         <div class="message2"> { message }</div>
          <h3 class="title"> { __("Call to action"," multipleelementblock")} </h3>
         </div>

       );
    }

});
 

[Zac Gordon]

Okay, first I just want to double check that you watch the Gutenberg Block Course and all the examples it covers?

Then, the short answer is you need new attributes and event handlers for each new form element you want to add.

Take a look maybe at some of the examples from the course that have multiple form elements in them as an example.

[kashem]

Thanks, Zac.

The mistake was here

const { RichText, TextControl } = wp.editor;

TextControl belongs to wp.component.

[Zac Gordon]

Aw, good catch!!!

[Author]

Posts