@wordpress/block-library 9.41.1-next.v.202603102151.0 → 9.42.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.42.0 (2026-03-18)
+
 ## 9.41.0 (2026-03-04)
 
 ## 9.40.0 (2026-02-18)

package/build/cover/edit/cover-placeholder.cjs

@@ -26,6 +26,7 @@ module.exports = __toCommonJS(cover_placeholder_exports);
 var import_block_editor = require("@wordpress/block-editor");
 var import_i18n = require("@wordpress/i18n");
 var import_icons = require("@wordpress/icons");
+var import_blob = require("@wordpress/blob");
 var import_shared = require("../shared.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function CoverPlaceholder({
@@ -36,6 +37,11 @@ function CoverPlaceholder({
   style,
   toggleUseFeaturedImage
 }) {
+  const onFilesPreUpload = (files) => {
+    if (files.length === 1) {
+      onSelectMedia({ url: (0, import_blob.createBlobURL)(files[0]) });
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_block_editor.MediaPlaceholder,
     {
@@ -47,6 +53,7 @@ function CoverPlaceholder({
       allowedTypes: import_shared.ALLOWED_MEDIA_TYPES,
       disableMediaButtons,
       onToggleFeaturedImage: toggleUseFeaturedImage,
+      onFilesPreUpload,
       onError,
       style,
       children

package/build/cover/edit/cover-placeholder.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/cover/edit/cover-placeholder.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { BlockIcon, MediaPlaceholder } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { cover as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { ALLOWED_MEDIA_TYPES } from '../shared';\n\nexport default function CoverPlaceholder( {\n\tdisableMediaButtons = false,\n\tchildren,\n\tonSelectMedia,\n\tonError,\n\tstyle,\n\ttoggleUseFeaturedImage,\n} ) {\n\treturn (\n\t\t<MediaPlaceholder\n\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\tlabels={ {\n\t\t\t\ttitle: __( 'Cover' ),\n\t\t\t} }\n\t\t\tonSelect={ onSelectMedia }\n\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\tdisableMediaButtons={ disableMediaButtons }\n\t\t\tonToggleFeaturedImage={ toggleUseFeaturedImage }\n\t\t\tonError={ onError }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t{ children }\n\t\t</MediaPlaceholder>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAA4C;AAC5C,kBAAmB;AACnB,mBAA8B;AAK9B,oBAAoC;AAY1B;AAVK,SAAR,iBAAmC;AAAA,EACzC,sBAAsB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO,4CAAC,iCAAU,MAAO,aAAAA,OAAO;AAAA,MAChC,QAAS;AAAA,QACR,WAAO,gBAAI,OAAQ;AAAA,MACpB;AAAA,MACA,UAAW;AAAA,MACX,cAAe;AAAA,MACf;AAAA,MACA,uBAAwB;AAAA,MACxB;AAAA,MACA;AAAA,MAEE;AAAA;AAAA,EACH;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { BlockIcon, MediaPlaceholder } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { cover as icon } from '@wordpress/icons';\nimport { createBlobURL } from '@wordpress/blob';\n\n/**\n * Internal dependencies\n */\nimport { ALLOWED_MEDIA_TYPES } from '../shared';\n\nexport default function CoverPlaceholder( {\n\tdisableMediaButtons = false,\n\tchildren,\n\tonSelectMedia,\n\tonError,\n\tstyle,\n\ttoggleUseFeaturedImage,\n} ) {\n\tconst onFilesPreUpload = ( files ) => {\n\t\tif ( files.length === 1 ) {\n\t\t\tonSelectMedia( { url: createBlobURL( files[ 0 ] ) } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<MediaPlaceholder\n\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\tlabels={ {\n\t\t\t\ttitle: __( 'Cover' ),\n\t\t\t} }\n\t\t\tonSelect={ onSelectMedia }\n\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\tdisableMediaButtons={ disableMediaButtons }\n\t\t\tonToggleFeaturedImage={ toggleUseFeaturedImage }\n\t\t\tonFilesPreUpload={ onFilesPreUpload }\n\t\t\tonError={ onError }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t{ children }\n\t\t</MediaPlaceholder>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAA4C;AAC5C,kBAAmB;AACnB,mBAA8B;AAC9B,kBAA8B;AAK9B,oBAAoC;AAkB1B;AAhBK,SAAR,iBAAmC;AAAA,EACzC,sBAAsB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,mBAAmB,CAAE,UAAW;AACrC,QAAK,MAAM,WAAW,GAAI;AACzB,oBAAe,EAAE,SAAK,2BAAe,MAAO,CAAE,CAAE,EAAE,CAAE;AAAA,IACrD;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO,4CAAC,iCAAU,MAAO,aAAAA,OAAO;AAAA,MAChC,QAAS;AAAA,QACR,WAAO,gBAAI,OAAQ;AAAA,MACpB;AAAA,MACA,UAAW;AAAA,MACX,cAAe;AAAA,MACf;AAAA,MACA,uBAAwB;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MAEE;AAAA;AAAA,EACH;AAEF;",
   "names": ["icon"]
 }

package/build/html/modal.cjs

@@ -55,8 +55,6 @@ function HTMLEditModal({
   const [editedHtml, setEditedHtml] = (0, import_element.useState)(html);
   const [editedCss, setEditedCss] = (0, import_element.useState)(css);
   const [editedJs, setEditedJs] = (0, import_element.useState)(js);
-  const [isDirty, setIsDirty] = (0, import_element.useState)(false);
-  const [showUnsavedWarning, setShowUnsavedWarning] = (0, import_element.useState)(false);
   const [isFullscreen, setIsFullscreen] = (0, import_element.useState)(false);
   const isMobileViewport = (0, import_compose.useViewportMatch)("small", "<");
   const { canUserUseUnfilteredHTML } = (0, import_data.useSelect)((select) => {
@@ -69,18 +67,6 @@ function HTMLEditModal({
   if (!isOpen) {
     return null;
   }
-  const handleHtmlChange = (value) => {
-    setEditedHtml(value);
-    setIsDirty(true);
-  };
-  const handleCssChange = (value) => {
-    setEditedCss(value);
-    setIsDirty(true);
-  };
-  const handleJsChange = (value) => {
-    setEditedJs(value);
-    setIsDirty(true);
-  };
   const handleUpdate = () => {
     setAttributes({
       content: (0, import_utils.serializeContent)({
@@ -89,25 +75,6 @@ function HTMLEditModal({
         js: canUserUseUnfilteredHTML ? editedJs : ""
       })
     });
-    setIsDirty(false);
-  };
-  const handleCancel = () => {
-    setIsDirty(false);
-    onRequestClose();
-  };
-  const handleRequestClose = () => {
-    if (isDirty) {
-      setShowUnsavedWarning(true);
-    } else {
-      onRequestClose();
-    }
-  };
-  const handleDiscardChanges = () => {
-    setShowUnsavedWarning(false);
-    onRequestClose();
-  };
-  const handleContinueEditing = () => {
-    setShowUnsavedWarning(false);
   };
   const handleUpdateAndClose = () => {
     handleUpdate();
@@ -116,210 +83,165 @@ function HTMLEditModal({
   const toggleFullscreen = () => {
     setIsFullscreen((prevState) => !prevState);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components.Modal,
-      {
-        title: (0, import_i18n.__)("Edit HTML"),
-        onRequestClose: handleRequestClose,
-        className: "block-library-html__modal",
-        size: "large",
-        isDismissible: false,
-        shouldCloseOnClickOutside: !isDirty,
-        shouldCloseOnEsc: !isDirty,
-        isFullScreen: isFullscreen,
-        __experimentalHideHeader: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs, { orientation: "horizontal", defaultTabId: "html", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { expanded: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_components.__experimentalHStack,
-            {
-              justify: "space-between",
-              className: "block-library-html__modal-header",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs.TabList, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "html", children: "HTML" }),
-                  canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "css", children: "CSS" }),
-                  canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "js", children: (0, import_i18n.__)("JavaScript") })
-                ] }) }),
-                !isMobileViewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.Button,
-                  {
-                    __next40pxDefaultSize: true,
-                    icon: isFullscreen ? import_icons.square : import_icons.fullscreen,
-                    label: (0, import_i18n.__)(
-                      "Enable/disable fullscreen"
-                    ),
-                    onClick: toggleFullscreen,
-                    variant: "tertiary"
-                  }
-                ) })
-              ]
-            }
-          ),
-          hasRestrictedContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Notice,
-            {
-              status: "warning",
-              isDismissible: false,
-              className: "block-library-html__modal-notice",
-              children: (0, import_i18n.__)(
-                "This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML."
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_components.Flex,
-            {
-              direction: isMobileViewport ? "column" : "row",
-              className: "block-library-html__modal-tabs",
-              align: "stretch",
-              gap: 8,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-library-html__modal-content", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    Tabs.TabPanel,
-                    {
-                      tabId: "html",
-                      focusable: false,
-                      className: "block-library-html__modal-tab",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_block_editor.PlainText,
-                        {
-                          value: editedHtml,
-                          onChange: handleHtmlChange,
-                          placeholder: (0, import_i18n.__)("Write HTML\u2026"),
-                          "aria-label": (0, import_i18n.__)("HTML"),
-                          className: "block-library-html__modal-editor"
-                        }
-                      )
-                    }
-                  ),
-                  canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    Tabs.TabPanel,
-                    {
-                      tabId: "css",
-                      focusable: false,
-                      className: "block-library-html__modal-tab",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_block_editor.PlainText,
-                        {
-                          value: editedCss,
-                          onChange: handleCssChange,
-                          placeholder: (0, import_i18n.__)("Write CSS\u2026"),
-                          "aria-label": (0, import_i18n.__)("CSS"),
-                          className: "block-library-html__modal-editor"
-                        }
-                      )
-                    }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Modal,
+    {
+      title: (0, import_i18n.__)("Edit HTML"),
+      onRequestClose,
+      className: "block-library-html__modal",
+      size: "large",
+      isDismissible: false,
+      shouldCloseOnClickOutside: false,
+      isFullScreen: isFullscreen,
+      __experimentalHideHeader: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs, { orientation: "horizontal", defaultTabId: "html", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { expanded: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.__experimentalHStack,
+          {
+            justify: "space-between",
+            className: "block-library-html__modal-header",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs.TabList, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "html", children: "HTML" }),
+                canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "css", children: "CSS" }),
+                canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "js", children: (0, import_i18n.__)("JavaScript") })
+              ] }) }),
+              !isMobileViewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  __next40pxDefaultSize: true,
+                  icon: isFullscreen ? import_icons.square : import_icons.fullscreen,
+                  label: (0, import_i18n.__)(
+                    "Enable/disable fullscreen"
                   ),
-                  canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    Tabs.TabPanel,
-                    {
-                      tabId: "js",
-                      focusable: false,
-                      className: "block-library-html__modal-tab",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_block_editor.PlainText,
-                        {
-                          value: editedJs,
-                          onChange: handleJsChange,
-                          placeholder: (0, import_i18n.__)(
-                            "Write JavaScript\u2026"
-                          ),
-                          "aria-label": (0, import_i18n.__)("JavaScript"),
-                          className: "block-library-html__modal-editor"
-                        }
-                      )
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-library-html__preview", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_preview.default,
+                  onClick: toggleFullscreen,
+                  variant: "tertiary"
+                }
+              ) })
+            ]
+          }
+        ),
+        hasRestrictedContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Notice,
+          {
+            status: "warning",
+            isDismissible: false,
+            className: "block-library-html__modal-notice",
+            children: (0, import_i18n.__)(
+              "This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML."
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.Flex,
+          {
+            direction: isMobileViewport ? "column" : "row",
+            className: "block-library-html__modal-tabs",
+            align: "stretch",
+            gap: 8,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-library-html__modal-content", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Tabs.TabPanel,
                   {
-                    content: (0, import_utils.serializeContent)({
-                      html: editedHtml,
-                      css: editedCss,
-                      js: editedJs
-                    })
+                    tabId: "html",
+                    focusable: false,
+                    className: "block-library-html__modal-tab",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_block_editor.PlainText,
+                      {
+                        value: editedHtml,
+                        onChange: setEditedHtml,
+                        placeholder: (0, import_i18n.__)("Write HTML\u2026"),
+                        "aria-label": (0, import_i18n.__)("HTML"),
+                        className: "block-library-html__modal-editor"
+                      }
+                    )
                   }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_components.__experimentalHStack,
-            {
-              alignment: "center",
-              justify: "flex-end",
-              spacing: 4,
-              className: "block-library-html__modal-footer",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.Button,
+                ),
+                canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Tabs.TabPanel,
                   {
-                    __next40pxDefaultSize: true,
-                    variant: "tertiary",
-                    onClick: handleCancel,
-                    children: (0, import_i18n.__)("Cancel")
+                    tabId: "css",
+                    focusable: false,
+                    className: "block-library-html__modal-tab",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_block_editor.PlainText,
+                      {
+                        value: editedCss,
+                        onChange: setEditedCss,
+                        placeholder: (0, import_i18n.__)("Write CSS\u2026"),
+                        "aria-label": (0, import_i18n.__)("CSS"),
+                        className: "block-library-html__modal-editor"
+                      }
+                    )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.Button,
+                canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Tabs.TabPanel,
                   {
-                    __next40pxDefaultSize: true,
-                    variant: "primary",
-                    onClick: handleUpdateAndClose,
-                    children: (0, import_i18n.__)("Update")
+                    tabId: "js",
+                    focusable: false,
+                    className: "block-library-html__modal-tab",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_block_editor.PlainText,
+                      {
+                        value: editedJs,
+                        onChange: setEditedJs,
+                        placeholder: (0, import_i18n.__)(
+                          "Write JavaScript\u2026"
+                        ),
+                        "aria-label": (0, import_i18n.__)("JavaScript"),
+                        className: "block-library-html__modal-editor"
+                      }
+                    )
                   }
                 )
