: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: (0,external_wp_i18n_namespaceObject._x)('Settings', 'Image settings'),
dropdownMenuProps: dropdownMenuProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem
// We use the `userSettings` prop instead of `settings`, because `settings`
// contains the core/theme values for the lightbox and we want to show the
// "RESET" button ONLY when the user has explicitly set a value in the
hasValue: () => !!value?.lightbox,
label: (0,external_wp_i18n_namespaceObject.__)('Expand on click'),
onDeselect: resetLightbox,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Expand on click'),
checked: lightboxChecked,
onChange: onChangeLightbox
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/advanced-panel.js
const [cssError, setCSSError] = (0,external_wp_element_namespaceObject.useState)(null);
const customCSS = inheritedValue?.css;
function handleOnChange(newValue) {
// Check if the new value is valid CSS, and pass a wrapping selector
// to ensure that `transformStyles` validates the CSS. Note that the
// wrapping selector here is not used in the actual output of any styles.
const [transformed] = transform_styles([{
}], '.for-validation-only');
function handleOnBlur(event) {
if (!event?.target?.value) {
// Check if the new value is valid CSS, and pass a wrapping selector
// to ensure that `transformStyles` validates the CSS. Note that the
// wrapping selector here is not used in the actual output of any styles.
const [transformed] = transform_styles([{
}], '.for-validation-only');
setCSSError(transformed === null ? (0,external_wp_i18n_namespaceObject.__)('There is an error with your CSS structure.') : null);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
children: [cssError && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Notice, {
onRemove: () => setCSSError(null),
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextareaControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Additional CSS'),
__nextHasNoMarginBottom: true,
onChange: newValue => handleOnChange(newValue),
className: "block-editor-global-styles-advanced-panel__custom-css-input",
;// CONCATENATED MODULE: ./node_modules/memize/dist/index.js
* @property {number} [maxSize] Maximum size of the cache.
* @typedef MemizeCacheNode
* @property {?MemizeCacheNode|undefined} [prev] Previous node.
* @property {?MemizeCacheNode|undefined} [next] Next node.
* @property {Array<*>} args Function arguments for cache
* @property {*} val Function result.
* Properties of the enhanced function for controlling cache.
* @typedef MemizeMemoizedFunction
* @property {()=>void} clear Clear the cache.
* Accepts a function to be memoized, and returns a new memoized function, with
* @template {(...args: any[]) => any} F
* @param {F} fn Function to memoize.
* @param {MemizeOptions} [options] Options object.
* @return {((...args: Parameters<F>) => ReturnType<F>) & MemizeMemoizedFunction} Memoized function.
function memize(fn, options) {
/** @type {?MemizeCacheNode|undefined} */
/** @type {?MemizeCacheNode|undefined} */
function memoized(/* ...args */) {
searchCache: while (node) {
// Perform a shallow equality test to confirm that whether the node
// under test is a candidate for the arguments passed. Two arrays
// are shallowly equal if their length matches and each entry is
// strictly equal between the two sets. Avoid abstracting to a
// function which could incur an arguments leaking deoptimization.
// Check whether node arguments match arguments length
if (node.args.length !== arguments.length) {
// Check whether node arguments match arguments values
for (i = 0; i < len; i++) {
if (node.args[i] !== arguments[i]) {
// At this point we can assume we've found a match
// Surface matched node to head if not already
// As tail, shift to previous. Must only shift if not also
// head, since if both head and tail, there is no previous.
// Adjust siblings to point to each other. If node was tail,
// this also handles new tail's empty `next` assignment.
/** @type {MemizeCacheNode} */ (node.prev).next = node.next;
node.next.prev = node.prev;
/** @type {MemizeCacheNode} */ (head).prev = node;
// No cached value found. Continue to insertion phase:
// Create a copy of arguments (avoid leaking deoptimization)
for (i = 0; i < len; i++) {
// Generate the result from original function
val: fn.apply(null, args),
// Don't need to check whether node is already head, since it would
// have been returned above already if it was
// Shift existing head down list
// If no head, follows that there's no tail (at initial or reset)
// Trim tail if we're reached max size and are pending cache insertion
if (size === /** @type {MemizeOptions} */ (options).maxSize) {
tail = /** @type {MemizeCacheNode} */ (tail).prev;
/** @type {MemizeCacheNode} */ (tail).next = null;
memoized.clear = function () {
// Ignore reason: There's not a clear solution to create an intersection of
// the function with additional properties, where the goal is to retain the
// function signature of the incoming argument and add control properties
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/get-global-styles-changes.js
const globalStylesChangesCache = new Map();
const get_global_styles_changes_EMPTY_ARRAY = [];
caption: (0,external_wp_i18n_namespaceObject.__)('Caption'),
link: (0,external_wp_i18n_namespaceObject.__)('Link'),
button: (0,external_wp_i18n_namespaceObject.__)('Button'),
heading: (0,external_wp_i18n_namespaceObject.__)('Heading'),
h1: (0,external_wp_i18n_namespaceObject.__)('H1'),
h2: (0,external_wp_i18n_namespaceObject.__)('H2'),
h3: (0,external_wp_i18n_namespaceObject.__)('H3'),
h4: (0,external_wp_i18n_namespaceObject.__)('H4'),
h5: (0,external_wp_i18n_namespaceObject.__)('H5'),
h6: (0,external_wp_i18n_namespaceObject.__)('H6'),
'settings.color': (0,external_wp_i18n_namespaceObject.__)('Color'),
'settings.typography': (0,external_wp_i18n_namespaceObject.__)('Typography'),
'styles.color': (0,external_wp_i18n_namespaceObject.__)('Colors'),
'styles.spacing': (0,external_wp_i18n_namespaceObject.__)('Spacing'),
'styles.background': (0,external_wp_i18n_namespaceObject.__)('Background'),
'styles.typography': (0,external_wp_i18n_namespaceObject.__)('Typography')
const getBlockNames = memize(() => (0,external_wp_blocks_namespaceObject.getBlockTypes)().reduce((accumulator, {
accumulator[name] = title;
const isObject = obj => obj !== null && typeof obj === 'object';
* Get the translation for a given global styles key.
* @param {string} key A key representing a path to a global style property or setting.
* @return {string|undefined} A translated key or undefined if no translation exists.
function getTranslation(key) {
if (translationMap[key]) {
return translationMap[key];
const keyArray = key.split('.');
if (keyArray?.[0] === 'blocks') {
const blockName = getBlockNames()?.[keyArray[1]];
return blockName || keyArray[1];
if (keyArray?.[0] === 'elements') {
return translationMap[keyArray[1]] || keyArray[1];
* A deep comparison of two objects, optimized for comparing global styles.
* @param {Object} changedObject The changed object to compare.
* @param {Object} originalObject The original object to compare against.
* @param {string} parentPath A key/value pair object of block names and their rendered titles.
* @return {string[]} An array of paths whose values have changed.
function deepCompare(changedObject, originalObject, parentPath = '') {
// We have two non-object values to compare.
if (!isObject(changedObject) && !isObject(originalObject)) {
* Only return a path if the value has changed.
* And then only the path name up to 2 levels deep.
return changedObject !== originalObject ? parentPath.split('.').slice(0, 2).join('.') : undefined;
// Enable comparison when an object doesn't have a corresponding property to compare.
changedObject = isObject(changedObject) ? changedObject : {};
originalObject = isObject(originalObject) ? originalObject : {};
const allKeys = new Set([...Object.keys(changedObject), ...Object.keys(originalObject)]);
for (const key of allKeys) {
const path = parentPath ? parentPath + '.' + key : key;
const changedPath = deepCompare(changedObject[key], originalObject[key], path);
diffs = diffs.concat(changedPath);
* Returns an array of translated summarized global styles changes.
* Results are cached using a Map() key of `JSON.stringify( { next, previous } )`.
* @param {Object} next The changed object to compare.
* @param {Object} previous The original object to compare against.
* @return {Array[]} A 2-dimensional array of tuples: [ "group", "translated change" ].
function getGlobalStylesChangelist(next, previous) {
const cacheKey = JSON.stringify({
if (globalStylesChangesCache.has(cacheKey)) {
return globalStylesChangesCache.get(cacheKey);
* Compare the two changesets with normalized keys.
* The order of these keys determines the order in which
* they'll appear in the results.
const changedValueTree = deepCompare({
background: next?.styles?.background,
color: next?.styles?.color,
typography: next?.styles?.typography,
spacing: next?.styles?.spacing
blocks: next?.styles?.blocks,
elements: next?.styles?.elements,
background: previous?.styles?.background,
color: previous?.styles?.color,
typography: previous?.styles?.typography,
spacing: previous?.styles?.spacing
blocks: previous?.styles?.blocks,
elements: previous?.styles?.elements,
settings: previous?.settings
if (!changedValueTree.length) {
globalStylesChangesCache.set(cacheKey, get_global_styles_changes_EMPTY_ARRAY);
return get_global_styles_changes_EMPTY_ARRAY;
// Remove duplicate results.
const result = [...new Set(changedValueTree)]
* Remove empty translations.
*/.reduce((acc, curr) => {
const translation = getTranslation(curr);
acc.push([curr.split('.')[0], translation]);
globalStylesChangesCache.set(cacheKey, result);
* From a getGlobalStylesChangelist() result, returns an array of translated global styles changes, grouped by type.
* The types are 'blocks', 'elements', 'settings', and 'styles'.
* @param {Object} next The changed object to compare.
* @param {Object} previous The original object to compare against.
* @param {{maxResults:number}} options Options. maxResults: results to return before truncating.
* @return {string[]} An array of translated changes.
function getGlobalStylesChanges(next, previous, options = {}) {
let changeList = getGlobalStylesChangelist(next, previous);
const changesLength = changeList.length;
// Truncate to `n` results if necessary.
if (!!maxResults && changesLength > maxResults) {
changeList = changeList.slice(0, maxResults);
return Object.entries(changeList.reduce((acc, curr) => {
const group = acc[curr[0]] || [];
if (!group.includes(curr[1])) {
acc[curr[0]] = [...group, curr[1]];
}, {})).map(([key, changeValues]) => {
const changeValuesLength = changeValues.length;
const joinedChangesValue = changeValues.join((0,external_wp_i18n_namespaceObject.__)(', '));
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: a list of block names separated by a comma.
(0,external_wp_i18n_namespaceObject._n)('%s block.', '%s blocks.', changeValuesLength), joinedChangesValue);
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: a list of element names separated by a comma.
(0,external_wp_i18n_namespaceObject._n)('%s element.', '%s elements.', changeValuesLength), joinedChangesValue);
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: a list of theme.json setting labels separated by a comma.
(0,external_wp_i18n_namespaceObject.__)('%s settings.'), joinedChangesValue);
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: a list of theme.json top-level styles labels separated by a comma.
(0,external_wp_i18n_namespaceObject.__)('%s styles.'), joinedChangesValue);
return (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: a list of global styles changes separated by a comma.
(0,external_wp_i18n_namespaceObject.__)('%s.'), joinedChangesValue);
return get_global_styles_changes_EMPTY_ARRAY;
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/index.js
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/rich-text/get-rich-text-values.js