: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
* Override props assigned to save component to inject border color.
* @param {Object} props Additional props applied to save element.
* @param {Object|string} blockNameOrType Block type definition.
* @param {Object} attributes Block's attributes.
* @return {Object} Filtered props to apply to save element.
function border_addSaveProps(props, blockNameOrType, attributes) {
if (!hasBorderSupport(blockNameOrType, 'color') || shouldSkipSerialization(blockNameOrType, BORDER_SUPPORT_KEY, 'color')) {
const borderClasses = getBorderClasses(attributes);
const newClassName = dist_clsx(props.className, borderClasses);
// If we are clearing the last of the previous classes in `className`
// set it to `undefined` to avoid rendering empty DOM attributes.
props.className = newClassName ? newClassName : undefined;
* Generates a CSS class name consisting of all the applicable border color
* classes given the current block attributes.
* @param {Object} attributes Block's attributes.
* @return {string} CSS class name.
function getBorderClasses(attributes) {
const borderColorClass = getColorClassName('border-color', borderColor);
'has-border-color': borderColor || style?.border?.color,
[borderColorClass]: !!borderColorClass
function border_useBlockProps({
} = useMultipleOriginColorsAndGradients();
if (!hasBorderSupport(name, 'color') || shouldSkipSerialization(name, BORDER_SUPPORT_KEY, 'color')) {
} = getMultiOriginColor({
} = getMultiOriginColor({
namedColor: getColorSlugFromVariable(style?.border?.top?.color)
} = getMultiOriginColor({
namedColor: getColorSlugFromVariable(style?.border?.right?.color)
} = getMultiOriginColor({
namedColor: getColorSlugFromVariable(style?.border?.bottom?.color)
} = getMultiOriginColor({
namedColor: getColorSlugFromVariable(style?.border?.left?.color)
borderTopColor: borderTopColor || borderColorValue,
borderRightColor: borderRightColor || borderColorValue,
borderBottomColor: borderBottomColor || borderColorValue,
borderLeftColor: borderLeftColor || borderColorValue
return border_addSaveProps({
style: utils_cleanEmptyObject(extraStyles) || {}
/* harmony default export */ const border = ({
useBlockProps: border_useBlockProps,
addSaveProps: border_addSaveProps,
attributeKeys: ['borderColor', 'style'],
return hasBorderSupport(name, 'color');
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/border/addAttributes', addAttributes);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/gradients/use-gradient.js
function __experimentalGetGradientClass(gradientSlug) {
return `has-${gradientSlug}-gradient-background`;
* Retrieves the gradient value per slug.
* @param {Array} gradients Gradient Palette
* @param {string} slug Gradient slug
* @return {string} Gradient value.
function getGradientValueBySlug(gradients, slug) {
const gradient = gradients?.find(g => g.slug === slug);
return gradient && gradient.gradient;
function __experimentalGetGradientObjectByGradientValue(gradients, value) {
const gradient = gradients?.find(g => g.gradient === value);
* Retrieves the gradient slug per slug.
* @param {Array} gradients Gradient Palette
* @param {string} value Gradient value
* @return {string} Gradient slug.
function getGradientSlugByValue(gradients, value) {
const gradient = __experimentalGetGradientObjectByGradientValue(gradients, value);
return gradient && gradient.slug;
function __experimentalUseGradient({
gradientAttribute = 'gradient',
customGradientAttribute = 'customGradient'
} = useBlockEditContext();
const [userGradientPalette, themeGradientPalette, defaultGradientPalette] = use_settings_useSettings('color.gradients.custom', 'color.gradients.theme', 'color.gradients.default');
const allGradients = (0,external_wp_element_namespaceObject.useMemo)(() => [...(userGradientPalette || []), ...(themeGradientPalette || []), ...(defaultGradientPalette || [])], [userGradientPalette, themeGradientPalette, defaultGradientPalette]);
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const attributes = getBlockAttributes(clientId) || {};
customGradient: attributes[customGradientAttribute],
gradient: attributes[gradientAttribute]
}, [clientId, gradientAttribute, customGradientAttribute]);
} = (0,external_wp_data_namespaceObject.useDispatch)(store);
const setGradient = (0,external_wp_element_namespaceObject.useCallback)(newGradientValue => {
const slug = getGradientSlugByValue(allGradients, newGradientValue);
updateBlockAttributes(clientId, {
[gradientAttribute]: slug,
[customGradientAttribute]: undefined
updateBlockAttributes(clientId, {
[gradientAttribute]: undefined,
[customGradientAttribute]: newGradientValue
}, [allGradients, clientId, updateBlockAttributes]);
const gradientClass = __experimentalGetGradientClass(gradient);
gradientValue = getGradientValueBySlug(allGradients, gradient);
gradientValue = customGradient;
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/colors-gradients/control.js
} = unlock(external_wp_components_namespaceObject.privateApis);
const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
function ColorGradientControlInner({
__experimentalIsRenderedInSidebar,
const canChooseAColor = onColorChange && (colors && colors.length > 0 || !disableCustomColors);
const canChooseAGradient = onGradientChange && (gradients && gradients.length > 0 || !disableCustomGradients);
if (!canChooseAColor && !canChooseAGradient) {
[TAB_IDS.color]: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ColorPalette, {
onChange: canChooseAGradient ? newColor => {
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
enableAlpha: enableAlpha,
headingLevel: headingLevel
[TAB_IDS.gradient]: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.GradientPicker, {
onChange: canChooseAColor ? newGradient => {
onGradientChange(newGradient);
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
headingLevel: headingLevel
const renderPanelType = type => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-color-gradient-control__panel",
children: tabPanels[type]
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl, {
__nextHasNoMarginBottom: true,
className: dist_clsx('block-editor-color-gradient-control', className),
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("fieldset", {
className: "block-editor-color-gradient-control__fieldset",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
children: [showTitle && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("legend", {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-color-gradient-control__color-indicator",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
}), canChooseAColor && canChooseAGradient && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Tabs, {
defaultTabId: gradientValue ? TAB_IDS.gradient : !!canChooseAColor && TAB_IDS.color,
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Tabs.TabList, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tabs.Tab, {
children: (0,external_wp_i18n_namespaceObject.__)('Color')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tabs.Tab, {
children: (0,external_wp_i18n_namespaceObject.__)('Gradient')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tabs.TabPanel, {
className: "block-editor-color-gradient-control__panel",
children: tabPanels.color
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Tabs.TabPanel, {
className: "block-editor-color-gradient-control__panel",
children: tabPanels.gradient
}), !canChooseAGradient && renderPanelType(TAB_IDS.color), !canChooseAColor && renderPanelType(TAB_IDS.gradient)]
function ColorGradientControlSelect(props) {
const [colors, gradients, customColors, customGradients] = use_settings_useSettings('color.palette', 'color.gradients', 'color.custom', 'color.customGradient');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorGradientControlInner, {
disableCustomColors: !customColors,
disableCustomGradients: !customGradients,
function ColorGradientControl(props) {
if (colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorGradientControlInner, {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorGradientControlSelect, {
/* harmony default export */ const control = (ColorGradientControl);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/color-panel.js
function useHasColorPanel(settings) {
const hasTextPanel = useHasTextPanel(settings);
const hasBackgroundPanel = color_panel_useHasBackgroundPanel(settings);
const hasLinkPanel = useHasLinkPanel(settings);
const hasHeadingPanel = useHasHeadingPanel(settings);
const hasButtonPanel = useHasButtonPanel(settings);
const hasCaptionPanel = useHasCaptionPanel(settings);
return hasTextPanel || hasBackgroundPanel || hasLinkPanel || hasHeadingPanel || hasButtonPanel || hasCaptionPanel;
function useHasTextPanel(settings) {
const colors = useColorsPerOrigin(settings);
return settings?.color?.text && (colors?.length > 0 || settings?.color?.custom);
function useHasLinkPanel(settings) {
const colors = useColorsPerOrigin(settings);
return settings?.color?.link && (colors?.length > 0 || settings?.color?.custom);
function useHasCaptionPanel(settings) {
const colors = useColorsPerOrigin(settings);
return settings?.color?.caption && (colors?.length > 0 || settings?.color?.custom);
function useHasHeadingPanel(settings) {
const colors = useColorsPerOrigin(settings);
const gradients = useGradientsPerOrigin(settings);
return settings?.color?.heading && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
function useHasButtonPanel(settings) {
const colors = useColorsPerOrigin(settings);
const gradients = useGradientsPerOrigin(settings);
return settings?.color?.button && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
function color_panel_useHasBackgroundPanel(settings) {
const colors = useColorsPerOrigin(settings);
const gradients = useGradientsPerOrigin(settings);
return settings?.color?.background && (colors?.length > 0 || settings?.color?.custom || gradients?.length > 0 || settings?.color?.customGradient);
function ColorToolsPanel({
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const updatedValue = resetAllFilter(value);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
label: (0,external_wp_i18n_namespaceObject.__)('Elements'),
className: "color-block-support-panel",
__experimentalFirstVisibleItemClass: "first",
__experimentalLastVisibleItemClass: "last",
dropdownMenuProps: dropdownMenuProps,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "color-block-support-panel__inner-wrapper",
const color_panel_DEFAULT_CONTROLS = {
} = unlock(external_wp_components_namespaceObject.privateApis);
const LabeledColorIndicators = ({
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalZStack, {
children: indicators.map((indicator, index) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Flex, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ColorIndicator, {
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
className: "block-editor-panel-color-gradient-settings__color-name",
colorGradientControlSettings
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control, {
...colorGradientControlSettings,
__experimentalIsRenderedInSidebar: true,
colorValue: isGradient ? undefined : inheritedValue,
gradientValue: isGradient ? inheritedValue : undefined,
onColorChange: isGradient ? undefined : setValue,
onGradientChange: isGradient ? setValue : undefined,
clearable: inheritedValue === userValue,
function ColorPanelDropdown({