Add all color palettes to select from editor panel

[AKSHAT2802]

Closes: #64857
Closes: #64734

What?

This PR Adds all the available colors in the list of editor color panel ( default, theme, custom ) so that the user can any predefined color in the editor.

Why?

When selecting a color we should have a list of all the predefined options for a user instead of only custom-defined options.

How?

Modified with-color-context.js file to list all the color instead of only custom colors.

Screenshots or screencast

Before

After

Screen.Recording.2024-09-09.at.5.02.51.PM.mov

[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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @EddyBoels, @burnuser.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: EddyBoels, burnuser.

Co-authored-by: AKSHAT2802 <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: ndiego <[email protected]>
Co-authored-by: rohitmathur-7 <[email protected]>
Co-authored-by: javiercasares <[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, @AKSHAT2802! 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.

[ndiego]

Thanks for working on this @AKSHAT2802. However, I don't think we should display the default color palette as well, only the theme color palette in addition to any custom options set by the user. Using the Twenty Twenty-Four theme as an example, this is what it should look like.

There are no custom colors	The user has added custom colors

[richtabor]

Two notes:

1. I should only see the palettes which I have enabled. If I don't have the default palette enabled via theme.json, then I should not see that palette here.

2. I'd expect the colors in the same order as the color palette elsewhere, with theme colors first, then custom colors. In the screenshot below I'd expect to see my theme colors, then the custom red color:
   

[AKSHAT2802]

Hii @richtabor & @ndiego
Thanks for the review
Updated the PR

Sample Images

1] Theme palette with custom colors

2] Changed theme palette with no custom colors

3] Changed theme palette and added custom colors

[t-hamano]

I think the default palette should not be disabled all the time, but only when settings.color.defaultPalette is false, otherwise it won't match other color palettes. Moreover, the order is "Theme" > "Default" > "Custom":

Current

Expected

Additionally, don't forget to test the inline text highlighting palette in this PR:

[richtabor]

I think the default palette should not be disabled all the time, but only when settings.color.defaultPalette is false, otherwise it won't match other color palettes. Moreover, the order is "Theme" > "Default" > "Custom":

+1

[AKSHAT2802]

Thanks, @t-hamano for the update.
I have changed the code according to the requirements.

[t-hamano]

Thanks for the update.

To ship this PR, we need to resolve the unit test failure. The failing tests are for the Cover block, and I think it's because the PR changed the behavior of the placeholder.

In trunk, the placeholder shows the default palette even if there are no colors available:

In this PR, no palette is shown:

The behavior in this PR should be correct, so we need to fix the unit tests.

The following changes should solve the problem, could you try them?

diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
index 5c1a5b5e13..f5d6a5301e 100644
--- a/packages/block-library/src/cover/test/edit.js
+++ b/packages/block-library/src/cover/test/edit.js
@@ -337,7 +337,7 @@ describe( 'Cover block', () => {
                        describe( 'when colors are disabled', () => {
-                                       await createAndSelectBlock();
+                                       await selectBlock( 'Block: Cover' );
                                        await userEvent.click(
                                                screen.getByRole( 'tab', { name: 'Styles' } )
                                        );
@@ -350,7 +350,7 @@ describe( 'Cover block', () => {
                                } );
                                test( 'does not render opacity control', async () => {
                                        await setup( undefined, true, disabledColorSettings );
-                                       await createAndSelectBlock();
+                                       await selectBlock( 'Block: Cover' );
                                        await userEvent.click(
                                                screen.getByRole( 'tab', { name: 'Styles' } )
                                        );

[richtabor]

LGTM

[t-hamano]

It has passed all CI checks so let's merge this PR.

@AKSHAT2802 Thank you for your efforts!