: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/hooks.js
const VALID_SETTINGS = ['appearanceTools', 'useRootPaddingAwareAlignments', 'background.backgroundImage', 'background.backgroundRepeat', 'background.backgroundSize', 'background.backgroundPosition', 'border.color', 'border.radius', 'border.style', 'border.width', 'shadow.presets', 'shadow.defaultPresets', 'color.background', 'color.button', 'color.caption', 'color.custom', 'color.customDuotone', 'color.customGradient', 'color.defaultDuotone', 'color.defaultGradients', 'color.defaultPalette', 'color.duotone', 'color.gradients', 'color.heading', 'color.link', 'color.palette', 'color.text', 'custom', 'dimensions.aspectRatio', 'dimensions.minHeight', 'layout.contentSize', 'layout.definitions', 'layout.wideSize', 'lightbox.enabled', 'lightbox.allowEditing', 'position.fixed', 'position.sticky', 'spacing.customSpacingSize', 'spacing.defaultSpacingSizes', 'spacing.spacingSizes', 'spacing.spacingScale', 'spacing.blockGap', 'spacing.margin', 'spacing.padding', 'spacing.units', 'typography.fluid', 'typography.customFontSize', 'typography.defaultFontSizes', 'typography.dropCap', 'typography.fontFamilies', 'typography.fontSizes', 'typography.fontStyle', 'typography.fontWeight', 'typography.letterSpacing', 'typography.lineHeight', 'typography.textAlign', 'typography.textColumns', 'typography.textDecoration', 'typography.textTransform', 'typography.writingMode'];
const useGlobalStylesReset = () => {
} = (0,external_wp_element_namespaceObject.useContext)(GlobalStylesContext);
const canReset = !!config && !es6_default()(config, EMPTY_CONFIG);
return [canReset, (0,external_wp_element_namespaceObject.useCallback)(() => setUserConfig(EMPTY_CONFIG), [setUserConfig])];
function useGlobalSetting(propertyPath, blockName, source = 'all') {
} = (0,external_wp_element_namespaceObject.useContext)(GlobalStylesContext);
const appendedBlockPath = blockName ? '.blocks.' + blockName : '';
const appendedPropertyPath = propertyPath ? '.' + propertyPath : '';
const contextualPath = `settings${appendedBlockPath}${appendedPropertyPath}`;
const globalPath = `settings${appendedPropertyPath}`;
const sourceKey = source === 'all' ? 'merged' : source;
const settingValue = (0,external_wp_element_namespaceObject.useMemo)(() => {
const configToUse = configs[sourceKey];
throw 'Unsupported source';
var _getValueFromObjectPa;
return (_getValueFromObjectPa = getValueFromObjectPath(configToUse, contextualPath)) !== null && _getValueFromObjectPa !== void 0 ? _getValueFromObjectPa : getValueFromObjectPath(configToUse, globalPath);
VALID_SETTINGS.forEach(setting => {
var _getValueFromObjectPa2;
const value = (_getValueFromObjectPa2 = getValueFromObjectPath(configToUse, `settings${appendedBlockPath}.${setting}`)) !== null && _getValueFromObjectPa2 !== void 0 ? _getValueFromObjectPa2 : getValueFromObjectPath(configToUse, `settings.${setting}`);
if (value !== undefined) {
result = setImmutably(result, setting.split('.'), value);
}, [configs, sourceKey, propertyPath, contextualPath, globalPath, appendedBlockPath]);
const setSetting = newValue => {
setUserConfig(currentConfig => setImmutably(currentConfig, contextualPath.split('.'), newValue));
return [settingValue, setSetting];
function useGlobalStyle(path, blockName, source = 'all', {
shouldDecodeEncode = true
} = (0,external_wp_element_namespaceObject.useContext)(GlobalStylesContext);
const appendedPath = path ? '.' + path : '';
const finalPath = !blockName ? `styles${appendedPath}` : `styles.blocks.${blockName}${appendedPath}`;
const setStyle = newValue => {
setUserConfig(currentConfig => setImmutably(currentConfig, finalPath.split('.'), shouldDecodeEncode ? getPresetVariableFromValue(mergedConfig.settings, blockName, path, newValue) : newValue));
rawResult = getValueFromObjectPath(mergedConfig, finalPath);
result = shouldDecodeEncode ? getValueFromVariable(mergedConfig, blockName, rawResult) : rawResult;
rawResult = getValueFromObjectPath(userConfig, finalPath);
result = shouldDecodeEncode ? getValueFromVariable(mergedConfig, blockName, rawResult) : rawResult;
rawResult = getValueFromObjectPath(baseConfig, finalPath);
result = shouldDecodeEncode ? getValueFromVariable(baseConfig, blockName, rawResult) : rawResult;
throw 'Unsupported source';
return [result, setStyle];
function useGlobalStyleLinks() {
} = (0,external_wp_element_namespaceObject.useContext)(GlobalStylesContext);
return mergedConfig?._links;
* React hook that overrides a global settings object with block and element specific settings.
* @param {Object} parentSettings Settings object.
* @param {blockName?} blockName Block name.
* @param {element?} element Element name.
* @return {Object} Merge of settings and supports.
function useSettingsForBlockElement(parentSettings, blockName, element) {
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
supportedStyles: unlock(select(external_wp_blocks_namespaceObject.store)).getSupportedStyles(blockName, element),
supports: select(external_wp_blocks_namespaceObject.store).getBlockType(blockName)?.supports
}, [blockName, element]);
return (0,external_wp_element_namespaceObject.useMemo)(() => {
const updatedSettings = {
if (!supportedStyles.includes('fontSize')) {
updatedSettings.typography = {
...updatedSettings.typography,
if (!supportedStyles.includes('fontFamily')) {
updatedSettings.typography = {
...updatedSettings.typography,
updatedSettings.color = {
...updatedSettings.color,
text: updatedSettings.color?.text && supportedStyles.includes('color'),
background: updatedSettings.color?.background && (supportedStyles.includes('background') || supportedStyles.includes('backgroundColor')),
button: updatedSettings.color?.button && supportedStyles.includes('buttonColor'),
heading: updatedSettings.color?.heading && supportedStyles.includes('headingColor'),
link: updatedSettings.color?.link && supportedStyles.includes('linkColor'),
caption: updatedSettings.color?.caption && supportedStyles.includes('captionColor')
// Some blocks can enable background colors but disable gradients.
if (!supportedStyles.includes('background')) {
updatedSettings.color.gradients = [];
updatedSettings.color.customGradient = false;
// If filters are not supported by the block/element, disable duotone.
if (!supportedStyles.includes('filter')) {
updatedSettings.color.defaultDuotone = false;
updatedSettings.color.customDuotone = false;
['lineHeight', 'fontStyle', 'fontWeight', 'letterSpacing', 'textAlign', 'textTransform', 'textDecoration', 'writingMode'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.typography = {
...updatedSettings.typography,
// The column-count style is named text column to reduce confusion with
// the columns block and manage expectations from the support.
// See: https://github.com/WordPress/gutenberg/pull/33587
if (!supportedStyles.includes('columnCount')) {
updatedSettings.typography = {
...updatedSettings.typography,
['contentSize', 'wideSize'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.layout = {
...updatedSettings.layout,
['padding', 'margin', 'blockGap'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.spacing = {
...updatedSettings.spacing,
const sides = Array.isArray(supports?.spacing?.[key]) ? supports?.spacing?.[key] : supports?.spacing?.[key]?.sides;
// Check if spacing type is supported before adding sides.
if (sides?.length && updatedSettings.spacing?.[key]) {
updatedSettings.spacing = {
...updatedSettings.spacing,
...updatedSettings.spacing?.[key],
['aspectRatio', 'minHeight'].forEach(key => {
if (!supportedStyles.includes(key)) {
updatedSettings.dimensions = {
...updatedSettings.dimensions,
['radius', 'color', 'style', 'width'].forEach(key => {
if (!supportedStyles.includes('border' + key.charAt(0).toUpperCase() + key.slice(1))) {
updatedSettings.border = {
...updatedSettings.border,
updatedSettings.shadow = supportedStyles.includes('shadow') ? updatedSettings.shadow : false;
// Text alignment is only available for blocks.
updatedSettings.typography.textAlign = false;
}, [parentSettings, supportedStyles, supports, element]);
function useColorsPerOrigin(settings) {
const customColors = settings?.color?.palette?.custom;
const themeColors = settings?.color?.palette?.theme;
const defaultColors = settings?.color?.palette?.default;
const shouldDisplayDefaultColors = settings?.color?.defaultPalette;
return (0,external_wp_element_namespaceObject.useMemo)(() => {
if (themeColors && themeColors.length) {
name: (0,external_wp_i18n_namespaceObject._x)('Theme', 'Indicates this palette comes from the theme.'),
if (shouldDisplayDefaultColors && defaultColors && defaultColors.length) {
name: (0,external_wp_i18n_namespaceObject._x)('Default', 'Indicates this palette comes from WordPress.'),
if (customColors && customColors.length) {
name: (0,external_wp_i18n_namespaceObject._x)('Custom', 'Indicates this palette is created by the user.'),
}, [customColors, themeColors, defaultColors, shouldDisplayDefaultColors]);
function useGradientsPerOrigin(settings) {
const customGradients = settings?.color?.gradients?.custom;
const themeGradients = settings?.color?.gradients?.theme;
const defaultGradients = settings?.color?.gradients?.default;
const shouldDisplayDefaultGradients = settings?.color?.defaultGradients;
return (0,external_wp_element_namespaceObject.useMemo)(() => {
if (themeGradients && themeGradients.length) {
name: (0,external_wp_i18n_namespaceObject._x)('Theme', 'Indicates this palette comes from the theme.'),
gradients: themeGradients
if (shouldDisplayDefaultGradients && defaultGradients && defaultGradients.length) {
name: (0,external_wp_i18n_namespaceObject._x)('Default', 'Indicates this palette comes from WordPress.'),
gradients: defaultGradients
if (customGradients && customGradients.length) {
name: (0,external_wp_i18n_namespaceObject._x)('Custom', 'Indicates this palette is created by the user.'),
gradients: customGradients
}, [customGradients, themeGradients, defaultGradients, shouldDisplayDefaultGradients]);
;// CONCATENATED MODULE: ./node_modules/clsx/dist/clsx.mjs
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f)}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}/* harmony default export */ const dist_clsx = (clsx);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/utils.js
* Removed falsy values from nested object.
* @return {*} Object cleaned from falsy values
const utils_cleanEmptyObject = object => {
if (object === null || typeof object !== 'object' || Array.isArray(object)) {
const cleanedNestedObjects = Object.entries(object).map(([key, value]) => [key, utils_cleanEmptyObject(value)]).filter(([, value]) => value !== undefined);
return !cleanedNestedObjects.length ? undefined : Object.fromEntries(cleanedNestedObjects);
function transformStyles(activeSupports, migrationPaths, result, source, index, results) {
// If there are no active supports return early.
if (Object.values(activeSupports !== null && activeSupports !== void 0 ? activeSupports : {}).every(isActive => !isActive)) {
// If the condition verifies we are probably in the presence of a wrapping transform
// e.g: nesting paragraphs in a group or columns and in that case the styles should not be transformed.
if (results.length === 1 && result.innerBlocks.length === source.length) {
// For cases where we have a transform from one block to multiple blocks
// or multiple blocks to one block we apply the styles of the first source block
let referenceBlockAttributes = source[0]?.attributes;
// If we are in presence of transform between more than one block in the source
// that has more than one block in the result
// we apply the styles on source N to the result N,
// if source N does not exists we do nothing.
if (results.length > 1 && source.length > 1) {
referenceBlockAttributes = source[index]?.attributes;
let returnBlock = result;
Object.entries(activeSupports).forEach(([support, isActive]) => {
migrationPaths[support].forEach(path => {
const styleValue = getValueFromObjectPath(referenceBlockAttributes, path);
attributes: setImmutably(returnBlock.attributes, path, styleValue)
* Check whether serialization of specific block support feature or set should
* @param {string|Object} blockNameOrType Block name or block type object.
* @param {string} featureSet Name of block support feature set.
* @param {string} feature Name of the individual feature to check.
* @return {boolean} Whether serialization should occur.
function shouldSkipSerialization(blockNameOrType, featureSet, feature) {
const support = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockNameOrType, featureSet);
const skipSerialization = support?.__experimentalSkipSerialization;
if (Array.isArray(skipSerialization)) {
return skipSerialization.includes(feature);
return skipSerialization;
const pendingStyleOverrides = new WeakMap();
function useStyleOverride({
} = unlock((0,external_wp_data_namespaceObject.useDispatch)(store));
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const fallbackId = (0,external_wp_element_namespaceObject.useId)();
(0,external_wp_element_namespaceObject.useEffect)(() => {
// Unmount if there is CSS and assets are empty.
const _id = id || fallbackId;
// Batch updates to style overrides to avoid triggering cascading renders
// for each style override block included in a tree and optimize initial render.
if (!pendingStyleOverrides.get(registry)) {
pendingStyleOverrides.set(registry, []);
pendingStyleOverrides.get(registry).push([_id, override]);
window.queueMicrotask(() => {
if (pendingStyleOverrides.get(registry)?.length) {
pendingStyleOverrides.get(registry).forEach(args => {
setStyleOverride(...args);
pendingStyleOverrides.set(registry, []);
const isPending = pendingStyleOverrides.get(registry)?.find(([currentId]) => currentId === _id);
pendingStyleOverrides.set(registry, pendingStyleOverrides.get(registry).filter(([currentId]) => currentId !== _id));
deleteStyleOverride(_id);
}, [id, css, clientId, assets, __unstableType, fallbackId, setStyleOverride, deleteStyleOverride, registry]);
* Based on the block and its context, returns an object of all the block settings.
* This object can be passed as a prop to all the Styles UI components
* (TypographyPanel, DimensionsPanel...).
* @param {string} name Block name.
* @param {*} parentLayout Parent layout.
* @return {Object} Settings object.
function useBlockSettings(name, parentLayout) {
const [backgroundImage, backgroundSize, customFontFamilies, defaultFontFamilies, themeFontFamilies, defaultFontSizesEnabled, customFontSizes, defaultFontSizes, themeFontSizes, customFontSize, fontStyle, fontWeight, lineHeight, textAlign, textColumns, textDecoration, writingMode, textTransform, letterSpacing, padding, margin, blockGap, defaultSpacingSizesEnabled, customSpacingSize, userSpacingSizes, defaultSpacingSizes, themeSpacingSizes, units, aspectRatio, minHeight, layout, borderColor, borderRadius, borderStyle, borderWidth, customColorsEnabled, customColors, customDuotone, themeColors, defaultColors, defaultPalette, defaultDuotone, userDuotonePalette, themeDuotonePalette, defaultDuotonePalette, userGradientPalette, themeGradientPalette, defaultGradientPalette, defaultGradients, areCustomGradientsEnabled, isBackgroundEnabled, isLinkEnabled, isTextEnabled, isHeadingEnabled, isButtonEnabled, shadow] = use_settings_useSettings('background.backgroundImage', 'background.backgroundSize', 'typography.fontFamilies.custom', 'typography.fontFamilies.default', 'typography.fontFamilies.theme', 'typography.defaultFontSizes', 'typography.fontSizes.custom', 'typography.fontSizes.default', 'typography.fontSizes.theme', 'typography.customFontSize', 'typography.fontStyle', 'typography.fontWeight', 'typography.lineHeight', 'typography.textAlign', 'typography.textColumns', 'typography.textDecoration', 'typography.writingMode', 'typography.textTransform', 'typography.letterSpacing', 'spacing.padding', 'spacing.margin', 'spacing.blockGap', 'spacing.defaultSpacingSizes', 'spacing.customSpacingSize', 'spacing.spacingSizes.custom', 'spacing.spacingSizes.default', 'spacing.spacingSizes.theme', 'spacing.units', 'dimensions.aspectRatio', 'dimensions.minHeight', 'layout', 'border.color', 'border.radius', 'border.style', 'border.width', 'color.custom', 'color.palette.custom', 'color.customDuotone', 'color.palette.theme', 'color.palette.default', 'color.defaultPalette', 'color.defaultDuotone', 'color.duotone.custom', 'color.duotone.theme', 'color.duotone.default', 'color.gradients.custom', 'color.gradients.theme', 'color.gradients.default', 'color.defaultGradients', 'color.customGradient', 'color.background', 'color.link', 'color.text', 'color.heading', 'color.button', 'shadow');
const rawSettings = (0,external_wp_element_namespaceObject.useMemo)(() => {
custom: userGradientPalette,
theme: themeGradientPalette,
default: defaultGradientPalette
custom: userDuotonePalette,
theme: themeDuotonePalette,
default: defaultDuotonePalette
custom: customColorsEnabled,
customGradient: areCustomGradientsEnabled,
background: isBackgroundEnabled,
heading: isHeadingEnabled,