@secretstache/wordpress-gutenberg 0.2.5 → 0.3.1

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

package/src/utils/index.js

@@ -0,0 +1,6 @@
+export * from './rootBlock/index.js';
+export * from './waitForContainer/index.js';
+
+export * from './attributes.js';
+export * from './constants.js';
+export * from './helpers.js';

package/src/utils/rootBlock/README.md

@@ -0,0 +1,71 @@
+## setRootBlock
+
+The `setRootBlock` function configures a root block in the Gutenberg editor and optionally customizes the tooltip text for the root appender.
+This function ensures that only the specified root block can be inserted at the root level.
+Additionally, it allows for optional initialization of the root appender with customizable tooltip text and makes the click on the appender insert the specified block.
+
+### Function Signature
+
+```javascript
+/**
+ * Sets the root block in the Gutenberg editor and optionally customizes the tooltip text for the root appender.
+ *
+ * @param {string} rootBlockName - The name of the block to be set as the root block.
+ * @param {boolean} [initAppender=true] - Flag to indicate whether to initialize the root appender.
+ * @param {string} [appenderTooltipText='Add Row'] - The tooltip text to be displayed on the root appender.
+ */
+export const setRootBlock = (rootBlockName, initAppender = true, appenderTooltipText = 'Add Row');
+```
+
+#### Parameters
+
+- **rootBlockName** (`string`): The name of the block to be set as the root block. This parameter is mandatory.
+- **initAppender** (`boolean`, optional): Flag to indicate whether to initialize the root appender. Default is `true`.
+- **appenderTooltipText** (`string`, optional): The tooltip text to be displayed on the appender. Default is 'Add Row'.
+
+### Usage example
+
+To use the `setRootBlock` function, import it into your script and pass the necessary parameters:
+
+```javascript
+import { setRootBlock } from '@secretstache/wordpress-gutenberg';
+
+setRootBlock('ssm/section-wrapper', true, 'Custom Tooltip Text');
+```
+
+In this example, the function will set `ssm/section-wrapper` as the root block, customize the tooltip text of the appender to 'Custom Tooltip Text', and initialize the root appender.
+
+---
+
+## initRootBlockAppender
+
+The `initRootBlockAppender` function creates a new top-level block appender. It allows to specify the block name to be
+created when the appender is clicked and customize the tooltip text displayed on the appender.
+
+### Function Signature
+
+```javascript
+/**
+ * Creates a new top-level block appender. It allows to specify the block name to be
+ * created when the appender is clicked and customize the tooltip text displayed on the appender.
+ *
+ * @param {string} blockName - The name of the block to be created when the appender is clicked.
+ * @param {string} [tooltipText='Add Row'] - The tooltip text displayed on the appender.
+ */
+export const initRootBlockAppender = (blockName, tooltipText = 'Add Row');
+```
+
+#### Parameters
+
+- **blockName** (`string`): The name of the block to be created when the appender is clicked. This parameter is mandatory.
+- **tooltipText** (`string`, optional): The tooltip text displayed on the appender. Default is 'Add Row'.
+
+### Usage example
+
+In your custom theme, you can import and initialize the function with the desired block name and tooltip text:
+
+```javascript
+import { initRootBlockAppender } from '@secretstache/wordpress-gutenberg';
+
+initRootBlockAppender('ssm/section-wrapper', 'Add Row');
+```

package/src/utils/rootBlock/hideRootBlockForInlineInserter.js

@@ -0,0 +1,13 @@
+export const hideRootBlockForInlineInserter = (blockName) => {
+    // Construct the CSS rule
+    const cssRule = `[id*="-block-${blockName}"] { display: none !important; }`;
+
+    // Create a style element
+    const styleElement = document.createElement('style');
+
+    // Set the CSS rule as the content of the style element
+    styleElement.appendChild(document.createTextNode(cssRule));
+
+    // Append the style element to the document's head
+    document.head.appendChild(styleElement);
+};

