@secretstache/wordpress-gutenberg 0.6.8 → 0.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.6.8",
+  "version": "0.6.10",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",
@@ -57,6 +57,7 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
+    "debounce-promise": "^3.1.2",
     "es-toolkit": "^1.12.0",
     "react-select": "5.7.5",
     "react-sortable-hoc": "2.0.0",

package/src/hooks/useTabs.jsx

@@ -12,6 +12,7 @@ export const useTabs = (tabsClientId, tabItemName) => {
 
     const {
         tabs,
+        tabsAttributes,
         tabsCount,
         tabsOrder,
 
@@ -30,6 +31,7 @@ export const useTabs = (tabsClientId, tabItemName) => {
 
             return {
                 tabs: getBlock(tabsClientId)?.innerBlocks || [],
+                tabsAttributes: getBlock(tabsClientId)?.innerBlocks?.map((block) => block?.attributes) || [],
                 tabsCount: getBlockCount(tabsClientId),
                 tabsOrder: getBlockOrder(tabsClientId),
 
@@ -108,6 +110,7 @@ export const useTabs = (tabsClientId, tabItemName) => {
 
     return {
         tabs,
+        tabsAttributes,
         tabsCount,
         tabsOrder,
 

package/src/utils/helpers.js

@@ -1,54 +1,80 @@
 import { filters } from '@wordpress/hooks';
 import apiFetch from '@wordpress/api-fetch';
+import { select, subscribe, useSelect } from '@wordpress/data';
+import { getBlockType, registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import slugify from 'slugify';
 import classNames from 'classnames';
-import { select, subscribe } from '@wordpress/data';
-import { getBlockType, registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import debounce from 'debounce-promise';
+import { useMemo } from '@wordpress/element';
+
+let controller;
 
 /**
- * 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
- * @param {Object} [extraParams={}] - Additional query parameters
- * @returns {Promise<Array<{value: number, label: string}>>} Array of select options
+ * Performs the raw REST API request for loading select options.
+ * Automatically aborts any previous pending request.
+ *
+ * @param {string} inputValue - Search term used to filter posts.
+ * @param {string} postType - WordPress post type slug (e.g., "post", "page", custom type).
+ * @param {Function|null} [mapper=null] - Optional callback to transform each API result.
+ * @param {Object} [extraParams={}] - Additional query parameters for the REST API call.
+ * @returns {Promise<Array<{ value: number, label: string }>>} Promise resolving to an array of select options.
  */
-export const loadSelectOptions = async (inputValue, postType, mapper = null, extraParams = {}) => {
-     const defaultParams = {
+export const loadSelectOptionsRaw = async (inputValue, postType, mapper = null, extraParams = {}) => {
+    // Cancel previous request if still active
+    if (controller) controller.abort();
+    controller = new AbortController();
+
+    const defaultParams = {
         per_page: -1,
         status: 'publish',
         orderby: 'title',
-        order: 'asc'
+        order: 'asc',
     };
 
     const queryParams = { ...defaultParams, ...extraParams };
-
-    if (inputValue && inputValue.trim()) {
-        queryParams.search = inputValue;
-    }
+    const q = inputValue?.trim();
+    if (q) queryParams.search = q;
 
     const queryString = new URLSearchParams(queryParams).toString();
 
-    const response = await apiFetch({
-        path: `/wp/v2/${postType}?${queryString}`,
-    });
-
-    if (mapper) {
-        return response?.map(mapper);
-    } else {
-        return response?.map((post) => {
-            const tempElement = document.createElement('div');
-            tempElement.innerHTML = post?.title?.rendered;
-
-            return {
-                value: post.id,
-                label: tempElement.textContent || tempElement.innerText || '',
-            };
+    try {
+        const response = await apiFetch({
+            path: `/wp/v2/${postType}?${queryString}`,
+            signal: controller.signal,
         });
+
+        const list = mapper
+            ? response?.map(mapper)
+            : response?.map((post) => {
+                const temp = document.createElement('div');
+                temp.innerHTML = post?.title?.rendered;
+                return {
+                    value: post.id,
+                    label: temp.textContent || temp.innerText || '',
+                };
+            });
+
+        return Array.isArray(list) ? list : [];
+    } catch (err) {
+        if (err?.name === 'AbortError') return [];
+        throw err;
     }
 };
 
+/**
+ * Debounced, abort-safe function to fetch WordPress posts for select options.
+ * Combines:
+ *  - AbortController: cancels previous in-flight requests.
+ *  - debounce-promise: delays execution and resolves to the final async result.
+ *
+ * @example
+ * const options = await loadSelectOptions('John', 'team');
+ */
+export const loadSelectOptions = debounce(loadSelectOptionsRaw, 300, {
+    leading: false,
+    trailing: true,
+});
+
 /**
  * Converts a string to a URL-friendly slug.
  * @param {string} name - String to convert to slug
@@ -316,3 +342,40 @@ export const getFocalPointStyle = (focalPoint) => {
     return { objectPosition: `${x}% ${y}%` };
 };
 
+/**
+ * Default options for Select via core-data cache
+ *
+ * @param {string} postType
+ * @param {(post:any)=>{value:number,label:string}} [mapper]
+ * @param {Object} [extraParams={}]
+ *
+ * @returns {{ options: Array<{value:number,label:string}>, isResolving: boolean }}
+ */
+export const useDefaultSelectOptions = (postType, mapper = null, extraParams = {}) => {
+    const query = useMemo(() => ({
+        per_page: 100,
+        status: 'publish',
+        order: 'asc',
+        orderby: 'title',
+        _fields: 'id,title,acf',
+        ...extraParams,
+    }), [ postType, JSON.stringify(extraParams) ]);
+
+    return useSelect((select) => {
+        const core = select('core');
+        const posts = core.getEntityRecords('postType', postType, query) || [];
+        const isResolving = core.isResolving('getEntityRecords', [ 'postType', postType, query ]);
+
+        const options = mapper
+            ? posts.map(mapper)
+            : posts.map((post) => ({
+                value: post.id,
+                label: decodeHtmlEntities(post?.title?.rendered || ''),
+            }));
+
+        return {
+            options,
+            isResolving,
+        };
+    }, [ postType, JSON.stringify(query) ]);
+};