@secretstache/wordpress-gutenberg 0.5.12 → 0.5.15

package/build/styles.css

@@ -54,32 +54,46 @@
       display: none; }
   .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender {
     --button-color: #192f5f;
-    --button-border: var(--button-color);
-    --button-hover-color: var(--wp-admin-theme-color);
-    --button-hover-border: var(--wp-admin-theme-color);
+    --button-color-hover: var(--wp-admin-theme-color);
+    --button-border: #192f5f;
+    --button-border-hover: var(--wp-admin-theme-color);
+    --button-background: transparent;
+    --button-background-hover: transparent;
+    --text-color: #192f5f;
     --tr: .3s;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 32px; }
+    .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender--light {
+      --button-color: #fff;
+      --button-color-hover: #192f5f;
+      --button-border: #fff;
+      --button-border-hover: #fff;
+      --button-background: transparent;
+      --button-background-hover: #fff;
+      --text-color: #fff; }
     .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender__content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       text-align: center; }
     .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender__icon {
       width: 48px;
       height: 48px;
-      color: var(--button-color);
+      color: var(--text-color);
       margin-bottom: 16px; }
     .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender__title {
       font-size: 32px;
       font-weight: 600;
       line-height: 110%;
-      color: var(--button-color);
+      color: var(--text-color);
       margin-bottom: 0.5rem; }
     .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender__text {
       font-size: 1rem;
       font-weight: 400;
-      color: var(--button-color);
+      color: var(--text-color);
       margin-bottom: 1.5rem; }
     .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender__button .block-editor-button-block-appender {
       display: inline-flex;
@@ -90,7 +104,7 @@
       border: 2px solid var(--button-border) !important;
       box-shadow: none;
       border-radius: 10px;
-      background: transparent !important;
+      background: var(--button-background) !important;
       padding: 12px 24px;
       min-height: 50px;
       min-width: 200px;
@@ -98,10 +112,11 @@
       font-weight: 600;
       font-size: 22px; }
       .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender__button .block-editor-button-block-appender:hover, .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender__button .block-editor-button-block-appender:focus {
-        color: var(--button-hover-color);
-        border-color: var(--button-hover-border) !important;
+        color: var(--button-color-hover) !important;
+        border-color: var(--button-border-hover) !important;
         outline: none !important;
-        box-shadow: none !important; }
+        box-shadow: none !important;
+        background: var(--button-background-hover) !important; }
       .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender__button .block-editor-button-block-appender::before, .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender__button .block-editor-button-block-appender::after {
         display: none !important; }
       .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .empty-block-appender__button .block-editor-button-block-appender .block-editor-button-block-appender__content {

package/package.json

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

package/src/components/DataQueryControls.js

@@ -1,53 +1,365 @@
-import { RadioControl } from '@wordpress/components';
+import { createContext, useCallback, useContext, useState, useEffect, useMemo, memo } from '@wordpress/element';
+import {
+    __experimentalDivider as Divider,
+    RangeControl,
+    RadioControl,
+    SelectControl,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { arrayMove } from 'react-sortable-hoc';
+import Select from 'react-select';
 
-// TODO: 1. add support of curated posts, categories
-// TODO: 2. consider merging with the useDataQuery hook
-// TODO: 3. can't pass disabled prop to RadioControl
-export const DataQueryControls = (props) => {
-    const {
-        dataSourceLabel = 'Data Source',
-        dataSource,
-        onDataSourceChange,
+import { SortableSelectAsync } from './SortableSelect.js';
+import { decodeHtmlEntities, loadSelectOptions } from '../utils/index.js';
 
-        queryTypeLabel = 'Query',
-        queryType,
-        onQueryTypeChange,
+const DataQueryContext = createContext({});
 
-        settings,
-    } = props;
+/**
+ * Main DataQueryControls component that provides context to children
+ */
+export const DataQueryControls = memo(({
+    attributes,
+    setAttributes,
+    children,
+}) => {
+    const updateAttribute = useCallback((name, value) => {
+        setAttributes({ [name]: value });
+    }, []);
 
-    const sourcesList = settings
-        .filter((source) => source?.value && source?.label)
-        .map((source) => ({ label: source.label, value: source.value }));
+    const contextValue = useMemo(() => ({
+        attributes,
+        setAttributes,
+        updateAttribute,
+    }), [ attributes ]);
 
-    const queriesList = settings.find((source) => source.value === dataSource)?.queries || [];
+    return (
+        <DataQueryContext.Provider value={contextValue}>
+            {children}
+        </DataQueryContext.Provider>
+    );
+});
+
+/**
+ * Hook to access the query controls context
+ */
+const useDataQueryContext = () => {
+    const context = useContext(DataQueryContext);
+
+    if (!context) {
+        throw new Error('Query control components must be used within a DataQueryControls component');
+    }
+
+    return context;
+};
+
+/**
+ * QueryType component for selecting the query type
+ */
+const QueryType = memo(({
+    label = 'Query',
+    options = [],
+    onChange,
+    disabled = false,
+    help = '',
+    attributeName = 'queryType',
+    render = null,
+}) => {
+    const { attributes, updateAttribute } = useDataQueryContext();
+    const queryType = attributes[attributeName];
+
+    const handleChange = useCallback((value) => {
+        updateAttribute(attributeName, value);
+
+        if (onChange) {
+            onChange(value);
+        }
+    }, [ attributeName, onChange ]);
+
+    if (render) {
+        return render({
+            value: queryType,
+            onChange: handleChange,
+            options,
+            disabled,
+            attributeName,
+        });
+    }
+
+    return (
+        <>
+            <RadioControl
+                label={label}
+                selected={queryType}
+                options={options}
+                onChange={handleChange}
+                disabled={disabled}
+                help={help}
+            />
+
+            <Divider />
+        </>
+    );
+});
+
+/**
+ * TaxonomySelect component for taxonomy-based filtering
+ */
+const TaxonomySelect = memo(({
+    condition = true,
+    attributeName = 'selectedCategories',
+    taxonomy = 'category',
+    placeholder = 'Categories to show',
+    disabled = false,
+    render = null,
+    customOptions = null,
+}) => {
+    const { attributes, updateAttribute } = useDataQueryContext();
+
+    const taxonomyTerms = useSelect((select) => {
+        if (customOptions) return null;
+
+        return select('core').getEntityRecords('taxonomy', taxonomy, { per_page: -1 });
+    }, [ taxonomy, customOptions ]);
+
+    const selectOptions = useMemo(() => {
+        if (customOptions) return customOptions;
+
+        return taxonomyTerms?.map(term => ({
+            value: term.id,
+            label: decodeHtmlEntities(term.name),
+        })) || [];
+    }, [ taxonomyTerms, customOptions ]);
+
+    const selectedTermIds = attributes[attributeName] || [];
+
+    const selectedOptions = useMemo(() => {
+        return selectedTermIds
+            .map(id => selectOptions.find(option => option.value === id))
+            .filter(Boolean);
+    }, [ selectedTermIds, selectOptions ]);
+
+    const onChange = useCallback((newSelected) => {
+        const newSelectedIds = newSelected ? newSelected.map(option => option.value) : [];
+        updateAttribute(attributeName, newSelectedIds);
+    }, [ attributeName ]);
+
+    if (!condition || !taxonomy) return null;
+
+    if (render) {
+        return render({
+            value: selectedOptions,
+            onChange,
+            options: selectOptions,
+            placeholder,
+            disabled,
+            attributeName,
+        });
+    }
+
+    return (
+        <>
+            <Select
+                isMulti
+                options={selectOptions}
+                value={selectedOptions}
+                onChange={onChange}
+                className="react-select-container"
+                classNamePrefix="react-select"
+                placeholder={placeholder}
+                isDisabled={disabled}
+            />
+
+            <Divider />
+        </>
+    );
+});
 
-    const hasSources = sourcesList && sourcesList?.length > 0;
-    const hasQueries = queriesList && queriesList?.length > 0;
+/**
+ * CuratedPosts component for selecting individual posts
+ */
+const CuratedPosts = memo(({
+    condition = true,
+    attributeName = 'curatedPosts',
+    postType = 'posts',
+    placeholder = 'Posts to show',
+    disabled = false,
+    render = null,
+}) => {
+    const { attributes, updateAttribute } = useDataQueryContext();
+    const curatedPosts = attributes[attributeName] || [];
+
+    const loadPostsOptions = useCallback(async (inputValue) => {
+        return await loadSelectOptions(inputValue, postType);
+    }, []);
+
+    const [ defaultPostsOptions, setDefaultPostsOptions ] = useState([]);
+
+    useEffect(() => {
+        loadSelectOptions('', postType).then(setDefaultPostsOptions);
+    }, []);
+
+    const onSortEnd = useCallback(({ oldIndex, newIndex }) => {
+        const newCuratedPosts = arrayMove(curatedPosts, oldIndex, newIndex);
+        updateAttribute(attributeName, newCuratedPosts);
+    }, [ curatedPosts, attributeName ]);
+
+    const onChange = useCallback((newValue) => {
+        updateAttribute(attributeName, newValue);
+    }, [ attributeName ]);
+
+    if (!condition) return null;
+
+    if (render) {
+        return render({
+            value: curatedPosts,
+            onChange,
+            onSortEnd,
+            loadOptions: loadPostsOptions,
+            defaultOptions: defaultPostsOptions,
+            placeholder,
+            disabled,
+            attributeName,
+        });
+    }
+
+    return (
+        <>
+            <SortableSelectAsync
+                onSortEnd={onSortEnd}
+                value={curatedPosts}
+                defaultOptions={defaultPostsOptions}
+                loadOptions={loadPostsOptions}
+                onChange={onChange}
+                placeholder={placeholder}
+                isDisabled={disabled}
+            />
+            <Divider />
+        </>
+    );
+});
+
+/**
+ * NumberOfPosts component for limiting the number of posts
+ */
+const NumberOfPosts = memo(({
+    condition = true,
+    attributeName = 'numberOfPosts',
+    label = 'Number of Posts',
+    min = -1,
+    max = 12,
+    help = 'The maximum number of posts to show (-1 for no limit)',
+    disabled = false,
+    render = null,
+}) => {
+    const { attributes, updateAttribute } = useDataQueryContext();
+    const numberOfPosts = attributes[attributeName];
+
+    const onChange = useCallback((value) => {
+        updateAttribute(attributeName, value);
+    }, [ attributeName ]);
+
+    if (!condition) return null;
+
+    if (render) {
+        return render({
+            value: numberOfPosts,
+            onChange,
+            min,
+            max,
+            help,
+            disabled,
+            attributeName,
+        });
+    }
+
+    return (
+        <>
+            <RangeControl
+                label={label}
+                value={numberOfPosts}
+                onChange={onChange}
+                min={min}
+                max={max}
+                help={help}
+                disabled={disabled}
+            />
+
+            <Divider />
+        </>
+    );
+});
+
+/**
+ * OrderByControl component for controlling ordering
+ */
+const OrderByControl = memo(({
+     condition = true,
+     orderByAttributeName = 'orderBy',
+     orderAttributeName = 'order',
+     disabled = false,
+     orderByOptions = [
+         { label: 'Date', value: 'date' },
+         { label: 'Title', value: 'title' },
+     ],
+     orderOptions = [
+         { label: 'Ascending', value: 'asc' },
+         { label: 'Descending', value: 'desc' },
+     ],
+     render = null,
+ }) => {
+    const { attributes, updateAttribute } = useDataQueryContext();
+    const orderBy = attributes[orderByAttributeName] || 'date';
+    const order = attributes[orderAttributeName] || 'desc';
+
+    const onOrderByChange = useCallback((value) => {
+        updateAttribute(orderByAttributeName, value);
+    }, [ orderByAttributeName ]);
+
+    const onOrderChange = useCallback((value) => {
+        updateAttribute(orderAttributeName, value);
+    }, [ orderAttributeName ]);
+
+    if (!condition) return null;
+
+    if (render) {
+        return render({
+            orderBy,
+            order,
+            onOrderByChange,
+            onOrderChange,
+            orderByOptions,
+            orderOptions,
+            disabled,
+            orderByAttributeName,
+            orderAttributeName,
+        });
+    }
 
     return (
         <>
-            {
-                hasSources && (
-                    <RadioControl
-                        label={dataSourceLabel}
-                        selected={dataSource}
-                        options={sourcesList}
-                        onChange={onDataSourceChange}
-                    />
-                )
-            }
-
-            {
-                hasQueries && (
-                    <RadioControl
-                        label={queryTypeLabel}
-                        selected={queryType}
-                        options={queriesList}
-                        onChange={onQueryTypeChange}
-                    />
-                )
-            }
+            <SelectControl
+                label="Order By"
+                value={orderBy}
+                options={orderByOptions}
+                onChange={onOrderByChange}
+                disabled={disabled}
+            />
+
+            <SelectControl
+                label="Order"
+                value={order}
+                options={orderOptions}
+                onChange={onOrderChange}
+                disabled={disabled}
+            />
+
+            <Divider />
         </>
-    )
-}
+    );
+});
+
+DataQueryControls.QueryType = QueryType;
+DataQueryControls.TaxonomySelect = TaxonomySelect;
+DataQueryControls.CuratedPosts = CuratedPosts;
+DataQueryControls.NumberOfPosts = NumberOfPosts;
+DataQueryControls.OrderBy = OrderByControl;

package/src/components/EmptyBlockAppender.js

@@ -7,11 +7,12 @@ export const EmptyBlockAppender = (props) => {
         showAppender = true,
         title = 'This block is empty',
         text = 'Use the "+" button below to add content blocks',
+        isLight = false,
         className,
     } = props;
 
     return (
-        <div className={classNames('empty-block-appender', className)}>
+        <div className={classNames('empty-block-appender', className, { 'empty-block-appender--light': isLight })}>
             <div className="empty-block-appender__content">
                 {
                     showIcon && (

package/src/hooks/useAccordionItem.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useMemo, useRef } from '@wordpress/element';
 
 export const useAccordionItem = ({
     itemId,
@@ -7,26 +7,26 @@ export const useAccordionItem = ({
     contentSelector,
     heightObserverDeps = []
 }) => {
-    const isActive = itemId === activeItemId;
+    const isActive = useMemo(() => itemId === activeItemId, [ itemId, activeItemId ]);
     const blockRef = useRef(null);
 
-    const openContent = () => {
+    const openContent = useCallback(() => {
         const content = blockRef.current?.querySelector(contentSelector);
         if (content) {
             content.style.maxHeight = content.scrollHeight + 'px';
         }
-    };
+    }, [ contentSelector ]);
 
-    const closeContent = () => {
+    const closeContent = useCallback(() => {
         const content = blockRef.current?.querySelector(contentSelector);
         if (content) {
             content.style.maxHeight = 0;
         }
-    };
+    }, [ contentSelector ]);
 
-    const toggleItem = () => {
+    const toggleItem = useCallback(() => {
         setActiveItemId(isActive ? null : itemId);
-    };
+    }, [ isActive, setActiveItemId ]);
 
     useEffect(() => {
         if (isActive) {

package/src/hooks/useParentBlock.js

@@ -20,8 +20,7 @@ export const useParentBlock = (
             return null;
         }
 
-        // Return the selected block if it already matches the target type
-        if (currentBlock?.name === parentBlockName) {
+        if (currentBlock.clientId === blockClientIdToLimitSearch && currentBlock.name === parentBlockName) {
             return currentBlock;
         }
 

package/src/hooks/useTabs.js

@@ -1,4 +1,4 @@
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, select } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useLayoutEffect, useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
@@ -50,12 +50,40 @@ export const useTabs = (tabsClientId, tabItemName) => {
 
     const parentBlock = useParentBlock(tabItemName, tabsClientId);
 
+    /**
+     * Sets the active tab when focus/selection is inside any inner block of a tab item.
+     * For example, if the user selects text inside a tab, that tab should become active.
+     */
     useLayoutEffect(() => {
         if (parentBlock) {
             setActiveItemId(parentBlock.clientId);
         }
     }, [ parentBlock ]);
 
+    /**
+     * Sets the active tab when the tab-item block itself is selected in the editor sidebar.
+     * Ensures the selected tab-item belongs directly to this Tabs block (avoids conflicts if there are multiple Tabs on the page).
+     */
+    useLayoutEffect(() => {
+        // Early return if there is no selected block, or if the selected block is not a tab-item.
+        const isTabItemBlockSelected = selectedBlock && selectedBlock.name === tabItemName;
+
+        if (!isTabItemBlockSelected) {
+            return;
+        }
+
+        // Get the parent block clientId for this selected tab-item block.
+        const selectedTabItemBlock = selectedBlock;
+        const tabItemParentId = select('core/block-editor').getBlockRootClientId(selectedTabItemBlock.clientId);
+
+        // Only activate the tab if it is a direct child of this Tabs instance.
+        const isDirectChildOfCurrentTabs = tabItemParentId === tabsClientId;
+
+        if (isDirectChildOfCurrentTabs) {
+            setActiveItemId(selectedTabItemBlock.clientId);
+        }
+    }, [ selectedBlock, tabItemName, tabsClientId ]);
+
     const createTab = (blockName, attributes = {}, position = tabsCount) => {
         const newTab = createBlock(blockName, attributes);
         insertBlock(newTab, position, tabsClientId);

package/src/styles/_empty-block-appender.scss

@@ -1,8 +1,11 @@
 .empty-block-appender {
     --button-color: #192f5f;
-    --button-border: var(--button-color);
-    --button-hover-color: var(--wp-admin-theme-color);
-    --button-hover-border: var(--wp-admin-theme-color);
+    --button-color-hover: var(--wp-admin-theme-color);
+    --button-border: #192f5f;
+    --button-border-hover: var(--wp-admin-theme-color);
+    --button-background: transparent;
+    --button-background-hover: transparent;
+    --text-color: #192f5f;
     --tr: .3s;
 
     display: flex;
@@ -11,14 +14,27 @@
     justify-content: center;
     padding: 32px;
 
+    &--light {
+        --button-color: #fff;
+        --button-color-hover: #192f5f;
+        --button-border: #fff;
+        --button-border-hover: #fff;
+        --button-background: transparent;
+        --button-background-hover: #fff;
+        --text-color: #fff;
+    }
+
     &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         text-align: center;
     }
 
     &__icon {
         width: 48px;
         height:48px;
-        color: var(--button-color);
+        color: var(--text-color);
         margin-bottom: 16px;
     }
 
@@ -26,14 +42,14 @@
         font-size: 32px;
         font-weight: 600;
         line-height: 110%;
-        color: var(--button-color);
+        color: var(--text-color);
         margin-bottom: 0.5rem;
     }
 
     &__text {
         font-size: 1rem;
         font-weight: 400;
-        color: var(--button-color);
+        color: var(--text-color);
         margin-bottom: 1.5rem;
     }
 
@@ -49,7 +65,7 @@
             border: 2px solid var(--button-border) !important;
             box-shadow: none;
             border-radius: 10px;
-            background: transparent !important;
+            background: var(--button-background) !important;
             padding: 12px 24px;
             min-height: 50px;
             min-width: 200px;
@@ -59,10 +75,11 @@
 
             &:hover,
             &:focus {
-                color: var(--button-hover-color);
-                border-color: var(--button-hover-border) !important;
+                color: var(--button-color-hover) !important;
+                border-color: var(--button-border-hover) !important;
                 outline: none !important;
                 box-shadow: none !important;
+                background: var(--button-background-hover) !important;
             }
 
             &::before,