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

For the content wrapper or block wrapper, set two block attributes, for example:

  • data_title / Title: “Heading” / Use as Attribute, Element attribute “data-title” (Here you will set the content of the block heading)
  • heading_type / Title: “Set heading type” / Use as: classes / Control type: Select: class1, class2, class3 (Here you will set the type of displayed heading)

For h1, h2, h3, use:

  • Block condition based on “heading_type”

    • h1 displays if class1
    • h2 displays if class2
    • h3 displays if class3
  • Block Attributes - Start → Control type None (expression from data_title) I hope the mechanism is understandable :wink: You can develop your own, this is just an example, that’s probably how I would solve it. The disadvantage is that you can edit the content only in the sidebar and not directly on the element. The advantage is that it gives you great configuration possibilities.
    If something is unclear, let me know and I’ll quickly make a working block! If you need anything, send me a PM :wink: