@secretstache/wordpress-gutenberg 0.4.13 → 0.5.0

package/src/utils/rootBlock/README.md

@@ -1,156 +0,0 @@
-## setRootBlock
-
-The `setRootBlock` function configures a root block in the Gutenberg editor for specific post types. It ensures that only the specified root block can be inserted at the root level for those post types. The function dynamically applies or removes the root block restriction based on the current post type. Optionally, it initializes a custom root block appender with customizable tooltip text and allows specifying callbacks for when the post type matches or does not match.
-
-### Function Signature
-
-```javascript
-/**
- * Sets the root block in the Gutenberg editor for specific post types and optionally customizes the tooltip text for the root appender.
- * The function dynamically applies or removes the root block restriction based on the current post type.
- *
- * @param {string} rootBlockName - The name of the block to be set as the root block.
- * @param {string[]} [postTypes=['page', 'ssm_design_system']] - An array of post types where the root block should be set.
- * @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.
- * @param {Function} [matchPostTypeCallback=null] - A callback function to execute when the current post type matches the specified post types.
- * @param {Function} [notMatchPostTypeCallback=null] - A callback function to execute when the current post type does not match the specified post types.
- */
-export const setRootBlock = (
-    rootBlockName,
-    postTypes = ['page', 'ssm_design_system'],
-    initAppender = true,
-    appenderTooltipText = 'Add Row',
-    matchPostTypeCallback = null,
-    notMatchPostTypeCallback = null,
-);
-```
-
-#### Parameters
-
-- **rootBlockName** (`string`): The name of the block to be set as the root block. This parameter is mandatory.
-- **postTypes** (`string[]`, optional): An array of post types where the root block should be set. Default is `['page', 'ssm_design_system']`.
-- **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 root appender. Default is `'Add Row'`.
-- **matchPostTypeCallback** (`Function`, optional): A callback function to execute when the current post type matches the specified post types. Default is `null`.
-- **notMatchPostTypeCallback** (`Function`, optional): A callback function to execute when the current post type does not match the specified post types. Default is `null`.
-
-### Usage Example
-
-To use the `setRootBlock` function, import it into your script and pass the necessary parameters:
-
-```javascript
-import domReady from '@wordpress/dom-ready';
-import { setRootBlock } from '@secretstache/wordpress-gutenberg';
-
-domReady(() => {
-  setRootBlock(
-    'ssm/section-wrapper',
-    ['page', 'post'],
-    true,
-    'Add Section',
-    () => {
-      console.log('Root block set for matching post type.');
-    },
-    () => {
-      console.log('Root block unset for non-matching post type.');
-    }
-  );
-});
-```
-
-In this example, the function will:
-
-- Set `'ssm/section-wrapper'` as the root block for 'page' and 'post' post types.
-- Initialize the root appender with the tooltip text 'Add Section'.
-- Execute the `matchPostTypeCallback` when the current post type matches 'page' or 'post'.
-- Execute the `notMatchPostTypeCallback` when the current post type does not match.
-
-The function monitors the current post type and dynamically applies or removes the root block restriction as needed.
-
----
-
-## setRootBlockAppender
-
-The `setRootBlockAppender` function creates a new top-level block appender in the Gutenberg editor. It allows you 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 specifying the block name to be
- * created when the appender is clicked and customizing 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');
-```
-
-#### 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 or plugin, you can import and initialize the function with the desired block name and tooltip text:
-
-```javascript
-import domReady from '@wordpress/dom-ready';
-import { setRootBlockAppender } from '@secretstache/wordpress-gutenberg';
-
-domReady(() => {
-  setRootBlockAppender('ssm/section-wrapper', 'Add Section');
-});
-```
-
-In this example, clicking the appender will insert the `'ssm/section-wrapper'` block, and the tooltip on the appender will display 'Add Section'.
-
----
-
-## unsetRootBlockAppender
-
-The `unsetRootBlockAppender` function removes the custom root block appender from the Gutenberg editor.
-
-### Function Signature
-
-```javascript
-/**
- * Removes the custom root block appender from the Gutenberg editor.
- */
-export const unsetRootBlockAppender = () => {};
-```
-
-### Usage Example
-
-To remove the custom root block appender, simply call the function:
-
-```javascript
-import { unsetRootBlockAppender } from '@secretstache/wordpress-gutenberg';
-
-unsetRootBlockAppender();
-```
-
----
-
-### Notes
-
-- The `setRootBlock` function internally manages the application and removal of the root block restrictions based on the current post type. It also handles the initialization and removal of the root block appender if `initAppender` is set to `true`.
-- The `matchPostTypeCallback` and `notMatchPostTypeCallback` parameters allow you to execute custom logic when the post type matches or does not match the specified `postTypes` array. This can be useful for additional configurations or side effects needed in your application.
-- The functions `setRootBlockAppender` and `unsetRootBlockAppender` can be used independently if you need to manually control the appender outside of the `setRootBlock` function.
-
-### Additional Example
-
-If you want to set a root block without initializing the appender and without specifying callbacks:
-
-```javascript
-import domReady from '@wordpress/dom-ready';
-import { setRootBlock } from '@secretstache/wordpress-gutenberg';
-
-domReady(() => {
-    setRootBlock('ssm/section-wrapper', ['page'], false);
-});
-```
-
-In this case, the root block `'ssm/section-wrapper'` will be set for the 'page' post type, but the root appender will not be initialized.

package/src/utils/rootBlock/hideRootBlockForOtherBlocks.js

@@ -1,33 +0,0 @@
-import { addFilter } from '@wordpress/hooks';
-import { getBlockTypes } from '@wordpress/blocks';
-import { dispatch } from '@wordpress/data';
-
-export const hideRootBlockForOtherBlocks = (rootBlockName) => {
-    addFilter(
-        'blocks.registerBlockType',
-        'ssm/hide-root-block-for-other-blocks',
-        (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;
-        },
-    );
-
-    dispatch('core/blocks').reapplyBlockTypeFilters();
-};

package/src/utils/rootBlock/setRootBlock.js

@@ -1,115 +0,0 @@
-import { addFilter, removeFilter } from '@wordpress/hooks';
-import { setRootBlockAppender, unsetRootBlockAppender } from './setRootBlockAppender.js';
-import { dispatch, select, subscribe } from '@wordpress/data';
-
-/**
- * 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.
- *
- * @param {string} rootBlockName - The name of the block to be set as the root block.
- */
-export const addSetRootBlockFilter = (rootBlockName) => {
-    addFilter(
-        'blocks.registerBlockType',
-        'ssm/set-root-block',
-        (settings, name) => {
-            const isRootBlock = name === rootBlockName;
-            const isBaseBlock = name === 'core/block';
-            const hasAncestor = !!settings?.ancestor;
-
-            if (!isRootBlock && !isBaseBlock && !hasAncestor) {
-                settings.ancestor = [rootBlockName];
-            }
-
-            return settings;
-        },
-    );
-};
-
-/**
- * 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.
- *
- * @param {string} rootBlockName - The name of the block previously set as the root block.
- */
-export const addUnsetRootBlockFilter = (rootBlockName) => {
-    addFilter(
-        'blocks.registerBlockType',
-        'ssm/unset-root-block',
-        (settings) => {
-            const hasRootAncestor = settings.ancestor && settings.ancestor.includes(rootBlockName);
-
-            if (hasRootAncestor) {
-                settings.ancestor = null;
-            }
-
-            return settings;
-        },
-    );
-};
-
-/**
- * Configures the Gutenberg editor to use a specified block as the root block for certain post types.
- * It dynamically applies or removes the root block restriction based on the current post type.
- * Optionally initializes a custom root block appender and provides callbacks for post type matching.
- *
- * @param {string} rootBlockName - The name of the block to set as the root block.
- * @param {string[]} [postTypes=['page', 'ssm_design_system']] - Array of post types where the root block should be set.
- * @param {boolean} [initAppender=true] - Whether to initialize the root block appender.
- * @param {string} [appenderTooltipText='Add Row'] - Tooltip text for the root block appender.
- * @param {Function} [matchPostTypeCallback=null] - Callback function when the post type matches.
- * @param {Function} [notMatchPostTypeCallback=null] - Callback function when the post type does not match.
- */
-export const setRootBlock = (
-    rootBlockName,
-    postTypes = ['page', 'ssm_design_system'],
-    initAppender = true,
-    appenderTooltipText = 'Add Row',
-    matchPostTypeCallback = null,
-    notMatchPostTypeCallback = null,
-) => {
-    let isRootBlockEnabled = false;
-
-    subscribe(() => {
-        const currentPostType = select('core/editor').getCurrentPostType();
-
-        if (!currentPostType) return;
-
-        const isMatchPostType = postTypes.includes(currentPostType);
-
-        if (isMatchPostType) {
-            if (!isRootBlockEnabled) {
-                removeFilter('blocks.registerBlockType', 'ssm/unset-root-block');
-                addSetRootBlockFilter(rootBlockName);
-                dispatch('core/blocks').reapplyBlockTypeFilters();
-
-                if (initAppender) {
-                    setRootBlockAppender(rootBlockName, appenderTooltipText);
-                }
-
-                if (matchPostTypeCallback) {
-                    matchPostTypeCallback();
-                }
-
-                isRootBlockEnabled = true;
-            }
-        } else {
-            if (isRootBlockEnabled) {
-                removeFilter('blocks.registerBlockType', 'ssm/set-root-block');
-                addUnsetRootBlockFilter(rootBlockName);
-                dispatch('core/blocks').reapplyBlockTypeFilters();
-
-                if (initAppender) {
-                    unsetRootBlockAppender(rootBlockName);
-                }
-
-                if (notMatchPostTypeCallback) {
-                    notMatchPostTypeCallback();
-                }
-
-                isRootBlockEnabled = false;
-            }
-        }
-    }, 'core/editor');
-};

package/src/utils/waitForContainer/README.md

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

@@ -1,26 +0,0 @@
-/**
- * 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);
-};