@secretstache/wordpress-gutenberg 0.4.14 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.4.14",
+  "version": "0.5.0",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",

package/src/components/SpacingControl.js

@@ -27,7 +27,6 @@ const Control = ({ label, max, min, value, onChange, disabled, tooltip, ...other
                     max={max}
                     marks={generateMarks(min, max)}
                     resetFallbackValue={-1}
-                    help="Use -1 for default settings."
                     renderTooltipContent={(value) => {
                         if (value === -1) return 'Default';
 

package/src/hooks/useAllowedBlocks.js

@@ -20,6 +20,6 @@ export const useAllowedBlocks = (blockName, excludedBlocks) => {
                     && (!blockHasAncestor || isAncestor);
             })
             ?.map((block) => block.name),
-        [allBlocks, excludedBlocks, blockName],
+        [ allBlocks, excludedBlocks, blockName ],
     );
 };

package/src/utils/helpers.js

@@ -1,3 +1,4 @@
+import { filters } from '@wordpress/hooks';
 import apiFetch from '@wordpress/api-fetch';
 import slugify from 'slugify';
 import classNames from 'classnames';
@@ -144,3 +145,23 @@ export const getSpacingClasses = (
         [`${mobilePrefix}pb-${spacing?.mobile?.padding?.bottom}`]: spacing?.mobile?.padding?.bottom !== -1,
     });
 };
+
+/**
+ * @param namespace
+ * @returns {*[]}
+ */
+const getFiltersByNamespace = (namespace) => {
+    const list = [];
+
+    Object.entries(filters).forEach(([filterName, filterData]) => {
+        const handlers = filterData.handlers || [];
+
+        handlers.forEach((handler) => {
+            if (handler.namespace.startsWith(namespace)) {
+                list.push({ filterName, namespace: handler.namespace });
+            }
+        });
+    });
+
+    return list;
+};

package/src/utils/index.js

@@ -1,5 +1,5 @@
 export * from './rootBlock/index.js';
-export * from './waitForContainer/index.js';
+export * from './rootContainer/index.js';
 
 export * from './attributes.js';
 export * from './constants.js';

package/src/utils/rootBlock/{setRootBlockAppender.js → appender.js}

@@ -1,25 +1,17 @@
 import { createBlock } from '@wordpress/blocks';
 import { dispatch } from '@wordpress/data';
 
-import { waitForContainer } from '../waitForContainer/index.js';
+import { getRootContainer } from '../rootContainer/index.js';
 
-const ROOT_CONTAINER_SELECTOR = '.is-root-container';
-const ROOT_BLOCK_APPENDER_SELECTOR = '.is-root-container .root-block-appender';
+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 = (blockName, tooltipText) => {
-    const rootContainer = document.querySelector(ROOT_CONTAINER_SELECTOR);
-
-    if (!rootContainer) {
-        console.error('Root container not found');
-
-        return;
-    }
-
+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>';
@@ -32,6 +24,8 @@ const initialize = (blockName, tooltipText) => {
     });
 
     rootContainer.prepend(button);
+
+    return !!rootContainer.querySelector(ROOT_BLOCK_APPENDER_SELECTOR);
 };
 
 /**
@@ -42,13 +36,27 @@ const initialize = (blockName, tooltipText) => {
  * @param {string} [tooltipText='Add Row'] - The tooltip text displayed on the appender.
  */
 export const setRootBlockAppender = (blockName, tooltipText = 'Add Row') => {
-    waitForContainer(() => initialize(blockName, tooltipText), ROOT_CONTAINER_SELECTOR);
+    const rootContainer = getRootContainer();
+
+    if (rootContainer) {
+        initialize(rootContainer, blockName, tooltipText);
+    } else {
+        console.error('Root container is not found.')
+    }
 };
 
 export const unsetRootBlockAppender = () => {
-    const appender = document.querySelector(ROOT_BLOCK_APPENDER_SELECTOR);
-
-    if (appender) {
-        appender.remove();
+    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/index.js

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

package/src/utils/rootBlock/rootBlockVisibilityFilter.js

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

@@ -0,0 +1,29 @@
+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;
+
+                if (!isRootBlock && !isBaseBlock && !hasAncestor) {
+                    settings.ancestor = [rootBlockName];
+                }
+
+                return settings;
+            },
+        );
+    },
+    remove() {
+        removeFilter('blocks.registerBlockType', 'ssm/set-root-block');
+    },
+};

