@secretstache/wordpress-gutenberg 0.5.2 → 0.5.4

package/build/styles.css

@@ -153,6 +153,8 @@
 .editor-sidebar .block-editor-link-control {
   min-width: 100%;
   width: 100%; }
+  .editor-sidebar .block-editor-link-control .block-editor-url-input {
+    min-width: 100%; }
   .editor-sidebar .block-editor-link-control .block-editor-url-input__input {
     width: 100%; }
   .editor-sidebar .block-editor-link-control .components-base-control {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "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/components/MediaControl.js

@@ -1,4 +1,4 @@
-import { Button, Icon as WPIcon } from '@wordpress/components';
+import { BaseControl, Button, Icon as WPIcon } from '@wordpress/components';
 import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 import { page as pageIcon } from '@wordpress/icons';
 
@@ -110,6 +110,7 @@ export const AnimationRenderer = ({
 };
 
 export const MediaControl = ({
+    label,
     mediaId,
     mediaUrl,
     mediaFileName = '',
@@ -122,69 +123,75 @@ export const MediaControl = ({
 }) => {
     if (type === MEDIA_TYPE.IMAGE) {
         return (
-            <MediaUploadCheck>
-                <MediaUpload
-                    onSelect={onSelect}
-                    allowedTypes={['image', 'image/svg+xml']}
-                    accept="image/*"
-                    value={mediaId}
-                    render={({ open }) => (
-                        <ImageRenderer
-                            imageId={mediaId}
-                            imageUrl={mediaUrl}
-                            onImageClick={open}
-                            onSelectClick={open}
-                            onRemoveClick={onRemove}
-                            selectButtonLabel={selectButtonLabel}
-                            removeButtonLabel={removeButtonLabel}
-                        />
-                    )}
-                    {...other}
-                />
-            </MediaUploadCheck>
+            <BaseControl label={label || 'Image'}>
+                <MediaUploadCheck>
+                    <MediaUpload
+                        onSelect={onSelect}
+                        allowedTypes={['image', 'image/svg+xml']}
+                        accept="image/*"
+                        value={mediaId}
+                        render={({ open }) => (
+                            <ImageRenderer
+                                imageId={mediaId}
+                                imageUrl={mediaUrl}
+                                onImageClick={open}
+                                onSelectClick={open}
+                                onRemoveClick={onRemove}
+                                selectButtonLabel={selectButtonLabel || 'Select Image'}
+                                removeButtonLabel={removeButtonLabel || 'Remove Image'}
+                            />
+                        )}
+                        {...other}
+                    />
+                </MediaUploadCheck>
+            </BaseControl>
         );
     } else if (type === MEDIA_TYPE.VIDEO) {
         return (
-            <MediaUploadCheck>
-                <MediaUpload
-                    onSelect={onSelect}
-                    allowedTypes={['video']}
-                    value={mediaId}
-                    render={({ open }) => (
-                        <VideoRenderer
-                            videoId={mediaId}
-                            videoUrl={mediaUrl}
-                            onSelectClick={open}
-                            onRemoveClick={onRemove}
-                            selectButtonLabel={selectButtonLabel}
-                            removeButtonLabel={removeButtonLabel}
-                        />
-                    )}
-                    {...other}
-                />
-            </MediaUploadCheck>
+            <BaseControl label={label || 'Video'}>
+                <MediaUploadCheck>
+                    <MediaUpload
+                        onSelect={onSelect}
+                        allowedTypes={['video']}
+                        value={mediaId}
+                        render={({ open }) => (
+                            <VideoRenderer
+                                videoId={mediaId}
+                                videoUrl={mediaUrl}
+                                onSelectClick={open}
+                                onRemoveClick={onRemove}
+                                selectButtonLabel={selectButtonLabel || 'Select Video'}
+                                removeButtonLabel={removeButtonLabel || 'Remove Video'}
+                            />
+                        )}
+                        {...other}
+                    />
+                </MediaUploadCheck>
+            </BaseControl>
         );
     } else if (type === MEDIA_TYPE.ANIMATION) {
         return (
-            <MediaUploadCheck>
-                <MediaUpload
-                    onSelect={onSelect}
-                    allowedTypes={['application/json', 'text/plain', 'application/lottie']}
-                    value={mediaId}
-                    render={({ open }) => (
-                        <AnimationRenderer
-                            animationFileId={mediaId}
-                            animationFileUrl={mediaUrl}
-                            animationFileName={mediaFileName}
-                            onSelectClick={open}
-                            onRemoveClick={onRemove}
-                            selectButtonLabel={selectButtonLabel}
-                            removeButtonLabel={removeButtonLabel}
-                        />
-                    )}
-                    {...other}
-                />
-            </MediaUploadCheck>
+            <BaseControl label={label || 'Animation'}>
+                <MediaUploadCheck>
+                    <MediaUpload
+                        onSelect={onSelect}
+                        allowedTypes={['application/json', 'text/plain', 'application/lottie']}
+                        value={mediaId}
+                        render={({ open }) => (
+                            <AnimationRenderer
+                                animationFileId={mediaId}
+                                animationFileUrl={mediaUrl}
+                                animationFileName={mediaFileName}
+                                onSelectClick={open}
+                                onRemoveClick={onRemove}
+                                selectButtonLabel={selectButtonLabel || 'Select Animation'}
+                                removeButtonLabel={removeButtonLabel || 'Remove Animation'}
+                            />
+                        )}
+                        {...other}
+                    />
+                </MediaUploadCheck>
+            </BaseControl>
         );
     } else {
         throw new Error('Unrecognized media type.');

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/styles/_link-control.scss

@@ -30,6 +30,10 @@
     min-width: 100%;
     width: 100%;
 
+    .block-editor-url-input {
+        min-width: 100%;
+    }
+
     .block-editor-url-input__input {
         width: 100%;
     }

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[];
-}