@secretstache/wordpress-gutenberg 0.1.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",
@@ -12,6 +12,10 @@
     "node": ">=20"
   },
   "main": "build/index.js",
+  "module": "build/index.es.js",
+  "files": [
+    "build"
+  ],
   "type": "module",
   "scripts": {
     "build": "rollup -c",
@@ -30,16 +34,23 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@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/element": "^5.32.0",
+    "@wordpress/hooks": "^3.57.0",
     "@wordpress/icons": "^9.45.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-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2"
   },
   "dependencies": {
+    "react-select": "5.7.5",
+    "react-sortable-hoc": "2.0.0",
     "slugify": "^1.6.6"
   },
   "peerDependencies": {
@@ -49,6 +60,7 @@
     "@wordpress/data": "^9.24.0",
     "@wordpress/element": "^5.32.0",
     "@wordpress/icons": "^9.45.0",
+    "@wordpress/hooks": "^3.57.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -57,8 +69,5 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+  ]
 }

package/.editorconfig

@@ -1,18 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.js]
-indent_size = 4
-
-[*.scss]
-indent_size = 4

package/rollup.config.js

@@ -1,40 +0,0 @@
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import babel from '@rollup/plugin-babel';
-import terser from '@rollup/plugin-terser';
-import external from 'rollup-plugin-peer-deps-external';
-
-export default {
-    input: './src/index.js',
-    output: {
-        dir: 'build',
-        format: 'es',
-        exports: 'named',
-        sourcemap: true,
-    },
-    plugins: [
-        external(),
-        babel({
-            babelHelpers: 'runtime',
-            exclude: /node_modules/,
-            presets: [
-                '@babel/preset-env',
-                ['@babel/preset-react', {
-                    runtime: 'automatic',
-                }],
-            ],
-            plugins: [
-                ['@babel/plugin-transform-runtime', {
-                    helpers: true,
-                    regenerator: true,
-                }],
-            ],
-            extensions: ['.js', '.jsx'],
-        }),
-        commonjs({
-            extensions: ['.js', '.jsx'],
-        }),
-        resolve({ extensions: ['.js', '.jsx'] }),
-        terser(),
-    ],
-};

package/src/components/ColorPaletteControl.js

@@ -1,16 +0,0 @@
-import { ColorPalette } from '@wordpress/components';
-import { useThemeColors, useColorChange } from '../utils/index';
-
-export const ColorPaletteControl = ({ allowedColors, colorAttribute, attributeName, setAttributes }) => {
-    const colors = useThemeColors(allowedColors);
-    const onColorChange = useColorChange(colors, setAttributes);
-
-    return (
-        <ColorPalette
-            colors={colors}
-            value={colorAttribute?.value}
-            disableCustomColors={true}
-            onChange={(colorValue) => onColorChange(colorValue, attributeName)}
-        />
-    );
-};

package/src/components/IconPicker.js

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

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

@@ -1,31 +0,0 @@
-import { BaseControl, CheckboxControl } from '@wordpress/components';
-import { URLInput } from '@wordpress/block-editor';
-import { useLinkChange } from '../utils/index';
-
-// TODO: refactor props names
-export const LinkControl = ({
-    buttonSource,
-    isButtonOpenInNewTab,
-    setAttributes,
-}) => {
-    const onLinkChange = useLinkChange(setAttributes);
-
-    return (
-        <>
-            <BaseControl label="Source">
-                <URLInput
-                    className="bc-url-input"
-                    value={buttonSource}
-                    // TODO: this doesn't work if the attribute has a different name
-                    onChange={(newUrl) => onLinkChange(newUrl, 'buttonSource')}
-                />
-            </BaseControl>
-            <CheckboxControl
-                checked={isButtonOpenInNewTab}
-                label="Open in a new tab"
-                onChange={(newIsOpenInNewTab) =>
-                    onLinkChange(newIsOpenInNewTab, 'isButtonOpenInNewTab')}
-            />
-        </>
-    );
-};

package/src/components/MediaPicker.js

@@ -1,130 +0,0 @@
-import { Button } from '@wordpress/components';
-import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
-
-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>
-    );
-};
-
-const MEDIA_TYPES = {
-    IMAGE: 'image',
-    VIDEO: 'video',
-};
-
-export const BCMediaPicker = ({
-    mediaId,
-    mediaUrl,
-    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 {
-        throw new Error('Unrecognized media type.');
-    }
-};

package/src/components/PreviewToggle.js

@@ -1,23 +0,0 @@
-import { ToggleControl } from '@wordpress/components';
-
-export const PreviewToggle = ({ attributes, setAttributes, disabled }) => {
-    const { isPreview } = attributes;
-
-    // TODO: useState instead of attributes
-    const handlePreviewChange = () => {
-        setAttributes({ isPreview: !isPreview });
-    };
-
-    // TODO: <BlockControls> will be duplicated if the parent block has the another one <BlockControls>
-    return (
-        <>
-            <ToggleControl
-                label="Enable Preview"
-                help="Please check this option to see how the block will actually look and behave on the frontend."
-                checked={isPreview}
-                onChange={handlePreviewChange}
-                disabled={disabled}
-            />
-        </>
-    );
-};

package/src/index.js

@@ -1,8 +0,0 @@
-export { ColorPaletteControl } from './components/ColorPaletteControl';
-export { IconPicker } from './components/IconPicker';
-export { ImageActions } from './components/ImageActions';
-export { LinkControl } from './components/LinkControl';
-export { BCImageRenderer, BCVideoRenderer, BCMediaPicker } from './components/MediaPicker';
-export { PreviewToggle } from './components/PreviewToggle';
-
-export * from './utils';