@secretstache/wordpress-gutenberg 0.5.13 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.5.13",
+  "version": "0.6.0",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",
@@ -15,7 +15,8 @@
   "module": "build/index.js",
   "exports": {
     ".": "./build/index.js",
-    "./build/styles.css": "./build/styles.css"
+    "./build/editor-canvas.css": "./build/editor-canvas.css",
+    "./build/editor-ui.css": "./build/editor-ui.css"
   },
   "files": [
     "build",
@@ -23,8 +24,10 @@
   ],
   "type": "module",
   "scripts": {
-    "build": "rollup -c",
-    "start": "rollup -c -w",
+    "build": "yarn build:js && yarn build:css",
+    "build:js": "vite build",
+    "build:css": "sass src/styles/editor-canvas.scss build/editor-canvas.css --style=compressed --no-source-map && sass src/styles/editor-ui.scss build/editor-ui.css --style=compressed --no-source-map",
+    "dev": "vite",
     "prepublishOnly": "yarn build"
   },
   "devDependencies": {
@@ -33,10 +36,7 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/runtime": "^7.24.4",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@vitejs/plugin-react": "^4.7.0",
     "@wordpress/api-fetch": "^7.24.0",
     "@wordpress/block-editor": "^14.19.0",
     "@wordpress/blocks": "^14.13.0",
@@ -45,14 +45,15 @@
     "@wordpress/dom-ready": "^4.24.0",
     "@wordpress/element": "^6.24.0",
     "@wordpress/hooks": "^4.24.0",
-    "@wordpress/icons": "^10.24.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^9.1.3",
     "node-sass": "^9.0.0",
     "postcss": "^8.4.38",
-    "rollup": "^4.16.4",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sass": "^1.90.0",
+    "vite": "^7.0.6",
+    "vite-plugin-externals": "^0.6.2"
   },
   "dependencies": {
     "classnames": "^2.5.1",
@@ -70,7 +71,6 @@
     "@wordpress/dom-ready": "^4.24.0",
     "@wordpress/element": "^6.24.0",
     "@wordpress/hooks": "^4.24.0",
-    "@wordpress/icons": "^10.24.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package/src/components/DataQueryControls.jsx

@@ -0,0 +1,365 @@
+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';
+
+import { SortableSelectAsync } from './SortableSelect.jsx';
+import { decodeHtmlEntities, loadSelectOptions } from '../utils/index.js';
+
+const DataQueryContext = createContext({});
+
+/**
+ * Main DataQueryControls component that provides context to children
+ */
+export const DataQueryControls = memo(({
+    attributes,
+    setAttributes,
+    children,
+}) => {
+    const updateAttribute = useCallback((name, value) => {
+        setAttributes({ [name]: value });
+    }, []);
+
+    const contextValue = useMemo(() => ({
+        attributes,
+        setAttributes,
+        updateAttribute,
+    }), [ attributes ]);
+
+    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 />
+        </>
+    );
+});
+
+/**
+ * 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 (
+        <>
+            <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 → EmptyBlockAppender.jsx}

@@ -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/components/{IconPicker.js → IconPicker.jsx}

@@ -4,7 +4,8 @@ import {
     MediaUploadCheck,
 } from '@wordpress/block-editor';
 import { Button, Icon } from '@wordpress/components';
-import { edit as editIcon, trash as trashIcon } from '@wordpress/icons';
+
+import { editIcon, trashIcon } from '../icons/index.jsx';
 
 export const IconPicker = ({ imageId, imageUrl, imageAlt, svgCode, onSelect, onRemove }) => {
     const hasImage = imageId && imageUrl;

package/src/components/{MediaControl.js → MediaControl.jsx}

@@ -1,7 +1,7 @@
 import { BaseControl, Button, FocalPointPicker, Icon as WPIcon } from '@wordpress/components';
 import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
-import { page as pageIcon } from '@wordpress/icons';
 
+import { pageIcon } from '../icons/index.jsx';
 import { MEDIA_TYPE } from '../utils/index.js';
 
 export const ImageRenderer = ({

package/src/components/{MediaTypeControl.js → MediaTypeControl.jsx}

@@ -1,7 +1,7 @@
 import { useMemo } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 
-import { MediaControl } from './MediaControl.js';
+import { MediaControl } from './MediaControl.jsx';
 import { MEDIA_TYPE_LABEL, MEDIA_TYPE } from '../utils/index.js';
 
 export const MediaTypeControl = (props) => {

package/src/components/{MediaWithFocalPointControl.js → MediaWithFocalPointControl.jsx}

@@ -1,7 +1,7 @@
 import { BaseControl, FocalPointPicker } from '@wordpress/components';
 import { useCallback, memo } from '@wordpress/element';
 
-import { MediaControl } from './MediaControl.js';
+import { MediaControl } from './MediaControl.jsx';
 import { MEDIA_TYPE } from '../utils/index.js';
 
 /**

package/src/components/{ResponsiveSpacingControl.js → ResponsiveSpacingControl.jsx}

@@ -1,7 +1,7 @@
 import { TabPanel } from '@wordpress/components';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 
-import { SpacingControl } from './SpacingControl.js';
+import { SpacingControl } from './SpacingControl.jsx';
 
 const getTabName = (deviceType = 'Desktop') => {
     return deviceType === 'Desktop' ? 'desktop' : 'mobile';

package/src/components/{SpacingControl.js → SpacingControl.jsx}

@@ -1,6 +1,7 @@
 import { RangeControl, Tooltip } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { sidesBottom, sidesTop } from '@wordpress/icons';
+
+import { sidesBottomIcon, sidesTopIcon } from '../icons/index.jsx';
 
 const generateMarks = (min, max) => [
     { value: min, label: min === -1 ? 'Default' : min.toString() },
@@ -77,7 +78,7 @@ export const SpacingControl = ({
                         onChange={handleChange('margin', 'top')}
                         disabled={disabledMargin.top}
                         tooltip={marginTooltips.top}
-                        afterIcon={sidesTop}
+                        afterIcon={sidesTopIcon}
                         withInputField={false}
                     />
 
@@ -89,7 +90,7 @@ export const SpacingControl = ({
                         onChange={handleChange('margin', 'bottom')}
                         disabled={disabledMargin.bottom}
                         tooltip={marginTooltips.bottom}
-                        afterIcon={sidesBottom}
+                        afterIcon={sidesBottomIcon}
                         withInputField={false}
                     />
                 </>
@@ -105,7 +106,7 @@ export const SpacingControl = ({
                         onChange={handleChange('padding', 'top')}
                         disabled={disabledPadding.top}
                         tooltip={paddingTooltips.top}
-                        afterIcon={sidesTop}
+                        afterIcon={sidesTopIcon}
                         withInputField={false}
                     />
 
@@ -117,7 +118,7 @@ export const SpacingControl = ({
                         onChange={handleChange('padding', 'bottom')}
                         disabled={disabledPadding.bottom}
                         tooltip={paddingTooltips.bottom}
-                        afterIcon={sidesBottom}
+                        afterIcon={sidesBottomIcon}
                         withInputField={false}
                     />
                 </>

package/src/components/index.js

@@ -1,16 +1,16 @@
-export { ColorPaletteControl } from './ColorPaletteControl';
-export { IconPicker } from './IconPicker';
-export { ImageActions } from './ImageActions';
-export { LinkControl } from './LinkControl';
-export { ImageRenderer, VideoRenderer, AnimationRenderer, MediaControl } from './MediaControl.js';
-export { SortableSelect, SortableSelectAsync } from './SortableSelect';
-export { DataQueryControls } from './DataQueryControls.js';
-export { SpacingControl } from './SpacingControl.js';
-export { ResponsiveSpacingControl } from './ResponsiveSpacingControl.js';
-export { ResourcesWrapper } from './ResourcesWrapper.js';
-export { DividersControl } from './DividersControl.js';
-export { MediaTypeControl } from './MediaTypeControl.js';
-export { InsertBlockToolbar } from './InsertBlockToolbar.js';
-export { PreviewControl } from './PreviewControl.js';
-export { EmptyBlockAppender } from './EmptyBlockAppender.js';
-export { MediaWithFocalPointControl } from './MediaWithFocalPointControl.js';
+export { ColorPaletteControl } from './ColorPaletteControl.jsx';
+export { IconPicker } from './IconPicker.jsx';
+export { ImageActions } from './ImageActions.jsx';
+export { LinkControl } from './LinkControl.jsx';
+export { ImageRenderer, VideoRenderer, AnimationRenderer, MediaControl } from './MediaControl.jsx';
+export { SortableSelect, SortableSelectAsync } from './SortableSelect.jsx';
+export { DataQueryControls } from './DataQueryControls.jsx';
+export { SpacingControl } from './SpacingControl.jsx';
+export { ResponsiveSpacingControl } from './ResponsiveSpacingControl.jsx';
+export { ResourcesWrapper } from './ResourcesWrapper.jsx';
+export { DividersControl } from './DividersControl.jsx';
+export { MediaTypeControl } from './MediaTypeControl.jsx';
+export { InsertBlockToolbar } from './InsertBlockToolbar.jsx';
+export { PreviewControl } from './PreviewControl.jsx';
+export { EmptyBlockAppender } from './EmptyBlockAppender.jsx';
+export { MediaWithFocalPointControl } from './MediaWithFocalPointControl.jsx';

package/src/hooks/index.js

@@ -1,11 +1,10 @@
-export { usePreviewControl } from './usePreviewControl.js';
+export { usePreviewControl } from './usePreviewControl.jsx';
 export { useSlider } from './useSlider.js';
 export { useParentBlock } from './useParentBlock.js';
-export { useColorChange } from './useColorChange';
-export { useThemeColors } from './useThemeColors';
-export { useDataQuery } from './useDataQuery';
+export { useThemeColors } from './useThemeColors.js';
+export { useDataQuery } from './useDataQuery.js';
 export { useAccordionItem } from './useAccordionItem.js';
-export { useTabs } from './useTabs.js';
+export { useTabs } from './useTabs.jsx';
 export { useAllowedBlocks } from './useAllowedBlocks.js';
 export { useChildBlockPosition } from './useChildBlockPosition.js';
 export { useFilterBlocks } from './useFilterBlocks.js';

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/{usePreviewControl.js → usePreviewControl.jsx}

@@ -1,5 +1,5 @@
 import { useCallback, useState } from '@wordpress/element';
-import { PreviewControl } from '../components/PreviewControl.js';
+import { PreviewControl } from '../components/PreviewControl.jsx';
 
 export const usePreviewControl = () => {
     const [ isPreview, setIsPreview ] = useState(false);

package/src/hooks/{useTabs.js → useTabs.jsx}

@@ -2,10 +2,10 @@ 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';
-import { plus as plusIcon } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
 
-import { useParentBlock } from './useParentBlock';
+import { plusIcon } from '../icons/index.jsx';
+import { useParentBlock } from './useParentBlock.js';
 
 export const useTabs = (tabsClientId, tabItemName) => {
     const { insertBlock } = useDispatch(blockEditorStore);