package/src/utils/rootBlock/hideRootBlockForOtherBlocks.js

@@ -0,0 +1,32 @@
+import { addFilter } from '@wordpress/hooks';
+import { getBlockTypes } from '@wordpress/blocks';
+import { dispatch } from '@wordpress/data';
+
+export const hideRootBlockForOtherBlocks = (rootBlockName) => {
+    addFilter(
+        'blocks.registerBlockType',
+        'ssm/with-root-block',
+        (blockSettings, blockName) => {
+            const isRootBlock = blockName === rootBlockName;
+            const hasOwnAllowedBlocks = blockSettings?.allowedBlocks;
+
+            if (isRootBlock || hasOwnAllowedBlocks) {
+                return blockSettings;
+            }
+
+            // get all blockTypes
+            blockSettings.allowedBlocks = getBlockTypes()
+                ?.filter((allowedBlock) => {
+                    const isRootBlock = allowedBlock.name === rootBlockName;
+                    const hasParent = !!allowedBlock?.parent;
+
+                    return !isRootBlock && !hasParent;
+                })
+                ?.map(allowedBlock => allowedBlock.name);
+
+            return blockSettings;
+        },
+    );
+
+    dispatch('core/blocks').reapplyBlockTypeFilters();
+};

package/src/utils/rootBlock/index.js

@@ -0,0 +1,4 @@
+export * from './setRootBlock.js';
+export * from './initRootBlockAppender.js';
+export * from './hideRootBlockForInlineInserter.js';
+export * from './hideRootBlockForOtherBlocks.js';

package/src/utils/rootBlock/initRootBlockAppender.js

@@ -0,0 +1,45 @@
+import { createBlock } from '@wordpress/blocks';
+import { dispatch } from '@wordpress/data';
+import domReady from '@wordpress/dom-ready';
+
+import { waitForContainer } from '../waitForContainer/index.js';
+
+const ROOT_CONTAINER_SELECTOR = '.is-root-container';
+
+/**
+ * Initializes the custom button for the root appender.
+ * @param {string} blockName - The name of the block to be created when the appender is clicked.
+ * @param {string} tooltipText - The tooltip text displayed on the appender.
+ */
+const initialize = (blockName, tooltipText) => {
+    const rootContainer = document.querySelector(ROOT_CONTAINER_SELECTOR);
+    if (!rootContainer) {
+        console.error('Root container not found');
+
+        return;
+    }
+
+    const button = document.createElement('button');
+
+    button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"></path></svg>';
+    button.className = 'components-button block-editor-button-block-appender root-block-appender';
+    button.setAttribute('aria-label', tooltipText);
+    button.setAttribute('data-tooltip', tooltipText);
+
+    button.addEventListener('click', () => {
+        dispatch('core/block-editor').insertBlock(createBlock(blockName));
+    });
+
+    rootContainer.prepend(button);
+};
+
+/**
+ * Creates a new top-level block appender. It allows to specify the block name to be
+ * created when the appender is clicked and customize the tooltip text displayed on the appender.
+ *
+ * @param {string} blockName - The name of the block to be created when the appender is clicked.
+ * @param {string} [tooltipText='Add Row'] - The tooltip text displayed on the appender.
+ */
+export const initRootBlockAppender = (blockName, tooltipText = 'Add Row') => {
+    domReady(() => waitForContainer(() => initialize(blockName, tooltipText), ROOT_CONTAINER_SELECTOR));
+};

package/src/utils/rootBlock/setRootBlock.js

