tomusborne / generateblocks

GenerateBlocks is a small collection of lightweight WordPress blocks that can accomplish nearly anything.
https://generateblocks.com
194 stars 21 forks source link

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

Open eastriverstudio opened 1 year ago

eastriverstudio commented 1 year ago

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.

JeanPaiva commented 1 year ago

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

brendenjones commented 1 year ago

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

KratosGemini commented 1 year ago

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.

interdevel commented 4 months ago

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

nighswon commented 4 months ago

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