@secretstache/wordpress-gutenberg 0.3.0 → 0.3.2

package/src/components/ResponsiveSpacingControl.js

@@ -0,0 +1,74 @@
+import { TabPanel } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+import { SpacingControl } from './SpacingControl.js';
+
+export const ResponsiveSpacingControl = ({
+     max = 6,
+     min = -1,
+     hasMargin = true,
+     hasPadding = true,
+     onChange,
+     value = { desktop: { margin: {}, padding: {} }, mobile: { margin: {}, padding: {} } },
+ }) => {
+    const handleDesktopChange = useCallback(
+        (desktop) => {
+            onChange({
+                desktop: desktop,
+                mobile: value.mobile,
+            });
+        },
+        [ onChange, value.mobile ],
+    );
+
+    const handleMobileChange = useCallback(
+        (mobile) => {
+            onChange({
+                mobile: mobile,
+                desktop: value.desktop,
+            });
+        },
+        [ onChange, value.desktop ],
+    );
+
+    return (
+        <TabPanel
+            className="bc-responsive-spacing-control"
+            tabs={[
+                { name: 'desktop', title: 'Desktop', className: 'bc-responsive-spacing-tab bc-responsive-spacing-tab--desktop' },
+                { name: 'mobile', title: 'Mobile', className: 'bc-responsive-spacing-tab bc-responsive-spacing-tab--mobile' },
+            ]}
+        >
+            {(tab) => {
+                switch (tab.name) {
+                    case 'desktop':
+                        return (
+                            <SpacingControl
+                                key="desktop"
+                                hasMargin={hasMargin}
+                                hasPadding={hasPadding}
+                                max={max}
+                                min={min}
+                                value={value.desktop}
+                                onChange={handleDesktopChange}
+                            />
+                        );
+                    case 'mobile':
+                        return (
+                            <SpacingControl
+                                key="mobile"
+                                hasMargin={hasMargin}
+                                hasPadding={hasPadding}
+                                max={max}
+                                min={min}
+                                value={value.mobile}
+                                onChange={handleMobileChange}
+                            />
+                        );
+                    default:
+                        return null;
+                }
+            }}
+        </TabPanel>
+    );
+};

package/src/components/SortableSelect.js

@@ -0,0 +1,60 @@
+import ReactSelectAsync from 'react-select/async';
+import ReactSelect from 'react-select';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import { components } from 'react-select';
+
+const SortableMultiValue = SortableElement(props => {
+    const onMouseDown = e => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const innerProps = { ...props.innerProps, onMouseDown };
+
+    return <components.MultiValue {...props} innerProps={innerProps} />;
+});
+
+const SortableMultiValueLabel = SortableHandle(props => <components.MultiValueLabel {...props} />);
+
+export const SortableSelectAsync = (props) => {
+    const Select = SortableContainer(ReactSelectAsync);
+
+    return (
+        <Select
+            isMulti
+            useDragHandle
+            components={{
+                MultiValue: SortableMultiValue,
+                MultiValueLabel: SortableMultiValueLabel,
+            }}
+            getHelperDimensions={({ node }) => node.getBoundingClientRect()}
+            axis="xy"
+            cacheOptions
+            defaultOptions
+            className="react-select-container"
+            classNamePrefix="react-select"
+            placeholder="Select Items"
+            {...props}
+        />
+    );
+};
+
+export const SortableSelect = (props) => {
+    const Select = SortableContainer(ReactSelect);
+
+    return (
+        <Select
+            isMulti
+            useDragHandle
+            components={{
+                MultiValue: SortableMultiValue,
+                MultiValueLabel: SortableMultiValueLabel,
+            }}
+            getHelperDimensions={({ node }) => node.getBoundingClientRect()}
+            axis="xy"
+            className="react-select-container"
+            classNamePrefix="react-select"
+            placeholder="Select Items"
+            {...props}
+        />
+    );
+};

package/src/components/SpacingControl.js

