: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
disableCustomColors = !enableCustomColors
const hasColorsToChoose = colors && colors.length > 0 || !disableCustomColors;
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/color-palette/index.js
/* harmony default export */ const color_palette = (with_color_context(external_wp_components_namespaceObject.ColorPalette));
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/color-palette/control.js
function ColorPaletteControl({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control, {
disableCustomGradients: true
;// CONCATENATED MODULE: external ["wp","date"]
const external_wp_date_namespaceObject = window["wp"]["date"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/date-format-picker/index.js
// So that we can illustrate the different formats in the dropdown properly,
// show a date that has a day greater than 12 and a month with more than three
// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was
const EXAMPLE_DATE = new Date(2022, 0, 25);
* The `DateFormatPicker` component renders controls that let the user choose a
* _date format_. That is, how they want their dates to be formatted.
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md
* @param {string|null} props.format The selected date
* @param {string} props.defaultFormat The date format that
* @param {( format: string|null ) => void} props.onChange Called when a
function DateFormatPicker({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)("fieldset", {
className: "block-editor-date-format-picker",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.VisuallyHidden, {
children: (0,external_wp_i18n_namespaceObject.__)('Date format')
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Default format'),
help: `${(0,external_wp_i18n_namespaceObject.__)('Example:')} ${(0,external_wp_date_namespaceObject.dateI18n)(defaultFormat, EXAMPLE_DATE)}`,
onChange: checked => onChange(checked ? null : defaultFormat)
}), format && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NonDefaultControls, {
function NonDefaultControls({
var _suggestedOptions$fin;
// Suggest a short format, medium format, long format, and a standardised
// (YYYY-MM-DD) format. The short, medium, and long formats are localised as
// different languages have different ways of writing these. For example, 'F
// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April
// 2022) in German (de). The resultant array is de-duplicated as some
// languages will use the same format string for short, medium, and long
const suggestedFormats = [...new Set([/* translators: See https://www.php.net/manual/datetime.format.php */
'Y-m-d', /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('n/j/Y', 'short date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('n/j/Y g:i A', 'short date format with time'), /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('M j, Y', 'medium date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('M j, Y g:i A', 'medium date format with time'), /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('F j, Y', 'long date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
(0,external_wp_i18n_namespaceObject._x)('M j', 'short date format without the year')])];
const suggestedOptions = suggestedFormats.map((suggestedFormat, index) => ({
key: `suggested-${index}`,
name: (0,external_wp_date_namespaceObject.dateI18n)(suggestedFormat, EXAMPLE_DATE),
name: (0,external_wp_i18n_namespaceObject.__)('Custom'),
className: 'block-editor-date-format-picker__custom-format-select-control__custom-option',
__experimentalHint: (0,external_wp_i18n_namespaceObject.__)('Enter your own date format')
const [isCustom, setIsCustom] = (0,external_wp_element_namespaceObject.useState)(() => !!format && !suggestedFormats.includes(format));
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalVStack, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.CustomSelectControl, {
label: (0,external_wp_i18n_namespaceObject.__)('Choose a format'),
options: [...suggestedOptions, customOption],
value: isCustom ? customOption : (_suggestedOptions$fin = suggestedOptions.find(option => option.format === format)) !== null && _suggestedOptions$fin !== void 0 ? _suggestedOptions$fin : customOption,
if (selectedItem === customOption) {
onChange(selectedItem.format);
}), isCustom && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.TextControl, {
__nextHasNoMarginBottom: true,
label: (0,external_wp_i18n_namespaceObject.__)('Custom format'),
hideLabelFromVision: true,
help: (0,external_wp_element_namespaceObject.createInterpolateElement)((0,external_wp_i18n_namespaceObject.__)('Enter a date or time <Link>format string</Link>.'), {
Link: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ExternalLink, {
href: (0,external_wp_i18n_namespaceObject.__)('https://wordpress.org/documentation/article/customize-date-and-time-format/')
onChange: value => onChange(value)
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/colors-gradients/dropdown.js
// When the `ColorGradientSettingsDropdown` controls are being rendered to a
// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
const WithToolsPanelItem = ({
const clearValue = () => {
if (setting.colorValue) {
} else if (setting.gradientValue) {
setting.onGradientChange();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalToolsPanelItem, {
return !!setting.colorValue || !!setting.gradientValue;
isShownByDefault: setting.isShownByDefault !== undefined ? setting.isShownByDefault : true,
className: "block-editor-tools-panel-color-gradient-settings__item",
// Pass resetAllFilter if supplied due to rendering via SlotFill
// into parent ToolsPanel.
resetAllFilter: setting.resetAllFilter,
const dropdown_LabeledColorIndicator = ({
}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalHStack, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ColorIndicator, {
className: "block-editor-panel-color-gradient-settings__color-indicator",
}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.FlexItem, {
className: "block-editor-panel-color-gradient-settings__color-name",
// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
// or as a `Button` if it isn't e.g. the controls are being rendered in
const renderToggle = settings => ({
className: dist_clsx('block-editor-panel-color-gradient-settings__dropdown', {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_LabeledColorIndicator, {
// Renders a collection of color controls as dropdowns. Depending upon the
// context in which these dropdowns are being rendered, they may be wrapped
// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,
// the may be individually wrapped in a `ToolsPanelItem` with the toggle as
// For more context see: https://github.com/WordPress/gutenberg/pull/40084
function ColorGradientSettingsDropdown({
__experimentalIsRenderedInSidebar,
if (__experimentalIsRenderedInSidebar) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: settings.map((setting, index) => {
var _setting$gradientValu;
colorValue: setting.colorValue,
gradientValue: setting.gradientValue,
onColorChange: setting.onColorChange,
onGradientChange: setting.onGradientChange,
__experimentalIsRenderedInSidebar,
colorValue: (_setting$gradientValu = setting.gradientValue) !== null && _setting$gradientValu !== void 0 ? _setting$gradientValu : setting.colorValue,
// If not in an `ItemGroup` wrap the dropdown in a
(0,external_ReactJSXRuntime_namespaceObject.jsx)(WithToolsPanelItem, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Dropdown, {
popoverProps: popoverProps,
className: "block-editor-tools-panel-color-gradient-settings__dropdown",
renderToggle: renderToggle(toggleSettings),
renderContent: () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalDropdownContentWrapper, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
className: "block-editor-panel-color-gradient-settings__dropdown-content",
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(control, {
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/colors-gradients/panel-color-gradient-settings.js
const panel_color_gradient_settings_colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
const PanelColorGradientSettingsInner = ({
__experimentalIsRenderedInSidebar,
const panelId = (0,external_wp_compose_namespaceObject.useInstanceId)(PanelColorGradientSettingsInner);
} = (0,external_wp_data_namespaceObject.useRegistry)();
if ((!colors || colors.length === 0) && (!gradients || gradients.length === 0) && disableCustomColors && disableCustomGradients && settings?.every(setting => (!setting.colors || setting.colors.length === 0) && (!setting.gradients || setting.gradients.length === 0) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.__experimentalToolsPanel, {
className: dist_clsx('block-editor-panel-color-gradient-settings', className),
label: showTitle ? title : undefined,
} else if (gradientValue) {
__experimentalFirstVisibleItemClass: "first",
__experimentalLastVisibleItemClass: "last",
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ColorGradientSettingsDropdown, {
__experimentalIsRenderedInSidebar,
}), !!children && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.__experimentalSpacer, {
const PanelColorGradientSettingsSelect = props => {
const colorGradientSettings = useMultipleOriginColorsAndGradients();
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PanelColorGradientSettingsInner, {
...colorGradientSettings,
const PanelColorGradientSettings = props => {
if (panel_color_gradient_settings_colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PanelColorGradientSettingsInner, {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(PanelColorGradientSettingsSelect, {
/* harmony default export */ const panel_color_gradient_settings = (PanelColorGradientSettings);
;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/aspect-ratio.js
const aspectRatio = /*#__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: "M18.5 5.5h-13c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2v-9c0-1.1-.9-2-2-2zm.5 11c0 .3-.2.5-.5.5h-13c-.3 0-.5-.2-.5-.5v-9c0-.3.2-.5.5-.5h13c.3 0 .5.2.5.5v9zM6.5 12H8v-2h2V8.5H6.5V12zm9.5 2h-2v1.5h3.5V12H16v2z"
/* harmony default export */ const aspect_ratio = (aspectRatio);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/constants.js
const constants_POPOVER_PROPS = {
placement: 'bottom-start'
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/image-editor/use-save-image.js
// Disable Reason: Needs to be refactored.
// eslint-disable-next-line no-restricted-imports
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_notices_namespaceObject.store);
const [isInProgress, setIsInProgress] = (0,external_wp_element_namespaceObject.useState)(false);
const cancel = (0,external_wp_element_namespaceObject.useCallback)(() => {
const apply = (0,external_wp_element_namespaceObject.useCallback)(() => {
// The crop script may return some very small, sub-pixel values when the image was not cropped.
// Crop only when the new size has changed by more than 0.1%.
if (crop.width < 99.9 || crop.height < 99.9) {