Dymanic headings in for gutenberg blocks? possible

Hi everyone

I have been tearing my hair our trying to get dynamic headings working as an option with Gutenberg blocks

I am using pinegrow 8.5 with tailwind 3. My aim is to create a custom gutenberg block with an image, a couple of buttons, a content area with rich text so peopel can add a few paragraphs of content.

So far so good!

But the icing on the cake would be to allow the user to choose a heading level, say H1, H2 or H3, then the correct heading with its tailwind classes is displayed to the user on the front end.

I have been asking chatgpt to help but its not been helpful

This is a screenshot of my aim

You can see I have three headings, and i want the user to choose via a select and then corresponding heading is shown, what is the simplest way to get this working?

This is something I really want to nail down as it would be good to do this across all my blocks for SEO

Thank you so much!

Hayden

You could use the Block Inner Content for this.

1 Like

Hey, this should be possible with block attributes: Adding Attributes and Controls | Pinegrow Web Editor

You could try to create a select control which either changes the Heading type (h1, h2, h3) or you could create the three heading types and control which of these will display.

2 Likes

Thank you so much, will give that a go now!

Hi Guys this is an update, with a video for more clarity as I couldn’t get it work. I managed to get something together than does what I want it to do, but the UX isnt amazing. Really I just want an input box to add the title with a dropdown selector to choose the heading level.

Check it out here