@@ -0,0 +1,119 @@
+import { RangeControl, Tooltip } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+const generateMarks = (min, max) => [
+    { value: min, label: min === -1 ? 'Default' : min.toString() },
+    ...Array.from({ length: max - min }, (_, i) => ({
+        value: min + i + 1,
+        label: '',
+    })),
+];
+
+const Control = ({ label, max, min, value, onChange, disabled, tooltip, ...other }) => (
+    <div className="bc-spacing-control-wrapper">
+        <Tooltip
+            text={tooltip}
+            placement="bottom"
+            delay={0}
+        >
+            <div className="bc-spacing-control-content">
+                <RangeControl
+                    className="bc-spacing-range-control"
+                    label={label}
+                    value={value}
+                    disabled={disabled}
+                    onChange={onChange}
+                    min={min}
+                    max={max}
+                    marks={generateMarks(min, max)}
+                    resetFallbackValue={-1}
+                    help="Use -1 for default settings."
+                    renderTooltipContent={(value) => {
+                        if (value === -1) return 'Default';
+
+                        return value;
+                    }}
+                    {...other}
+                />
+            </div>
+        </Tooltip>
+    </div>
+);
+
+export const SpacingControl = ({
+    hasMargin = true,
+    hasPadding = true,
+    disabledMargin = { top: false, bottom: false },
+    disabledPadding = { top: false, bottom: false },
+    marginTooltips = { top: '', bottom: '' },
+    paddingTooltips = { top: '', bottom: '' },
+    max = 6,
+    min = -1,
+    onChange,
+    value = { margin: {}, padding: {} },
+}) => {
+    const handleChange = useCallback(
+        (type, direction) => (newValue) => {
+            onChange({
+                ...value,
+                [type]: {
+                    ...value[type],
+                    [direction]: newValue,
+                },
+            });
+        },
+        [ onChange, value ],
+    );
+
+    return (
+        <>
+            {hasMargin && (
+                <>
+                    <Control
+                        label="Top Margin"
+                        max={max}
+                        min={min}
+                        value={value.margin.top ?? min}
+                        onChange={handleChange('margin', 'top')}
+                        disabled={disabledMargin.top}
+                        tooltip={marginTooltips.top}
+                    />
+
+                    <Control
+                        label="Bottom Margin"
+                        max={max}
+                        min={min}
+                        value={value.margin.bottom ?? min}
+                        onChange={handleChange('margin', 'bottom')}
+                        disabled={disabledMargin.bottom}
+                        tooltip={marginTooltips.bottom}
+                    />
+                </>
+            )}
+
+            {hasPadding && (
+                <>
+                    <Control
+                        label="Top Padding"
+                        max={max}
+                        min={min}
+                        value={value.padding.top ?? min}
+                        onChange={handleChange('padding', 'top')}
+                        disabled={disabledPadding.top}
+                        tooltip={paddingTooltips.top}
+                    />
+
+                    <Control
+                        label="Bottom Padding"
+                        max={max}
+                        min={min}
+                        value={value.padding.bottom ?? min}
+                        onChange={handleChange('padding', 'bottom')}
+                        disabled={disabledPadding.bottom}
+                        tooltip={paddingTooltips.bottom}
+                    />
+                </>
+            )}
+        </>
+    );
+};

package/src/components/index.js

@@ -0,0 +1,12 @@
+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'

package/src/hooks/index.js

@@ -0,0 +1,11 @@
+export { usePreviewToggle } from './usePreviewToggle.js';
+export { useSlider } from './useSlider.js';
+export { useParentBlock } from './useParentBlock.js';
+export { useColorChange } from './useColorChange';
+export { useThemeColors } from './useThemeColors';
+export { useUpdateAttribute } from './useUpdateAttribute';
+export { useDataQuery } from './useDataQuery';
+export { useAccordionItem } from './useAccordionItem.js';
+export { useBlockTabsData } from './useBlockTabsData.js';
+export { useAllowedBlocks } from './useAllowedBlocks.js';
+export { useChildBlockPosition } from './useChildBlockPosition.js';

