@secretstache/wordpress-gutenberg 0.2.5 → 0.3.1

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 });
+};
+

package/src/index.js

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './hooks';
+
+export * from './utils';
+
+import './styles/styles.scss';

package/src/styles/_animation-file-renderer.scss

@@ -0,0 +1,11 @@
+.bc-animation-block-json-file {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.bc-remove-btn {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    display: flex;
+}

package/src/styles/_editor-base.scss

@@ -0,0 +1,56 @@
+.editor-styles-wrapper {
+    .edit-post-visual-editor__post-title-wrapper {
+        margin-top: 10px !important;
+        margin-bottom: 10px !important;
+
+        h1.editor-post-title {
+            margin: 0;
+            border-bottom: 1px dashed #ddd;
+            padding-bottom: 10px;
+            font-weight: normal;
+            font-size: 30px !important;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+            text-align: center;
+        }
+    }
+
+    .block-editor-block-list__layout.is-root-container {
+        margin-bottom: 3rem;
+        padding-bottom: 100px;
+
+        &.has-background {
+            transition:
+                background 1s,
+                color 1s;
+        }
+
+        & > .block-list-appender.wp-block:only-child {
+            p {
+                margin-top: 0;
+                margin-bottom: 0;
+            }
+        }
+
+        & > .block-list-appender.wp-block:only-child,
+        & > p.wp-block:only-child {
+            margin: 2rem 0;
+        }
+
+    }
+}
+
+.block-editor-block-types-list>[role=presentation] {
+    justify-content: center;
+}
+
+.components-base-control {
+    .block-editor-url-input {
+        input.block-editor-url-input__input {
+            width: 100%;
+        }
+    }
+}
+
+.components-range-control__mark-label {
+    margin-top: 7px !important;
+}

package/src/styles/_icon-picker.scss

@@ -0,0 +1,4 @@
+.svg-container {
+    width: 100%;
+    height: auto;
+}

package/src/styles/_image-wrapper.scss

@@ -0,0 +1,59 @@
+.bc-image-wrapper {
+    position: relative;
+    height: auto;
+    align-self: start;
+
+    &__actions {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: center;
+        gap: 20px;
+        padding: 5px 15px;
+        z-index: 20;
+
+        @media screen and (max-width: 768px) {
+            gap: 15px;
+        }
+    }
+
+    &__btn {
+        font-size: 14px !important;
+        backdrop-filter: blur(16px) saturate(180%);
+        background: hsla(0, 0%, 100%, 0.75);
+        flex-grow: 1;
+        justify-content: center;
+        max-width: 130px;
+
+        @media screen and (max-width: 768px) {
+            padding: 5px;
+        }
+    }
+
+    &__overlay {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10;
+        background: rgba(255, 255, 255, 0.3);
+        backdrop-filter: blur(3px);
+    }
+
+    &:hover {
+        .bc-image-wrapper__actions {
+            display: flex;
+        }
+
+        .bc-image-wrapper__overlay {
+            display: block;
+        }
+    }
+}

package/src/styles/_link-control.scss

@@ -0,0 +1,6 @@
+.bc-url-input {
+    input {
+        width: 100%;
+        border: 1px solid #949494;
+    }
+}

package/src/styles/_media-picker.scss

@@ -0,0 +1,20 @@
+.bc-selected-media-wrapper {
+    max-width: 200px;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.3);
+}
+
+.bc-selected-media {
+    width: 100%;
+
+    &--image {
+        max-height: 300px;
+    }
+}
+
+.bc-select-btn,
+.bc-remove-btn {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    display: flex;
+}

package/src/styles/_new-child-btn.scss

@@ -0,0 +1,15 @@
+.bc-add-new-child-btn {
+    display: flex;
+    margin: 20px auto !important;
+    align-items: center;
+    flex-direction: column;
+    height: 50px;
+    justify-content: center;
+    width: 100%;
+    user-select: text;
+    font-family: inherit;
+    font-size: 100%;
+    padding: 12px !important;
+    box-shadow: inset 0 0 0 1px #1e1e1e;
+    color: #1e1e1e;
+}

package/src/styles/_responsive-spacing.scss

@@ -0,0 +1,30 @@
+.bc-responsive-spacing-tab {
+    &:last-child {
+        margin-bottom: 2rem;
+    }
+}
+
+.bc-spacing-control-wrapper {
+    margin-bottom: 35px;
+}
+
+.bc-spacing-range-control {
+    padding: 0 6px;
+
+    .components-base-control__label {
+        margin-left: -9px;
+    }
+
+    .components-range-control__root {
+        .components-range-control__wrapper {
+            margin-bottom: 0;
+
+            .components-range-control__marks {
+                .components-range-control__mark-label {
+                    left: 8px !important;
+                    margin-top: 7px !important;
+                }
+            }
+        }
+    }
+}

package/src/styles/_root-block-appender.scss

@@ -0,0 +1,40 @@
+.root-block-appender {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: calc(100% - var(--content-padding) * 2);
+
+    &::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;
+    }
+
+    &:hover::after {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    // hide the default appender
+    & ~ .block-list-appender.wp-block {
+        display: none;
+    }
+}

package/src/styles/_sortable-select.scss

@@ -0,0 +1,5 @@
+.react-select {
+    &__input {
+        box-shadow: none !important;
+    }
+}

package/src/styles/styles.scss

@@ -0,0 +1,12 @@
+.block-editor__container {
+    @import "editor-base";
+    @import "animation-file-renderer";
+    @import "icon-picker";
+    @import "image-wrapper";
+    @import "link-control";
+    @import "media-picker";
+    @import "sortable-select";
+    @import "responsive-spacing";
+    @import "new-child-btn";
+    @import "root-block-appender";
+}

