Skip to content

List Item: Add color support#59892

Merged
aaronrobertshaw merged 1 commit intotrunkfrom
add/list-item-color-support
Jul 4, 2024
Merged

List Item: Add color support#59892
aaronrobertshaw merged 1 commit intotrunkfrom
add/list-item-color-support

Conversation

@aaronrobertshaw
Copy link
Copy Markdown
Contributor

@aaronrobertshaw aaronrobertshaw commented Mar 15, 2024 •
edited
Loading

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

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Block] List Affects the List Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Mar 15, 2024
@aaronrobertshaw aaronrobertshaw self-assigned this Mar 15, 2024
@aaronrobertshaw aaronrobertshaw mentioned this pull request Mar 15, 2024
Closed
@noisysocks
Copy link
Copy Markdown
Member

noisysocks commented Jun 13, 2024

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

@github-actions
Copy link
Copy Markdown

github-actions bot commented Jun 13, 2024

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 <aaronrobertshaw@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Co-authored-by: pitamdey <pitamdey@git.wordpress.org>

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

@aaronrobertshaw aaronrobertshaw force-pushed the add/list-item-color-support branch from 480d18b to 1dab1c0 Compare June 19, 2024 06:37
@aaronrobertshaw
Copy link
Copy Markdown
Contributor Author

aaronrobertshaw commented Jun 19, 2024

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
Copy link
Copy Markdown
Member

noisysocks commented Jul 3, 2024

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 aaronrobertshaw force-pushed the add/list-item-color-support branch from 1dab1c0 to 6e9c69d Compare July 3, 2024 05:52
@aaronrobertshaw
Copy link
Copy Markdown
Contributor Author

aaronrobertshaw commented Jul 3, 2024

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
noisysocks approved these changes Jul 4, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@noisysocks noisysocks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wunderbar

@aaronrobertshaw aaronrobertshaw merged commit cde4f87 into trunk Jul 4, 2024
@aaronrobertshaw aaronrobertshaw deleted the add/list-item-color-support branch July 4, 2024 00:54
@github-actions github-actions bot added this to the Gutenberg 18.8 milestone Jul 4, 2024
@aaronrobertshaw aaronrobertshaw mentioned this pull request Jul 4, 2024
Open
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jul 18, 2024
@aaronrobertshaw @noisysocks @carstingaxion
List Item: Add color support (WordPress#59892)
11fc621 
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Co-authored-by: pitamdey <pitamdey@git.wordpress.org>
@bph bph mentioned this pull request Oct 26, 2024
Closed
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@noisysocks noisysocks noisysocks approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@ryanwelcher ryanwelcher Awaiting requested review from ryanwelcher

@juanmaguitar juanmaguitar Awaiting requested review from juanmaguitar juanmaguitar is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

@ndiego ndiego Awaiting requested review from ndiego

Assignees

@aaronrobertshaw aaronrobertshaw

Labels

[Block] List Affects the List Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 18.8

Development

Successfully merging this pull request may close these issues.

Enhance List Block for adding Style color option in list-item also

3 participants

@aaronrobertshaw @noisysocks @ramonjd