[Palette] - Multiple color selection with the same "color" attribute

webexpr-dhenriet commented 1 week ago

Description

Inside theme.json, I don't understand why palette entries are based on the key "color" and not "slug". Declaring an identical "color" several times with a different name and slug poses a problem. By changing the color, the selection is multiple when it should be unique.

The case in point is the declination of CSS variables for a dark mode that will be overwritten. For example, if I want to be able to separate the colors that will be overwritten in dark mode from those that won't be.

For example :

standard variables that will be fixed and not overwritten in dark mode : blue-400 green-400
the variables that will be overwritten in dark mode with "light-mode-to-dark-mode" syntax : blue-400-to-green-400 green-400-to-blue-400

The default Gutenberg result is :

body {
    --wp--preset--color--blue-400: #5F8DFF;
    --wp--preset--color--green-400: #6add05;
    --wp--preset--color--blue-400-to-green-400: #5F8DFF;
    --wp--preset--color--green-400-to-blue-400: #6add05;
}

and what I'd like to do after :

body.dark-mode {
    --wp--preset--color--blue-400-to-green-400: var(--wp--preset--color--green-400);
    --wp--preset--color--green-400-to-blue-400: var(--wp--preset--color--blue-400:);
}

Currently, for a hybrid theme, creating a /styles folder and duplicating the theme.json file with dark.json seems complicated. The theme.json file is already very long if you have to maintain several files on top of it. And switching files from the front with a light/dark mode button doesn't seem possible.

If we can't declare several colors with the same "color" attribute, how do we go about giving the person administering the content (who isn't a developer or integrator) the option of using native gutenberg blocks (without using ACF blocks or any other solution) to define colors (background,color) that are supported in style.css for a dark mode variation ?

Step-by-step reproduction instructions

In theme.json, add this declaration :

"palette": [    
{
    "name": "Bleu 400",
    "slug": "blue-400",
    "color": "#1547c3"
},
{
    "name": "Bleu 400 to Green 400",
    "slug": "blue-400-to-green-400",
    "color": "#1547c3"
},
{
    "name": "Green 400",
    "slug": "green-400",
    "color": "#6add05"
},
{
    "name": "Green 400 to Blue 400",
    "slug": "green-400-to-blue-400",
    "color": "#6add05"
}
],

Inside admin, select a color

Screenshots, screen recording, code snippet

581b444c-24f0-4845-b9ba-a8d30f104512.webm

Screenshot_2

Environment info

WP 6.5.5
Custom theme (Hybrid) with theme.json
Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

webexpr-dhenriet commented 1 week ago

I'm currently able to make this system work by forcing an unlikely "color" example: "color": "#1547c3-6add05"

{
  "name": "Bleu 400 to Green 400",
   "slug": "blue-400-to-green-400",
   "color": "#1547c3-6add05"
},

This results in the loss of the palette preview, but the slug is applied. Then I have to redeclare the styles for the back office and front end.

In admin style :

$imp: unquote('!important');

.editor-styles-wrapper {

    .has-text-color {

        //== overwrite theme.json value "#1547c3-6add05" for .has-blue-400-to-green-400 
        &.has-blue-400-to-green-400 {
            color: var(--wp--preset--color--blue-400) $imp;
        }
    }
}

In front end style :

$imp: unquote('!important');

//== overwrite theme.json value "#1547c3-6add05" for .has-blue-400-to-green-400 
body {
    --wp--preset--color--blue-400-to-green-400: #1547c3 #{$imp};
}
//== Dark mode 
@include color-mode(dark) {

    body {
        --wp--preset--color--blue-400-to-green-400: #6add05 #{$imp};
    }
}

I also have to redeclare body as I'm doing my dark mode from the :root scope and also add!important, as mentioned here https://github.com/WordPress/gutenberg/issues/62959

It works, but it's not a great system. The behavior of palette items should be like a radio button: I click, I select and the others are deselected ?

Screenshot_6 Screenshot_5 Screenshot_4 Screenshot_2

annezazu commented 5 days ago

@justintadlock curious for your thoughts here as you work on updating the theme handbook.

justintadlock commented 5 days ago

I've run into this a few times when declaring something like a base color of #ffffff (white) and also the default Core white color of #ffffff (same with the default black color), which I think would be a more common scenario than what's described above for most theme authors.

I don't fully know how this works under the hood. But for some reason, the color picker is checking the color CSS value instead of the defined slug. I'm not sure if this is how the color picker component works itself or how the data is passed to it.

webexpr-dhenriet commented 5 days ago

I think the color palette entries should have the slug ID and not the color. They should also behave like radio buttons, or if not, the onClick event should activate the clicked element, apply the CSS class based on the slug, preview it in the palette menu with the color attribute and unselect the others. At present, we'd rather have a checkbox behavior based on all entries with the same color attribute. Since only one color can be selected, it's strange to have several.

WordPress / gutenberg