@wordpress/block-library 9.32.0 → 9.33.0

package/build/image/image.js

@@ -1,77 +1,84 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var image_exports = {};
+__export(image_exports, {
+  default: () => Image
 });
-exports.default = Image;
-var _blob = require("@wordpress/blob");
-var _components = require("@wordpress/components");
-var _compose = require("@wordpress/compose");
-var _data = require("@wordpress/data");
-var _blockEditor = require("@wordpress/block-editor");
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _url = require("@wordpress/url");
-var _blocks = require("@wordpress/blocks");
-var _icons = require("@wordpress/icons");
-var _notices = require("@wordpress/notices");
-var _coreData = require("@wordpress/core-data");
-var _lockUnlock = require("../lock-unlock");
-var _util = require("../embed/util");
-var _edit = require("./edit");
-var _caption = require("../utils/caption");
-var _hooks = require("../utils/hooks");
-var _constants = require("./constants");
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  DimensionsTool,
-  ResolutionTool
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
-const scaleOptions = [{
-  value: 'cover',
-  label: (0, _i18n._x)('Cover', 'Scale option for dimensions control'),
-  help: (0, _i18n.__)('Image covers the space evenly.')
-}, {
-  value: 'contain',
-  label: (0, _i18n._x)('Contain', 'Scale option for dimensions control'),
-  help: (0, _i18n.__)('Image is contained without distortion.')
-}];
+module.exports = __toCommonJS(image_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_blob = require("@wordpress/blob");
+var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_data = require("@wordpress/data");
+var import_block_editor = require("@wordpress/block-editor");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_url = require("@wordpress/url");
+var import_blocks = require("@wordpress/blocks");
+var import_icons = require("@wordpress/icons");
+var import_notices = require("@wordpress/notices");
+var import_core_data = require("@wordpress/core-data");
+var import_lock_unlock = require("../lock-unlock");
+var import_util = require("../embed/util");
+var import_edit = require("./edit");
+var import_caption = require("../utils/caption");
+var import_hooks = require("../utils/hooks");
+var import_constants = require("./constants");
+var import_utils = require("./utils");
+const { DimensionsTool, ResolutionTool } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+const scaleOptions = [
+  {
+    value: "cover",
+    label: (0, import_i18n._x)("Cover", "Scale option for dimensions control"),
+    help: (0, import_i18n.__)("Image covers the space evenly.")
+  },
+  {
+    value: "contain",
+    label: (0, import_i18n._x)("Contain", "Scale option for dimensions control"),
+    help: (0, import_i18n.__)("Image is contained without distortion.")
+  }
+];
 const WRITEMODE_POPOVER_PROPS = {
-  placement: 'bottom-start'
+  placement: "bottom-start"
 };
-
-// If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles.
-const ImageWrapper = ({
-  href,
-  children
-}) => {
+const ImageWrapper = ({ href, children }) => {
   if (!href) {
     return children;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-    href: href,
-    onClick: event => event.preventDefault(),
-    "aria-disabled": true,
-    style: {
-      // When the Image block is linked,
-      // it's wrapped with a disabled <a /> tag.
-      // Restore cursor style so it doesn't appear 'clickable'
-      // and remove pointer events. Safari needs the display property.
-      pointerEvents: 'none',
-      cursor: 'default',
-      display: 'inline'
-    },
-    children: children
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      href,
+      onClick: (event) => event.preventDefault(),
+      "aria-disabled": true,
+      style: {
+        // When the Image block is linked,
+        // it's wrapped with a disabled <a /> tag.
+        // Restore cursor style so it doesn't appear 'clickable'
+        // and remove pointer events. Safari needs the display property.
+        pointerEvents: "none",
+        cursor: "default",
+        display: "inline"
+      },
+      children
+    }
+  );
 };
 function ContentOnlyControls({
   attributes,
@@ -81,102 +88,121 @@ function ContentOnlyControls({
   lockTitleControls,
   lockTitleControlsMessage
 }) {
-  // Use internal state instead of a ref to make sure that the component
-  // re-renders when the popover's anchor updates.
-  const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
-  const [isAltDialogOpen, setIsAltDialogOpen] = (0, _element.useState)(false);
-  const [isTitleDialogOpen, setIsTitleDialogOpen] = (0, _element.useState)(false);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
-      ref: setPopoverAnchor,
-      children: toggleProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
-        icon: _icons.chevronDown
-        /* translators: button label text should, if possible, be under 16 characters. */,
-        label: (0, _i18n.__)('More'),
+  const [popoverAnchor, setPopoverAnchor] = (0, import_element.useState)(null);
+  const [isAltDialogOpen, setIsAltDialogOpen] = (0, import_element.useState)(false);
+  const [isTitleDialogOpen, setIsTitleDialogOpen] = (0, import_element.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ToolbarItem, { ref: setPopoverAnchor, children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.DropdownMenu,
+      {
+        icon: import_icons.chevronDown,
+        label: (0, import_i18n.__)("More"),
         toggleProps: {
           ...toggleProps,
-          description: (0, _i18n.__)('Displays more controls.')
+          description: (0, import_i18n.__)("Displays more controls.")
         },
         popoverProps: WRITEMODE_POPOVER_PROPS,
-        children: ({
-          onClose
-        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-            onClick: () => {
-              setIsAltDialogOpen(true);
-              onClose();
-            },
-            "aria-haspopup": "dialog",
-            children: (0, _i18n._x)('Alternative text', 'Alternative text for an image. Block toolbar label, a low character count is preferred.')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-            onClick: () => {
-              setIsTitleDialogOpen(true);
-              onClose();
-            },
-            "aria-haspopup": "dialog",
-            children: (0, _i18n.__)('Title text')
-          })]
-        })
-      })
-    }), isAltDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover, {
-      placement: "bottom-start",
-      anchor: popoverAnchor,
-      onClose: () => setIsAltDialogOpen(false),
-      offset: 13,
-      variant: "toolbar",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "wp-block-image__toolbar_content_textarea__container",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextareaControl, {
-          className: "wp-block-image__toolbar_content_textarea",
-          label: (0, _i18n.__)('Alternative text'),
-          value: attributes.alt || '',
-          onChange: value => setAttributes({
-            alt: value
-          }),
-          disabled: lockAltControls,
-          help: lockAltControls ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: lockAltControlsMessage
-          }) : /*#__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.')]
-          }),
-          __nextHasNoMarginBottom: true
-        })
-      })
-    }), isTitleDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover, {
-      placement: "bottom-start",
-      anchor: popoverAnchor,
-      onClose: () => setIsTitleDialogOpen(false),
-      offset: 13,
-      variant: "toolbar",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "wp-block-image__toolbar_content_textarea__container",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
-          __next40pxDefaultSize: true,
-          className: "wp-block-image__toolbar_content_textarea",
-          __nextHasNoMarginBottom: true,
-          label: (0, _i18n.__)('Title attribute'),
-          value: attributes.title || '',
-          onChange: value => setAttributes({
-            title: value
-          }),
-          disabled: lockTitleControls,
-          help: lockTitleControls ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: lockTitleControlsMessage
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [(0, _i18n.__)('Describe the role of this image on the page.'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
-              href: "https://www.w3.org/TR/html52/dom.html#the-title-attribute",
-              children: (0, _i18n.__)('(Note: many devices and browsers do not display this text.)')
-            })]
-          })
-        })
-      })
-    })]
-  });
+        children: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.MenuItem,
+            {
+              onClick: () => {
+                setIsAltDialogOpen(true);
+                onClose();
+              },
+              "aria-haspopup": "dialog",
+              children: (0, import_i18n._x)(
+                "Alternative text",
+                "Alternative text for an image. Block toolbar label, a low character count is preferred."
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.MenuItem,
+            {
+              onClick: () => {
+                setIsTitleDialogOpen(true);
+                onClose();
+              },
+              "aria-haspopup": "dialog",
+              children: (0, import_i18n.__)("Title text")
+            }
+          )
+        ] })
+      }
+    ) }),
+    isAltDialogOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Popover,
+      {
+        placement: "bottom-start",
+        anchor: popoverAnchor,
+        onClose: () => setIsAltDialogOpen(false),
+        offset: 13,
+        variant: "toolbar",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "wp-block-image__toolbar_content_textarea__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.TextareaControl,
+          {
+            className: "wp-block-image__toolbar_content_textarea",
+            label: (0, import_i18n.__)("Alternative text"),
+            value: attributes.alt || "",
+            onChange: (value) => setAttributes({ alt: value }),
+            disabled: lockAltControls,
+            help: lockAltControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: lockAltControlsMessage }) : /* @__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.")
+            ] }),
+            __nextHasNoMarginBottom: true
+          }
+        ) })
+      }
+    ),
+    isTitleDialogOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Popover,
+      {
+        placement: "bottom-start",
+        anchor: popoverAnchor,
+        onClose: () => setIsTitleDialogOpen(false),
+        offset: 13,
+        variant: "toolbar",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "wp-block-image__toolbar_content_textarea__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.TextControl,
+          {
+            __next40pxDefaultSize: true,
+            className: "wp-block-image__toolbar_content_textarea",
+            __nextHasNoMarginBottom: true,
+            label: (0, import_i18n.__)("Title attribute"),
+            value: attributes.title || "",
+            onChange: (value) => setAttributes({
+              title: value
+            }),
+            disabled: lockTitleControls,
+            help: lockTitleControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: lockTitleControlsMessage }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              (0, import_i18n.__)(
+                "Describe the role of this image on the page."
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ExternalLink, { href: "https://www.w3.org/TR/html52/dom.html#the-title-attribute", children: (0, import_i18n.__)(
+                "(Note: many devices and browsers do not display this text.)"
+              ) })
+            ] })
+          }
+        ) })
+      }
+    )
+  ] });
 }
 function Image({
   temporaryURL,
@@ -195,7 +221,7 @@ function Image({
   maxContentWidth
 }) {
   const {
-    url = '',
+    url = "",
     alt,
     align,
     id,
@@ -213,131 +239,88 @@ function Image({
     lightbox,
     metadata
   } = attributes;
-  const [imageElement, setImageElement] = (0, _element.useState)();
-  const [resizeDelta, setResizeDelta] = (0, _element.useState)(null);
-  const [pixelSize, setPixelSize] = (0, _element.useState)({});
-  const [offsetTop, setOffsetTop] = (0, _element.useState)(0);
-  const setResizeObserved = (0, _compose.useResizeObserver)(([entry]) => {
+  const [imageElement, setImageElement] = (0, import_element.useState)();
+  const [resizeDelta, setResizeDelta] = (0, import_element.useState)(null);
+  const [pixelSize, setPixelSize] = (0, import_element.useState)({});
+  const [offsetTop, setOffsetTop] = (0, import_element.useState)(0);
+  const setResizeObserved = (0, import_compose.useResizeObserver)(([entry]) => {
     if (!resizeDelta) {
       const [box] = entry.borderBoxSize;
-      setPixelSize({
-        width: box.inlineSize,
-        height: box.blockSize
-      });
+      setPixelSize({ width: box.inlineSize, height: box.blockSize });
     }
-    // This is usually 0 unless the image height is less than the line-height.
     setOffsetTop(entry.target.offsetTop);
   });
-  const effectResizeableBoxPlacement = (0, _element.useCallback)(() => {
-    var _imageElement$offsetT;
-    setOffsetTop((_imageElement$offsetT = imageElement?.offsetTop) !== null && _imageElement$offsetT !== void 0 ? _imageElement$offsetT : 0);
+  const effectResizeableBoxPlacement = (0, import_element.useCallback)(() => {
+    setOffsetTop(imageElement?.offsetTop ?? 0);
   }, [imageElement]);
-  const setRefs = (0, _compose.useMergeRefs)([setImageElement, setResizeObserved]);
-  const {
-    allowResize = true
-  } = context;
-  const image = (0, _data.useSelect)(select => id && isSingleSelected ? select(_coreData.store).getEntityRecord('postType', 'attachment', id, {
-    context: 'view'
-  }) : null, [id, isSingleSelected]);
-  const {
-    canInsertCover,
-    imageEditing,
-    imageSizes,
-    maxWidth
-  } = (0, _data.useSelect)(select => {
-    const {
-      getBlockRootClientId,
-      canInsertBlockType,
-      getSettings
-    } = select(_blockEditor.store);
-    const rootClientId = getBlockRootClientId(clientId);
-    const settings = getSettings();
-    return {
-      imageEditing: settings.imageEditing,
-      imageSizes: settings.imageSizes,
-      maxWidth: settings.maxWidth,
-      canInsertCover: canInsertBlockType('core/cover', rootClientId)
-    };
-  }, [clientId]);
-  const {
-    getBlock,
-    getSettings
-  } = (0, _data.useSelect)(_blockEditor.store);
-  const {
-    replaceBlocks,
-    toggleSelection
-  } = (0, _data.useDispatch)(_blockEditor.store);
-  const {
-    createErrorNotice,
-    createSuccessNotice
-  } = (0, _data.useDispatch)(_notices.store);
-  const {
-    editEntityRecord
-  } = (0, _data.useDispatch)(_coreData.store);
-  const isLargeViewport = (0, _compose.useViewportMatch)('medium');
-  const isWideAligned = ['wide', 'full'].includes(align);
-  const [{
-    loadedNaturalWidth,
-    loadedNaturalHeight
-  }, setLoadedNaturalSize] = (0, _element.useState)({});
-  const [isEditingImage, setIsEditingImage] = (0, _element.useState)(false);
-  const [externalBlob, setExternalBlob] = (0, _element.useState)();
-  const [hasImageErrored, setHasImageErrored] = (0, _element.useState)(false);
-  const hasNonContentControls = blockEditingMode === 'default';
-  const isContentOnlyMode = blockEditingMode === 'contentOnly';
+  const setRefs = (0, import_compose.useMergeRefs)([setImageElement, setResizeObserved]);
+  const { allowResize = true } = context;
+  const image = (0, import_data.useSelect)(
+    (select) => id && isSingleSelected ? select(import_core_data.store).getEntityRecord(
+      "postType",
+      "attachment",
+      id,
+      { context: "view" }
+    ) : null,
+    [id, isSingleSelected]
+  );
+  const { canInsertCover, imageEditing, imageSizes, maxWidth } = (0, import_data.useSelect)(
+    (select) => {
+      const { getBlockRootClientId, canInsertBlockType, getSettings: getSettings2 } = select(import_block_editor.store);
+      const rootClientId = getBlockRootClientId(clientId);
+      const settings = getSettings2();
+      return {
+        imageEditing: settings.imageEditing,
+        imageSizes: settings.imageSizes,
+        maxWidth: settings.maxWidth,
+        canInsertCover: canInsertBlockType(
+          "core/cover",
+          rootClientId
+        )
+      };
+    },
+    [clientId]
+  );
+  const { getBlock, getSettings } = (0, import_data.useSelect)(import_block_editor.store);
+  const { replaceBlocks, toggleSelection } = (0, import_data.useDispatch)(import_block_editor.store);
+  const { createErrorNotice, createSuccessNotice } = (0, import_data.useDispatch)(import_notices.store);
+  const { editEntityRecord } = (0, import_data.useDispatch)(import_core_data.store);
+  const isLargeViewport = (0, import_compose.useViewportMatch)("medium");
+  const isWideAligned = ["wide", "full"].includes(align);
+  const [
+    { loadedNaturalWidth, loadedNaturalHeight },
+    setLoadedNaturalSize
+  ] = (0, import_element.useState)({});
+  const [isEditingImage, setIsEditingImage] = (0, import_element.useState)(false);
+  const [externalBlob, setExternalBlob] = (0, import_element.useState)();
+  const [hasImageErrored, setHasImageErrored] = (0, import_element.useState)(false);
+  const hasNonContentControls = blockEditingMode === "default";
+  const isContentOnlyMode = blockEditingMode === "contentOnly";
   const isResizable = allowResize && hasNonContentControls && !isWideAligned && isLargeViewport;
-  const imageSizeOptions = imageSizes.filter(({
-    slug
-  }) => image?.media_details?.sizes?.[slug]?.source_url).map(({
-    name,
-    slug
-  }) => ({
-    value: slug,
-    label: name
-  }));
-
-  // If an image is externally hosted, try to fetch the image data. This may
-  // fail if the image host doesn't allow CORS with the domain. If it works,
-  // we can enable a button in the toolbar to upload the image.
-  (0, _element.useEffect)(() => {
-    if (!(0, _edit.isExternalImage)(id, url) || !isSingleSelected || !getSettings().mediaUpload) {
+  const imageSizeOptions = imageSizes.filter(
+    ({ slug }) => image?.media_details?.sizes?.[slug]?.source_url
+  ).map(({ name, slug }) => ({ value: slug, label: name }));
+  (0, import_element.useEffect)(() => {
+    if (!(0, import_edit.isExternalImage)(id, url) || !isSingleSelected || !getSettings().mediaUpload) {
       setExternalBlob();
       return;
     }
     if (externalBlob) {
       return;
     }
-    window
-    // Avoid cache, which seems to help avoid CORS problems.
-    .fetch(url.includes('?') ? url : url + '?').then(response => response.blob()).then(blob => setExternalBlob(blob))
-    // Do nothing, cannot upload.
-    .catch(() => {});
+    window.fetch(url.includes("?") ? url : url + "?").then((response) => response.blob()).then((blob) => setExternalBlob(blob)).catch(() => {
+    });
   }, [id, url, isSingleSelected, externalBlob, getSettings]);
-
-  // Get naturalWidth and naturalHeight from image, and fall back to loaded natural
-  // width and height. This resolves an issue in Safari where the loaded natural
-  // width and height is otherwise lost when switching between alignments.
-  // See: https://github.com/WordPress/gutenberg/pull/37210.
-  const {
-    naturalWidth,
-    naturalHeight
-  } = (0, _element.useMemo)(() => {
+  const { naturalWidth, naturalHeight } = (0, import_element.useMemo)(() => {
     return {
-      naturalWidth: imageElement?.naturalWidth || loadedNaturalWidth || undefined,
-      naturalHeight: imageElement?.naturalHeight || loadedNaturalHeight || undefined
+      naturalWidth: imageElement?.naturalWidth || loadedNaturalWidth || void 0,
+      naturalHeight: imageElement?.naturalHeight || loadedNaturalHeight || void 0
     };
   }, [loadedNaturalWidth, loadedNaturalHeight, imageElement?.complete]);
   function onImageError() {
     setHasImageErrored(true);
-
-    // Check if there's an embed block that handles this URL, e.g., instagram URL.
-    // See: https://github.com/WordPress/gutenberg/pull/11472
-    const embedBlock = (0, _util.createUpgradedEmbedBlock)({
-      attributes: {
-        url
-      }
-    });
-    if (undefined !== embedBlock) {
+    const embedBlock = (0, import_util.createUpgradedEmbedBlock)({ attributes: { url } });
+    if (void 0 !== embedBlock) {
       onReplace(embedBlock);
     }
   }
@@ -354,50 +337,34 @@ function Image({
   function onSetLightbox(enable) {
     if (enable && !lightboxSetting?.enabled) {
       setAttributes({
-        lightbox: {
-          enabled: true
-        }
+        lightbox: { enabled: true }
       });
     } else if (!enable && lightboxSetting?.enabled) {
       setAttributes({
-        lightbox: {
-          enabled: false
-        }
+        lightbox: { enabled: false }
       });
     } else {
       setAttributes({
-        lightbox: undefined
+        lightbox: void 0
       });
     }
   }
   function resetLightbox() {
-    // When deleting a link from an image while lightbox settings
-    // are enabled by default, we should disable the lightbox,
-    // otherwise the resulting UX looks like a mistake.
-    // See https://github.com/WordPress/gutenberg/pull/59890/files#r1532286123.
     if (lightboxSetting?.enabled && lightboxSetting?.allowEditing) {
       setAttributes({
-        lightbox: {
-          enabled: false
-        }
+        lightbox: { enabled: false }
       });
     } else {
       setAttributes({
-        lightbox: undefined
+        lightbox: void 0
       });
     }
   }
   function onSetTitle(value) {
-    // This is the HTML title attribute, separate from the media object
-    // title.
-    setAttributes({
-      title: value
-    });
+    setAttributes({ title: value });
   }
   function updateAlt(newAlt) {
-    setAttributes({
-      alt: newAlt
-    });
+    setAttributes({ alt: newAlt });
   }
   function updateImage(newSizeSlug) {
     const newUrl = image?.media_details?.sizes?.[newSizeSlug]?.source_url;
@@ -410,33 +377,29 @@ function Image({
     });
   }
   function uploadExternal() {
-    const {
-      mediaUpload
-    } = getSettings();
+    const { mediaUpload } = getSettings();
     if (!mediaUpload) {
       return;
     }
     mediaUpload({
       filesList: [externalBlob],
-      onFileChange([img]) {
-        onSelectImage(img);
-        if ((0, _blob.isBlobURL)(img.url)) {
+      onFileChange([img2]) {
+        onSelectImage(img2);
+        if ((0, import_blob.isBlobURL)(img2.url)) {
           return;
         }
         setExternalBlob();
-        createSuccessNotice((0, _i18n.__)('Image uploaded.'), {
-          type: 'snackbar'
+        createSuccessNotice((0, import_i18n.__)("Image uploaded."), {
+          type: "snackbar"
         });
       },
-      allowedTypes: _constants.ALLOWED_MEDIA_TYPES,
+      allowedTypes: import_constants.ALLOWED_MEDIA_TYPES,
       onError(message) {
-        createErrorNotice(message, {
-          type: 'snackbar'
-        });
+        createErrorNotice(message, { type: "snackbar" });
       }
     });
   }
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     if (!isSingleSelected) {
       setIsEditingImage(false);
     }
@@ -444,88 +407,83 @@ function Image({
   const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
   const allowCrop = isSingleSelected && canEditImage && !isEditingImage && !isContentOnlyMode;
   function switchToCover() {
-    replaceBlocks(clientId, (0, _blocks.switchToBlockType)(getBlock(clientId), 'core/cover'));
+    replaceBlocks(
+      clientId,
+      (0, import_blocks.switchToBlockType)(getBlock(clientId), "core/cover")
+    );
   }
-
-  // TODO: Can allow more units after figuring out how they should interact
-  // with the ResizableBox and ImageEditor components. Calculations later on
-  // for those components are currently assuming px units.
-  const dimensionsUnitsOptions = (0, _components.__experimentalUseCustomUnits)({
-    availableUnits: ['px']
+  const dimensionsUnitsOptions = (0, import_components.__experimentalUseCustomUnits)({
+    availableUnits: ["px"]
   });
-  const [lightboxSetting] = (0, _blockEditor.useSettings)('lightbox');
-  const showLightboxSetting =
-  // If a block-level override is set, we should give users the option to
-  // remove that override, even if the lightbox UI is disabled in the settings.
-  !!lightbox && lightbox?.enabled !== lightboxSetting?.enabled || lightboxSetting?.allowEditing;
+  const [lightboxSetting] = (0, import_block_editor.useSettings)("lightbox");
+  const showLightboxSetting = (
+    // If a block-level override is set, we should give users the option to
+    // remove that override, even if the lightbox UI is disabled in the settings.
+    !!lightbox && lightbox?.enabled !== lightboxSetting?.enabled || lightboxSetting?.allowEditing
+  );
   const lightboxChecked = !!lightbox?.enabled || !lightbox && !!lightboxSetting?.enabled;
-  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
-  const dimensionsControl = isResizable && (_constants.SIZED_LAYOUTS.includes(parentLayoutType) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DimensionsTool, {
-    value: {
-      aspectRatio
-    },
-    onChange: ({
-      aspectRatio: newAspectRatio
-    }) => {
-      setAttributes({
-        aspectRatio: newAspectRatio,
-        scale: 'cover'
-      });
-    },
-    defaultAspectRatio: "auto",
-    tools: ['aspectRatio']
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DimensionsTool, {
-    value: {
-      width,
-      height,
-      scale,
-      aspectRatio
-    },
-    onChange: ({
-      width: newWidth,
-      height: newHeight,
-      scale: newScale,
-      aspectRatio: newAspectRatio
-    }) => {
-      // Rebuilding the object forces setting `undefined`
-      // for values that are removed since setAttributes
-      // doesn't do anything with keys that aren't set.
-      setAttributes({
-        // CSS includes `height: auto`, but we need
-        // `width: auto` to fix the aspect ratio when
-        // only height is set due to the width and
-        // height attributes set via the server.
-        width: !newWidth && newHeight ? 'auto' : newWidth,
+  const dropdownMenuProps = (0, import_hooks.useToolsPanelDropdownMenuProps)();
+  const dimensionsControl = isResizable && (import_constants.SIZED_LAYOUTS.includes(parentLayoutType) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DimensionsTool,
+    {
+      value: { aspectRatio },
+      onChange: ({ aspectRatio: newAspectRatio }) => {
+        setAttributes({
+          aspectRatio: newAspectRatio,
+          scale: "cover"
+        });
+      },
+      defaultAspectRatio: "auto",
+      tools: ["aspectRatio"]
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DimensionsTool,
+    {
+      value: { width, height, scale, aspectRatio },
+      onChange: ({
+        width: newWidth,
         height: newHeight,
         scale: newScale,
         aspectRatio: newAspectRatio
-      });
-    },
-    defaultScale: "cover",
-    defaultAspectRatio: "auto",
-    scaleOptions: scaleOptions,
-    unitsOptions: dimensionsUnitsOptions
-  }));
+      }) => {
+        setAttributes({
+          // CSS includes `height: auto`, but we need
+          // `width: auto` to fix the aspect ratio when
+          // only height is set due to the width and
+          // height attributes set via the server.
+          width: !newWidth && newHeight ? "auto" : newWidth,
+          height: newHeight,
+          scale: newScale,
+          aspectRatio: newAspectRatio
+        });
+      },
+      defaultScale: "cover",
+      defaultAspectRatio: "auto",
+      scaleOptions,
+      unitsOptions: dimensionsUnitsOptions
+    }
+  ));
   const resetAll = () => {
     setAttributes({
-      alt: undefined,
-      width: undefined,
-      height: undefined,
-      scale: undefined,
-      aspectRatio: undefined,
-      lightbox: undefined
+      alt: void 0,
+      width: void 0,
+      height: void 0,
+      scale: void 0,
+      aspectRatio: void 0,
+      lightbox: void 0
     });
-    updateImage(_constants.DEFAULT_MEDIA_SIZE_SLUG);
+    updateImage(import_constants.DEFAULT_MEDIA_SIZE_SLUG);
   };
-  const sizeControls = /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanel, {
-      label: (0, _i18n.__)('Settings'),
-      resetAll: resetAll,
-      dropdownMenuProps: dropdownMenuProps,
+  const sizeControls = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToolsPanel,
+    {
+      label: (0, import_i18n.__)("Settings"),
+      resetAll,
+      dropdownMenuProps,
       children: dimensionsControl
-    })
-  });
-  const arePatternOverridesEnabled = metadata?.bindings?.__default?.source === 'core/pattern-overrides';
+    }
+  ) });
+  const arePatternOverridesEnabled = metadata?.bindings?.__default?.source === "core/pattern-overrides";
   const {
     lockUrlControls = false,
     lockHrefControls = false,
@@ -534,393 +492,417 @@ function Image({
     lockTitleControls = false,
     lockTitleControlsMessage,
     hideCaptionControls = false
-  } = (0, _data.useSelect)(select => {
-    if (!isSingleSelected) {
-      return {};
-    }
-    const {
-      url: urlBinding,
-      alt: altBinding,
-      title: titleBinding,
-      caption: captionBinding
-    } = metadata?.bindings || {};
-    const hasParentPattern = !!context['pattern/overrides'];
-    const urlBindingSource = (0, _blocks.getBlockBindingsSource)(urlBinding?.source);
-    const altBindingSource = (0, _blocks.getBlockBindingsSource)(altBinding?.source);
-    const titleBindingSource = (0, _blocks.getBlockBindingsSource)(titleBinding?.source);
-    return {
-      lockUrlControls: !!urlBinding && !urlBindingSource?.canUserEditValue?.({
-        select,
-        context,
-        args: urlBinding?.args
-      }),
-      lockHrefControls:
-      // Disable editing the link of the URL if the image is inside a pattern instance.
-      // This is a temporary solution until we support overriding the link on the frontend.
-      hasParentPattern || arePatternOverridesEnabled,
-      hideCaptionControls: !!captionBinding,
-      lockAltControls: !!altBinding && !altBindingSource?.canUserEditValue?.({
-        select,
-        context,
-        args: altBinding?.args
-      }),
-      lockAltControlsMessage: altBindingSource?.label ? (0, _i18n.sprintf)(/* translators: %s: Label of the bindings source. */
-      (0, _i18n.__)('Connected to %s'), altBindingSource.label) : (0, _i18n.__)('Connected to dynamic data'),
-      lockTitleControls: !!titleBinding && !titleBindingSource?.canUserEditValue?.({
-        select,
-        context,
-        args: titleBinding?.args
-      }),
-      lockTitleControlsMessage: titleBindingSource?.label ? (0, _i18n.sprintf)(/* translators: %s: Label of the bindings source. */
-      (0, _i18n.__)('Connected to %s'), titleBindingSource.label) : (0, _i18n.__)('Connected to dynamic data')
-    };
-  }, [arePatternOverridesEnabled, context, isSingleSelected, metadata?.bindings]);
+  } = (0, import_data.useSelect)(
+    (select) => {
+      if (!isSingleSelected) {
+        return {};
+      }
+      const {
+        url: urlBinding,
+        alt: altBinding,
+        title: titleBinding,
+        caption: captionBinding
+      } = metadata?.bindings || {};
+      const hasParentPattern = !!context["pattern/overrides"];
+      const urlBindingSource = (0, import_blocks.getBlockBindingsSource)(
+        urlBinding?.source
+      );
+      const altBindingSource = (0, import_blocks.getBlockBindingsSource)(
+        altBinding?.source
+      );
+      const titleBindingSource = (0, import_blocks.getBlockBindingsSource)(
+        titleBinding?.source
+      );
+      return {
+        lockUrlControls: !!urlBinding && !urlBindingSource?.canUserEditValue?.({
+          select,
+          context,
+          args: urlBinding?.args
+        }),
+        lockHrefControls: (
+          // Disable editing the link of the URL if the image is inside a pattern instance.
+          // This is a temporary solution until we support overriding the link on the frontend.
+          hasParentPattern || arePatternOverridesEnabled
+        ),
+        hideCaptionControls: !!captionBinding,
+        lockAltControls: !!altBinding && !altBindingSource?.canUserEditValue?.({
+          select,
+          context,
+          args: altBinding?.args
+        }),
+        lockAltControlsMessage: altBindingSource?.label ? (0, import_i18n.sprintf)(
+          /* translators: %s: Label of the bindings source. */
+          (0, import_i18n.__)("Connected to %s"),
+          altBindingSource.label
+        ) : (0, import_i18n.__)("Connected to dynamic data"),
+        lockTitleControls: !!titleBinding && !titleBindingSource?.canUserEditValue?.({
+          select,
+          context,
+          args: titleBinding?.args
+        }),
+        lockTitleControlsMessage: titleBindingSource?.label ? (0, import_i18n.sprintf)(
+          /* translators: %s: Label of the bindings source. */
+          (0, import_i18n.__)("Connected to %s"),
+          titleBindingSource.label
+        ) : (0, import_i18n.__)("Connected to dynamic data")
+      };
+    },
+    [
+      arePatternOverridesEnabled,
+      context,
+      isSingleSelected,
+      metadata?.bindings
+    ]
+  );
   const showUrlInput = isSingleSelected && !isEditingImage && !lockHrefControls && !lockUrlControls;
   const showCoverControls = isSingleSelected && canInsertCover && !isContentOnlyMode;
   const showBlockControls = showUrlInput || allowCrop || showCoverControls;