package/src/hooks/useAccordionItem.js

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from '@wordpress/element';
+
+export const useAccordionItem = (itemId, activeItemId, setActiveItemId, contentSelector) => {
+    const isActive = itemId === activeItemId;
+    const blockRef = useRef(null);
+
+    const openContent = () => {
+        const content = blockRef.current?.querySelector(contentSelector);
+        if (content) {
+            content.style.maxHeight = content.scrollHeight + 'px';
+        }
+    };
+
+    const closeContent = () => {
+        const content = blockRef.current?.querySelector(contentSelector);
+        if (content) {
+            content.style.maxHeight = 0;
+        }
+    };
+
+    // TODO: rename to toggleItem
+    const toggleContent = () => {
+        setActiveItemId(isActive ? null : itemId);
+    };
+
+    useEffect(() => {
+        if (isActive) {
+            openContent();
+        } else {
+            closeContent();
+        }
+    }, [isActive]);
+
+    useEffect(() => {
+        if (!isActive || !blockRef.current) return;
+
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.contentBoxSize) {
+                    openContent();
+                }
+            }
+        });
+
+        resizeObserver.observe(blockRef.current);
+
+        return () => resizeObserver.disconnect();
+    }, [isActive]);
+
+    return { blockRef, toggleContent, isActive };
+};

package/src/hooks/useAllowedBlocks.js

@@ -0,0 +1,25 @@
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+export const useAllowedBlocks = (blockName, excludedBlocks) => {
+    const allBlocks = useSelect(
+        (select) => select('core/blocks').getBlockTypes(),
+        [],
+    );
+
+    return useMemo(() => allBlocks
+            ?.filter((block) => {
+                const blockHasParent = !!block?.parent;
+                const blockHasAncestor = !!block?.ancestor;
+
+                const isParent = block?.parent && block.parent.includes(blockName);
+                const isAncestor = block?.ancestor && block.ancestor.includes(blockName);
+
+                return !excludedBlocks.includes(block.name)
+                    && (!blockHasParent || isParent)
+                    && (!blockHasAncestor || isAncestor);
+            })
+            ?.map((block) => block.name),
+        [allBlocks, excludedBlocks, blockName],
+    );
+};

package/src/hooks/useBlockTabsData.js

@@ -0,0 +1,90 @@
+import { useSelect, useDispatch } 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';
+
+export const useBlockTabsData = (clientId, itemBlockName) => {
+    const { insertBlock } = useDispatch(blockEditorStore);
+
+    const {
+        childBlocks,
+        innerBlocksCount,
+        selectedBlock,
+        selectedBlockClientId,
+        parentBlockId,
+        getBlockRootClientId,
+    } = useSelect(
+        (select) => {
+            const {
+                getBlock,
+                getBlockCount,
+                getSelectedBlock,
+                getSelectedBlockClientId,
+                getBlockRootClientId,
+            } = select(blockEditorStore);
+
+            return {
+                childBlocks: getBlock(clientId)?.innerBlocks || [],
+                innerBlocksCount: getBlockCount(clientId),
+                selectedBlock: getSelectedBlock(),
+                selectedBlockClientId: getSelectedBlockClientId(),
+                parentBlockId: getBlockRootClientId(getSelectedBlockClientId()),
+                getBlockRootClientId,
+            };
+        },
+        [clientId]
+    );
+
+    const [activeItemId, setActiveItemId] = useState(null);
+
+    useLayoutEffect(() => {
+        if (childBlocks.length > 0 && !activeItemId) {
+            setActiveItemId(childBlocks[0].clientId);
+        }
+    }, [childBlocks, activeItemId]);
+
+    const parentItem = useParentBlock(selectedBlock?.clientId, clientId);
+
+    useLayoutEffect(() => {
+        if (parentItem) {
+            setActiveItemId(parentItem.clientId);
+        } else if (clientId === parentBlockId && selectedBlock?.clientId) {
+            setActiveItemId(selectedBlock.clientId);
+        }
+    }, [selectedBlock, parentItem, clientId, parentBlockId]);
+
+    // TODO: export
+    const addNewChildBlock = (blockName, attributes = {}, position = innerBlocksCount) => {
+        const newBlock = createBlock(blockName, attributes);
+        insertBlock(newBlock, position, clientId);
+
+        return newBlock;
+    };
+
+    // TODO: rename/export
+    const handleAddNewItem = () => {
+        const newItem = addNewChildBlock(itemBlockName);
+        setActiveItemId(newItem.clientId);
+    };
+
+    // TODO: make more flexible
+    const AddNewTabButton = ({ label = 'Add new tab' }) => (
+        <Button className="add-new-child-btn" icon={plusIcon} label={label} onClick={handleAddNewItem} />
+    );
+
+    return {
+        childBlocks,
+        innerBlocksCount,
+        selectedBlock,
+        selectedBlockClientId,
+        parentBlockId,
+        activeItemId,
+        setActiveItemId,
+        getBlockRootClientId,
+        AddNewTabButton,
+    };
+};

