CODEWITHSUNDEEP
wordpress-gutenberg
joeb
joeb

Reputation: 877

Wordpress Gutenberg - nesting child elements

I'm new to reactjs so I'm struggling a bit with trying to add a custom block to the gutenberg editor. The block itself is displaying, but is giving an error "This block has encountered an error and cannot be previewed".

Here's the code I've got so far

edit: function() {
        var tb = element.createElement('input', { placeholder: 'Enter a url', type: 'text' },
            [element.createElement(
                'p',
                { style: blockStyle },
                'Child 1'
            )]
        );
        return tb;

    },

I'm trying to get a text control and a label to display like this 

<input type='text' name='mytb' />
<label for="mytb">My Label</label>

What am I doing wrong?

Thanks in advance

Upvotes: 0

Views: 556

Answers (2)

talha
talha

Reputation: 61

var tb = [element.createElement( 'input', { placeholder: 'Enter a url', type: 'text' } ),
         element.createElement( 'p', {}, 'Child 1' )];
return tb;

I have fixed some code issues and removed your blockStyle. You need to make sure that you have defined this variable.

Upvotes: 0

KT.C
KT.C

Reputation: 98

In your code, you have put the paragraph element as a descendant of input, this is not possible, so you are getting the error.

It should be:

 var tb = element.createElement('input', { placeholder: 'Enter a url', type: 'text' }),
          element.createElement( 'p', { style: blockStyle }, Child 1');
return tb;

Upvotes: 0

Related Questions