-  const mediaReplaceFlow = isSingleSelected && !isEditingImage && !lockUrlControls &&
-  /*#__PURE__*/
-  // For contentOnly mode, put this button in its own area so it has borders around it.
-  (0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
-    group: isContentOnlyMode ? 'inline' : 'other',
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaReplaceFlow, {
+  const mediaReplaceFlow = isSingleSelected && !isEditingImage && !lockUrlControls && // For contentOnly mode, put this button in its own area so it has borders around it.
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: isContentOnlyMode ? "inline" : "other", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_block_editor.MediaReplaceFlow,
+    {
       mediaId: id,
       mediaURL: url,
-      allowedTypes: _constants.ALLOWED_MEDIA_TYPES,
+      allowedTypes: import_constants.ALLOWED_MEDIA_TYPES,
       accept: "image/*",
       onSelect: onSelectImage,
-      onSelectURL: onSelectURL,
+      onSelectURL,
       onError: onUploadError,
-      name: !url ? (0, _i18n.__)('Add image') : (0, _i18n.__)('Replace'),
-      onReset: () => onSelectImage(undefined)
-    })
-  });
-  const controls = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [showBlockControls && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.BlockControls, {
-      group: "block",
-      children: [showUrlInput && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalImageURLInputUI, {
-        url: href || '',
-        onChangeUrl: onSetHref,
-        linkDestination: linkDestination,
-        mediaUrl: image && image.source_url || url,
-        mediaLink: image && image.link,
-        linkTarget: linkTarget,
-        linkClass: linkClass,
-        rel: rel,
-        showLightboxSetting: showLightboxSetting,
-        lightboxEnabled: lightboxChecked,
-        onSetLightbox: onSetLightbox,
-        resetLightbox: resetLightbox
-      }), allowCrop && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
-        onClick: () => setIsEditingImage(true),
-        icon: _icons.crop,
-        label: (0, _i18n.__)('Crop')
-      }), showCoverControls && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
-        icon: _icons.overlayText,
-        label: (0, _i18n.__)('Add text over image'),
-        onClick: switchToCover
-      })]
-    }), isSingleSelected && externalBlob && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
-          onClick: uploadExternal,
-          icon: _icons.upload,
-          label: (0, _i18n.__)('Upload to Media Library')
-        })
-      })
-    }), isContentOnlyMode &&
-    /*#__PURE__*/
-    // Add some extra controls for content attributes when content only mode is active.
+      name: !url ? (0, import_i18n.__)("Add image") : (0, import_i18n.__)("Replace"),
+      onReset: () => onSelectImage(void 0)
+    }
+  ) });
+  const controls = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    showBlockControls && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.BlockControls, { group: "block", children: [
+      showUrlInput && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_block_editor.__experimentalImageURLInputUI,
+        {
+          url: href || "",
+          onChangeUrl: onSetHref,
+          linkDestination,
+          mediaUrl: image && image.source_url || url,
+          mediaLink: image && image.link,
+          linkTarget,
+          linkClass,
+          rel,
+          showLightboxSetting,
+          lightboxEnabled: lightboxChecked,
+          onSetLightbox,
+          resetLightbox
+        }
+      ),
+      allowCrop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.ToolbarButton,
+        {
+          onClick: () => setIsEditingImage(true),
+          icon: import_icons.crop,
+          label: (0, import_i18n.__)("Crop")
+        }
+      ),
+      showCoverControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.ToolbarButton,
+        {
+          icon: import_icons.overlayText,
+          label: (0, import_i18n.__)("Add text over image"),
+          onClick: switchToCover
+        }
+      )
+    ] }),
+    isSingleSelected && externalBlob && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.ToolbarButton,
+      {
+        onClick: uploadExternal,
+        icon: import_icons.upload,
+        label: (0, import_i18n.__)("Upload to Media Library")
+      }
+    ) }) }),
+    isContentOnlyMode && // Add some extra controls for content attributes when content only mode is active.
     // With content only mode active, the inspector is hidden, so users need another way
     // to edit these attributes.