package/src/utils/attributes.js

@@ -0,0 +1,224 @@
+export const linkControlAttribute = {
+    linkLabel: {
+        type: 'string',
+        default: '',
+    },
+    linkSource: {
+        type: 'string',
+        default: '#',
+    },
+    linkIsOpenInNewTab: {
+        type: 'boolean',
+        default: false,
+    },
+};
+
+export const mediaAttribute = {
+    media: {
+        type: 'object',
+        default: {
+            id: null,
+            url: '',
+            alt: '',
+            filename: '',
+        },
+    },
+};
+
+export const contentAttribute = {
+    title: {
+        type: 'string',
+        default: 'Title',
+    },
+    description: {
+        type: 'string',
+        default: 'Description',
+    },
+};
+
+export const animationAttribute = {
+    animationFile: {
+        type: 'object',
+        default: {
+            id: null,
+            url: null,
+            name: null,
+            filename: null,
+            mime: null,
+        },
+    },
+    isAnimationLooped: {
+        type: 'boolean',
+        default: true,
+    },
+};
+
+export const curatedPostsAttribute = {
+    curatedPosts: {
+        type: 'array',
+        default: [],
+        items: {
+            type: 'object',
+            properties: {
+                value: {
+                    type: 'number'
+                },
+                label: {
+                    type: 'string'
+                }
+            }
+        }
+    }
+};
+
+export const curatedCategoriesAttribute = {
+    curatedCategories: {
+        type: 'array',
+        default: [],
+        items: {
+            type: 'object',
+            properties: {
+                value: {
+                    type: 'number'
+                },
+                label: {
+                    type: 'string'
+                }
+            }
+        }
+    }
+};
+
+export const numberOfPostsAttribute = {
+    numberOfPosts: {
+        type: 'number',
+        default: 5,
+    },
+};
+
+export const getDataQueryAttributes = (
+    sourcesList,
+    queriesList,
+    hasCuratedPosts = true,
+    hasCuratedCategories = false,
+    hasNumberOfPosts = false,
+) => {
+    let dataSourceConfig = {
+        type: 'string'
+    };
+
+    if (sourcesList && sourcesList?.length > 0) {
+        dataSourceConfig.enum = sourcesList;
+        dataSourceConfig.default = sourcesList[0].value;
+    }
+
+    let queryTypeConfig = {
+        type: 'string'
+    };
+
+    if (queriesList && queriesList?.length > 0) {
+        queryTypeConfig.enum = [
+            ...queriesList
+        ];
+        queryTypeConfig.default = queriesList[0].value;
+    }
+
+    return {
+        dataSource: dataSourceConfig,
+        queryType: queryTypeConfig,
+        ...(hasCuratedPosts ? curatedPostsAttribute : {}),
+        ...(hasCuratedCategories ? curatedCategoriesAttribute : {}),
+        ...(hasNumberOfPosts ? numberOfPostsAttribute : {}),
+    };
+};
+
+/**
+ * Returns the base background attribute object with configurable default background color and media type.
+ *
+ * @param {string} [defaultBackgroundMediaType=''] - The default background media type.
+ * @param {Object} defaultBackgroundColor - The background color configuration.
+ * @param {string} defaultBackgroundColor.value - The hex value of the background color.
+ * @param {string} defaultBackgroundColor.slug - The slug of the background color.
+ * @returns {Object} The base background attribute object.
+ */
+export const getBaseBackgroundAttributes = (
+    defaultBackgroundMediaType = '',
+    defaultBackgroundColor = { value: '', slug: '' },
+) => {
+    return {
+        isIncludeBackgroundMedia: {
+            type: 'boolean',
+            default: false,
+        },
+        backgroundMediaType: {
+            type: 'string',
+            default: '',
+        },
+        backgroundColor: {
+            type: 'object',
+            default: defaultBackgroundColor,
+        },
+        backgroundImage: {
+            type: 'object',
+            default: {
+                id: null,
+                url: '',
+            },
+        },
+        backgroundVideo: {
+            type: 'object',
+            default: {
+                id: null,
+                url: '',
+            },
+        },
+        isIncludeOverlay: {
+            type: 'boolean',
+            default: false,
+        },
+    };
+};
+
+export const spacingAttribute = {
+    spacing: {
+        type: 'object',
+        default: {
+            margin: {
+                top: -1,
+                bottom: -1,
+            },
+            padding: {
+                top: -1,
+                bottom: -1,
+            }
+        },
+    },
+}
+
+export const responsiveSpacingAttribute = {
+    spacing: {
+        type: 'object',
+        default: {
+            desktop: {
+                margin: {
+                    top: -1,
+                    bottom: -1,
+                },
+                padding: {
+                    top: -1,
+                    bottom: -1,
+                }
+            },
+            mobile: {
+                margin: {
+                    top: -1,
+                    bottom: -1,
+                },
+                padding: {
+                    top: -1,
+                    bottom: -1,
+                }
+            }
+        }
+    }
+}

package/src/utils/constants.js

@@ -0,0 +1,17 @@
+export const QUERY_TYPES = {
+    LATEST: 'latest',
+    CURATED: 'curated',
+    BY_CATEGORY: 'by_category'
+};
+
+export const MEDIA_TYPES = {
+    IMAGE: 'image',
+    VIDEO: 'video',
+    ANIMATION: 'animation',
+};
+
+export const MEDIA_TYPE_LABELS = {
+    [MEDIA_TYPES.IMAGE]: 'Image',
+    [MEDIA_TYPES.VIDEO]: 'Video',
+    [MEDIA_TYPES.ANIMATION]: 'Animation',
+};