List Item: Add border support

[aaronrobertshaw]

Part of: #43241

What?

Adopts border support for individual list items.

Why?

• Offers greater design flexibility
• Improves consistency in design tooling with other blocks

How?

• Adopts all the available border block supports
• Leaves the border controls as optional to match the dimension controls
• Defines a custom selector for borders so that the global styles only target top-level List Items

Testing Instructions

• In the site editor, add a List block with a few items, including a nested list or two, to a page
• Style List Item blocks via Global Styles and confirm the editor and frontend display correctly
• Override the global styles on a single List Item block instance and confirm they display appropriately in the editor and frontend
• Test applying border styles to a block instance that is nested within another list

Screenshots or screencast

Screen.Recording.2024-08-09.at.8.25.18.PM.mp4

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: andrewserong <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[andrewserong]

This one's testing well for me, too. When paired with a bunch of the other design tools, it allows for some fun styling now:

Similar to enabling border in the list block over in #63540, it made me wonder a tiny bit about nested list items, but overall I think it's working pretty well. Now that we can give list items a border, it's also made me wonder if it'd be worth allowing the list / list items to hide the item marker, since it's possible to use the border to visually indicate it now 🤔

I.e. a theme might style a list something like this:

In any case, now I'm just having fun styling lists 😄

LGTM! 🚀

[aaronrobertshaw]

Thanks yet again for another thorough review @andrewserong 🙇

I'll hold off on this one for the moment while I explore follow-ups discussed on the PR adopting border support for the primary List block.

I like the idea of being able to change the list-style for lists. Along with perhaps adding that to the block itself, I wonder if making lists an element in theme.json/global styles would be beneficial.

[andrewserong]

I like the idea of being able to change the list-style for lists. Along with perhaps adding that to the block itself, I wonder if making lists an element in theme.json/global styles would be beneficial.

It very well could be! If or when we explore that, it'd be worth reaching out to theme developers to see how valuable they might find it 🙂

[aaronrobertshaw]

I've had a play with making global border styles only target the top-level list items. It seems to work as expected.

Screen.Recording.2024-08-09.at.8.25.18.PM.mp4

Should it be desirable in a theme to style inner list items as well, I think a block style variation as suggested on the related List block PR is a good option. A block style variation would also allow the inner list items to have different borders to the parent.

As with the parent List block, I'm leaning towards this latest approach as the most intuitive but I'd like to hear any thoughts on the matter.

[andrewserong]

Thanks for your patience @aaronrobertshaw, I missed your update from last week! This is looking good to me, and follows how I'd expect this to work as a user 👍

As with the #63540, I'm leaning towards this latest approach as the most intuitive but I'd like to hear any thoughts on the matter.

Me too, I think this makes for a nice feature in its current form. I also like that the selector being used is specific to border, so we're not affecting other styles that folks might be applying to the list item block.

✅ Setting borders for the list item in global styles now only applies to root list items
✅ Overriding at the individual block level works as expected
✅ Individual list items and nested list items can still use block-level styles for borders
✅ Tested in the site editor, site frontend, and post editors

LGTM! 🚀

[aaronrobertshaw]

Thanks for your patience @aaronrobertshaw, I missed your update from last week!

I'm always happy to wait for your thorough reviews 🙂

Thanks for putting this through its paces again. Let's get it merged and see what creations users come up with!