-    (0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
-      group: "block",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentOnlyControls, {
-        attributes: attributes,
-        setAttributes: setAttributes,
-        lockAltControls: lockAltControls,
-        lockAltControlsMessage: lockAltControlsMessage,
-        lockTitleControls: lockTitleControls,
-        lockTitleControlsMessage: lockTitleControlsMessage
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
-        label: (0, _i18n.__)('Settings'),
-        resetAll: resetAll,
-        dropdownMenuProps: dropdownMenuProps,
-        children: [isSingleSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-          label: (0, _i18n.__)('Alternative text'),
-          isShownByDefault: true,
-          hasValue: () => !!alt,
-          onDeselect: () => setAttributes({
-            alt: undefined
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextareaControl, {
-            label: (0, _i18n.__)('Alternative text'),
-            value: alt || '',
-            onChange: updateAlt,
-            readOnly: lockAltControls,
-            help: lockAltControls ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-              children: lockAltControlsMessage
-            }) : /*#__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.')]
-            }),
-            __nextHasNoMarginBottom: true
-          })
-        }), dimensionsControl, !!imageSizeOptions.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResolutionTool, {
-          value: sizeSlug,
-          defaultValue: _constants.DEFAULT_MEDIA_SIZE_SLUG,
-          onChange: updateImage,
-          options: imageSizeOptions
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
-      group: "advanced",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: "block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ContentOnlyControls,
+      {
+        attributes,
+        setAttributes,
+        lockAltControls,
+        lockAltControlsMessage,
+        lockTitleControls,
+        lockTitleControlsMessage
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.__experimentalToolsPanel,
+      {
+        label: (0, import_i18n.__)("Settings"),
+        resetAll,
+        dropdownMenuProps,
+        children: [
+          isSingleSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToolsPanelItem,
+            {
+              label: (0, import_i18n.__)("Alternative text"),
+              isShownByDefault: true,
+              hasValue: () => !!alt,
+              onDeselect: () => setAttributes({ alt: void 0 }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.TextareaControl,
+                {
+                  label: (0, import_i18n.__)("Alternative text"),
+                  value: alt || "",
+                  onChange: updateAlt,
+                  readOnly: lockAltControls,
+                  help: lockAltControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: lockAltControlsMessage }) : /* @__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."
+                    )
+                  ] }),
+                  __nextHasNoMarginBottom: true
+                }
+              )
+            }
+          ),
+          dimensionsControl,
+          !!imageSizeOptions.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ResolutionTool,
+            {
+              value: sizeSlug,
+              defaultValue: import_constants.DEFAULT_MEDIA_SIZE_SLUG,
+              onChange: updateImage,
+              options: imageSizeOptions
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { group: "advanced", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.TextControl,
+      {
         __nextHasNoMarginBottom: true,
         __next40pxDefaultSize: true,
-        label: (0, _i18n.__)('Title attribute'),
-        value: title || '',
+        label: (0, import_i18n.__)("Title attribute"),
+        value: title || "",
         onChange: onSetTitle,
         readOnly: lockTitleControls,
-        help: lockTitleControls ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: lockTitleControlsMessage
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [(0, _i18n.__)('Describe the role of this image on the page.'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
-            href: "https://www.w3.org/TR/html52/dom.html#the-title-attribute",
-            children: (0, _i18n.__)('(Note: many devices and browsers do not display this text.)')
-          })]
-        })
-      })
-    })]
-  });
-  const filename = (0, _url.getFilename)(url);
+        help: lockTitleControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: lockTitleControlsMessage }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          (0, import_i18n.__)(
+            "Describe the role of this image on the page."
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ExternalLink, { href: "https://www.w3.org/TR/html52/dom.html#the-title-attribute", children: (0, import_i18n.__)(
+            "(Note: many devices and browsers do not display this text.)"
+          ) })
+        ] })
+      }
+    ) })
+  ] });
+  const filename = (0, import_url.getFilename)(url);
   let defaultedAlt;
   if (alt) {
     defaultedAlt = alt;
   } else if (filename) {
-    defaultedAlt = (0, _i18n.sprintf)(/* translators: %s: file name */
-    (0, _i18n.__)('This image has an empty alt attribute; its file name is %s'), filename);
+    defaultedAlt = (0, import_i18n.sprintf)(
+      /* translators: %s: file name */
+      (0, import_i18n.__)("This image has an empty alt attribute; its file name is %s"),
+      filename
+    );
   } else {
-    defaultedAlt = (0, _i18n.__)('This image has an empty alt attribute');
+    defaultedAlt = (0, import_i18n.__)("This image has an empty alt attribute");
   }
-  const borderProps = (0, _blockEditor.__experimentalUseBorderProps)(attributes);
-  const shadowProps = (0, _blockEditor.__experimentalGetShadowClassesAndStyles)(attributes);
-  const isRounded = attributes.className?.includes('is-style-rounded');
-  const {
-    postType,
-    postId,
-    queryId
-  } = context;
+  const borderProps = (0, import_block_editor.__experimentalUseBorderProps)(attributes);
+  const shadowProps = (0, import_block_editor.__experimentalGetShadowClassesAndStyles)(attributes);
+  const isRounded = attributes.className?.includes("is-style-rounded");
+  const { postType, postId, queryId } = context;
   const isDescendentOfQueryLoop = Number.isFinite(queryId);
-  let img = temporaryURL && hasImageErrored ?
-  /*#__PURE__*/
-  // Show a placeholder during upload when the blob URL can't be loaded. This can
-  // happen when the user uploads a HEIC image in a browser that doesn't support them.
-  (0, _jsxRuntime.jsx)(_components.Placeholder, {
-    className: "wp-block-image__placeholder",
-    withIllustration: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
-  }) :
-  /*#__PURE__*/
-  // Disable reason: Image itself is not meant to be interactive, but
-  // should direct focus to block.
-  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-  (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      src: temporaryURL || url,
-      alt: defaultedAlt,
-      onError: onImageError,
-      onLoad: onImageLoad,
-      ref: setRefs,
-      className: borderProps.className,
-      width: naturalWidth,
-      height: naturalHeight,
-      style: {
-        aspectRatio,
-        ...(resizeDelta ? {
-          width: pixelSize.width + resizeDelta.width,
-          height: pixelSize.height + resizeDelta.height
-        } : {
-          width,
-          height
-        }),
-        objectFit: scale,
-        ...borderProps.style,
-        ...shadowProps.style
+  let img = temporaryURL && hasImageErrored ? (
+    // Show a placeholder during upload when the blob URL can't be loaded. This can
+    // happen when the user uploads a HEIC image in a browser that doesn't support them.
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Placeholder,
+      {
+        className: "wp-block-image__placeholder",
+        withIllustration: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
       }
-    }), temporaryURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})]
-  })
-  /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */;
+    )
+  ) : (
+    // Disable reason: Image itself is not meant to be interactive, but
+    // should direct focus to block.
+    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src: temporaryURL || url,
+          alt: defaultedAlt,
+          onError: onImageError,
+          onLoad: onImageLoad,
+          ref: setRefs,
+          className: borderProps.className,
+          width: naturalWidth,
+          height: naturalHeight,
+          style: {
+            aspectRatio,
+            ...resizeDelta ? {
+              width: pixelSize.width + resizeDelta.width,
+              height: pixelSize.height + resizeDelta.height
+            } : { width, height },
+            objectFit: scale,
+            ...borderProps.style,
+            ...shadowProps.style
+          }
+        }
+      ),
+      temporaryURL && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
+    ] })
+  );
   if (canEditImage && isEditingImage) {
-    img = /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageWrapper, {
-      href: href,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalImageEditor, {
-        id: id,
-        url: url,
+    img = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageWrapper, { href, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_block_editor.__experimentalImageEditor,
+      {
+        id,
+        url,
         ...pixelSize,
-        naturalHeight: naturalHeight,
-        naturalWidth: naturalWidth,
-        onSaveImage: imageAttributes => setAttributes(imageAttributes),
+        naturalHeight,
+        naturalWidth,
+        onSaveImage: (imageAttributes) => setAttributes(imageAttributes),
         onFinishEditing: () => {
           setIsEditingImage(false);
         },
-        borderProps: isRounded ? undefined : borderProps
-      })
-    });
+        borderProps: isRounded ? void 0 : borderProps
+      }
+    ) });
   } else {
-    img = /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageWrapper, {
-      href: href,
-      children: img
-    });
+    img = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageWrapper, { href, children: img });
   }
   let resizableBox;
