@secretstache/wordpress-gutenberg 0.3.0 → 0.3.2

package/build/{index.css → styles.css}

@@ -128,6 +128,8 @@
     .block-editor__container .bc-spacing-range-control .components-range-control__root .components-range-control__wrapper .components-range-control__marks .components-range-control__mark-label {
       left: 8px !important;
       margin-top: 7px !important; }
+  .block-editor__container .bc-spacing-range-control .components-range-control__root .components-base-control__help {
+    margin-left: -11px; }
 
 .block-editor__container .bc-add-new-child-btn {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",
@@ -14,7 +14,8 @@
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [
-    "build"
+    "build",
+    "src"
   ],
   "type": "module",
   "scripts": {
@@ -50,18 +51,19 @@
     "rollup-plugin-postcss": "^4.0.2"
   },
   "dependencies": {
+    "classnames": "^2.5.1",
     "es-toolkit": "^1.12.0",
     "react-select": "5.7.5",
     "react-sortable-hoc": "2.0.0",
     "slugify": "^1.6.6"
   },
   "peerDependencies": {
-    "@wordpress/dom-ready": "^4.3.0",
     "@wordpress/api-fetch": "^6.52.0",
     "@wordpress/block-editor": "^12.22.0",
     "@wordpress/blocks": "^12.34.0",
     "@wordpress/components": "^27.2.0",
     "@wordpress/data": "^9.24.0",
+    "@wordpress/dom-ready": "^4.3.0",
     "@wordpress/element": "^5.32.0",
     "@wordpress/hooks": "^3.57.0",
     "@wordpress/icons": "^9.45.0",

package/src/components/ColorPaletteControl.js

@@ -0,0 +1,24 @@
+import { BaseControl, ColorPalette } from '@wordpress/components';
+import { useThemeColors, useColorChange } from '../hooks';
+
+export const ColorPaletteControl = ({
+    label = 'Color',
+    value,
+    attributeName,
+    setAttributes,
+    allowedColors,
+}) => {
+    const colors = useThemeColors(allowedColors);
+    const onColorChange = useColorChange(colors, setAttributes);
+
+    return (
+        <BaseControl label={label}>
+            <ColorPalette
+                colors={colors}
+                value={value}
+                disableCustomColors={true}
+                onChange={(colorValue) => onColorChange(colorValue, attributeName)}
+            />
+        </BaseControl>
+    );
+};

package/src/components/DataQueryControls.js

@@ -0,0 +1,51 @@
+import { RadioControl } from '@wordpress/components';
+
+// TODO: add support of curated posts, categories; consider merging with the useDataQuery hook
+export const DataQueryControls = (props) => {
+    const {
+        dataSourceLabel = 'Data Source',
+        dataSource,
+        onDataSourceChange,
+
+        queryTypeLabel = 'Query',
+        queryType,
+        onQueryTypeChange,
+
+        settings,
+    } = props;
+
+    const sourcesList = settings
+        .filter((source) => source?.value && source?.label)
+        .map((source) => ({ label: source.label, value: source.value }));
+
+    const queriesList = settings.find((source) => source.value === dataSource)?.queries || [];
+
+    const hasSources = sourcesList && sourcesList?.length > 0;
+    const hasQueries = queriesList && queriesList?.length > 0;
+
+    return (
+        <>
+            {
+                hasSources && (
+                    <RadioControl
+                        label={dataSourceLabel}
+                        selected={dataSource}
+                        options={sourcesList}
+                        onChange={onDataSourceChange}
+                    />
+                )
+            }
+
+            {
+                hasQueries && (
+                    <RadioControl
+                        label={queryTypeLabel}
+                        selected={queryType}
+                        options={queriesList}
+                        onChange={onQueryTypeChange}
+                    />
+                )
+            }
+        </>
+    )
+}

package/src/components/DividersControl.js

@@ -0,0 +1,74 @@
+import { SelectControl, ToggleControl } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+
+export const DividersControl = ({
+    topDividers = [],
+    bottomDividers = [],
+    value = { topDivider: '', bottomDivider: '', isIncludeLine: false },
+    hasLine = true,
+    onChange,
+}) => {
+    const hasTop = topDividers && topDividers?.length > 0;
+    const hasBottom = bottomDividers && bottomDividers?.length > 0;
+
+    const [ topDivider, setTopDivider ] = useState(value?.topDivider || '');
+    const [ bottomDivider, setBottomDivider ] = useState(value?.bottomDivider || '');
+    const [ isIncludeLine, setIsIncludeLine ] = useState(value?.isIncludeLine || false);
+
+    useEffect(() => {
+        onChange({
+            topDivider,
+            bottomDivider,
+            isIncludeLine,
+        });
+    }, [ topDivider, bottomDivider, isIncludeLine ]);
+
+    return (
+        <>
+            {
+                hasTop && (
+                    <SelectControl
+                        label="Top Divider"
+                        value={topDivider}
+                        onChange={(topDivider) => setTopDivider(topDivider)}
+                        options={[
+                            {
+                                label: 'None',
+                                value: ''
+                            },
+                            ...topDividers,
+                        ]}
+
+                    />
+                )
+            }
+
+            {
+                hasBottom && (
+                    <SelectControl
+                        label="Bottom Divider"
+                        value={bottomDivider}
+                        onChange={(bottomDivider) => setBottomDivider(bottomDivider)}
+                        options={[
+                            {
+                                label: 'None',
+                                value: ''
+                            },
+                            ...bottomDividers,
+                        ]}
+                    />
+                )
+            }
+
+            {
+                hasLine && (
+                    <ToggleControl
+                        label="Include Vertical Line leading from this block to the next"
+                        checked={isIncludeLine}
+                        onChange={() => setIsIncludeLine((prevState) => !prevState)}
+                    />
+                )
+            }
+        </>
+    );
+}

package/src/components/IconPicker.js

@@ -0,0 +1,73 @@
+import {
+    MediaPlaceholder,
+    MediaUpload,
+    MediaUploadCheck,
+} from '@wordpress/block-editor';
+import { Button, Icon } from '@wordpress/components';
+import { edit as editIcon, trash as trashIcon } from '@wordpress/icons';
+
+export const IconPicker = ({ imageId, imageUrl, imageAlt, svgCode, onSelect, onRemove }) => {
+    const hasImage = imageId && imageUrl;
+    const isSvg = hasImage && svgCode;
+
+    return (
+        <MediaUploadCheck>
+            <MediaUpload
+                onSelect={onSelect}
+                allowedTypes={['image']}
+                value={imageId}
+                render={({ open }) => {
+                    return hasImage ? (
+                        <div className="bc-image-wrapper">
+                            {hasImage && (
+                                isSvg ? (
+                                    <div
+                                        className="svg-container"
+                                        dangerouslySetInnerHTML={{ __html: svgCode }}
+                                    />
+                                ) : (
+                                    <img src={imageUrl} alt={imageAlt || 'icon'} />
+                                )
+                            )}
+
+                            <div className="bc-image-wrapper__actions">
+                                <Button
+                                    className="bc-image-wrapper__btn bc-image-wrapper__replace-btn"
+                                    type="button"
+                                    onClick={open}
+                                >
+                                    <Icon
+                                        icon={editIcon}
+                                        size={20}
+                                        className="bc-image-wrapper__btn-icon"
+                                    />
+                                </Button>
+
+                                <Button
+                                    className="bc-image-wrapper__btn bc-image-wrapper__remove-btn"
+                                    type="button"
+                                    onClick={onRemove}
+                                >
+                                    <Icon
+                                        icon={trashIcon}
+                                        size={20}
+                                        className="bc-image-wrapper__btn-icon"
+                                    />
+                                </Button>
+                            </div>
+
+                            <div className="bc-image-wrapper__overlay" />
+                        </div>
+                    ) : (
+                        <MediaPlaceholder
+                            icon="format-image"
+                            onSelect={onSelect}
+                            allowedTypes={['image', 'image/svg+xml']}
+                            labels={{ title: 'Icon Image' }}
+                        />
+                    );
+                }}
+            />
+        </MediaUploadCheck>
+    );
+};

package/src/components/ImageActions.js

@@ -0,0 +1,59 @@
+import { MediaUpload, MediaUploadCheck, MediaPlaceholder } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+
+export const ImageActions = ({
+    imageId,
+    imageUrl,
+    imageAlt,
+    placeholder = false,
+    onSelectImage,
+    onRemoveImage,
+    className = '',
+}) => {
+    const hasImage = imageId && imageUrl;
+
+    return (
+        <MediaUploadCheck>
+            <MediaUpload
+                onSelect={onSelectImage}
+                allowedTypes={['image']}
+                value={imageId}
+                render={({ open }) => {
+                    return hasImage ? (
+                        <div className={`bc-image-wrapper ${className}`}>
+                            <img src={imageUrl} alt={imageAlt} onClick={open} />
+                            <div className="bc-image-wrapper__actions">
+                                <Button
+                                    className="bc-image-wrapper__btn bc-image-wrapper__replace-btn"
+                                    type="button"
+                                    onClick={open}
+                                >
+                                    Replace
+                                </Button>
+                                <Button
+                                    className="bc-image-wrapper__btn bc-image-wrapper__remove-btn"
+                                    type="button"
+                                    onClick={onRemoveImage}
+                                >
+                                    Remove
+                                </Button>
+                            </div>
+                            <div className="bc-image-wrapper__overlay" />
+                        </div>
+                    ) : placeholder ? (
+                        <MediaPlaceholder
+                            className="media-placeholder"
+                            icon="format-image"
+                            onSelect={onSelectImage}
+                            allowedTypes={['image']}
+                            labels={{
+                                title: 'Image',
+                                instructions: 'Upload an image file or pick one from your media library.',
+                            }}
+                        />
+                    ) : null;
+                }}
+            />
+        </MediaUploadCheck>
+    );
+};

package/src/components/LinkControl.js

@@ -0,0 +1,30 @@
+import { BaseControl, CheckboxControl } from '@wordpress/components';
+import { URLInput } from '@wordpress/block-editor';
+import { useUpdateAttribute } from '../hooks';
+
+export const LinkControl = ({
+    url = { value: '#', attrName: 'linkSource' },
+    isOpenInNewTab = { value: false, attrName: 'linkIsOpenInNewTab'},
+    setAttributes,
+    label = 'Source',
+}) => {
+    const updateAttribute = useUpdateAttribute(setAttributes);
+
+    return (
+        <>
+            <BaseControl label={label}>
+                <URLInput
+                    className="bc-url-input"
+                    value={url.value}
+                    onChange={(newUrl) => setAttributes({ [url.attrName]: newUrl })}
+                />
+            </BaseControl>
+
+            <CheckboxControl
+                checked={isOpenInNewTab.value}
+                label="Open in a new tab"
+                onChange={(newIsOpenInNewTab) => setAttributes({ [isOpenInNewTab.attrName]: newIsOpenInNewTab })}
+            />
+        </>
+    );
+};

package/src/components/MediaControl.js

@@ -0,0 +1,192 @@
+import { Button, Icon as WPIcon } from '@wordpress/components';
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import { page as pageIcon } from '@wordpress/icons';
+
+import { MEDIA_TYPES } from '../utils/index.js';
+
+export const ImageRenderer = ({
+    imageId,
+    imageUrl,
+    onImageClick,
+    onRemoveClick,
+    onSelectClick,
+    selectButtonLabel = "Select Image",
+    removeButtonLabel = "Remove Image",
+}) => {
+    return imageId && imageUrl ? (
+        <>
+            <div className="bc-selected-media-wrapper">
+                <img
+                    src={imageUrl}
+                    className="bc-selected-media bc-selected-media--image"
+                    alt="Selected Image"
+                    onClick={onImageClick}
+                />
+            </div>
+
+            <Button
+                className="bc-remove-btn"
+                onClick={onRemoveClick}
+                isSecondary
+                isDestructive
+            >
+                {removeButtonLabel}
+            </Button>
+        </>
+    ) : (
+        <Button
+            variant="secondary"
+            onClick={onSelectClick}
+            className="bc-select-btn"
+        >
+            {selectButtonLabel}
+        </Button>
+    );
+};
+
+export const VideoRenderer = ({
+    videoId,
+    videoUrl,
+    onRemoveClick,
+    onSelectClick,
+    selectButtonLabel = "Select Video",
+    removeButtonLabel = "Remove Video",
+}) => {
+    return videoId && videoUrl ? (
+        <>
+            <div className="bc-selected-media-wrapper">
+                <video src={videoUrl} className="bc-selected-media bc-selected-media--video" controls />
+            </div>
+
+            <Button
+                className="bc-remove-btn"
+                onClick={onRemoveClick}
+                isSecondary
+                isDestructive
+            >
+                {removeButtonLabel}
+            </Button>
+        </>
+    ) : (
+        <Button
+            variant="secondary"
+            onClick={onSelectClick}
+            className="bc-select-btn"
+        >
+            {selectButtonLabel}
+        </Button>
+    );
+};
+
+export const AnimationRenderer = ({
+    animationFileId,
+    animationFileUrl,
+    animationFileName,
+    onSelectClick,
+    onRemoveClick,
+    selectButtonLabel = "Select File",
+    removeButtonLabel = "Remove File",
+}) => {
+    return animationFileId && animationFileUrl ? (
+        <>
+            <div className="bc-animation-block-json-file" onClick={onSelectClick}>
+                <WPIcon icon={pageIcon} size={36} />
+                <span>{animationFileName}</span>
+            </div>
+            <Button
+                variant="secondary"
+                isDestructive
+                className="bc-remove-btn"
+                onClick={onRemoveClick}
+            >
+                {removeButtonLabel}
+            </Button>
+        </>
+    ) : (
+        <Button variant="secondary" onClick={onSelectClick}>
+            {selectButtonLabel}
+        </Button>
+    )
+};
+
+export const MediaControl = ({
+    mediaId,
+    mediaUrl,
+    mediaFileName = '',
+    onSelect,
+    onRemove,
+    type = MEDIA_TYPES.IMAGE,
+    selectButtonLabel,
+    removeButtonLabel,
+    ...other
+}) => {
+    if (type === MEDIA_TYPES.IMAGE) {
+        return (
+            <MediaUploadCheck>
+                <MediaUpload
+                    onSelect={onSelect}
+                    allowedTypes={['image', 'image/svg+xml']}
+                    accept="image/*"
+                    value={mediaId}
+                    render={({ open }) => (
+                        <ImageRenderer
+                            imageId={mediaId}
+                            imageUrl={mediaUrl}
+                            onImageClick={open}
+                            onSelectClick={open}
+                            onRemoveClick={onRemove}
+                            selectButtonLabel={selectButtonLabel}
+                            removeButtonLabel={removeButtonLabel}
+                        />
+                    )}
+                    {...other}
+                />
+            </MediaUploadCheck>
+        );
+    } else if (type === MEDIA_TYPES.VIDEO) {
+        return (
+            <MediaUploadCheck>
+                <MediaUpload
+                    onSelect={onSelect}
+                    allowedTypes={['video']}
+                    value={mediaId}
+                    render={({ open }) => (
+                        <VideoRenderer
+                            videoId={mediaId}
+                            videoUrl={mediaUrl}
+                            onSelectClick={open}
+                            onRemoveClick={onRemove}
+                            selectButtonLabel={selectButtonLabel}
+                            removeButtonLabel={removeButtonLabel}
+                        />
+                    )}
+                    {...other}
+                />
+            </MediaUploadCheck>
+        );
+    } else if (type === MEDIA_TYPES.ANIMATION) {
+        return (
+            <MediaUploadCheck>
+                <MediaUpload
+                    onSelect={onSelect}
+                    allowedTypes={['application/json', 'text/plain', 'application/lottie']}
+                    value={mediaId}
+                    render={({ open }) => (
+                        <AnimationRenderer
+                            animationFileId={mediaId}
+                            animationFileUrl={mediaUrl}
+                            animationFileName={mediaFileName}
+                            onSelectClick={open}
+                            onRemoveClick={onRemove}
+                            selectButtonLabel={selectButtonLabel}
+                            removeButtonLabel={removeButtonLabel}
+                        />
+                    )}
+                    {...other}
+                />
+            </MediaUploadCheck>
+        );
+    } else {
+        throw new Error('Unrecognized media type.');
+    }
+};

package/src/components/MediaTypeControl.js

@@ -0,0 +1,54 @@
+import { useState } from '@wordpress/element';
+import { SelectControl } from '@wordpress/components';
+
+import { MediaControl } from './MediaControl.js';
+import { MEDIA_TYPE_LABELS } from '../utils/index.js';
+
+export const MediaTypeControl = (props) => {
+    const {
+        mediaTypes = [],
+        mediaId,
+        mediaUrl,
+        mediaFileName = '',
+        mediaOnSelect,
+        mediaOnRemove,
+    } = props;
+
+    const [selectedMediaType, setSelectedMediaType] = useState(mediaTypes?.[0]);
+
+    const mediaTypesOptions = mediaTypes
+        ?.filter((type) => MEDIA_TYPE_LABELS[type]) // Ensure it's an allowed type
+        ?.map((type) => ({
+            label: MEDIA_TYPE_LABELS[type],
+            value: type,
+        }));
+
+    return (
+        <>
+            {
+                // TODO: add custom label
+                mediaTypes && (
+                    <SelectControl
+                        label="Media Type"
+                        value={selectedMediaType}
+                        onChange={(mediaType) => setSelectedMediaType(mediaType)}
+                        options={mediaTypesOptions}
+                    />
+                )
+            }
+
+            {
+                selectedMediaType && (
+                    <MediaControl
+                        mediaId={mediaId}
+                        mediaUrl={mediaUrl}
+                        mediaFileName={mediaFileName}
+                        type={selectedMediaType}
+                        onSelect={mediaOnSelect}
+                        onRemove={mediaOnRemove}
+                    />
+                )
+            }
+        </>
+    );
+}

package/src/components/ResourcesWrapper.js

@@ -0,0 +1,46 @@
+import { Notice, Placeholder, Spinner } from '@wordpress/components';
+
+const EmptyNotice = ({
+    message = 'No resources were found matching your criteria. Please try to adjust the query.'
+}) => (
+    <Notice status="info" isDismissible={false}>
+        <p>{message}</p>
+    </Notice>
+);
+
+const LoadingSpinner = () => <Spinner className="bc-spinner" />;
+
+const PlaceholderContent = ({
+    icon = 'info-outline',
+    instructions = 'Please configure the block in the sidebar.',
+    ...restProps
+}) => (
+    <Placeholder
+        icon={icon}
+        instructions={instructions}
+        {...restProps}
+    />
+);
+
+export const ResourcesWrapper = ({
+    isLoading,
+    isEmpty,
+    isPlaceholder,
+    emptyMessage,
+    placeholderProps = {},
+    children,
+}) => {
+    if (isLoading) {
+        return <LoadingSpinner />;
+    }
+
+    if (isEmpty) {
+        return <EmptyNotice message={emptyMessage} />;
+    }
+
+    if (isPlaceholder) {
+        return <PlaceholderContent {...placeholderProps} />;
+    }
+
+    return children;
+};