@secretstache/wordpress-gutenberg 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",

package/src/components/ColorPaletteControl.js

@@ -1,5 +1,5 @@
 import { BaseControl, ColorPalette } from '@wordpress/components';
-import { useThemeColors, useColorChange } from '../hooks/index.js';
+import { useThemeColors } from '../hooks/index.js';
 
 export const ColorPaletteControl = ({
     label = 'Color',
@@ -7,9 +7,29 @@ export const ColorPaletteControl = ({
     attributeName,
     setAttributes,
     allowedColors,
+    ...other
 }) => {
     const colors = useThemeColors(allowedColors);
-    const onColorChange = useColorChange(colors, setAttributes);
+
+    const onChange = (colorValue) => {
+        const selectedColor = colors.find(color => color.color === colorValue);
+
+        if (colorValue) {
+            setAttributes({
+                [attributeName]: {
+                    value: colorValue,
+                    slug: selectedColor?.slug || '',
+                }
+            })
+        } else {
+            setAttributes({
+                [attributeName]: {
+                    value: '',
+                    slug: '',
+                }
+            })
+        }
+    };
 
     return (
         <BaseControl label={label}>
@@ -17,7 +37,8 @@ export const ColorPaletteControl = ({
                 colors={colors}
                 value={value}
                 disableCustomColors={true}
-                onChange={(colorValue) => onColorChange(colorValue, attributeName)}
+                onChange={onChange}
+                {...other}
             />
         </BaseControl>
     );

package/src/hooks/useColorChange.js

@@ -1,4 +1,11 @@
+import { deprecationWarning } from '../utils/internal/helpers.js';
+
+/**
+ * @deprecated since 0.5.3
+ */
 export const useColorChange = (colors, setAttributes) => (colorValue, property) => {
+    deprecationWarning('Warning: useColorChange is deprecated since version 0.5.3 and will be removed in future versions.');
+
     const selectedColor = colors.find(color => color.color === colorValue);
 
     setAttributes({

package/src/hooks/useThemeColors.js

@@ -14,6 +14,6 @@ export const useThemeColors = (allowedColors = []) => {
         }
 
         return allColors;
-    }, [allowedColors]);
+    }, [ allowedColors ]);
 };
 

package/src/index.d.ts

@@ -1,152 +0,0 @@
-declare module '@secretstache/wordpress-gutenberg' {
-  import { ReactNode, FC } from 'react';
-  import { BlockInstance } from '@wordpress/blocks';
-
-  // Constants
-  export const MEDIA_TYPE: {
-    IMAGE: 'image';
-    VIDEO: 'video';
-    ANIMATION: 'animation';
-  };
-
-  // Components
-  export interface ColorPaletteControlProps {
-    label?: string;
-    value: string;
-    attributeName: string;
-    setAttributes: (attrs: any) => void;
-    allowedColors?: string[];
-  }
-  export const ColorPaletteControl: FC<ColorPaletteControlProps>;
-
-  export interface MediaControlProps {
-    mediaId: number;
-    mediaUrl: string;
-    mediaFileName?: string;
-    onSelect: (media: any) => void;
-    onRemove: () => void;
-    type?: 'image' | 'video' | 'animation';
-    selectButtonLabel?: string;
-    removeButtonLabel?: string;
-  }
-  export const MediaControl: FC<MediaControlProps>;
-
-  export interface PreviewControlProps {
-    checked: boolean;
-    onChange: (value: boolean) => void;
-    help?: string;
-    label?: string;
-  }
-  export const PreviewControl: FC<PreviewControlProps>;
-
-  export interface ResourcesWrapperProps {
-    isLoading?: boolean;
-    isEmptyResources?: boolean;
-    isEmptySelection?: boolean;
-    isPlaceholder?: boolean;
-    emptyResourcesMessage?: string;
-    emptySelectionMessage?: string;
-    placeholderProps?: {
-      icon?: string;
-      instructions?: string;
-      [key: string]: any;
-    };
-    children?: ReactNode;
-  }
-  export const ResourcesWrapper: FC<ResourcesWrapperProps>;
-
-  export interface DataQueryControlsProps {
-    dataSourceLabel?: string;
-    dataSource: string;
-    onDataSourceChange: (value: string) => void;
-    queryTypeLabel?: string;
-    queryType: string;
-    onQueryTypeChange: (value: string) => void;
-    settings: Array<{
-      value: string;
-      label: string;
-      queries?: Array<{
-        value: string;
-        label: string;
-      }>;
-    }>;
-  }
-  export const DataQueryControls: FC<DataQueryControlsProps>;
-
-  // Hooks
-  export function usePreviewControl(): {
-    isPreview: boolean;
-    setIsPreview: (value: boolean) => void;
-    PreviewControl: FC<PreviewControlProps>;
-  };
-
-  export function useThemeColors(allowedColors?: string[]): Array<{
-    name: string;
-    slug: string;
-    color: string;
-  }>;
-
-  export function useColorChange(
-    colors: Array<{ color: string; slug: string }>,
-    setAttributes: (attrs: any) => void
-  ): (colorValue: string, property: string) => void;
-
-  export function useDataQuery(config: {
-    postType: string | (() => string);
-    curatedPostsIds?: number[];
-    taxonomySlug?: string;
-    curatedTermsIds?: number[];
-    numberOfPosts?: number;
-    extraQueryArgs?: Record<string, any>;
-  }, dependencies?: any[]): {
-    postsToShow: any[];
-    isResolving: boolean;
-    isEmpty: boolean;
-  };
-
-  export function useParentBlock(
-    parentBlockName: string,
-    blockClientIdToLimitSearch?: string
-  ): BlockInstance | null;
-
-  export function useSlider(
-    isEnabled: boolean,
-    setupSlider: (element: HTMLElement) => any,
-    cleanCallback?: () => void,
-    dependencies?: any[]
-  ): {
-    sliderElRef: React.RefObject<HTMLElement>;
-    sliderInstance: React.RefObject<any>;
-  };
-
-  export function useAccordionItem(
-    itemId: string,
-    activeItemId: string | null,
-    setActiveItemId: (id: string | null) => void,
-    contentSelector: string,
-    heightObserverDeps?: any[]
-  ): {
-    blockRef: React.RefObject<HTMLElement>;
-    toggleItem: () => void;
-    openContent: () => void;
-    closeContent: () => void;
-    isActive: boolean;
-  };
-
-  export function useAllowedBlocks(
-    blockName: string,
-    excludedBlocks?: string[]
-  ): string[];
-
-  export function useChildBlockPosition(
-    childClientId: string
-  ): {
-    block: BlockInstance | null;
-    parentBlock: BlockInstance | null;
-    position: number;
-  };
-
-  export function useFilterBlocks(
-    filter: (block: BlockInstance) => boolean
-  ): string[];
-}