-  if (isResizable && isSingleSelected && !isEditingImage && !_constants.SIZED_LAYOUTS.includes(parentLayoutType)) {
-    const numericRatio = aspectRatio && (0, _utils.evalAspectRatio)(aspectRatio);
+  if (isResizable && isSingleSelected && !isEditingImage && !import_constants.SIZED_LAYOUTS.includes(parentLayoutType)) {
+    const numericRatio = aspectRatio && (0, import_utils.evalAspectRatio)(aspectRatio);
     const customRatio = pixelSize.width / pixelSize.height;
     const naturalRatio = naturalWidth / naturalHeight;
     const ratio = numericRatio || customRatio || naturalRatio || 1;
-    const minWidth = naturalWidth < naturalHeight ? _constants.MIN_SIZE : _constants.MIN_SIZE * ratio;
-    const minHeight = naturalHeight < naturalWidth ? _constants.MIN_SIZE : _constants.MIN_SIZE / ratio;
-
-    // With the current implementation of ResizableBox, an image needs an
-    // explicit pixel value for the max-width. In absence of being able to
-    // set the content-width, this max-width is currently dictated by the
-    // vanilla editor style. The following variable adds a buffer to this
-    // vanilla style, so 3rd party themes have some wiggleroom. This does,
-    // in most cases, allow you to scale the image beyond the width of the
-    // main column, though not infinitely.
-    // @todo It would be good to revisit this once a content-width variable
-    // becomes available.
+    const minWidth = naturalWidth < naturalHeight ? import_constants.MIN_SIZE : import_constants.MIN_SIZE * ratio;
+    const minHeight = naturalHeight < naturalWidth ? import_constants.MIN_SIZE : import_constants.MIN_SIZE / ratio;
     const maxWidthBuffer = maxWidth * 2.5;
     const maxResizeWidth = maxContentWidth || maxWidthBuffer;
     let showRightHandle = false;
     let showLeftHandle = false;
-
-    /* eslint-disable no-lonely-if */
-    // See https://github.com/WordPress/gutenberg/issues/7584.
-    if (align === 'center') {
-      // When the image is centered, show both handles.
+    if (align === "center") {
       showRightHandle = true;
       showLeftHandle = true;
-    } else if ((0, _i18n.isRTL)()) {
-      // In RTL mode the image is on the right by default.
-      // Show the right handle and hide the left handle only when it is
-      // aligned left. Otherwise always show the left handle.
-      if (align === 'left') {
+    } else if ((0, import_i18n.isRTL)()) {
+      if (align === "left") {
         showRightHandle = true;
       } else {
         showLeftHandle = true;
       }
     } else {
-      // Show the left handle and hide the right handle only when the
-      // image is aligned right. Otherwise always show the right handle.
-      if (align === 'right') {
+      if (align === "right") {
         showLeftHandle = true;
       } else {
         showRightHandle = true;
       }
     }
-    /* eslint-enable no-lonely-if */
-    resizableBox = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ResizableBox, {
-      ref: effectResizeableBoxPlacement,
-      style: {
-        position: 'absolute',
-        // To match the vertical-align: bottom of the img (from style.scss)
-        // syncs the top with the img. This matters when the img height is
-        // less than the line-height.
-        inset: `${offsetTop}px 0 0 0`
-      },
-      size: pixelSize,
-      minWidth: minWidth,
-      maxWidth: maxResizeWidth,
-      minHeight: minHeight,
-      maxHeight: maxResizeWidth / ratio,
-      lockAspectRatio: ratio,
-      enable: {
-        top: false,
-        right: showRightHandle,
-        bottom: true,
-        left: showLeftHandle
-      },
-      onResizeStart: () => {
-        toggleSelection(false);
-      },
-      onResize: (event, direction, elt, delta) => {
-        setResizeDelta(delta);
-      },
-      onResizeStop: (event, direction, elt, delta) => {
-        toggleSelection(true);
-        setResizeDelta(null);
-        setPixelSize(current => ({
-          width: current.width + delta.width,
-          height: current.height + delta.height
-        }));
-
-        // Clear hardcoded width if the resized width is close to the max-content width.
-        if (maxContentWidth &&
-        // Only do this if the image is bigger than the container to prevent it from being squished.
-        // TODO: Remove this check if the image support setting 100% width.
-        naturalWidth >= maxContentWidth && Math.abs(elt.offsetWidth - maxContentWidth) < 10) {
+    resizableBox = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.ResizableBox,
+      {
+        ref: effectResizeableBoxPlacement,
+        style: {
+          position: "absolute",
+          // To match the vertical-align: bottom of the img (from style.scss)
+          // syncs the top with the img. This matters when the img height is
+          // less than the line-height.
+          inset: `${offsetTop}px 0 0 0`
+        },
+        size: pixelSize,
+        minWidth,
+        maxWidth: maxResizeWidth,
+        minHeight,
+        maxHeight: maxResizeWidth / ratio,
+        lockAspectRatio: ratio,
+        enable: {
+          top: false,
+          right: showRightHandle,
+          bottom: true,
+          left: showLeftHandle
+        },
+        onResizeStart: () => {
+          toggleSelection(false);
+        },
+        onResize: (event, direction, elt, delta) => {
+          setResizeDelta(delta);
+        },
+        onResizeStop: (event, direction, elt, delta) => {
+          toggleSelection(true);
+          setResizeDelta(null);
+          setPixelSize((current) => ({
+            width: current.width + delta.width,
+            height: current.height + delta.height
+          }));
+          if (maxContentWidth && // Only do this if the image is bigger than the container to prevent it from being squished.
+          // TODO: Remove this check if the image support setting 100% width.
+          naturalWidth >= maxContentWidth && Math.abs(elt.offsetWidth - maxContentWidth) < 10) {
+            setAttributes({
+              width: void 0,
+              height: void 0
+            });
+            return;
+          }
           setAttributes({
-            width: undefined,
-            height: undefined
+            width: `${elt.offsetWidth}px`,
+            height: "auto",
+            aspectRatio: ratio === naturalRatio ? void 0 : String(ratio)
           });
-          return;
-        }
-
-        // Since the aspect ratio is locked when resizing, we can
-        // use the width of the resized element to calculate the
-        // height in CSS to prevent stretching when the max-width
-        // is reached.
-        setAttributes({
-          width: `${elt.offsetWidth}px`,
-          height: 'auto',
-          aspectRatio: ratio === naturalRatio ? undefined : String(ratio)
-        });
-      },
-      resizeRatio: align === 'center' ? 2 : 1
-    });
+        },
+        resizeRatio: align === "center" ? 2 : 1
+      }
+    );
   }
   if (!url && !temporaryURL) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [mediaReplaceFlow, metadata?.bindings ? controls : sizeControls]
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      mediaReplaceFlow,
+      metadata?.bindings ? controls : sizeControls
+    ] });
   }
