@secretstache/wordpress-gutenberg 0.6.16 → 0.7.0

package/src/utils/attributes.js

@@ -1,252 +0,0 @@
-/**
- * @deprecated since 0.4.9
- * @type {{linkLabel: {default: string, type: string}, linkIsOpenInNewTab: {default: boolean, type: string}, linkSource: {default: string, type: string}}}
- */
-export const linkControlAttribute = {
-    linkLabel: {
-        type: 'string',
-        default: '',
-    },
-    linkSource: {
-        type: 'string',
-        default: '',
-    },
-    linkIsOpenInNewTab: {
-        type: 'boolean',
-        default: false,
-    },
-};
-
-/**
- * @param name
- * @returns {{[p: string]: {default: {filename: null, mime: null, alt: null, name: null, id: null, url: null}, type: string}}}
- */
-export const getMediaAttribute = (name = 'media') => ({
-    [`${name}`]: {
-        type: 'object',
-        default: {
-            id: null,
-            url: null,
-            alt: null,
-            name: null,
-            filename: null,
-            mime: null,
-        },
-    },
-});
-
-/**
- * @deprecated since 0.4.9
- * @type {{description: {default: string, type: string}, title: {default: string, type: string}}}
- */
-export const contentAttribute = {
-    title: {
-        type: 'string',
-        default: 'Title',
-    },
-    description: {
-        type: 'string',
-        default: 'Description',
-    },
-};
-
-/**
- * @param name
- * @returns {{[p: string]: {default: {filename: null, mime: null, alt: null, name: null, id: null, url: null}, type: string}, isAnimationLooped: {default: boolean, type: string}}}
- */
-export const getAnimationAttribute = (name = 'animationFile') => ({
-    ...getMediaAttribute(name),
-    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,
-    },
-};
-
-// TODO: make dataSource optional, rebuild it's not easy to use(need to pass sourcesList and queriesList in complex format)
-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 : {}),
-    };
-};
-/**
- * Generates a set of attributes for background settings in a block, including options
- * for background color, media, and overlays based on the provided configurations.
- *
- * @param {Object} [options={}] - The options for generating background attributes.
- * @param {boolean} [options.hasBackgroundMedia=false] - Flag to determine if background media attributes should be included.
- * @param {string} [options.mediaAttributeName='media'] - Background media attribute name.
- * @param {boolean} [options.hasOverlay=false] - Flag to determine if overlay attributes should be included.
- *
- * @returns {{[p: string]: {default: {filename: null, mime: null, alt: null, name: null, id: null, url: null}, type: string}, backgroundMediaType?: {type: string}, backgroundColor: {type: string}, isIncludeBackgroundMedia?: {type: string}, isIncludeOverlay?: {type: string}, overlayColor?: {type: string}}}
- */
-export const getBaseBackgroundAttributes = ({
-    hasBackgroundMedia = false,
-    mediaAttributeName = 'media',
-    hasOverlay = false,
-} = {}) => {
-    const backgroundMediaAttribute = {
-        isIncludeBackgroundMedia: {
-            type: 'boolean',
-        },
-        backgroundMediaType: {
-            type: 'string',
-        },
-        ...getMediaAttribute(mediaAttributeName),
-    };
-
-    const overlayAttribute = {
-        isIncludeOverlay: {
-            type: 'boolean',
-        },
-        overlayColor: {
-            type: 'object',
-        },
-    };
-
-    return {
-        backgroundColor: {
-            type: 'object',
-        },
-
-        ...(hasBackgroundMedia ? backgroundMediaAttribute : {}),
-
-        ...(hasOverlay ? overlayAttribute : {}),
-    };
-};
-
-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,
-                }
-            }
-        }
-    }
-}
-
-/**
- * @since 0.4.9
- * @param prefix
- * @returns {{[p: string]: {default: string, type: string}|{default: string, type: string}|{default: boolean, type: string}}}
- */
-export const getLinkAttributes = (prefix = 'link') => ({
-    [`${prefix}Label`]: {
-        type: 'string',
-        default: '',
-    },
-    [`${prefix}Source`]: {
-        type: 'string',
-        default: '',
-    },
-    [`${prefix}IsOpenInNewTab`]: {
-        type: 'boolean',
-        default: false,
-    },
-});

package/src/utils/filters.jsx

