@secretstache/wordpress-gutenberg 0.2.5 → 0.3.1

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

@@ -10,16 +10,17 @@
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     text-align: center; }
 
-.block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container.has-background {
-  transition: background 1s, color 1s; }
-
-.block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-list-appender.wp-block:only-child p {
-  margin-top: 0;
-  margin-bottom: 0; }
-
-.block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-list-appender.wp-block:only-child,
-.block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > p.wp-block:only-child {
-  margin: 2rem 0; }
+.block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container {
+  margin-bottom: 3rem;
+  padding-bottom: 100px; }
+  .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container.has-background {
+    transition: background 1s, color 1s; }
+  .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-list-appender.wp-block:only-child p {
+    margin-top: 0;
+    margin-bottom: 0; }
+  .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-list-appender.wp-block:only-child,
+  .block-editor__container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > p.wp-block:only-child {
+    margin: 2rem 0; }
 
 .block-editor__container .block-editor-block-types-list > [role=presentation] {
   justify-content: center; }
@@ -142,3 +143,36 @@
   padding: 12px !important;
   box-shadow: inset 0 0 0 1px #1e1e1e;
   color: #1e1e1e; }
+
+.block-editor__container .root-block-appender {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - var(--content-padding) * 2); }
+  .block-editor__container .root-block-appender::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 50%;
+    bottom: -30px;
+    transform: translateX(-50%);
+    z-index: 1;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s;
+    width: max-content;
+    max-width: 200px;
+    white-space: nowrap;
+    background: #000;
+    border-radius: 2px;
+    color: #f0f0f0;
+    font-size: 12px;
+    line-height: 1.4;
+    padding: 4px 8px;
+    text-align: center;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; }
+  .block-editor__container .root-block-appender:hover::after {
+    visibility: visible;
+    opacity: 1; }
+  .block-editor__container .root-block-appender ~ .block-list-appender.wp-block {
+    display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "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/MediaPicker.js

@@ -0,0 +1,179 @@
+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 BCImageRenderer = ({
+    imageId,
+    imageUrl,
+    onImageClick,
+    onRemoveClick,
+    onSelectClick,
+}) => {
+    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
+            >
+                Remove Image
+            </Button>
+        </>
+    ) : (
+        <Button
+            variant="secondary"
+            onClick={onSelectClick}
+            className="bc-select-btn"
+        >
+            Select Image
+        </Button>
+    );
+};
+
+export const BCVideoRenderer = ({
+    videoId,
+    videoUrl,
+    onRemoveClick,
+    onSelectClick,
+}) => {
+    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
+            >
+                Remove Video
+            </Button>
+        </>
+    ) : (
+        <Button
+            variant="secondary"
+            onClick={onSelectClick}
+            className="bc-select-btn"
+        >
+            Select Video
+        </Button>
+    );
+};
+
+export const BCAnimationRenderer = ({
+    animationFileId,
+    animationFileUrl,
+    animationFileName,
+    onSelectClick,
+    onRemoveClick,
+}) => {
+    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}
+            >
+                Remove File
+            </Button>
+        </>
+    ) : (
+        <Button variant="secondary" onClick={onSelectClick}>
+            Select File
+        </Button>
+    )
+};
+
+// TODO: find better name
+export const BCMediaPicker = ({
+    mediaId,
+    mediaUrl,
+    mediaFileName = '',
+    onSelect,
+    onRemove,
+    type = MEDIA_TYPES.IMAGE,
+    ...other
+}) => {
+    if (type === MEDIA_TYPES.IMAGE) {
+        return (
+            <MediaUploadCheck>
+                <MediaUpload
+                    onSelect={onSelect}
+                    allowedTypes={['image', 'image/svg+xml']}
+                    accept="image/*"
+                    value={mediaId}
+                    render={({ open }) => (
+                        <BCImageRenderer
+                            imageId={mediaId}
+                            imageUrl={mediaUrl}
+                            onImageClick={open}
+                            onSelectClick={open}
+                            onRemoveClick={onRemove}
+                        />
+                    )}
+                    { ...other }
+                />
+            </MediaUploadCheck>
+        );
+    } else if (type === MEDIA_TYPES.VIDEO) {
+        return (
+            <MediaUploadCheck>
+                <MediaUpload
+                    onSelect={onSelect}
+                    allowedTypes={['video']}
+                    value={mediaId}
+                    render={({ open }) => (
+                        <BCVideoRenderer
+                            videoId={mediaId}
+                            videoUrl={mediaUrl}
+                            onSelectClick={open}
+                            onRemoveClick={onRemove}
+                        />
+                    )}
+                    { ...other }
+                />
+            </MediaUploadCheck>
+        );
+    } else if (type === MEDIA_TYPES.ANIMATION) {
+        return (
+            <MediaUploadCheck>
+                <MediaUpload
+                    onSelect={onSelect}
+                    allowedTypes={['application/json', 'text/plain', 'application/lottie']}
+                    value={mediaId}
+                    render={({ open }) => (
+                        <BCAnimationRenderer
+                            animationFileId={mediaId}
+                            animationFileUrl={mediaUrl}
+                            animationFileName={mediaFileName}
+                            onSelectClick={open}
+                            onRemoveClick={onRemove}
+                        />
+                    )}
+                    {...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 { BCMediaPicker } from './MediaPicker.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 && (
+                    <BCMediaPicker
+                        mediaId={mediaId}
+                        mediaUrl={mediaUrl}
+                        mediaFileName={mediaFileName}
+                        type={selectedMediaType}
+                        onSelect={mediaOnSelect}
+                        onRemove={mediaOnRemove}
+                    />
+                )
+            }
+        </>
+    );
+}