@@ -0,0 +1,32 @@
+import { addFilter } from '@wordpress/hooks';
+import { initRootBlockAppender } from './initRootBlockAppender.js';
+
+/**
+ * Sets the root block in the Gutenberg editor and optionally adds the root appender.
+ *
+ * This function registers a filter to override the inserter support for blocks that are not the specified root block name.
+ * It also optionally initializes the root appender with the provided block name and tooltip text, and makes the click
+ * on the appender insert the specified block.
+ *
+ * @param {string} rootBlockName - The name of the block to be set as the root block.
+ * @param {boolean} [initAppender=true] - Flag to indicate whether to initialize the root appender.
+ * @param {string} [appenderTooltipText='Add Row'] - The tooltip text to be displayed on the root appender.
+ */
+export const setRootBlock = (rootBlockName, initAppender = true, appenderTooltipText = 'Add Row') => {
+    addFilter(
+        'blocks.registerBlockType',
+        'ssm/with-root-block',
+        (settings, name) => {
+            // Override the inserter support for blocks that are not the rootBlockName
+            if (name !== rootBlockName && !settings.ancestor) {
+                settings.ancestor = [rootBlockName];
+            }
+
+            return settings;
+        }
+    );
+
+    if (initAppender) {
+        initRootBlockAppender(rootBlockName, appenderTooltipText);
+    }
+}

package/src/utils/waitForContainer/README.md

@@ -0,0 +1,40 @@
+## Overview
+
+The `waitForContainer` function is a utility that periodically checks for the presence of a specified container element in the DOM. Once the container is found, it calls the provided initialization function. This is particularly useful for initializing scripts that depend on the presence of specific elements that may not be immediately available when the page loads.
+
+## Function Signature
+
+```javascript
+/**
+ * Periodically checks for the presence of the container and initializes the script when found.
+ *
+ * @param {function} initializeFn - The initialization function to call when the root container is found.
+ * @param {string} [containerClass='.is-root-container'] - The CSS class of the container to check for. Default is '.is-root-container'.
+ * @param {number} [maxAttempts=50] - The maximum number of attempts to check for the root container.
+ * @param {number} [interval=100] - The interval between each check in milliseconds.
+ */
+export const waitForContainer = (initializeFn, containerClass = '.is-root-container', maxAttempts = 50, interval = 100);
+```
+
+### Parameters
+
+- **initializeFn** (`function`): The initialization function to call when the container is found.
+- **containerClass** (`string`, optional): The CSS class of the container to check for. Default is `.is-root-container`.
+- **maxAttempts** (`number`, optional): The maximum number of attempts to check for the root container. Default is `50`.
+- **interval** (`number`, optional): The interval between each check in milliseconds. Default is `100`.
+
+## Usage example
+
+To use the `waitForContainer` function, import it into your script and pass the necessary parameters:
+
+```javascript
+import { waitForContainer } from '@secretstache/wordpress-gutenberg';
+
+const initialize = () => {
+    // Your initialization code here
+};
+
+waitForContainer(initialize, '.custom-container-class');
+```
+
+In this example, the function will periodically check for the presence of an element with the class `.custom-container-class`. Once found, it will call the `initialize` function.

package/src/utils/waitForContainer/index.js

@@ -0,0 +1,25 @@
+/**
+ * Periodically checks for the presence of the container and initializes the script when found.
+ *
+ * @param {function} initializeFn - The initialization function to call when the container is found.
+ *                                  This function receives the root container element as an argument.
+ * @param {string} [containerClass='.is-root-container'] - The CSS class of the container to check for. Default is '.is-root-container'.
+ * @param {number} [maxAttempts=50] - The maximum number of attempts to check for the root container.
+ * @param {number} [interval=100] - The interval between each check in milliseconds.
+ */
+export const waitForContainer = (initializeFn, containerClass = '.is-root-container', maxAttempts = 50, interval = 100) => {
+    let attempts = 0;
+    const checkInterval = setInterval(() => {
+        const rootContainer = document.querySelector(containerClass);
+        if (rootContainer) {
+            clearInterval(checkInterval);
+            initializeFn(rootContainer);
+        } else {
+            attempts += 1;
+            if (attempts >= maxAttempts) {
+                clearInterval(checkInterval);
+                console.error('Max attempts reached. Root container not found.');
+            }
+        }
+    }, interval);
+};