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.

That’s great. Thank you for your help.

Sorry for the late reply, the method you provided only works with CSS styles, not Javascript. Do you have any way to include custom Javascript in the full site editor?

thanks.