@wordpress/block-library 9.32.0 → 9.33.1-next.ff1cebbba.0

package/build/cover/edit/inspector-controls.js

@@ -1,80 +1,92 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var inspector_controls_exports = {};
+__export(inspector_controls_exports, {
+  default: () => CoverInspectorControls
 });
-exports.default = CoverInspectorControls;
-var _element = require("@wordpress/element");
-var _components = require("@wordpress/components");
-var _compose = require("@wordpress/compose");
-var _blockEditor = require("@wordpress/block-editor");
-var _i18n = require("@wordpress/i18n");
-var _data = require("@wordpress/data");
-var _coreData = require("@wordpress/core-data");
-var _shared = require("../shared");
-var _lockUnlock = require("../../lock-unlock");
-var _hooks = require("../../utils/hooks");
-var _constants = require("../constants");
-var _posterImage = _interopRequireDefault(require("../../utils/poster-image"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  cleanEmptyObject,
-  ResolutionTool,
-  HTMLElementControl
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+module.exports = __toCommonJS(inspector_controls_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_element = require("@wordpress/element");
+var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_block_editor = require("@wordpress/block-editor");
+var import_i18n = require("@wordpress/i18n");
+var import_data = require("@wordpress/data");
+var import_core_data = require("@wordpress/core-data");
+var import_shared = require("../shared");
+var import_lock_unlock = require("../../lock-unlock");
+var import_hooks = require("../../utils/hooks");
+var import_constants = require("../constants");
+var import_poster_image = __toESM(require("../../utils/poster-image"));
+const { cleanEmptyObject, ResolutionTool, HTMLElementControl } = (0, import_lock_unlock.unlock)(
+  import_block_editor.privateApis
+);
 function CoverHeightInput({
   onChange,
   onUnitChange,
-  unit = 'px',
-  value = ''
+  unit = "px",
+  value = ""
 }) {
-  const instanceId = (0, _compose.useInstanceId)(_components.__experimentalUnitControl);
+  const instanceId = (0, import_compose.useInstanceId)(import_components.__experimentalUnitControl);
   const inputId = `block-cover-height-input-${instanceId}`;
-  const isPx = unit === 'px';
-  const [availableUnits] = (0, _blockEditor.useSettings)('spacing.units');
-  const units = (0, _components.__experimentalUseCustomUnits)({
-    availableUnits: availableUnits || ['px', 'em', 'rem', 'vw', 'vh'],
-    defaultValues: {
-      px: 430,
-      '%': 20,
-      em: 20,
-      rem: 20,
-      vw: 20,
-      vh: 50
-    }
+  const isPx = unit === "px";
+  const [availableUnits] = (0, import_block_editor.useSettings)("spacing.units");
+  const units = (0, import_components.__experimentalUseCustomUnits)({
+    availableUnits: availableUnits || ["px", "em", "rem", "vw", "vh"],
+    defaultValues: { px: 430, "%": 20, em: 20, rem: 20, vw: 20, vh: 50 }
   });
-  const handleOnChange = unprocessedValue => {
-    const inputValue = unprocessedValue !== '' ? parseFloat(unprocessedValue) : undefined;
-    if (isNaN(inputValue) && inputValue !== undefined) {
+  const handleOnChange = (unprocessedValue) => {
+    const inputValue = unprocessedValue !== "" ? parseFloat(unprocessedValue) : void 0;
+    if (isNaN(inputValue) && inputValue !== void 0) {
       return;
     }
     onChange(inputValue);
   };
-  const computedValue = (0, _element.useMemo)(() => {
-    const [parsedQuantity] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);
-    return [parsedQuantity, unit].join('');
+  const computedValue = (0, import_element.useMemo)(() => {
+    const [parsedQuantity] = (0, import_components.__experimentalParseQuantityAndUnitFromRawValue)(value);
+    return [parsedQuantity, unit].join("");
   }, [unit, value]);
-  const min = isPx ? _shared.COVER_MIN_HEIGHT : 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
-    __next40pxDefaultSize: true,
-    label: (0, _i18n.__)('Minimum height'),
-    id: inputId,
-    isResetValueOnUnitChange: true,
-    min: min,
-    onChange: handleOnChange,
-    onUnitChange: onUnitChange,
-    units: units,
-    value: computedValue
-  });
+  const min = isPx ? import_shared.COVER_MIN_HEIGHT : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalUnitControl,
+    {
+      __next40pxDefaultSize: true,
+      label: (0, import_i18n.__)("Minimum height"),
+      id: inputId,
+      isResetValueOnUnitChange: true,
+      min,
+      onChange: handleOnChange,
+      onUnitChange,
+      units,
+      value: computedValue
+    }
+  );
 }
 function CoverInspectorControls({
   attributes,
@@ -106,18 +118,19 @@ function CoverInspectorControls({
     url,
     overlayColor
   } = currentSettings;
-  const sizeSlug = attributes.sizeSlug || _constants.DEFAULT_MEDIA_SIZE_SLUG;
-  const {
-    gradientValue,
-    setGradient
-  } = (0, _blockEditor.__experimentalUseGradient)();
-  const {
-    getSettings
-  } = (0, _data.useSelect)(_blockEditor.store);
+  const sizeSlug = attributes.sizeSlug || import_constants.DEFAULT_MEDIA_SIZE_SLUG;
+  const { gradientValue, setGradient } = (0, import_block_editor.__experimentalUseGradient)();
+  const { getSettings } = (0, import_data.useSelect)(import_block_editor.store);
   const imageSizes = getSettings()?.imageSizes;
-  const image = (0, _data.useSelect)(select => id && isImageBackground ? select(_coreData.store).getEntityRecord('postType', 'attachment', id, {
-    context: 'view'
-  }) : null, [id, isImageBackground]);
+  const image = (0, import_data.useSelect)(
+    (select) => id && isImageBackground ? select(import_core_data.store).getEntityRecord(
+      "postType",
+      "attachment",
+      id,
+      { context: "view" }
+    ) : null,
+    [id, isImageBackground]
+  );
   const currentBackgroundImage = useFeaturedImage ? featuredImage : image;
   function updateImage(newSizeSlug) {
     const newUrl = currentBackgroundImage?.media_details?.sizes?.[newSizeSlug]?.source_url;
@@ -129,21 +142,13 @@ function CoverInspectorControls({
       sizeSlug: newSizeSlug
     });
   }
-  const imageSizeOptions = imageSizes?.filter(({
-    slug
-  }) => currentBackgroundImage?.media_details?.sizes?.[slug]?.source_url)?.map(({
-    name,
-    slug
-  }) => ({
-    value: slug,
-    label: name
-  }));
+  const imageSizeOptions = imageSizes?.filter(
+    ({ slug }) => currentBackgroundImage?.media_details?.sizes?.[slug]?.source_url
+  )?.map(({ name, slug }) => ({ value: slug, label: name }));
   const toggleParallax = () => {
     setAttributes({
       hasParallax: !hasParallax,
-      ...(!hasParallax ? {
-        focalPoint: undefined
-      } : {})
+      ...!hasParallax ? { focalPoint: void 0 } : {}
     });
   };
   const toggleIsRepeated = () => {
@@ -152,221 +157,268 @@ function CoverInspectorControls({
     });
   };
   const showFocalPointPicker = isVideoBackground || isImageBackground && (!hasParallax || isRepeated);
-  const imperativeFocalPointPreview = value => {
-    const [styleOfRef, property] = mediaElement.current ? [mediaElement.current.style, 'objectPosition'] : [coverRef.current.style, 'backgroundPosition'];
-    styleOfRef[property] = (0, _shared.mediaPosition)(value);
+  const imperativeFocalPointPreview = (value) => {
+    const [styleOfRef, property] = mediaElement.current ? [mediaElement.current.style, "objectPosition"] : [coverRef.current.style, "backgroundPosition"];
+    styleOfRef[property] = (0, import_shared.mediaPosition)(value);
   };
-  const colorGradientSettings = (0, _blockEditor.__experimentalUseMultipleOriginColorsAndGradients)();
-  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
-      children: !!url && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
-        label: (0, _i18n.__)('Settings'),
+  const colorGradientSettings = (0, import_block_editor.__experimentalUseMultipleOriginColorsAndGradients)();
+  const dropdownMenuProps = (0, import_hooks.useToolsPanelDropdownMenuProps)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: !!url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.__experimentalToolsPanel,
+      {
+        label: (0, import_i18n.__)("Settings"),
         resetAll: () => {
           setAttributes({
             hasParallax: false,
-            focalPoint: undefined,
+            focalPoint: void 0,
             isRepeated: false,
-            alt: '',
-            poster: undefined
+            alt: "",
+            poster: void 0
           });
-          updateImage(_constants.DEFAULT_MEDIA_SIZE_SLUG);
+          updateImage(import_constants.DEFAULT_MEDIA_SIZE_SLUG);
         },
-        dropdownMenuProps: dropdownMenuProps,
-        children: [isImageBackground && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-            label: (0, _i18n.__)('Fixed background'),
-            isShownByDefault: true,
-            hasValue: () => !!hasParallax,
-            onDeselect: () => setAttributes({
-              hasParallax: false,
-              focalPoint: undefined
-            }),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-              __nextHasNoMarginBottom: true,
-              label: (0, _i18n.__)('Fixed background'),
-              checked: !!hasParallax,
-              onChange: toggleParallax
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-            label: (0, _i18n.__)('Repeated background'),
-            isShownByDefault: true,
-            hasValue: () => isRepeated,
-            onDeselect: () => setAttributes({
-              isRepeated: false
-            }),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-              __nextHasNoMarginBottom: true,
-              label: (0, _i18n.__)('Repeated background'),
-              checked: isRepeated,
-              onChange: toggleIsRepeated
-            })
-          })]
-        }), showFocalPointPicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-          label: (0, _i18n.__)('Focal point'),
-          isShownByDefault: true,
-          hasValue: () => !!focalPoint,
-          onDeselect: () => setAttributes({
-            focalPoint: undefined
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FocalPointPicker, {
-            __nextHasNoMarginBottom: true,
-            label: (0, _i18n.__)('Focal point'),
-            url: url,
-            value: focalPoint,
-            onDragStart: imperativeFocalPointPreview,
-            onDrag: imperativeFocalPointPreview,
-            onChange: newFocalPoint => setAttributes({
-              focalPoint: newFocalPoint
-            })
-          })
-        }), isVideoBackground && /*#__PURE__*/(0, _jsxRuntime.jsx)(_posterImage.default, {
-          poster: poster,
-          onChange: posterImage => setAttributes({
-            poster: posterImage?.url
-          })
-        }), !useFeaturedImage && url && !isVideoBackground && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-          label: (0, _i18n.__)('Alternative text'),
-          isShownByDefault: true,
-          hasValue: () => !!alt,
-          onDeselect: () => setAttributes({
-            alt: ''
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextareaControl, {
-            __nextHasNoMarginBottom: true,
-            label: (0, _i18n.__)('Alternative text'),
-            value: alt,
-            onChange: newAlt => setAttributes({
-              alt: newAlt
-            }),
-            help: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
-                href:
-                // translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
-                (0, _i18n.__)('https://www.w3.org/WAI/tutorials/images/decision-tree/'),
-                children: (0, _i18n.__)('Describe the purpose of the image.')
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), (0, _i18n.__)('Leave empty if decorative.')]
-            })
-          })
-        }), !!imageSizeOptions?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResolutionTool, {
-          value: sizeSlug,
-          onChange: updateImage,
-          options: imageSizeOptions,
-          defaultValue: _constants.DEFAULT_MEDIA_SIZE_SLUG
-        })]
-      })
-    }), colorGradientSettings.hasColorsOrGradients && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.InspectorControls, {
-      group: "color",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalColorGradientSettingsDropdown, {
-        __experimentalIsRenderedInSidebar: true,
-        settings: [{
-          colorValue: overlayColor.color,
-          gradientValue,
-          label: (0, _i18n.__)('Overlay'),
-          onColorChange: setOverlayColor,
-          onGradientChange: setGradient,
-          isShownByDefault: true,
+        dropdownMenuProps,
+        children: [
+          isImageBackground && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                label: (0, import_i18n.__)("Fixed background"),
+                isShownByDefault: true,
+                hasValue: () => !!hasParallax,
+                onDeselect: () => setAttributes({
+                  hasParallax: false,
+                  focalPoint: void 0
+                }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.ToggleControl,
+                  {
+                    __nextHasNoMarginBottom: true,
+                    label: (0, import_i18n.__)("Fixed background"),
+                    checked: !!hasParallax,
+                    onChange: toggleParallax
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                label: (0, import_i18n.__)("Repeated background"),
+                isShownByDefault: true,
+                hasValue: () => isRepeated,
+                onDeselect: () => setAttributes({
+                  isRepeated: false
+                }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.ToggleControl,
+                  {
+                    __nextHasNoMarginBottom: true,
+                    label: (0, import_i18n.__)("Repeated background"),
+                    checked: isRepeated,
+                    onChange: toggleIsRepeated
+                  }
+                )
+              }
+            )
+          ] }),
+          showFocalPointPicker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToolsPanelItem,
+            {
+              label: (0, import_i18n.__)("Focal point"),
+              isShownByDefault: true,
+              hasValue: () => !!focalPoint,
+              onDeselect: () => setAttributes({
+                focalPoint: void 0
+              }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.FocalPointPicker,
+                {
+                  __nextHasNoMarginBottom: true,
+                  label: (0, import_i18n.__)("Focal point"),
+                  url,
+                  value: focalPoint,
+                  onDragStart: imperativeFocalPointPreview,
+                  onDrag: imperativeFocalPointPreview,
+                  onChange: (newFocalPoint) => setAttributes({
+                    focalPoint: newFocalPoint
+                  })
+                }
+              )
+            }
+          ),
+          isVideoBackground && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_poster_image.default,
+            {
+              poster,
+              onChange: (posterImage) => setAttributes({
+                poster: posterImage?.url
+              })
+            }
+          ),
+          !useFeaturedImage && url && !isVideoBackground && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToolsPanelItem,
+            {
+              label: (0, import_i18n.__)("Alternative text"),
+              isShownByDefault: true,
+              hasValue: () => !!alt,
+              onDeselect: () => setAttributes({ alt: "" }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.TextareaControl,
+                {
+                  __nextHasNoMarginBottom: true,
+                  label: (0, import_i18n.__)("Alternative text"),
+                  value: alt,
+                  onChange: (newAlt) => setAttributes({ alt: newAlt }),
+                  help: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.ExternalLink,
+                      {
+                        href: (
+                          // translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+                          (0, import_i18n.__)(
+                            "https://www.w3.org/WAI/tutorials/images/decision-tree/"
+                          )
+                        ),
+                        children: (0, import_i18n.__)(
+                          "Describe the purpose of the image."
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+                    (0, import_i18n.__)(
+                      "Leave empty if decorative."
+                    )
+                  ] })
+                }
+              )
+            }
+          ),
+          !!imageSizeOptions?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ResolutionTool,
+            {
+              value: sizeSlug,
+              onChange: updateImage,
+              options: imageSizeOptions,
+              defaultValue: import_constants.DEFAULT_MEDIA_SIZE_SLUG
+            }
+          )
+        ]
+      }
+    ) }),
+    colorGradientSettings.hasColorsOrGradients && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.InspectorControls, { group: "color", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_block_editor.__experimentalColorGradientSettingsDropdown,
+        {
+          __experimentalIsRenderedInSidebar: true,
+          settings: [
+            {
+              colorValue: overlayColor.color,
+              gradientValue,
+              label: (0, import_i18n.__)("Overlay"),
+              onColorChange: setOverlayColor,
+              onGradientChange: setGradient,
+              isShownByDefault: true,
+              resetAllFilter: () => ({
+                overlayColor: void 0,
+                customOverlayColor: void 0,
+                gradient: void 0,
+                customGradient: void 0
+              }),
+              clearable: true
+            }
+          ],
+          panelId: clientId,
+          ...colorGradientSettings
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalToolsPanelItem,
+        {
+          hasValue: () => {
+            return dimRatio === void 0 ? false : dimRatio !== (url ? 50 : 100);
+          },
+          label: (0, import_i18n.__)("Overlay opacity"),
+          onDeselect: () => updateDimRatio(url ? 50 : 100),
           resetAllFilter: () => ({
-            overlayColor: undefined,
-            customOverlayColor: undefined,
-            gradient: undefined,
-            customGradient: undefined
+            dimRatio: url ? 50 : 100
           }),
-          clearable: true
-        }],
-        panelId: clientId,
-        ...colorGradientSettings
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-        hasValue: () => {
-          // If there's a media background the dimRatio will be
-          // defaulted to 50 whereas it will be 100 for colors.
-          return dimRatio === undefined ? false : dimRatio !== (url ? 50 : 100);
-        },
-        label: (0, _i18n.__)('Overlay opacity'),
-        onDeselect: () => updateDimRatio(url ? 50 : 100),
-        resetAllFilter: () => ({
-          dimRatio: url ? 50 : 100
-        }),
-        isShownByDefault: true,
-        panelId: clientId,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
-          __nextHasNoMarginBottom: true,
-          label: (0, _i18n.__)('Overlay opacity'),
-          value: dimRatio,
-          onChange: newDimRatio => updateDimRatio(newDimRatio),
-          min: 0,
-          max: 100,
-          step: 10,
-          required: true,
-          __next40pxDefaultSize: true
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
-      group: "dimensions",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
+          isShownByDefault: true,
+          panelId: clientId,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.RangeControl,
+            {
+              __nextHasNoMarginBottom: true,
+              label: (0, import_i18n.__)("Overlay opacity"),
+              value: dimRatio,
+              onChange: (newDimRatio) => updateDimRatio(newDimRatio),
+              min: 0,
+              max: 100,
+              step: 10,
+              required: true,
+              __next40pxDefaultSize: true
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { group: "dimensions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalToolsPanelItem,
+      {
         className: "single-column",
         hasValue: () => !!minHeight,
-        label: (0, _i18n.__)('Minimum height'),
+        label: (0, import_i18n.__)("Minimum height"),
         onDeselect: () => setAttributes({
-          minHeight: undefined,
-          minHeightUnit: undefined
+          minHeight: void 0,
+          minHeightUnit: void 0
         }),
         resetAllFilter: () => ({
-          minHeight: undefined,
-          minHeightUnit: undefined
+          minHeight: void 0,
+          minHeightUnit: void 0
         }),
         isShownByDefault: true,
         panelId: clientId,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CoverHeightInput, {
-          value: attributes?.style?.dimensions?.aspectRatio ? '' : minHeight,
-          unit: minHeightUnit,
-          onChange: newMinHeight => setAttributes({
-            minHeight: newMinHeight,
-            style: cleanEmptyObject({
-              ...attributes?.style,
-              dimensions: {
-                ...attributes?.style?.dimensions,
-                aspectRatio: undefined // Reset aspect ratio when minHeight is set.
-              }
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CoverHeightInput,
+          {
+            value: attributes?.style?.dimensions?.aspectRatio ? "" : minHeight,
+            unit: minHeightUnit,
+            onChange: (newMinHeight) => setAttributes({
+              minHeight: newMinHeight,
+              style: cleanEmptyObject({
+                ...attributes?.style,
+                dimensions: {
+                  ...attributes?.style?.dimensions,
+                  aspectRatio: void 0
+                  // Reset aspect ratio when minHeight is set.
+                }
+              })
+            }),
+            onUnitChange: (nextUnit) => setAttributes({
+              minHeightUnit: nextUnit
             })
-          }),
-          onUnitChange: nextUnit => setAttributes({
-            minHeightUnit: nextUnit
-          })
-        })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
-      group: "advanced",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HTMLElementControl, {
-        tagName: tagName,
-        onChange: value => setAttributes({
-          tagName: value
-        }),
-        clientId: clientId,
-        options: [{
-          label: (0, _i18n.__)('Default (<div>)'),
-          value: 'div'
-        }, {
-          label: '<header>',
-          value: 'header'
-        }, {
-          label: '<main>',
-          value: 'main'
-        }, {
-          label: '<section>',
-          value: 'section'
-        }, {
-          label: '<article>',
-          value: 'article'
-        }, {
-          label: '<aside>',
-          value: 'aside'
-        }, {
-          label: '<footer>',
-          value: 'footer'
-        }]
-      })
-    })]
-  });
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { group: "advanced", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      HTMLElementControl,
+      {
+        tagName,
+        onChange: (value) => setAttributes({ tagName: value }),
+        clientId,
+        options: [
+          { label: (0, import_i18n.__)("Default (<div>)"), value: "div" },
+          { label: "<header>", value: "header" },
+          { label: "<main>", value: "main" },
+          { label: "<section>", value: "section" },
+          { label: "<article>", value: "article" },
+          { label: "<aside>", value: "aside" },
+          { label: "<footer>", value: "footer" }
+        ]
+      }
+    ) })
+  ] });
 }
-//# sourceMappingURL=inspector-controls.js.map
+//# sourceMappingURL=inspector-controls.js.map