WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.46k stars 4.18k forks source link

Unable to add a class to query block list item #41441

Open coreyworrell opened 2 years ago

coreyworrell commented 2 years ago

What problem does this address?

Pretty much all blocks allow a custom CSS class name to be provided. But query block does not allow you to set a list item class. This can be very useful for using utility classes and such. Currently you can add classes to the query block, the post template wrapper, and then each block inside, but not the actual direct child of the post template block, the <li> element.

Screenshot from 2022-05-30 10-55-14

justintadlock commented 2 years ago

Note: It's possible to do this via the post_class hook on the front end but not via the UI: https://developer.wordpress.org/reference/hooks/post_class/

jethrodesign commented 2 years ago

Was just trying to do this myself. Assumed adding a class in Advanced area of Post Template block would add the class to each individual post (<li>item), not the parent container, since the Post Template block is the direct container of all of the block elements that can be added and displayed for each individual post item.

In my case, wanted to be able to animate each post item (e.g each fades in). This requires adding specific class(es) to whichever element you want to animate. Would be easier to do in editor than programmatically behind the scenes, especially if a client needed this option...

coreyworrell commented 2 months ago

I'm not versed enough in the code, but this may be a simple addition and could really help with styling query loops. Being able to define classes for specific loops in the UI is always preferable over code modifications which are less flexible.