package/src/hooks/useChildBlockPosition.js

@@ -0,0 +1,31 @@
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Hook to get the position of a child block within its parent block.
+ *
+ * This hook uses the `useSelect` hook from `@wordpress/data` to retrieve information about a specific block
+ * and its position within its parent block. It returns an object containing the block, the parent block, and
+ * the position of the child block within the parent block's inner blocks array.
+ *
+ * @param {string} childClientId - The client ID of the child block.
+ * @returns {Object} An object containing the block, the parent block, and the position of the child block:
+ *                   - {Object|null} block: The block object for the child block.
+ *                   - {Object|null} parentBlock: The block object for the parent block.
+ *                   - {number} position: The index position of the child block within the parent block's inner blocks array,
+ *                                        or -1 if the parent block or child block is not found.
+ *
+ */
+export const useChildBlockPosition = (childClientId) => {
+    return useSelect(
+        (select) => {
+            const block = select(blockEditorStore).getBlock(childClientId);
+            const parentClientId = select(blockEditorStore).getBlockRootClientId(childClientId);
+            const parentBlock = parentClientId ? select(blockEditorStore).getBlock(parentClientId) : null;
+            const position = parentBlock ? parentBlock.innerBlocks.findIndex((block) => block.clientId === childClientId) : -1;
+
+            return { block, parentBlock, position };
+        },
+        [ childClientId ],
+    );
+};

package/src/hooks/useColorChange.js

@@ -0,0 +1,12 @@
+export const useColorChange = (colors, setAttributes) => (colorValue, property) => {
+    const selectedColor = colors.find(color => color.color === colorValue);
+
+    setAttributes({
+        [property]: selectedColor
+            ? {
+                value: colorValue,
+                slug: selectedColor.slug,
+            }
+            : null,
+    });
+};

package/src/hooks/useDataQuery.js

@@ -0,0 +1,45 @@
+import { useSelect } from '@wordpress/data';
+import { QUERY_TYPES } from '../utils';
+
+export const useDataQuery = (props) => {
+    const {
+        getPostType,
+        queryType,
+        curatedPostsIds = [],
+
+        categoriesTaxonomy,
+        curatedCategoriesIds = [],
+
+        numberOfPosts = -1, // all posts
+        extraQueryArgs,
+        dependencies,
+    } = props;
+
+    return useSelect((select) => {
+        const queryArgs = {
+            per_page: numberOfPosts,
+            order: 'desc',
+            orderby: 'date',
+            _embed: true,
+            ...extraQueryArgs,
+        };
+
+        if (queryType === QUERY_TYPES.BY_CATEGORY && categoriesTaxonomy && curatedCategoriesIds?.length > 0) {
+            queryArgs[categoriesTaxonomy] = curatedCategoriesIds.join(',');
+        } else if (queryType === QUERY_TYPES.CURATED && curatedPostsIds?.length > 0) {
+            queryArgs['include'] = curatedPostsIds;
+            queryArgs['orderby'] = 'include';
+        }
+
+        const postType = getPostType();
+
+        const postsToShow = select('core').getEntityRecords('postType', postType, queryArgs);
+        const isResolving = select('core/data').isResolving('core', 'getEntityRecords', ['postType', postType, queryArgs]);
+        const isLoading = isResolving || postsToShow === undefined;
+
+        return {
+            postsToShow,
+            isLoading,
+        };
+    }, dependencies);
+}

package/src/hooks/useParentBlock.js