-              ]
-            }
-          )
-        ] }) })
-      }
-    ),
-    showUnsavedWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_components.Modal,
-      {
-        title: (0, import_i18n.__)("Unsaved changes"),
-        onRequestClose: handleContinueEditing,
-        size: "medium",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.__)(
-            "You have unsaved changes. What would you like to do?"
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { direction: "row", justify: "flex-end", gap: 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_components.Button,
-              {
-                __next40pxDefaultSize: true,
-                variant: "secondary",
-                onClick: handleDiscardChanges,
-                children: (0, import_i18n.__)("Discard unsaved changes")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_components.Button,
-              {
-                __next40pxDefaultSize: true,
-                variant: "secondary",
-                onClick: handleContinueEditing,
-                children: (0, import_i18n.__)("Continue editing")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_components.Button,
-              {
-                __next40pxDefaultSize: true,
-                variant: "primary",
-                onClick: handleUpdateAndClose,
-                children: (0, import_i18n.__)("Update and close")
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-library-html__preview", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_preview.default,
+                {
+                  content: (0, import_utils.serializeContent)({
+                    html: editedHtml,
+                    css: editedCss,
+                    js: editedJs
+                  })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.__experimentalHStack,
+          {
+            alignment: "center",
+            justify: "flex-end",
+            spacing: 4,
+            className: "block-library-html__modal-footer",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  __next40pxDefaultSize: true,
+                  variant: "tertiary",
+                  onClick: onRequestClose,
+                  children: (0, import_i18n.__)("Cancel")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  __next40pxDefaultSize: true,
+                  variant: "primary",
+                  onClick: handleUpdateAndClose,
+                  children: (0, import_i18n.__)("Update")
+                }
+              )
+            ]
+          }
+        )
+      ] }) })
+    }
+  ) });
 }
 //# sourceMappingURL=modal.cjs.map

