How to include group and default color in ColorPalette?

  • I am developing a custom block and followed the guide to add PanelColorSettings to my block. However, I can’t create the same panel as WordPress default color panel. The panel I created can only display the custom theme palette, but not the default palette. There is also no group title included.

    Here is my coding.

    <InspectorControls key={"setting"}>
        <PanelColorSettings
          title="Color"
          colorSettings={[
            {
              value: attributes.textColor,
              onChange: (color) => setAttributes({ textColor: color }),
              label: "Text",
              clearable: true,
            },
          ]}
        />
      </InspectorControls>

    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)

  • You would have to load the colour information defined by the theme first. This can be done with:

    let themeColors = [];
const settings = wp.data.select( 'core/block-editor' ).getSettings();
		if ( settings && settings.colors ) {
			themeColors = settings.colors;
		}

    You can find an example here:
    https://github.com/florianbrinkmann/theme-color-palette-in-custom-block/blob/master/blocks/section-with-color-control/index.js

    Thread Starter stewardccm

    (@stewardccm)

    It doesn’t solve my problem. The problem I’m facing is that I can’t create the same color picker as the default block layout.

    After I dug into the block editor source code, I found that I was missing one of the configurations set for the color palette. So now the coding will look like this.

    
let defaultColors = SETTINGS_DEFAULTS.colors;
let themeColors = useSetting("color.palette");

let colors = [{ name: "Default", colors: defaultColors }];

if (themeColors) colors.unshift({ name: "Theme", colors: themeColors });

...

<InspectorControls key={"setting"}>
    <PanelColorSettings 
         title="Color"
         colorSettings={[
           {
                value: textColor,
                onChange: (color) => setAttributes({ textColor: color }),
                label: "Text",
                clearable: true,
                __experimentalHasMultipleOrigins: true,
                colors: colors
           },
         ]}
    />
 </InspectorControls>

    This is how I found the solution to have the same layout design as the default block. Maybe there are other solutions.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to include group and default color in ColorPalette?’ is closed to new replies.