: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Border radius'),
onChange: handleOnChange,
onUnitChange: handleOnUnitChange,
placeholder: allPlaceholder,
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/border-radius-control/input-controls.js
topLeft: (0,external_wp_i18n_namespaceObject.__)('Top left'),
topRight: (0,external_wp_i18n_namespaceObject.__)('Top right'),
bottomLeft: (0,external_wp_i18n_namespaceObject.__)('Bottom left'),
bottomRight: (0,external_wp_i18n_namespaceObject.__)('Bottom right')
function BoxInputControls({
const createHandleOnChange = corner => next => {
// Filter out CSS-unit-only values to prevent invalid styles.
const isNumeric = !isNaN(parseFloat(next));
const nextValue = isNumeric ? next : undefined;
const createHandleOnUnitChange = side => next => {
setSelectedUnits(newUnits);
// For shorthand style & backwards compatibility, handle flat string value.
const values = typeof valuesProp !== 'string' ? valuesProp : {
// Controls are wrapped in tooltips as visible labels aren't desired here.
// Tooltip rendering also requires the UnitControl to be wrapped. See:
// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "components-border-radius-control__input-controls-wrapper",
children: Object.entries(CORNERS).map(([corner, label]) => {
const [parsedQuantity, parsedUnit] = (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values[corner]);
const computedUnit = values[corner] ? parsedUnit : selectedUnits[corner] || selectedUnits.flat;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Tooltip, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "components-border-radius-control__tooltip-wrapper",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
value: [parsedQuantity, computedUnit].join(''),
onChange: createHandleOnChange(corner),
onUnitChange: createHandleOnUnitChange(corner),
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link.js
const link_link = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z"
/* harmony default export */ const library_link = (link_link);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/border-radius-control/linked-button.js
const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink radii') : (0,external_wp_i18n_namespaceObject.__)('Link radii');
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Tooltip, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
className: "component-border-radius-control__linked-button",
icon: isLinked ? library_link : link_off,
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/border-radius-control/index.js
const border_radius_control_DEFAULT_VALUES = {
const MIN_BORDER_RADIUS_VALUE = 0;
const MAX_BORDER_RADIUS_VALUES = {
* Control to display border radius options.
* @param {Object} props Component props.
* @param {Function} props.onChange Callback to handle onChange.
* @param {Object} props.values Border radius values.
* @return {Element} Custom border radius control.
function BorderRadiusControl({
const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasDefinedValues(values) || !hasMixedValues(values));
// Tracking selected units via internal state allows filtering of CSS unit
// only values from being saved while maintaining preexisting unit selection
// behaviour. Filtering CSS unit only values prevents invalid style values.
const [selectedUnits, setSelectedUnits] = (0,external_wp_element_namespaceObject.useState)({
flat: typeof values === 'string' ? (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values)[1] : undefined,
topLeft: (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values?.topLeft)[1],
topRight: (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values?.topRight)[1],
bottomLeft: (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values?.bottomLeft)[1],
bottomRight: (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(values?.bottomRight)[1]
const [availableUnits] = use_settings_useSettings('spacing.units');
const units = (0,external_wp_components_namespaceObject.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['px', 'em', 'rem']
const unit = getAllUnit(selectedUnits);
const unitConfig = units && units.find(item => item.value === unit);
const step = unitConfig?.step || 1;
const [allValue] = (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(getAllValue(values));
const toggleLinked = () => setIsLinked(!isLinked);
const handleSliderChange = next => {
onChange(next !== undefined ? `${next}${unit}` : undefined);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "components-border-radius-control",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
children: (0,external_wp_i18n_namespaceObject.__)('Radius')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("div", {
className: "components-border-radius-control__wrapper",
children: [isLinked ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AllInputControl, {
className: "components-border-radius-control__unit-control",
min: MIN_BORDER_RADIUS_VALUE,
selectedUnits: selectedUnits,
setSelectedUnits: setSelectedUnits,
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.RangeControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Border radius'),
hideLabelFromVision: true,
className: "components-border-radius-control__range-control",
value: allValue !== null && allValue !== void 0 ? allValue : '',
min: MIN_BORDER_RADIUS_VALUE,
max: MAX_BORDER_RADIUS_VALUES[unit],
onChange: handleSliderChange,
__nextHasNoMarginBottom: true
}) : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControls, {
min: MIN_BORDER_RADIUS_VALUE,
selectedUnits: selectedUnits,
setSelectedUnits: setSelectedUnits,
values: values || border_radius_control_DEFAULT_VALUES,
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButton, {
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/check.js
const check_check = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
/* harmony default export */ const library_check = (check_check);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/shadow.js
const shadow = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {
d: "M12 8c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 6.5c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zM12.8 3h-1.5v3h1.5V3zm-1.6 18h1.5v-3h-1.5v3zm6.8-9.8v1.5h3v-1.5h-3zm-12 0H3v1.5h3v-1.5zm9.7 5.6 2.1 2.1 1.1-1.1-2.1-2.1-1.1 1.1zM8.3 7.2 6.2 5.1 5.1 6.2l2.1 2.1 1.1-1.1zM5.1 17.8l1.1 1.1 2.1-2.1-1.1-1.1-2.1 2.1zM18.9 6.2l-1.1-1.1-2.1 2.1 1.1 1.1 2.1-2.1z"
/* harmony default export */ const library_shadow = (shadow);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/shadow-panel-components.js
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation.
const shadow_panel_components_EMPTY_ARRAY = [];
CompositeItemV2: CompositeItem,
useCompositeStoreV2: useCompositeStore
} = unlock(external_wp_components_namespaceObject.privateApis);
function ShadowPopoverContainer({
const shadows = useShadowPresets(settings);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-global-styles__shadow-popover-container",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalHeading, {
children: (0,external_wp_i18n_namespaceObject.__)('Drop shadow')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ShadowPresets, {
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-global-styles__clear-shadow",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
onClick: () => onShadowChange(undefined),
children: (0,external_wp_i18n_namespaceObject.__)('Clear')
const compositeStore = useCompositeStore();
return !presets ? null : /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Composite, {
className: "block-editor-global-styles__shadow__list",
"aria-label": (0,external_wp_i18n_namespaceObject.__)('Drop shadows'),
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ShadowIndicator, {
isActive: shadow === activeShadow,
type: slug === 'unset' ? 'unset' : 'preset',
onSelect: () => onSelect(shadow === activeShadow ? undefined : shadow),
function ShadowIndicator({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CompositeItem, {
"aria-selected": isActive,
className: dist_clsx('block-editor-global-styles__shadow__item', {
render: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
className: dist_clsx('block-editor-global-styles__shadow-indicator', {
children: isActive && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: popoverProps,
className: "block-editor-global-styles__shadow-dropdown",
renderToggle: renderShadowToggle(),
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalDropdownContentWrapper, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ShadowPopoverContainer, {
onShadowChange: onShadowChange,
function renderShadowToggle() {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {
className: "block-editor-global-styles__toggle-icon",
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: (0,external_wp_i18n_namespaceObject.__)('Drop shadow')
function useShadowPresets(settings) {
return (0,external_wp_element_namespaceObject.useMemo)(() => {
var _settings$shadow$pres;
return shadow_panel_components_EMPTY_ARRAY;
const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
} = (_settings$shadow$pres = settings?.shadow?.presets) !== null && _settings$shadow$pres !== void 0 ? _settings$shadow$pres : {};
name: (0,external_wp_i18n_namespaceObject.__)('Unset'),
const shadowPresets = [...(defaultPresetsEnabled && defaultShadows || shadow_panel_components_EMPTY_ARRAY), ...(themeShadows || shadow_panel_components_EMPTY_ARRAY), ...(customShadows || shadow_panel_components_EMPTY_ARRAY)];
if (shadowPresets.length) {
shadowPresets.unshift(unsetShadow);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/global-styles/border-panel.js
function useHasBorderPanel(settings) {
const controls = Object.values(useHasBorderPanelControls(settings));
return controls.some(Boolean);
function useHasBorderPanelControls(settings) {
hasBorderColor: useHasBorderColorControl(settings),
hasBorderRadius: useHasBorderRadiusControl(settings),
hasBorderStyle: useHasBorderStyleControl(settings),
hasBorderWidth: useHasBorderWidthControl(settings),
hasShadow: useHasShadowControl(settings)
function useHasBorderColorControl(settings) {
return settings?.border?.color;