: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
if (!sides || !sides.length) {
const supportedItems = getSupportedMenuItems(sides);
const sideIcon = supportedItems[value].icon;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.DropdownMenu, {
className: "spacing-sizes-control__dropdown",
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
children: Object.entries(menuItems).map(([slug, {
const isSelected = value === slug;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
suffix: isSelected ? checkIcon : undefined,
}), !!customItem && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuGroup, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.MenuItem, {
isSelected: value === VIEWS.custom,
suffix: value === VIEWS.custom ? checkIcon : undefined,
children: customItem.label
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/spacing-sizes-control/hooks/use-spacing-sizes.js
const use_spacing_sizes_EMPTY_ARRAY = [];
const compare = new Intl.Collator('und', {
function useSpacingSizes() {
const [customSpacingSizes, themeSpacingSizes, defaultSpacingSizes, defaultSpacingSizesEnabled] = use_settings_useSettings('spacing.spacingSizes.custom', 'spacing.spacingSizes.theme', 'spacing.spacingSizes.default', 'spacing.defaultSpacingSizes');
const customSizes = customSpacingSizes !== null && customSpacingSizes !== void 0 ? customSpacingSizes : use_spacing_sizes_EMPTY_ARRAY;
const themeSizes = themeSpacingSizes !== null && themeSpacingSizes !== void 0 ? themeSpacingSizes : use_spacing_sizes_EMPTY_ARRAY;
const defaultSizes = defaultSpacingSizes && defaultSpacingSizesEnabled !== false ? defaultSpacingSizes : use_spacing_sizes_EMPTY_ARRAY;
return (0,external_wp_element_namespaceObject.useMemo)(() => {
name: (0,external_wp_i18n_namespaceObject.__)('None'),
}, ...customSizes, ...themeSizes, ...defaultSizes];
// Using numeric slugs opts-in to sorting by slug.
}) => /^[0-9]/.test(slug))) {
sizes.sort((a, b) => compare(a.slug, b.slug));
return sizes.length > RANGE_CONTROL_MAX_SIZE ? [{
name: (0,external_wp_i18n_namespaceObject.__)('Default'),
}, [customSizes, themeSizes, defaultSizes]);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/spacing-sizes-control/index.js
function SpacingSizesControl({
const spacingSizes = useSpacingSizes();
const inputValues = values || DEFAULT_VALUES;
const hasOneSide = sides?.length === 1;
const hasOnlyAxialSides = sides?.includes('horizontal') && sides?.includes('vertical') && sides?.length === 2;
const [view, setView] = (0,external_wp_element_namespaceObject.useState)(getInitialView(inputValues, sides));
const handleOnChange = nextValue => {
const inputControlProps = {
onChange: handleOnChange,
const renderControls = () => {
if (view === VIEWS.axial) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AxialInputControls, {
if (view === VIEWS.custom) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SeparatedInputControls, {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SingleInputControl, {
showSideInLabel: showSideInLabel
const sideLabel = ALL_SIDES.includes(view) && showSideInLabel ? LABELS[view] : '';
const label = (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: 2. Type of spacing being modified (Padding, margin, etc). 1: The side of the block being modified (top, bottom, left etc.).
(0,external_wp_i18n_namespaceObject.__)('%1$s %2$s'), labelProp, sideLabel).trim();
const dropdownLabelText = (0,external_wp_i18n_namespaceObject.sprintf)(
// translators: %s: The current spacing property e.g. "Padding", "Margin".
(0,external_wp_i18n_namespaceObject._x)('%s options', 'Button label to reveal side configuration options'), labelProp);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "spacing-sizes-control",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
className: "spacing-sizes-control__header",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
className: "spacing-sizes-control__label",
}), !hasOneSide && !hasOnlyAxialSides && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SidesDropdown, {
label: dropdownLabelText,
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalVStack, {
children: renderControls()
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/height-control/index.js
const RANGE_CONTROL_CUSTOM_SETTINGS = {
* HeightControl renders a linked unit control and range control for adjusting the height of a block.
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md
* @param {?string} props.label A label for the control.
* @param {( value: string ) => void } props.onChange Called when the height changes.
* @param {string} props.value The current height value.
* @return {Component} The component to be rendered.
label = (0,external_wp_i18n_namespaceObject.__)('Height'),
var _RANGE_CONTROL_CUSTOM, _RANGE_CONTROL_CUSTOM2;
const customRangeValue = parseFloat(value);
const [availableUnits] = use_settings_useSettings('spacing.units');
const units = (0,external_wp_components_namespaceObject.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['%', 'px', 'em', 'rem', 'vh', 'vw']
const selectedUnit = (0,external_wp_element_namespaceObject.useMemo)(() => (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(value), [value])[1] || units[0]?.value || 'px';
const handleSliderChange = next => {
onChange([next, selectedUnit].join(''));
const handleUnitChange = newUnit => {
// Attempt to smooth over differences between currentUnit and newUnit.
// This should slightly improve the experience of switching between unit types.
const [currentValue, currentUnit] = (0,external_wp_components_namespaceObject.__experimentalParseQuantityAndUnitFromRawValue)(value);
if (['em', 'rem'].includes(newUnit) && currentUnit === 'px') {
// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
onChange((currentValue / 16).toFixed(2) + newUnit);
} else if (['em', 'rem'].includes(currentUnit) && newUnit === 'px') {
// Convert to pixel value assuming a root size of 16px.
onChange(Math.round(currentValue * 16) + newUnit);
} else if (['%', 'vw', 'svw', 'lvw', 'dvw', 'vh', 'svh', 'lvh', 'dvh', 'vi', 'svi', 'lvi', 'dvi', 'vb', 'svb', 'lvb', 'dvb', 'vmin', 'svmin', 'lvmin', 'dvmin', 'vmax', 'svmax', 'lvmax', 'dvmax'].includes(newUnit) && currentValue > 100) {
// When converting to `%` or viewport-relative units, cap the new value at 100.
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "block-editor-height-control",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.BaseControl.VisualLabel, {
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.Flex, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalUnitControl, {
onUnitChange: handleUnitChange,
size: "__unstable-large",
hideLabelFromVision: true
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalSpacer, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.RangeControl, {
max: (_RANGE_CONTROL_CUSTOM = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.max) !== null && _RANGE_CONTROL_CUSTOM !== void 0 ? _RANGE_CONTROL_CUSTOM : 100,
step: (_RANGE_CONTROL_CUSTOM2 = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.step) !== null && _RANGE_CONTROL_CUSTOM2 !== void 0 ? _RANGE_CONTROL_CUSTOM2 : 0.1,
onChange: handleSliderChange,
__nextHasNoMarginBottom: true,
hideLabelFromVision: true
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/child-layout-control/index.js
function helpText(selfStretch, parentLayout) {
orientation = 'horizontal'
if (selfStretch === 'fill') {
return (0,external_wp_i18n_namespaceObject.__)('Stretch to fill available space.');
if (selfStretch === 'fixed' && orientation === 'horizontal') {
return (0,external_wp_i18n_namespaceObject.__)('Specify a fixed width.');
} else if (selfStretch === 'fixed') {
return (0,external_wp_i18n_namespaceObject.__)('Specify a fixed height.');
return (0,external_wp_i18n_namespaceObject.__)('Fit contents.');
* Form to edit the child layout value.
* @param {Object} props Props.
* @param {Object} props.value The child layout value.
* @param {Function} props.onChange Function to update the child layout value.
* @param {Object} props.parentLayout The parent layout value.
* @param {boolean} props.isShownByDefault
* @param {string} props.panelId
* @return {Element} child layout edit element.
function ChildLayoutControl({
type: defaultParentType = 'default'
orientation = 'horizontal'
} = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
const parentLayoutType = parentType || defaultParentType;
const hasFlexValue = () => !!selfStretch;
const flexResetLabel = orientation === 'horizontal' ? (0,external_wp_i18n_namespaceObject.__)('Width') : (0,external_wp_i18n_namespaceObject.__)('Height');
const resetFlex = () => {
const hasStartValue = () => !!columnStart || !!rowStart;
const hasSpanValue = () => !!columnSpan || !!rowSpan;
const resetGridStarts = () => {
const resetGridSpans = () => {