@secretstache/wordpress-gutenberg 0.3.0 → 0.3.2

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,34 @@
+.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;
+                }
+            }
+        }
+
+        .components-base-control__help {
+            margin-left: -11px;
+        }
+    }
+}

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',
+};

package/src/utils/helpers.js

@@ -0,0 +1,175 @@
+import apiFetch from '@wordpress/api-fetch';
+import slugify from 'slugify';
+import classNames from 'classnames';
+
+export const loadSelectOptions = async (inputValue, postType, mapper = null) => {
+    const response = await apiFetch({
+        path: `/wp/v2/${postType}?search=${encodeURIComponent(inputValue)}`,
+    });
+
+    if (mapper) {
+        return response?.map(mapper);
+    } else {
+        return response?.map((post) => {
+            // Create a temporary DOM element to decode HTML entities
+            const tempElement = document.createElement('div');
+            tempElement.innerHTML = post?.title?.rendered;
+
+            return {
+                value: post.id,
+                label: tempElement.textContent || tempElement.innerText || '',
+            };
+        });
+    }
+};
+
+export const getSlug = (name) => slugify(name, {
+    replacement: '-',
+    lower: true,
+    strict: true,
+});
+
+export const cleanSvgString = (svgString) => {
+    if (svgString.startsWith('<?xml')) {
+        const endOfXml = svgString.indexOf('?>');
+
+        if (endOfXml !== -1) {
+            svgString = svgString.substring(endOfXml + 2);
+        }
+    }
+
+    svgString = svgString.trim();
+
+    return svgString;
+};
+
+
+const SVG_MIME_TYPE = 'image/svg+xml';
+
+export const getImage = async (mediaData) => {
+    const isSvg = mediaData?.mime === SVG_MIME_TYPE || mediaData?.mime_type === SVG_MIME_TYPE;
+    const imagePayload = {
+        isSvg,
+        imageUrl: null,
+        svgCode: null,
+        width: mediaData?.width,
+        height: mediaData?.height,
+    };
+
+    if (isSvg) {
+        imagePayload.svgCode = await fetch(mediaData.url).then(response => response.text()).then(cleanSvgString);
+    } else {
+        imagePayload.imageUrl = mediaData?.url;
+    }
+
+    return imagePayload;
+};
+
+export const getPhoneNumber = (phone) => {
+    if (!phone) return '';
+
+    let formatted = phone;
+
+    const pattern = /^\+\d(\d{3})(\d{3})(\d{4})$/;
+    const match = phone.match(pattern);
+
+    if (match) {
+        formatted = `${match[1]}-${match[2]}-${match[3]}`;
+    }
+
+    return formatted;
+};
+
+export const getLocationAddress = (location) => {
+    const {
+        street_number = '',
+        street_name = '',
+        city = '',
+        state_short = '',
+        post_code = '',
+    } = location;
+
+    // Start with the street number and name, trimming to remove extra spaces if one is missing
+    let addressParts = [`${street_number} ${street_name}`.trim()];
+
+    // Add the city with a line break, but only if there is a city name.
+    if (city) {
+        addressParts.push(`<br>${city}`);
+    }
+
+    // Combine state and postal code intelligently, adding only if they exist
+    let statePostalParts = [];
+    if (state_short) statePostalParts.push(state_short);
+    if (post_code) statePostalParts.push(post_code);
+    let statePostal = statePostalParts.join(' ');
+
+    if (statePostal) {
+        // Add a comma only if there's something before this part
+        addressParts.push(`${addressParts.length > 0 ? ', ' : ''}${statePostal}`);
+    }
+
+    return addressParts.join('');
+};
+
+export const decodeHtmlEntities = (text) => {
+    const tempElement = document.createElement('div');
+    tempElement.innerHTML = text;
+
+    return tempElement.textContent || tempElement.innerText || '';
+};
+
+/**
+ * Generates a string of class names for spacing based on the provided spacing object.
+ *
+ * @param {Object} spacing - The spacing object containing margin and padding values.
+ * @param {Object} [desktopPrefixes] - Optional prefixes for desktop spacing classes.
+ * @param {string} [desktopPrefixes.marginTop='mt-'] - Prefix for desktop margin-top class.
+ * @param {string} [desktopPrefixes.marginBottom='mb-'] - Prefix for desktop margin-bottom class.
+ * @param {string} [desktopPrefixes.paddingTop='pt-'] - Prefix for desktop padding-top class.
+ * @param {string} [desktopPrefixes.paddingBottom='pb-'] - Prefix for desktop padding-bottom class.
+ * @param {Object} [mobilePrefixes] - Optional prefixes for mobile spacing classes.
+ * @param {string} [mobilePrefixes.marginTop='sm:mt-'] - Prefix for mobile margin-top class.
+ * @param {string} [mobilePrefixes.marginBottom='sm:mb-'] - Prefix for mobile margin-bottom class.
+ * @param {string} [mobilePrefixes.paddingTop='sm:pt-'] - Prefix for mobile padding-top class.
+ * @param {string} [mobilePrefixes.paddingBottom='sm:pb-'] - Prefix for mobile padding-bottom class.
+ * @returns {string} - A string of class names for the specified spacing.
+ */
+export const getSpacingClasses = (
+    spacing,
+    desktopPrefixes = {
+        marginTop: 'mt-',
+        marginBottom: 'mb-',
+        paddingTop: 'pt-',
+        paddingBottom: 'pb-',
+    },
+    mobilePrefixes = {
+        marginTop: 'sm:mt-',
+        marginBottom: 'sm:mb-',
+        paddingTop: 'sm:pt-',
+        paddingBottom: 'sm:pb-',
+    }
+) => {
+    if (spacing?.desktop || spacing?.mobile) {
+        return classNames({
+            [`${desktopPrefixes.marginTop}${spacing.desktop.margin.top}`]: spacing.desktop.margin.top !== -1,
+            [`${desktopPrefixes.marginBottom}${spacing.desktop.margin.bottom}`]: spacing.desktop.margin.bottom !== -1,
+
+            [`${desktopPrefixes.paddingTop}${spacing.desktop.padding.top}`]: spacing.desktop.padding.top !== -1,
+            [`${desktopPrefixes.paddingBottom}${spacing.desktop.padding.bottom}`]: spacing.desktop.padding.bottom !== -1,
+
+            [`${mobilePrefixes.marginTop}${spacing.mobile.margin.top}`]: spacing.mobile.margin.top !== -1,
+            [`${mobilePrefixes.marginBottom}${spacing.mobile.margin.bottom}`]: spacing.mobile.margin.bottom !== -1,
+
+            [`${mobilePrefixes.paddingTop}${spacing.mobile.padding.top}`]: spacing.mobile.padding.top !== -1,
+            [`${mobilePrefixes.paddingBottom}${spacing.mobile.padding.bottom}`]: spacing.mobile.padding.bottom !== -1,
+        });
+    } else {
+        return classNames({
+            [`${desktopPrefixes.marginTop}${spacing.margin.top}`]: spacing.margin.top !== -1,
+            [`${desktopPrefixes.marginBottom}${spacing.margin.bottom}`]: spacing.margin.bottom !== -1,
+
+            [`${desktopPrefixes.paddingTop}${spacing.padding.top}`]: spacing.padding.top !== -1,
+            [`${desktopPrefixes.paddingBottom}${spacing.padding.bottom}`]: spacing.padding.bottom !== -1,
+        });
+    }
+};