package/build/html/modal.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/html/modal.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tModal,\n\tButton,\n\tFlex,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { PlainText, store as blockEditorStore } from '@wordpress/block-editor';\nimport { fullscreen, square } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\nimport Preview from './preview';\nimport { parseContent, serializeContent } from './utils';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nexport default function HTMLEditModal( {\n\tisOpen,\n\tonRequestClose,\n\tcontent,\n\tsetAttributes,\n} ) {\n\t// Parse content into separate sections and use as initial state\n\tconst { html, css, js } = parseContent( content );\n\tconst [ editedHtml, setEditedHtml ] = useState( html );\n\tconst [ editedCss, setEditedCss ] = useState( css );\n\tconst [ editedJs, setEditedJs ] = useState( js );\n\tconst [ isDirty, setIsDirty ] = useState( false );\n\tconst [ showUnsavedWarning, setShowUnsavedWarning ] = useState( false );\n\tconst [ isFullscreen, setIsFullscreen ] = useState( false );\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\n\t// Check if user has permission to save scripts and get editor styles\n\tconst { canUserUseUnfilteredHTML } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tcanUserUseUnfilteredHTML:\n\t\t\t\tsettings.__experimentalCanUserUseUnfilteredHTML,\n\t\t};\n\t}, [] );\n\n\t// Determine if we should show a warning about CSS/JS content being stripped\n\tconst hasRestrictedContent =\n\t\t! canUserUseUnfilteredHTML && ( css.trim() || js.trim() );\n\n\tif ( ! isOpen ) {\n\t\treturn null;\n\t}\n\n\tconst handleHtmlChange = ( value ) => {\n\t\tsetEditedHtml( value );\n\t\tsetIsDirty( true );\n\t};\n\tconst handleCssChange = ( value ) => {\n\t\tsetEditedCss( value );\n\t\tsetIsDirty( true );\n\t};\n\tconst handleJsChange = ( value ) => {\n\t\tsetEditedJs( value );\n\t\tsetIsDirty( true );\n\t};\n\tconst handleUpdate = () => {\n\t\t// For users without unfiltered_html capability, strip CSS and JS content\n\t\t// to prevent kses from leaving broken content\n\t\tsetAttributes( {\n\t\t\tcontent: serializeContent( {\n\t\t\t\thtml: editedHtml,\n\t\t\t\tcss: canUserUseUnfilteredHTML ? editedCss : '',\n\t\t\t\tjs: canUserUseUnfilteredHTML ? editedJs : '',\n\t\t\t} ),\n\t\t} );\n\t\tsetIsDirty( false );\n\t};\n\tconst handleCancel = () => {\n\t\tsetIsDirty( false );\n\t\tonRequestClose();\n\t};\n\tconst handleRequestClose = () => {\n\t\tif ( isDirty ) {\n\t\t\tsetShowUnsavedWarning( true );\n\t\t} else {\n\t\t\tonRequestClose();\n\t\t}\n\t};\n\tconst handleDiscardChanges = () => {\n\t\tsetShowUnsavedWarning( false );\n\t\tonRequestClose();\n\t};\n\tconst handleContinueEditing = () => {\n\t\tsetShowUnsavedWarning( false );\n\t};\n\tconst handleUpdateAndClose = () => {\n\t\thandleUpdate();\n\t\tonRequestClose();\n\t};\n\tconst toggleFullscreen = () => {\n\t\tsetIsFullscreen( ( prevState ) => ! prevState );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Modal\n\t\t\t\ttitle={ __( 'Edit HTML' ) }\n\t\t\t\tonRequestClose={ handleRequestClose }\n\t\t\t\tclassName=\"block-library-html__modal\"\n\t\t\t\tsize=\"large\"\n\t\t\t\tisDismissible={ false }\n\t\t\t\tshouldCloseOnClickOutside={ ! isDirty }\n\t\t\t\tshouldCloseOnEsc={ ! isDirty }\n\t\t\t\tisFullScreen={ isFullscreen }\n\t\t\t\t__experimentalHideHeader\n\t\t\t>\n\t\t\t\t<Tabs orientation=\"horizontal\" defaultTabId=\"html\">\n\t\t\t\t\t<VStack expanded>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-header\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"html\">HTML</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"css\">CSS</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"js\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'JavaScript' ) }\n\t\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisFullscreen ? square : fullscreen\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t'Enable/disable fullscreen'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tonClick={ toggleFullscreen }\n\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ hasRestrictedContent && (\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\tstatus=\"warning\"\n\t\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-notice\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tdirection={ isMobileViewport ? 'column' : 'row' }\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tabs\"\n\t\t\t\t\t\t\talign=\"stretch\"\n\t\t\t\t\t\t\tgap={ 8 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"block-library-html__modal-content\">\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId=\"html\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\tvalue={ editedHtml }\n\t\t\t\t\t\t\t\t\t\tonChange={ handleHtmlChange }\n\t\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Write HTML\u2026' ) }\n\t\t\t\t\t\t\t\t\t\taria-label={ __( 'HTML' ) }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\t\ttabId=\"css\"\n\t\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\t\tvalue={ editedCss }\n\t\t\t\t\t\t\t\t\t\t\tonChange={ handleCssChange }\n\t\t\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Write CSS\u2026' ) }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __( 'CSS' ) }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\t\ttabId=\"js\"\n\t\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\t\tvalue={ editedJs }\n\t\t\t\t\t\t\t\t\t\t\tonChange={ handleJsChange }\n\t\t\t\t\t\t\t\t\t\t\tplaceholder={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Write JavaScript\u2026'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __( 'JavaScript' ) }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"block-library-html__preview\">\n\t\t\t\t\t\t\t\t<Preview\n\t\t\t\t\t\t\t\t\tcontent={ serializeContent( {\n\t\t\t\t\t\t\t\t\t\thtml: editedHtml,\n\t\t\t\t\t\t\t\t\t\tcss: editedCss,\n\t\t\t\t\t\t\t\t\t\tjs: editedJs,\n\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-footer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleCancel }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleUpdateAndClose }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Update' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Tabs>\n\t\t\t</Modal>\n\n\t\t\t{ showUnsavedWarning && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Unsaved changes' ) }\n\t\t\t\t\tonRequestClose={ handleContinueEditing }\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'You have unsaved changes. What would you like to do?'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\" gap={ 2 }>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tonClick={ handleDiscardChanges }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Discard unsaved changes' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tonClick={ handleContinueEditing }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Continue editing' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ handleUpdateAndClose }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Update and close' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Flex>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tModal,\n\tButton,\n\tFlex,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { PlainText, store as blockEditorStore } from '@wordpress/block-editor';\nimport { fullscreen, square } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\nimport Preview from './preview';\nimport { parseContent, serializeContent } from './utils';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nexport default function HTMLEditModal( {\n\tisOpen,\n\tonRequestClose,\n\tcontent,\n\tsetAttributes,\n} ) {\n\t// Parse content into separate sections and use as initial state\n\tconst { html, css, js } = parseContent( content );\n\tconst [ editedHtml, setEditedHtml ] = useState( html );\n\tconst [ editedCss, setEditedCss ] = useState( css );\n\tconst [ editedJs, setEditedJs ] = useState( js );\n\tconst [ isFullscreen, setIsFullscreen ] = useState( false );\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\n\t// Check if user has permission to save scripts and get editor styles\n\tconst { canUserUseUnfilteredHTML } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tcanUserUseUnfilteredHTML:\n\t\t\t\tsettings.__experimentalCanUserUseUnfilteredHTML,\n\t\t};\n\t}, [] );\n\n\t// Determine if we should show a warning about CSS/JS content being stripped\n\tconst hasRestrictedContent =\n\t\t! canUserUseUnfilteredHTML && ( css.trim() || js.trim() );\n\n\tif ( ! isOpen ) {\n\t\treturn null;\n\t}\n\n\tconst handleUpdate = () => {\n\t\t// For users without unfiltered_html capability, strip CSS and JS content\n\t\t// to prevent kses from leaving broken content\n\t\tsetAttributes( {\n\t\t\tcontent: serializeContent( {\n\t\t\t\thtml: editedHtml,\n\t\t\t\tcss: canUserUseUnfilteredHTML ? editedCss : '',\n\t\t\t\tjs: canUserUseUnfilteredHTML ? editedJs : '',\n\t\t\t} ),\n\t\t} );\n\t};\n\tconst handleUpdateAndClose = () => {\n\t\thandleUpdate();\n\t\tonRequestClose();\n\t};\n\tconst toggleFullscreen = () => {\n\t\tsetIsFullscreen( ( prevState ) => ! prevState );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Modal\n\t\t\t\ttitle={ __( 'Edit HTML' ) }\n\t\t\t\tonRequestClose={ onRequestClose }\n\t\t\t\tclassName=\"block-library-html__modal\"\n\t\t\t\tsize=\"large\"\n\t\t\t\tisDismissible={ false }\n\t\t\t\tshouldCloseOnClickOutside={ false }\n\t\t\t\tisFullScreen={ isFullscreen }\n\t\t\t\t__experimentalHideHeader\n\t\t\t>\n\t\t\t\t<Tabs orientation=\"horizontal\" defaultTabId=\"html\">\n\t\t\t\t\t<VStack expanded>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-header\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"html\">HTML</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"css\">CSS</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"js\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'JavaScript' ) }\n\t\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisFullscreen ? square : fullscreen\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t'Enable/disable fullscreen'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tonClick={ toggleFullscreen }\n\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ hasRestrictedContent && (\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\tstatus=\"warning\"\n\t\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-notice\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tdirection={ isMobileViewport ? 'column' : 'row' }\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tabs\"\n\t\t\t\t\t\t\talign=\"stretch\"\n\t\t\t\t\t\t\tgap={ 8 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"block-library-html__modal-content\">\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId=\"html\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\tvalue={ editedHtml }\n\t\t\t\t\t\t\t\t\t\tonChange={ setEditedHtml }\n\t\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Write HTML\u2026' ) }\n\t\t\t\t\t\t\t\t\t\taria-label={ __( 'HTML' ) }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\t\ttabId=\"css\"\n\t\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\t\tvalue={ editedCss }\n\t\t\t\t\t\t\t\t\t\t\tonChange={ setEditedCss }\n\t\t\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Write CSS\u2026' ) }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __( 'CSS' ) }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\t\ttabId=\"js\"\n\t\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\t\tvalue={ editedJs }\n\t\t\t\t\t\t\t\t\t\t\tonChange={ setEditedJs }\n\t\t\t\t\t\t\t\t\t\t\tplaceholder={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Write JavaScript\u2026'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __( 'JavaScript' ) }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"block-library-html__preview\">\n\t\t\t\t\t\t\t\t<Preview\n\t\t\t\t\t\t\t\t\tcontent={ serializeContent( {\n\t\t\t\t\t\t\t\t\t\thtml: editedHtml,\n\t\t\t\t\t\t\t\t\t\tcss: editedCss,\n\t\t\t\t\t\t\t\t\t\tjs: editedJs,\n\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-footer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleUpdateAndClose }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Update' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Tabs>\n\t\t\t</Modal>\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["componentsPrivateApis", "blockEditorStore", "VStack", "HStack", "Preview"]
 }

package/build/image/edit.cjs

@@ -124,6 +124,7 @@ function ImageEdit({
   const { createErrorNotice } = (0, import_data.useDispatch)(import_notices.store);
   function onUploadError(message) {
     createErrorNotice(message, { type: "snackbar" });
+    setTemporaryURL();
     setAttributes({
       src: void 0,
       id: void 0,
@@ -131,6 +132,11 @@ function ImageEdit({
       blob: void 0
     });
   }
+  function onFilesPreUpload(files) {
+    if (files.length === 1) {
+      setTemporaryURL((0, import_blob.createBlobURL)(files[0]));
+    }
+  }
   function onSelectImagesList(images) {
     const win = containerRef.current?.ownerDocument.defaultView;
     if (images.every((file) => file instanceof win.File)) {
@@ -373,6 +379,7 @@ function ImageEdit({
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockIcon, { icon: import_icons.image }),
           onSelect: onSelectImage,
           onSelectURL,
+          onFilesPreUpload,
           onError: onUploadError,
           placeholder,
           allowedTypes: import_constants.ALLOWED_MEDIA_TYPES,