-
-  /**
-   * Set the post's featured image with the current image.
-   */
   const setPostFeatureImage = () => {
-    editEntityRecord('postType', postType, postId, {
+    editEntityRecord("postType", postType, postId, {
       featured_media: id
     });
-    createSuccessNotice((0, _i18n.__)('Post featured image updated.'), {
-      type: 'snackbar'
+    createSuccessNotice((0, import_i18n.__)("Post featured image updated."), {
+      type: "snackbar"
     });
   };
-  const featuredImageControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockSettingsMenuControls, {
-    children: ({
-      selectedClientIds
-    }) => selectedClientIds.length === 1 && !isDescendentOfQueryLoop && postId && id && clientId === selectedClientIds[0] && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-      onClick: setPostFeatureImage,
-      children: (0, _i18n.__)('Set as featured image')
-    })
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [mediaReplaceFlow, controls, featuredImageControl, img, resizableBox, /*#__PURE__*/(0, _jsxRuntime.jsx)(_caption.Caption, {
-      attributes: attributes,
-      setAttributes: setAttributes,
-      isSelected: isSingleSelected,
-      insertBlocksAfter: insertBlocksAfter,
-      label: (0, _i18n.__)('Image caption text'),
-      showToolbarButton: isSingleSelected && (hasNonContentControls || isContentOnlyMode) && !hideCaptionControls
-    })]
-  });
+  const featuredImageControl = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockSettingsMenuControls, { children: ({ selectedClientIds }) => selectedClientIds.length === 1 && !isDescendentOfQueryLoop && postId && id && clientId === selectedClientIds[0] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuItem, { onClick: setPostFeatureImage, children: (0, import_i18n.__)("Set as featured image") }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    mediaReplaceFlow,
+    controls,
+    featuredImageControl,
+    img,
+    resizableBox,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_caption.Caption,
+      {
+        attributes,
+        setAttributes,
+        isSelected: isSingleSelected,
+        insertBlocksAfter,
+        label: (0, import_i18n.__)("Image caption text"),
+        showToolbarButton: isSingleSelected && (hasNonContentControls || isContentOnlyMode) && !hideCaptionControls
+      }
+    )
+  ] });
 }
-//# sourceMappingURL=image.js.map
+//# sourceMappingURL=image.js.map