@@ -1,40 +0,0 @@
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { dispatch, select, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import { addFilter } from '@wordpress/hooks';
-
-export const addInnerBlocksCleanupFilter = (blockName) => {
-    // eslint-disable-next-line
-    const withInnerBlocksCleanup = createHigherOrderComponent((BlockEdit) => (props) => {
-        const { clientId, attributes, name } = props;
-
-        if (name !== blockName) {
-            return <BlockEdit {...props} />;
-        }
-
-        const innerBlocks = useSelect(
-            (select) => select('core/block-editor').getBlock(clientId)?.innerBlocks || [],
-            []
-        );
-
-        useEffect(() => {
-            if (
-                attributes.dataSource !== 'none' &&
-                innerBlocks.length > 0
-            ) {
-                dispatch('core/block-editor').updateBlock(clientId, {
-                    ...select('core/block-editor').getBlock(clientId),
-                    innerBlocks: [],
-                });
-            }
-        }, [ attributes.dataSource, clientId, innerBlocks.length ]);
-
-        return <BlockEdit {...props} />;
-    }, 'withInnerBlocksCleanup');
-
-    addFilter(
-        'editor.BlockEdit',
-        'ssm/with-inner-blocks-cleanup',
-        withInnerBlocksCleanup
-    );
-};

package/src/utils/rootBlock/appender.js

@@ -1,62 +0,0 @@
-import { createBlock } from '@wordpress/blocks';
-import { dispatch } from '@wordpress/data';
-
-import { getRootContainer } from '../rootContainer/index.js';
-
-const ROOT_BLOCK_APPENDER_SELECTOR = '.root-block-appender';
-
-/**
- * Initializes the custom button for the root appender.
- * @param {Element} rootContainer - The root container of the editor.
- * @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 = (rootContainer, blockName, tooltipText) => {
-    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);
-
-    return !!rootContainer.querySelector(ROOT_BLOCK_APPENDER_SELECTOR);
-};
-
-/**
- * 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 setRootBlockAppender = (blockName, tooltipText = 'Add Row') => {
-    const rootContainer = getRootContainer();
-
-    if (rootContainer) {
-        initialize(rootContainer, blockName, tooltipText);
-    } else {
-        console.error('Root container is not found.')
-    }
-};
-
-export const unsetRootBlockAppender = () => {
-    const rootContainer = getRootContainer();
-
-    if (rootContainer) {
-        const appender = rootContainer.querySelector(ROOT_BLOCK_APPENDER_SELECTOR);
-
-        if (appender) {
-            appender.remove();
-        } else {
-            console.error('Root block appender is not found.');
-        }
-    } else {
-        console.error('Root container is not found.')
-    }
-};

package/src/utils/rootBlock/hideRootBlockForInlineInserter.js

@@ -1,24 +0,0 @@
-const styleElementId = 'ssm-hide-root-block-for-inline-inserter';
-
-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');
-    styleElement.id = styleElementId;
-
-    // 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);
-};
-
-export const showRootBlockForInlineInserter = (blockName) => {
-    const styleElement = document.getElementById(styleElementId);
-
-    if (styleElement) {
-        document.head.removeChild(styleElement);
-    }
-};

package/src/utils/rootBlock/index.js

@@ -1,6 +0,0 @@
-export * from './setRootBlockForPostTypes.js'
-export * from './setRootBlockFilter.js'
-export * from './unsetRootBlockFilter.js';
-export * from './rootBlockVisibilityFilter.js';
-export * from './appender.js';
-export * from './hideRootBlockForInlineInserter.js';

package/src/utils/rootBlock/rootBlockVisibilityFilter.js

@@ -1,35 +0,0 @@
-import { addFilter, removeFilter } from '@wordpress/hooks';
-import { getBlockTypes } from '@wordpress/blocks';
-
-export const rootBlockVisibilityFilter = {
-    add({ rootBlockName }) {
-        addFilter(
-            'blocks.registerBlockType',
-            'ssm/root-block-visibility',
-            (blockSettings, blockName) => {
-                const isRootBlock = blockName === rootBlockName;
-                const hasOwnAllowedBlocks = !!blockSettings?.allowedBlocks;
-                const hasParent = !!blockSettings?.parent;
-
-                if (isRootBlock || hasParent || 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;
-            },
-        );
-    },
-    remove() {
-        removeFilter('blocks.registerBlockType', 'ssm/root-block-visibility');
-    },
-};

package/src/utils/rootBlock/setRootBlockFilter.js

@@ -1,30 +0,0 @@
-import { addFilter, removeFilter } from '@wordpress/hooks';
-
-/**
- * Adds a filter to set the specified block as the root block by modifying block settings during registration.
- * Blocks other than the root block will have their 'ancestor' property set to the root block name,
- * making them only insertable within the root block.
- */
-export const setRootBlockFilter = {
-    add({ rootBlockName }) {
-        addFilter(
-            'blocks.registerBlockType',
-            'ssm/set-root-block',
-            (settings, name) => {
-                const isRootBlock = name === rootBlockName;
-                const isBaseBlock = name === 'core/block';
-                const hasAncestor = !!settings?.ancestor;
-                const hasParent = !!settings?.parent;
-
-                if (!isRootBlock && !isBaseBlock && !hasAncestor && !hasParent) {
-                    settings.ancestor = [rootBlockName];
-                }
-
-                return settings;
-            },
-        );
-    },
-    remove() {
-        removeFilter('blocks.registerBlockType', 'ssm/set-root-block');
-    },
-};

package/src/utils/rootBlock/setRootBlockForPostTypes.js

@@ -1,73 +0,0 @@
-import { dispatch, select, subscribe } from '@wordpress/data';
-import { setRootBlockFilter } from './setRootBlockFilter.js';
-import { unsetRootBlockFilter } from './unsetRootBlockFilter.js';
-import { rootBlockVisibilityFilter } from './rootBlockVisibilityFilter.js';
-import { waitForRootContainer } from '../rootContainer/index.js';
-import { setRootBlockAppender, unsetRootBlockAppender } from './appender.js';
-
-/**
- * Configures a root block for specific post types
- *
- * @param {string} rootBlockName - The name of the root block to set.
- * @param {Array<string>} [postTypes=['page', 'post']] - The post types for which the root block should be enabled.
- * @param {Function} [callback] - Optional callback to execute when the root block state changes.
- * @param {Array<Object>} [filters=[rootBlockVisibilityFilter]] - Filters to apply or remove when enabling/disabling the root block.
- * @param {boolean} [initAppender=true] - Whether to initialize the root block appender.
- * @param {string} [appenderTooltipText='Add Row'] - Tooltip text for the root block appender.
- */
-export const setRootBlockForPostTypes = (
-    rootBlockName,
-    postTypes = ['page', 'post'],
-    callback,
-    filters = [ rootBlockVisibilityFilter ],
-    initAppender = true,
-    appenderTooltipText = 'Add Row',
-) => {
-    let isRootBlockEnabled = false;
-
-    waitForRootContainer().then(() => {
-        console.log('Root Container found.');
-
-        subscribe(() => {
-            const currentPostType = select('core/editor').getCurrentPostType();
-
-            if (postTypes.includes(currentPostType) && !isRootBlockEnabled) {
-                isRootBlockEnabled = true;
-
-                setRootBlockFilter.add({ rootBlockName });
-                unsetRootBlockFilter.remove();
-
-                if (filters?.length > 0) {
-                    filters.forEach((filter) => filter.add({ rootBlockName, isRootBlockEnabled, currentPostType }));
-                    dispatch('core/blocks').reapplyBlockTypeFilters();
-                }
-
-                if (callback) {
-                    callback({ isRootBlockEnabled, currentPostType });
-                }
-
-                if (initAppender) {
-                    setRootBlockAppender(rootBlockName, appenderTooltipText);
-                }
-            } else if (!postTypes.includes(currentPostType) && isRootBlockEnabled) {
-                isRootBlockEnabled = false;
-
-                setRootBlockFilter.remove()
-                unsetRootBlockFilter.add(rootBlockName);
-
-                if (filters?.length > 0) {
-                    filters.forEach((filter) => filter.remove({ rootBlockName, isRootBlockEnabled, currentPostType }));
-                    dispatch('core/blocks').reapplyBlockTypeFilters();
-                }
-
-                if (callback) {
-                    callback({ isRootBlockEnabled, currentPostType });
-                }
-
-                if (initAppender) {
-                    unsetRootBlockAppender();
-                }
-            }
-        }, 'core/block-editor');
-    })
-};

package/src/utils/rootBlock/unsetRootBlockFilter.js

@@ -1,26 +0,0 @@
-import { addFilter, removeFilter } from '@wordpress/hooks';
-
-/**
- * Adds a filter to unset the root block restrictions by removing the 'ancestor' property from block settings
- * if it includes the specified root block name.
- */
-export const unsetRootBlockFilter = {
-    add(rootBlockName) {
-        addFilter(
-            'blocks.registerBlockType',
-            'ssm/unset-root-block',
-            (settings) => {
-                const hasRootAncestor = settings.ancestor && settings.ancestor.includes(rootBlockName);
-
-                if (hasRootAncestor) {
-                    settings.ancestor = null;
-                }
-
-                return settings;
-            },
-        );
-    },
-    remove() {
-        removeFilter('blocks.registerBlockType', 'ssm/unset-root-block');
-    },
-};