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
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.
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.
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 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
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.