Theme.json: creating different sections of the color palette

admin管理员组

文章数量:1123950

I've got some colors defined in theme.json- is there a way to define custom sections within the color palette? When I set my own colors, they show up in the section labeled "Theme". The other colors are in a section labeled "Default". [seen below] Is there a way to define new sections here?

Use case: We have a pretty big palette, and I want to split up brand colors (each include a x-light, light, key, dark, and x-dark shade).

Here is my theme.json code:

{
  "version": 1,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#0EA5E9"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#14B8A6"
        }...

I did a fair bit of Googling but can't seem to land on the right term to unlock the secret. Anyone tried this before?

I've got some colors defined in theme.json- is there a way to define custom sections within the color palette? When I set my own colors, they show up in the section labeled "Theme". The other colors are in a section labeled "Default". [seen below] Is there a way to define new sections here?

Use case: We have a pretty big palette, and I want to split up brand colors (each include a x-light, light, key, dark, and x-dark shade).

Here is my theme.json code:

{
  "version": 1,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#0EA5E9"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#14B8A6"
        }...

I did a fair bit of Googling but can't seem to land on the right term to unlock the secret. Anyone tried this before?

• theme-development
• theme-options
• color-picker
• theme.json

Share Improve this question asked Sep 20, 2022 at 16:45 clarkclark 59122 silver badges1010 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 4

No, writing as of Wordpress 6.0 there is no API for defining additional palette sections. The colour palette component hardcodes 3 PaletteEdit sub-components, theme, default, and custom, where custom is for user defined colours. No dynamic fields or slotfills are provided for extending or adjusting these. Here is the current code:

    return (
        <VStack
            className="edit-site-global-styles-color-palette-panel"
            spacing={ 10 }
        >
            { !! themeColors && !! themeColors.length && (
                <PaletteEdit
                    canReset={ themeColors !== baseThemeColors }
                    canOnlyChangeValues
                    colors={ themeColors }
                    onChange={ setThemeColors }
                    paletteLabel={ __( 'Theme' ) }
                />
            ) }
            { !! defaultColors &&
                !! defaultColors.length &&
                !! defaultPaletteEnabled && (
                    <PaletteEdit
                        canReset={ defaultColors !== baseDefaultColors }
                        canOnlyChangeValues
                        colors={ defaultColors }
                        onChange={ setDefaultColors }
                        paletteLabel={ __( 'Default' ) }
                    />
                ) }
            <PaletteEdit
                colors={ customColors }
                onChange={ setCustomColors }
                paletteLabel={ __( 'Custom' ) }
                emptyMessage={ __(
                    'Custom colors are empty! Add some colors to create your own color palette.'
                ) }
                slugPrefix="custom-"
            />
        </VStack>
    );

https://github.com/WordPress/gutenberg/blob/a5ef504432e34afc0792eae62e44d71590c031eb/packages/edit-site/src/components/global-styles/color-palette-panel.js

Changing this will require a new API to be added to the block editor. I'd suggest creating an issue on the gutenberg github repo for this if one doesn't already exist.

edit: Still the case in WordPress 6.5

本文标签： Themejson creating different sections of the color palette