1

I'm making a review widget that comes as a shortcode and Gutenberg block. The shortcode part was easy as I have built many shortcodes before, but I'm stuck on building my first Gutenberg block.

More specifically, I've learned how to build a block that outputs div with custom class, but I can't find how to add a custom div attribute anywhere...

Here's the code responsible for block output:

return el( 'div',
      {
         className: 'review-widget',
      }

   ); // End return

and this outputs

<div class="review-widget"></div>

properly.

However, I need to output a div like this:

<div class="review-widget" data-limit="10"></div>

but I'm having a hard time adding the data-limit="10" to the div.

I've tried:

return el( 'div',
      {
         className: 'review-widget',
         data-limit: 10
      }

   ); // End return

but it doesn't work...

Any ideas would be appreciated :)

Improve this question

2 Answers 2

Reset to default
0

You could try returning JSX, skipping the el part:

return (
    <div
        className='review-widget'
        data-limit='10'
    >
    </div>
);

It may also be that you need to quote the 10 in your original el example.

Improve this answer
1
  • Thanks for your suggestions. I've tried both of them, but in both cases the custom block disappears from the editor- like the syntax is wrong. Commented May 14, 2020 at 7:26
0

I found my answer here: https://stackoverflow.com/questions/43410377/how-to-add-data-attribute-without-value-in-react-create-element \o/

Both the attribute name and the attribute value should be wrapped in quotes:

return el( 'div',
      {
         className: 'review-widget',
         'data-limit': '10'
      }

   ); // End return
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.