package/src/utils/rootBlock/setRootBlockForPostTypes.js

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

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

package/src/utils/rootContainer/README.md

@@ -0,0 +1,72 @@
+## Overview
+
+The `waitForRootContainer` function is a utility that periodically checks for the presence of the Gutenberg editor's root container, identified by the class `.is-root-container`. Once the container is found, it resolves a promise, allowing for additional initialization logic.
+
+## Function Signature
+
+```javascript
+/**
+ * Periodically checks for the presence of the Gutenberg editor's root container and resolves when found.
+ *
+ * @param {number} [maxAttempts=10] - The maximum number of attempts to check for the root container.
+ * @param {number} [interval=500] - The interval time (in milliseconds) between attempts.
+ * @returns {Promise<Element>} - Resolves with the root container element if found, or rejects if not found after max attempts.
+ */
+export const waitForRootContainer = (maxAttempts = 10, interval = 500);
+```
+
+### Parameters
+- **maxAttempts** (`number`, optional): The maximum number of attempts to check for the root container. Default is `10`.
+- **interval** (`number`, optional): The interval time (in milliseconds) between each attempt. Default is `500`.
+
+### Returns
+- **Promise<Element>**: Resolves with the root container element when found. Rejects with an error if the container is not found after the maximum attempts.
+
+---
+
+## Usage Example
+To use the `waitForRootContainer` function, import it into your script and handle the promise:
+
+```javascript
+import { waitForRootContainer } from '@secretstache/wordpress-gutenberg';
+
+waitForRootContainer(10, 500)
+    .then((rootContainer) => {
+        console.log('Gutenberg root container found:', rootContainer);
+        // Your initialization logic here
+    })
+    .catch((error) => {
+        console.error('Failed to find Gutenberg root container:', error);
+    });
+```
+
+### Example Output
+In this example:
+- The function checks for the Gutenberg root container (identified by `.is-root-container`) up to 10 times, waiting 500ms between each check.
+- If the container is found, it resolves with the container element.
+- If the container is not found after 10 attempts, it rejects with an error.
+
+---
+
+## getRootContainer
+
+The `getRootContainer` function retrieves the Gutenberg editor's root container element from the DOM.
+
+### Usage Example
+
+```javascript
+import { getRootContainer } from '@secretstache/wordpress-gutenberg';
+
+const rootContainer = getRootContainer();
+if (rootContainer) {
+    console.log('Gutenberg root container found:', rootContainer);
+} else {
+    console.log('Gutenberg root container not found');
+}
+```
+
+---
+
+### Notes
+- The `getRootContainer` function searches both the main DOM and an iframe (if applicable) for the Gutenberg root container with the class `.is-root-container`.
+- `waitForRootContainer` is built on top of `getRootContainer` and provides retry logic for situations where the root container is not immediately available.

package/src/utils/rootContainer/index.js

@@ -0,0 +1,42 @@
+const ROOT_CONTAINER_SELECTOR = '.is-root-container';
+
+/**
+ * Retrieves the Gutenberg editor's root container element from the DOM or an iframe.
+ *
+ * @returns {Element|null} - Returns the root container element if found, or null if not found.
+ */
+export const getRootContainer = () => {
+    const rootContainer = document.querySelector(ROOT_CONTAINER_SELECTOR);
+
+    if (rootContainer) {
+        return rootContainer;
+    }
+
+    const iframe = document.querySelector('.block-editor iframe');
+    const iframeDocument = iframe?.contentDocument || iframe?.contentWindow?.document;
+
+    return iframeDocument?.querySelector(ROOT_CONTAINER_SELECTOR) || null;
+};
+
+export const waitForRootContainer = (maxAttempts = 10, interval = 500) => {
+    return new Promise((resolve, reject) => {
+        let attempts = 0;
+
+        const checkRootContainer = () => {
+            const rootContainer = getRootContainer();
+
+            if (rootContainer) {
+                return resolve(rootContainer);
+            } else {
+                if (attempts <= maxAttempts) {
+                    attempts++;
+                    setTimeout(checkRootContainer, interval);
+                } else {
+                    reject(new Error('Root container not found after max attempts.'));
+                }
+            }
+        };
+
+        checkRootContainer();
+    });
+};

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