Page List: Added color support

[benazeer-ben]

What?

Add color support to the Page List block.
Part of : #43245

Why?

Page List block is missing color support.

How?

Adds the color support via block.json

Testing Instructions

• Go to the Global Styles setting ( under appearance > editor > styles > edit styles > blocks ).
• Make sure that the Page List block's color is configurable via Global Styles.
• Verify that Global Styles are applied correctly in the editor and frontend.
• Edit the template/page, add Page List block and apply the color for background and links.
• Verify that block color styles take precedence over global block colour settings.
• Verify that block color display correctly in both the editor and frontend.

Screenshots or screencast

Backend:

Frontend:

[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: benazeer-ben <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: shail-mehta <[email protected]>

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

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @benazeer-ben! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[aaronrobertshaw]

Thanks for the PR @benazeer-ben 👍

This is working as advertised.

✅ Global Styles apply correctly in the editor and the frontend
✅ Block support styles override global styles in both editor and frontend

I see you chose to explicitly omit text color support. This might actually be good to add too.

If a link color hasn't been set, applying a text color will automatically set the matching link color. This would allow the page list's bullets to be updated to match link color or differ as the theme author or use might wish.

What do you think?

Without Text Support	With Text Support

[benazeer-ben]

Thanks for the suggestion @aaronrobertshaw

Yes, you are right. If the text support added then we can use it as optional if we need. Otherwise we can just keep the link colour.

I have added text support in the recent commit.

[benazeer-ben]

@aaronrobertshaw Please let me know if it need more tweaks on this.

[aaronrobertshaw]

This is looking good @benazeer-ben ✨

✅ Global styles apply correctly on frontend and in editor
✅ Block support styles override global styles appropriately
✅ Default controls exposed follow convention for color supports

Editor:

Frontend:

Note: For anyone else testing, there's a known issue where a gradient global style would override block instance's background color. That's due to the use of background vs background-color in those styles and isn't introduced here.

[shail-mehta]

@benazeer-ben Could you Please rebase this PR?

[benazeer-ben]

@shail-mehta Thanks for looking into this.

This PR has been rebased with the latest trunk branch.

[shail-mehta]

✅ Global styles apply correctly on frontend and in editor
✅ Block support styles override global styles appropriately