List Item: Add color support

[aaronrobertshaw]

Fixes: #59854

What?

Adds color block support to the List Item block to match the parent List block.

Why?

The List Item block allows customizing typographic styles. This PR provides consistency for color styling and greater control for users.

How?

• Opts into color block support
• Only makes text and background color controls display by default to match List block's configuration
• Updates the deprecated use of __experimentalSelector to use the selectors API.

Testing Instructions

1. Edit a post and add a list block with several items, some including links
2. Select individual list item blocks and confirm you can customize colors appropriately
3. Save and ensure the colors are correct on the frontend
4. Switch to the Site Editor and navigate to Global Styles > Blocks > List Item
5. Set some global colors for List Item blocks
6. Save and switch back to the post editor
7. Confirm the global styles are applied correctly and are overridden by the individual styles added earlier
8. Double check colors again on the frontend

Screenshots or screencast

Screen.Recording.2024-03-15.at.5.35.32.PM.mp4

[noisysocks]

Still keen on this? Happy to review if you rebase.

[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: noisysocks <[email protected]>
Co-authored-by: pitamdey <[email protected]>

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

[aaronrobertshaw]

Still keen on this? Happy to review if you rebase.

Thanks for the nudge, it's been rather low down the priority list 😅

I've rebased this and also updated the use of the deprecated __experimentalSelector supports prop.

[noisysocks]

When I set a List Item colour in Global Styles I wasn't able to see that colour show up on the frontend.

Kapture.2024-07-03.at.11.23.05.mp4

[aaronrobertshaw]

Thanks for catching that @noisysocks 👍

I'd messed up placing the selectors under supports. This is working for me now:

Screen.Recording.2024-07-03.at.3.53.54.PM.mp4

[noisysocks]

Wunderbar