@@ -0,0 +1,57 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Hook to find a parent block of a specific type, scoped within a certain root block.
+ *
+ * @param {string} parentBlockName - The block type name to search for as a parent.
+ * @param {string} blockClientIdToLimitSearch - The clientId of the block to limit the search within
+ * @returns {Object|null} The matching parent block, or null if none is found.
+ */
+export const useParentBlock = (
+    parentBlockName,
+    blockClientIdToLimitSearch,
+) => {
+    return useSelect((select) => {
+        const { getBlock, getBlockParents, getSelectedBlock } = select('core/block-editor');
+
+        const currentBlock = getSelectedBlock();
+
+        if (!currentBlock) {
+            return null;
+        }
+
+        // Get the list of parent blocks for the current block, from down to top
+        const parentBlocks = getBlockParents(currentBlock.clientId, true);
+
+        // Check if the blockClientIdToLimitSearch is located in the hierarchy of parents blocks
+        // of the current(selected) block, i.e. check if it's in the scope of searching
+        if (!parentBlocks.includes(blockClientIdToLimitSearch)) {
+            return null;
+        }
+
+        // Return the selected block if it already matches the target type
+        if (currentBlock?.name === parentBlockName) {
+            return currentBlock;
+        }
+
+        if (parentBlocks?.length) {
+            // Traverse the list of parent blocks to find the target parent block type
+            for (let i = 0; i < parentBlocks.length; i++) {
+                const parentBlockId = parentBlocks[i];
+                const parentBlock = getBlock(parentBlockId);
+
+                if (parentBlock?.name === parentBlockName) {
+                    return parentBlock;
+                }
+
+                // Stop searching if we reach the top of the scope
+                if (blockClientIdToLimitSearch && parentBlockId === blockClientIdToLimitSearch) {
+                    break;
+                }
+            }
+        }
+
+        // No matching parent found within the constraints.
+        return null;
+    }, [ parentBlockName, blockClientIdToLimitSearch ]);
+};

package/src/hooks/usePreviewToggle.js

@@ -0,0 +1,32 @@
+import { useState } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+
+const defaultLabel = 'Enable Preview';
+const defaultHelpText = 'Please check this option to see how the block will actually look and behave on the frontend.';
+
+export const usePreviewToggle = (props = {}) => {
+    const {
+        disabled = false,
+        label = defaultLabel,
+        helpText = defaultHelpText,
+    } = props;
+
+    const [ isPreview, setIsPreview ] = useState(false);
+
+    const onChange = () => setIsPreview(prev => !prev);
+
+    const renderPreviewToggle = () => (
+        <ToggleControl
+            label={label}
+            help={helpText}
+            checked={isPreview}
+            onChange={onChange}
+            disabled={disabled}
+        />
+    );
+
+    return {
+        isPreview,
+        renderPreviewToggle
+    };
+};

package/src/hooks/useSlider.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from '@wordpress/element';
+
+export const useSlider = ({ isEnabled, setupSlider, dependencies = [] }) => {
+    const sliderElRef = useRef(null);
+    const sliderInstance = useRef(null);
+
+    useEffect(() => {
+        if (isEnabled && sliderElRef?.current) {
+            sliderInstance.current = setupSlider(sliderElRef.current);
+        }
+
+        return () => {
+            if (sliderInstance.current) {
+                sliderInstance.current?.destroy();
+                sliderInstance.current = null;
+            }
+        };
+    }, [isEnabled, ...dependencies]);
+
+    return {
+        sliderElRef,
+        sliderInstance: sliderInstance.current,
+    };
+};

package/src/hooks/useThemeColors.js

@@ -0,0 +1,19 @@
+import { useSelect } from '@wordpress/data';
+
+export const useThemeColors = (allowedColors = []) => {
+    return useSelect((select) => {
+        const { getSettings } = select('core/block-editor');
+        const allColors = getSettings()?.colors || [];
+
+        if (allowedColors.length > 0) {
+            const colorMap = new Map(allColors.map(color => [color.slug, color]));
+
+            return allowedColors
+                .map(slug => colorMap.get(slug))
+                .filter(Boolean);
+        }
+
+        return allColors;
+    }, [allowedColors]);
+};
+

package/src/hooks/useUpdateAttribute.js

@@ -0,0 +1,4 @@
+export const useUpdateAttribute = (setAttributes) => (attributeName, value) => {
+    setAttributes({ [attributeName]: value });
+};
+