@secretstache/wordpress-gutenberg 0.5.0 → 0.5.2

package/package.json

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

package/src/index.d.ts

@@ -0,0 +1,152 @@
+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[];
+}

package/src/utils/constants.js

@@ -1,9 +1,3 @@
-export const QUERY_TYPE = {
-    LATEST: 'latest',
-    CURATED: 'curated',
-    BY_CATEGORY: 'by_category'
-};
-
 export const MEDIA_TYPE = {
     IMAGE: 'image',
     VIDEO: 'video',

package/src/utils/helpers.js

@@ -2,7 +2,17 @@ import { filters } from '@wordpress/hooks';
 import apiFetch from '@wordpress/api-fetch';
 import slugify from 'slugify';
 import classNames from 'classnames';
+import { select, subscribe } from '@wordpress/data';
+import { getBlockType, registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 
+/**
+ * Loads select options by fetching posts from WordPress REST API.
+ * @async
+ * @param {string} inputValue - Search term to filter posts
+ * @param {string} postType - WordPress post type to query
+ * @param {Function|null} [mapper=null] - Optional function to transform API response items
+ * @returns {Promise<Array<{value: number, label: string}>>} Array of select options
+ */
 export const loadSelectOptions = async (inputValue, postType, mapper = null) => {
     const response = await apiFetch({
         path: `/wp/v2/${postType}?search=${encodeURIComponent(inputValue)}`,
@@ -24,12 +34,22 @@ export const loadSelectOptions = async (inputValue, postType, mapper = null) =>
     }
 };
 
+/**
+ * Converts a string to a URL-friendly slug.
+ * @param {string} name - String to convert to slug
+ * @returns {string} URL-friendly slug in lowercase with hyphens
+ */
 export const getSlug = (name) => slugify(name, {
     replacement: '-',
     lower: true,
     strict: true,
 });
 
+/**
+ * Cleans SVG string by removing XML declaration and extra whitespace.
+ * @param {string} svgString - Raw SVG string
+ * @returns {string} Cleaned SVG string
+ */
 export const cleanSvgString = (svgString) => {
     if (svgString.startsWith('<?xml')) {
         const endOfXml = svgString.indexOf('?>');
@@ -44,9 +64,20 @@ export const cleanSvgString = (svgString) => {
     return svgString;
 };
 
-const SVG_MIME_TYPE = 'image/svg+xml';
-
+/**
+ * Fetches and processes image data, handling both SVG and regular images.
+ * @async
+ * @param {Object} mediaData - WordPress media object
+ * @param {string} mediaData.mime - Media MIME type
+ * @param {string} mediaData.mime_type - Alternative MIME type property
+ * @param {string} mediaData.url - Media URL
+ * @param {number} mediaData.width - Image width
+ * @param {number} mediaData.height - Image height
+ * @returns {Promise<{isSvg: boolean, imageUrl: string|null, svgCode: string|null, width: number, height: number}>}
+ */
 export const getImage = async (mediaData) => {
+    const SVG_MIME_TYPE = 'image/svg+xml';
+
     const isSvg = mediaData?.mime === SVG_MIME_TYPE || mediaData?.mime_type === SVG_MIME_TYPE;
     const imagePayload = {
         isSvg,
@@ -65,6 +96,11 @@ export const getImage = async (mediaData) => {
     return imagePayload;
 };
 
+/**
+ * Formats a phone number string into XXX-XXX-XXXX format.
+ * @param {string} phone - Phone number starting with '+1' followed by 10 digits
+ * @returns {string} Formatted phone number or empty string if invalid
+ */
 export const getPhoneNumber = (phone) => {
     if (!phone) return '';
 
@@ -80,6 +116,16 @@ export const getPhoneNumber = (phone) => {
     return formatted;
 };
 
+/**
+ * Generates a formatted address string from location components.
+ * @param {Object} location - Location object
+ * @param {string} [location.street_number] - Street number
+ * @param {string} [location.street_name] - Street name
+ * @param {string} [location.city] - City
+ * @param {string} [location.state_short] - State abbreviation
+ * @param {string} [location.post_code] - Postal code
+ * @returns {string} Formatted address with HTML line breaks
+ */
 export const getLocationAddress = (location) => {
     const {
         street_number = '',
@@ -111,6 +157,11 @@ export const getLocationAddress = (location) => {
     return addressParts.join('');
 };
 
+/**
+ * Decodes HTML entities to their corresponding characters.
+ * @param {string} text - Text containing HTML entities
+ * @returns {string} Decoded text
+ */
 export const decodeHtmlEntities = (text) => {
     const tempElement = document.createElement('div');
     tempElement.innerHTML = text;
@@ -147,8 +198,9 @@ export const getSpacingClasses = (
 };
 
 /**
- * @param namespace
- * @returns {*[]}
+ * Retrieves WordPress filters by namespace.
+ * @param {string} namespace - Filter namespace to search for
+ * @returns {Array<{filterName: string, namespace: string}>} Array of matching filters
  */
 const getFiltersByNamespace = (namespace) => {
     const list = [];
@@ -165,3 +217,40 @@ const getFiltersByNamespace = (namespace) => {
 
     return list;
 };
+
+/**
+ * Unregisters a block type for a specific post type when editor loads.
+ * @param {string} blockName - Name of the block to unregister
+ * @param {string} postType - Post type to check against
+ */
+const unsetBlockForPostType = (blockName, postType) => {
+    const unsubscribe = subscribe(
+        () => {
+            const currentPostType = select('core/editor').getCurrentPostType();
+            if (currentPostType === postType && getBlockType(blockName)) {
+                unregisterBlockType(blockName);
+                unsubscribe();
+            }
+        },
+        'core/editor'
+    );
+};
+
+/**
+ * Update the API version of a specific block.
+ *
+ * @param {string} blockName - The name of the block to update (e.g., 'gravityforms/form').
+ * @param {number} [apiVersion=3] - The API version to set for the block. Defaults to 3.
+ */
+export function updateBlockApiVersion(blockName, apiVersion = 3) {
+    const blockSettings = getBlockType(blockName);
+
+    if (blockSettings) {
+        unregisterBlockType(blockName);
+
+        registerBlockType(blockName, {
+            ...blockSettings,
+            apiVersion,
+        });
+    }
+}