: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
function useHasBorderRadiusControl(settings) {
return settings?.border?.radius;
function useHasBorderStyleControl(settings) {
return settings?.border?.style;
function useHasBorderWidthControl(settings) {
return settings?.border?.width;
function useHasShadowControl(settings) {
const shadows = useShadowPresets(settings);
return !!settings?.shadow && shadows.length > 0;
function BorderToolsPanel({
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const updatedValue = resetAllFilter(value);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
dropdownMenuProps: dropdownMenuProps,
const border_panel_DEFAULT_CONTROLS = {
as: Wrapper = BorderToolsPanel,
defaultControls = border_panel_DEFAULT_CONTROLS
var _settings$shadow$pres, _ref, _ref2, _shadowPresets$custom;
const colors = useColorsPerOrigin(settings);
const decodeValue = (0,external_wp_element_namespaceObject.useCallback)(rawValue => getValueFromVariable({
}, '', rawValue), [settings]);
const encodeColorValue = colorValue => {
const allColors = colors.flatMap(({
const colorObject = allColors.find(({
}) => color === colorValue);
return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
const border = (0,external_wp_element_namespaceObject.useMemo)(() => {
if ((0,external_wp_components_namespaceObject.__experimentalHasSplitBorders)(inheritedValue?.border)) {
...inheritedValue?.border
['top', 'right', 'bottom', 'left'].forEach(side => {
color: decodeValue(borderValue[side]?.color)
...inheritedValue?.border,
color: inheritedValue?.border?.color ? decodeValue(inheritedValue?.border?.color) : undefined
}, [inheritedValue?.border, decodeValue]);
const setBorder = newBorder => onChange({
const showBorderColor = useHasBorderColorControl(settings);
const showBorderStyle = useHasBorderStyleControl(settings);
const showBorderWidth = useHasBorderWidthControl(settings);
const showBorderRadius = useHasBorderRadiusControl(settings);
const borderRadiusValues = decodeValue(border?.radius);
const setBorderRadius = newBorderRadius => setBorder({
const hasBorderRadius = () => {
const borderValues = value?.border?.radius;
if (typeof borderValues === 'object') {
return Object.entries(borderValues).some(Boolean);
const hasShadowControl = useHasShadowControl(settings);
const shadow = decodeValue(inheritedValue?.shadow);
const shadowPresets = (_settings$shadow$pres = settings?.shadow?.presets) !== null && _settings$shadow$pres !== void 0 ? _settings$shadow$pres : {};
const mergedShadowPresets = (_ref = (_ref2 = (_shadowPresets$custom = shadowPresets.custom) !== null && _shadowPresets$custom !== void 0 ? _shadowPresets$custom : shadowPresets.theme) !== null && _ref2 !== void 0 ? _ref2 : shadowPresets.default) !== null && _ref !== void 0 ? _ref : [];
const setShadow = newValue => {
const slug = mergedShadowPresets?.find(({
}) => shadowName === newValue)?.slug;
onChange(setImmutably(value, ['shadow'], slug ? `var:preset|shadow|${slug}` : newValue || undefined));
const hasShadow = () => !!value?.shadow;
const resetShadow = () => setShadow(undefined);
const resetBorder = () => {
radius: value?.border?.radius
const onBorderChange = newBorder => {
// Ensure we have a visible border style when a border width or
// color is being selected.
if ((0,external_wp_components_namespaceObject.__experimentalHasSplitBorders)(updatedBorder)) {
['top', 'right', 'bottom', 'left'].forEach(side => {
if (updatedBorder[side]) {
color: encodeColorValue(updatedBorder[side]?.color)
} else if (updatedBorder) {
updatedBorder.color = encodeColorValue(updatedBorder.color);
// As radius is maintained separately to color, style, and width
// maintain its value. Undefined values here will be cleaned when
// global styles are saved.
const resetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(previousValue => {
const showBorderByDefault = defaultControls?.color || defaultControls?.width;
const hasBorderControl = showBorderColor || showBorderStyle || showBorderWidth || showBorderRadius;
const label = useBorderPanelLabel({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(Wrapper, {
resetAllFilter: resetAllFilter,
children: [(showBorderWidth || showBorderColor) && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: () => (0,external_wp_components_namespaceObject.__experimentalIsDefinedBorder)(value?.border),
label: (0,external_wp_i18n_namespaceObject.__)('Border'),
onDeselect: () => resetBorder(),
isShownByDefault: showBorderByDefault,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalBorderBoxControl, {
enableStyle: showBorderStyle,
onChange: onBorderChange,
popoverPlacement: "left-start",
__experimentalIsRenderedInSidebar: true,
size: "__unstable-large",
hideLabelFromVision: !hasShadowControl,
label: (0,external_wp_i18n_namespaceObject.__)('Border')
}), showBorderRadius && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
hasValue: hasBorderRadius,
label: (0,external_wp_i18n_namespaceObject.__)('Radius'),
onDeselect: () => setBorderRadius(undefined),
isShownByDefault: defaultControls.radius,
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BorderRadiusControl, {
values: borderRadiusValues,
setBorderRadius(newValue || undefined);
}), hasShadowControl && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
label: (0,external_wp_i18n_namespaceObject.__)('Shadow'),
isShownByDefault: defaultControls.shadow,
children: [hasBorderControl ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
children: (0,external_wp_i18n_namespaceObject.__)('Shadow')
}) : null, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalItemGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ShadowPopover, {
onShadowChange: setShadow,
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/border.js
const BORDER_SUPPORT_KEY = '__experimentalBorder';
const SHADOW_SUPPORT_KEY = 'shadow';
const getColorByProperty = (colors, property, value) => {
colors.some(origin => origin.colors.some(color => {
if (color[property] === value) {
const getMultiOriginColor = ({
// Search each origin (default, theme, or user) for matching color by name.
const colorObject = getColorByProperty(colors, 'slug', namedColor);
// Skip if no custom color or matching named color.
// Attempt to find color via custom color value or build new object.
const colorObject = getColorByProperty(colors, 'color', customColor);
return colorObject ? colorObject : {
function getColorSlugFromVariable(value) {
const namedColor = /var:preset\|color\|(.+)/.exec(value);
if (namedColor && namedColor[1]) {
function styleToAttributes(style) {
if ((0,external_wp_components_namespaceObject.__experimentalHasSplitBorders)(style?.border)) {
const borderColorValue = style?.border?.color;
const borderColorSlug = borderColorValue?.startsWith('var:preset|color|') ? borderColorValue.substring('var:preset|color|'.length) : undefined;
color: borderColorSlug ? undefined : borderColorValue
style: utils_cleanEmptyObject(updatedStyle),
borderColor: borderColorSlug
function attributesToStyle(attributes) {
if ((0,external_wp_components_namespaceObject.__experimentalHasSplitBorders)(attributes.style?.border)) {
...attributes.style?.border,
color: attributes.borderColor ? 'var:preset|color|' + attributes.borderColor : attributes.style?.border?.color
function BordersInspectorControl({
const attributesResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(attributes => {
const existingStyle = attributesToStyle(attributes);
const updatedStyle = resetAllFilter(existingStyle);
...styleToAttributes(updatedStyle)
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
resetAllFilter: attributesResetAllFilter,
function border_BorderPanel({
const isEnabled = useHasBorderPanel(settings);
function selector(select) {
} = select(store).getBlockAttributes(clientId) || {};
} = (0,external_wp_data_namespaceObject.useSelect)(selector, [clientId]);
const value = (0,external_wp_element_namespaceObject.useMemo)(() => {
return attributesToStyle({
}, [style, borderColor]);
const onChange = newStyle => {
setAttributes(styleToAttributes(newStyle));
const defaultControls = {
...(0,external_wp_blocks_namespaceObject.getBlockSupport)(name, [BORDER_SUPPORT_KEY, '__experimentalDefaultControls']),
...(0,external_wp_blocks_namespaceObject.getBlockSupport)(name, [SHADOW_SUPPORT_KEY, '__experimentalDefaultControls'])
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BorderPanel, {
as: BordersInspectorControl,
defaultControls: defaultControls
* Determine whether there is block support for border properties.
* @param {string} blockName Block name.
* @param {string} feature Border feature to check support for.
* @return {boolean} Whether there is support.
function hasBorderSupport(blockName, feature = 'any') {
if (external_wp_element_namespaceObject.Platform.OS !== 'web') {
const support = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockName, BORDER_SUPPORT_KEY);
return !!(support?.color || support?.radius || support?.width || support?.style);
return !!support?.[feature];
* Determine whether there is block support for shadow properties.
* @param {string} blockName Block name.
* @return {boolean} Whether there is support.
function hasShadowSupport(blockName) {
return hasBlockSupport(blockName, SHADOW_SUPPORT_KEY);
function useBorderPanelLabel({
const settings = useBlockSettings(blockName);
const controls = useHasBorderPanelControls(settings);
if (!hasBorderControl && !hasShadowControl && blockName) {
hasBorderControl = controls?.hasBorderColor || controls?.hasBorderStyle || controls?.hasBorderWidth || controls?.hasBorderRadius;
hasShadowControl = controls?.hasShadow;
if (hasBorderControl && hasShadowControl) {
return (0,external_wp_i18n_namespaceObject.__)('Border & Shadow');
return (0,external_wp_i18n_namespaceObject.__)('Shadow');
return (0,external_wp_i18n_namespaceObject.__)('Border');
* Returns a new style object where the specified border attribute has been
* @param {Object} style Styles from block attributes.
* @param {string} attribute The border style attribute to clear.
* @return {Object} Style object with the specified attribute removed.
function removeBorderAttribute(style, attribute) {
return cleanEmptyObject({
* Filters registered block settings, extending attributes to include
* `borderColor` if needed.
* @param {Object} settings Original block settings.
* @return {Object} Updated block settings.
function addAttributes(settings) {
if (!hasBorderSupport(settings, 'color')) {
// Allow blocks to specify default value if needed.
if (settings.attributes.borderColor) {
// Add new borderColor attribute to block settings.