generateblocks icon indicating copy to clipboard operation
generateblocks copied to clipboard

Ability to create semantic unordered/ordered lists from container and nested container / headline blocks

Open eastriverstudio opened this issue 2 years ago • 5 comments

I'd like to suggest hopefully a simple enhancement to use the existing blocks and ability to change tag type to create semantic html lists.

I often use headlines with icons to create nicer looking lists but the resulting code is obviously not a proper html list.

With the new container on the way it got me thinking that we could actually create semantic html lists if it was possible to change a container's tag to be a <ul> or <ol> element and then any nested containers or headlines (headlines make more sense to me with icons, but both could work in theory) would then have the option to change the tag to an <li> element, thus enabling us to be able to create semantic html lists and have lots of control over the styling and appearance.

Also with the Accordion block seemingly on its way in the near future too, this feature would mean we could potentially create list based menus/navigation with dropdown effects really easily.

eastriverstudio avatar Nov 16 '22 20:11 eastriverstudio

@eastriverstudio lists are something we will be adding to GB, but this will be done next year. This year our focus is to start tests for version 1.7, which soon will be on public alpha and will have many good improvements to our plugin.

JeanPaiva avatar Nov 17 '22 14:11 JeanPaiva

@eastriverstudio I love this line of thinking! It would be fantastic if we could change the tags in the Grid Block as well. I would love to turn a Grid Block into a <ul> and the nested grid containers into <li>.

brendenjones avatar Dec 21 '22 23:12 brendenjones

It would be nice to be able to use the power of GenerateBlocks for <ol> and <ul>. Right now I just resort to using the core block and use custom CSS to style.

Also, if you want to create list-based menus/navigation, you'd probably also want to be able to use <nav> for a container tag. See #750.

KratosGemini avatar Jul 06 '23 13:07 KratosGemini

Meanwhile, is there any workaround? Maybe a filter to customize the output of the headline block?

interdevel avatar Jun 02 '24 07:06 interdevel

+1 for this feature as well.

@interdevel - I've been relying on the "role" attribute that can be added to the container and headline blocks at the moment. By adding role="list" to the container and role="listitem" to the item inside per MDN web docs, we can at least address the accessibility issues. We've looked to other javascript solutions for switching out tags as well but it's a little more clunky than just using the attributes settings in the "Advanced" section.

nighswon avatar Jun 19 '24 15:06 nighswon