JavaScript for WordPress Forums Gutenberg Development Adding Multiple Block Element

This topic contains 3 replies, has 2 voices, and was last updated by  Zac Gordon 1 week, 6 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #97350

    kashem
    Participant

    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>
    
           );
        }
    
    });
     
    • This topic was modified 1 week, 6 days ago by  kashem.
    #97402

    Zac Gordon
    Keymaster

    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.

    #97418

    kashem
    Participant

    Thanks, Zac.

    The mistake was here

    const { RichText, TextControl } = wp.editor;

    TextControl belongs to wp.component.

    #97421

    Zac Gordon
    Keymaster

    Aw, good catch!!!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.