@secretstache/wordpress-gutenberg 0.4.14 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- package/build/index.js +3 -3
- package/build/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/SpacingControl.js +0 -1
- package/src/hooks/useAllowedBlocks.js +1 -1
- package/src/utils/helpers.js +21 -0
- package/src/utils/index.js +1 -1
- package/src/utils/rootBlock/{setRootBlockAppender.js → appender.js} +26 -18
- package/src/utils/rootBlock/index.js +5 -3
- package/src/utils/rootBlock/rootBlockVisibilityFilter.js +35 -0
- package/src/utils/rootBlock/setRootBlockFilter.js +29 -0
- package/src/utils/rootBlock/setRootBlockForPostTypes.js +73 -0
- package/src/utils/rootBlock/unsetRootBlockFilter.js +26 -0
- package/src/utils/rootContainer/README.md +72 -0
- package/src/utils/rootContainer/index.js +42 -0
- package/src/utils/rootBlock/README.md +0 -156
- package/src/utils/rootBlock/hideRootBlockForOtherBlocks.js +0 -33
- package/src/utils/rootBlock/setRootBlock.js +0 -115
- package/src/utils/waitForContainer/README.md +0 -40
- package/src/utils/waitForContainer/index.js +0 -26
@@ -1,115 +0,0 @@
|
|
1
|
-
import { addFilter, removeFilter } from '@wordpress/hooks';
|
2
|
-
import { setRootBlockAppender, unsetRootBlockAppender } from './setRootBlockAppender.js';
|
3
|
-
import { dispatch, select, subscribe } from '@wordpress/data';
|
4
|
-
|
5
|
-
/**
|
6
|
-
* Adds a filter to set the specified block as the root block by modifying block settings during registration.
|
7
|
-
* Blocks other than the root block will have their 'ancestor' property set to the root block name,
|
8
|
-
* making them only insertable within the root block.
|
9
|
-
*
|
10
|
-
* @param {string} rootBlockName - The name of the block to be set as the root block.
|
11
|
-
*/
|
12
|
-
export const addSetRootBlockFilter = (rootBlockName) => {
|
13
|
-
addFilter(
|
14
|
-
'blocks.registerBlockType',
|
15
|
-
'ssm/set-root-block',
|
16
|
-
(settings, name) => {
|
17
|
-
const isRootBlock = name === rootBlockName;
|
18
|
-
const isBaseBlock = name === 'core/block';
|
19
|
-
const hasAncestor = !!settings?.ancestor;
|
20
|
-
|
21
|
-
if (!isRootBlock && !isBaseBlock && !hasAncestor) {
|
22
|
-
settings.ancestor = [rootBlockName];
|
23
|
-
}
|
24
|
-
|
25
|
-
return settings;
|
26
|
-
},
|
27
|
-
);
|
28
|
-
};
|
29
|
-
|
30
|
-
/**
|
31
|
-
* Adds a filter to unset the root block restrictions by removing the 'ancestor' property from block settings
|
32
|
-
* if it includes the specified root block name.
|
33
|
-
*
|
34
|
-
* @param {string} rootBlockName - The name of the block previously set as the root block.
|
35
|
-
*/
|
36
|
-
export const addUnsetRootBlockFilter = (rootBlockName) => {
|
37
|
-
addFilter(
|
38
|
-
'blocks.registerBlockType',
|
39
|
-
'ssm/unset-root-block',
|
40
|
-
(settings) => {
|
41
|
-
const hasRootAncestor = settings.ancestor && settings.ancestor.includes(rootBlockName);
|
42
|
-
|
43
|
-
if (hasRootAncestor) {
|
44
|
-
settings.ancestor = null;
|
45
|
-
}
|
46
|
-
|
47
|
-
return settings;
|
48
|
-
},
|
49
|
-
);
|
50
|
-
};
|
51
|
-
|
52
|
-
/**
|
53
|
-
* Configures the Gutenberg editor to use a specified block as the root block for certain post types.
|
54
|
-
* It dynamically applies or removes the root block restriction based on the current post type.
|
55
|
-
* Optionally initializes a custom root block appender and provides callbacks for post type matching.
|
56
|
-
*
|
57
|
-
* @param {string} rootBlockName - The name of the block to set as the root block.
|
58
|
-
* @param {string[]} [postTypes=['page', 'ssm_design_system']] - Array of post types where the root block should be set.
|
59
|
-
* @param {boolean} [initAppender=true] - Whether to initialize the root block appender.
|
60
|
-
* @param {string} [appenderTooltipText='Add Row'] - Tooltip text for the root block appender.
|
61
|
-
* @param {Function} [matchPostTypeCallback=null] - Callback function when the post type matches.
|
62
|
-
* @param {Function} [notMatchPostTypeCallback=null] - Callback function when the post type does not match.
|
63
|
-
*/
|
64
|
-
export const setRootBlock = (
|
65
|
-
rootBlockName,
|
66
|
-
postTypes = ['page', 'ssm_design_system'],
|
67
|
-
initAppender = true,
|
68
|
-
appenderTooltipText = 'Add Row',
|
69
|
-
matchPostTypeCallback = null,
|
70
|
-
notMatchPostTypeCallback = null,
|
71
|
-
) => {
|
72
|
-
let isRootBlockEnabled = false;
|
73
|
-
|
74
|
-
subscribe(() => {
|
75
|
-
const currentPostType = select('core/editor').getCurrentPostType();
|
76
|
-
|
77
|
-
if (!currentPostType) return;
|
78
|
-
|
79
|
-
const isMatchPostType = postTypes.includes(currentPostType);
|
80
|
-
|
81
|
-
if (isMatchPostType) {
|
82
|
-
if (!isRootBlockEnabled) {
|
83
|
-
removeFilter('blocks.registerBlockType', 'ssm/unset-root-block');
|
84
|
-
addSetRootBlockFilter(rootBlockName);
|
85
|
-
dispatch('core/blocks').reapplyBlockTypeFilters();
|
86
|
-
|
87
|
-
if (initAppender) {
|
88
|
-
setRootBlockAppender(rootBlockName, appenderTooltipText);
|
89
|
-
}
|
90
|
-
|
91
|
-
if (matchPostTypeCallback) {
|
92
|
-
matchPostTypeCallback();
|
93
|
-
}
|
94
|
-
|
95
|
-
isRootBlockEnabled = true;
|
96
|
-
}
|
97
|
-
} else {
|
98
|
-
if (isRootBlockEnabled) {
|
99
|
-
removeFilter('blocks.registerBlockType', 'ssm/set-root-block');
|
100
|
-
addUnsetRootBlockFilter(rootBlockName);
|
101
|
-
dispatch('core/blocks').reapplyBlockTypeFilters();
|
102
|
-
|
103
|
-
if (initAppender) {
|
104
|
-
unsetRootBlockAppender(rootBlockName);
|
105
|
-
}
|
106
|
-
|
107
|
-
if (notMatchPostTypeCallback) {
|
108
|
-
notMatchPostTypeCallback();
|
109
|
-
}
|
110
|
-
|
111
|
-
isRootBlockEnabled = false;
|
112
|
-
}
|
113
|
-
}
|
114
|
-
}, 'core/editor');
|
115
|
-
};
|
@@ -1,40 +0,0 @@
|
|
1
|
-
## Overview
|
2
|
-
|
3
|
-
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.
|
4
|
-
|
5
|
-
## Function Signature
|
6
|
-
|
7
|
-
```javascript
|
8
|
-
/**
|
9
|
-
* Periodically checks for the presence of the container and initializes the script when found.
|
10
|
-
*
|
11
|
-
* @param {function} initializeFn - The initialization function to call when the root container is found.
|
12
|
-
* @param {string} [containerClass='.is-root-container'] - The CSS class of the container to check for. Default is '.is-root-container'.
|
13
|
-
* @param {number} [maxAttempts=50] - The maximum number of attempts to check for the root container.
|
14
|
-
* @param {number} [interval=100] - The interval between each check in milliseconds.
|
15
|
-
*/
|
16
|
-
export const waitForContainer = (initializeFn, containerClass = '.is-root-container', maxAttempts = 50, interval = 100);
|
17
|
-
```
|
18
|
-
|
19
|
-
### Parameters
|
20
|
-
|
21
|
-
- **initializeFn** (`function`): The initialization function to call when the container is found.
|
22
|
-
- **containerClass** (`string`, optional): The CSS class of the container to check for. Default is `.is-root-container`.
|
23
|
-
- **maxAttempts** (`number`, optional): The maximum number of attempts to check for the root container. Default is `50`.
|
24
|
-
- **interval** (`number`, optional): The interval between each check in milliseconds. Default is `100`.
|
25
|
-
|
26
|
-
## Usage example
|
27
|
-
|
28
|
-
To use the `waitForContainer` function, import it into your script and pass the necessary parameters:
|
29
|
-
|
30
|
-
```javascript
|
31
|
-
import { waitForContainer } from '@secretstache/wordpress-gutenberg';
|
32
|
-
|
33
|
-
const initialize = () => {
|
34
|
-
// Your initialization code here
|
35
|
-
};
|
36
|
-
|
37
|
-
waitForContainer(initialize, '.custom-container-class');
|
38
|
-
```
|
39
|
-
|
40
|
-
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.
|
@@ -1,26 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Periodically checks for the presence of the container and initializes the script when found.
|
3
|
-
*
|
4
|
-
* @param {function} initializeFn - The initialization function to call when the container is found.
|
5
|
-
* This function receives the root container element as an argument.
|
6
|
-
* @param {string} [containerClass='.is-root-container'] - The CSS class of the container to check for. Default is '.is-root-container'.
|
7
|
-
* @param {number} [maxAttempts=50] - The maximum number of attempts to check for the root container.
|
8
|
-
* @param {number} [interval=100] - The interval between each check in milliseconds.
|
9
|
-
*/
|
10
|
-
export const waitForContainer = (initializeFn, containerClass = '.is-root-container', maxAttempts = 50, interval = 100) => {
|
11
|
-
let attempts = 0;
|
12
|
-
const checkInterval = setInterval(() => {
|
13
|
-
const rootContainer = document.querySelector(containerClass);
|
14
|
-
|
15
|
-
if (rootContainer) {
|
16
|
-
clearInterval(checkInterval);
|
17
|
-
initializeFn(rootContainer);
|
18
|
-
} else {
|
19
|
-
attempts += 1;
|
20
|
-
if (attempts >= maxAttempts) {
|
21
|
-
clearInterval(checkInterval);
|
22
|
-
console.error('Max attempts reached. Root container not found.');
|
23
|
-
}
|
24
|
-
}
|
25
|
-
}, interval);
|
26
|
-
};
|