🤖 Merge PR DefinitelyTyped#73993 [@types/wordpress__block-editor] Fix PanelColorSettings type definitions by @rafaucau

Author: rafaucau

types/wordpress__block-editor/components/panel-color-settings.d.ts

@@ -1,14 +1,44 @@
-import { ColorPalette, PanelBody } from "@wordpress/components";
-import { ComponentProps, ComponentType } from "react";
+import { ColorPalette, GradientPicker } from "@wordpress/components";
+import type { ComponentProps, ComponentType, ReactNode } from "react";
 
 declare namespace PanelColorSettings {
-    type ColorSetting =
-        & Partial<ComponentProps<typeof ColorPalette>>
-        & Pick<ComponentProps<typeof ColorPalette>, "onChange" | "value">
-        & { label: string };
-    interface Props extends Omit<ComponentProps<typeof PanelBody>, "children"> {
-        colorSettings: ColorSetting[];
-        disableCustomColors?: boolean | undefined;
+    interface ColorSetting {
+        /** The current color of the setting. */
+        value: string;
+        /** Callback on change of the setting. */
+        onChange: (value: string | undefined) => void;
+        /** Label of the setting. */
+        label: string;
+        /** Colors palette for this specific setting. */
+        colors?: ComponentProps<typeof ColorPalette>["colors"];
+        /** Whether to disable custom colors for this specific setting. */
+        disableCustomColors?: boolean;
+        /** Whether to disable custom gradients for this specific setting. */
+        disableCustomGradients?: boolean;
+    }
+    interface Props {
+        /** A user-provided set of color settings. */
+        colorSettings?: ColorSetting[];
+        /** Added to the underlying ToolsPanel instance. */
+        className?: string;
+        /** Array of colors to be used. */
+        colors?: ComponentProps<typeof ColorPalette>["colors"];
+        /** Not recommended to be used since `PanelColorSettings` resets it. */
+        gradients?: ComponentProps<typeof GradientPicker>["gradients"];
+        /** Whether the addition of custom colors is enabled. */
+        disableCustomColors?: boolean;
+        /** Not recommended to be used since `PanelColorSettings` sets it. */
+        disableCustomGradients?: boolean;
+        /** Displayed below the underlying `PanelColorGradientSettings` instance. */
+        children?: ReactNode;
+        /** Title of the underlying `ToolsPanel`. */
+        title?: string;
+        /** Whether to show the title of the `ToolsPanel`. */
+        showTitle?: boolean;
+        /** Whether this is rendered in the sidebar. */
+        __experimentalIsRenderedInSidebar?: boolean;
+        /** Whether to enable setting opacity when specifying a color. */
+        enableAlpha?: boolean;
     }
 }
 declare const PanelColorSettings: ComponentType<PanelColorSettings.Props>;

types/wordpress__block-editor/wordpress__block-editor-tests.tsx

@@ -299,15 +299,13 @@ be.withFontSizes("fontSize")(() => <h1>Hello World</h1>);
 //
 <be.PanelColorSettings
     title="Color Settings"
-    initialOpen={false}
     colorSettings={[
         {
             value: "#ff0000",
             onChange(color) {
                 color && console.log(color);
             },
             label: "Background Color",
-            disableCustomColors: true,
             colors: [
                 {
                     color: "#ff0000",
@@ -318,8 +316,12 @@ be.withFontSizes("fontSize")(() => <h1>Hello World</h1>);
                     name: "Yellow",
                 },
             ],
+            disableCustomColors: false,
         },
     ]}
+    disableCustomColors={true}
+    showTitle={true}
+    enableAlpha={true}
 />;
 <be.PanelColorSettings
     colorSettings={[