@wordpress/block-library 9.40.2-next.v.202602241322.0 → 9.40.2

package/build/html/modal.cjs

@@ -39,6 +39,7 @@ var import_data = require("@wordpress/data");
 var import_components = require("@wordpress/components");
 var import_block_editor = require("@wordpress/block-editor");
 var import_icons = require("@wordpress/icons");
+var import_compose = require("@wordpress/compose");
 var import_lock_unlock = require("../lock-unlock.cjs");
 var import_preview = __toESM(require("./preview.cjs"));
 var import_utils = require("./utils.cjs");
@@ -54,9 +55,8 @@ 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) => {
     const settings = select(import_block_editor.store).getSettings();
     return {
@@ -67,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)({
@@ -87,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();
@@ -114,217 +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.__experimentalGrid,
+  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,
           {
-            columns: 1,
-            templateRows: "auto 1fr auto",
-            gap: 4,
-            style: { height: "100%" },
+            justify: "space-between",
+            className: "block-library-html__modal-header",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                import_components.__experimentalHStack,
+              /* @__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,
                 {
-                  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") })
-                    ] }) }),
-                    /* @__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"
-                      }
-                    ) })
-                  ]
+                  __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.__experimentalHStack,
-                {
-                  alignment: "stretch",
-                  justify: "flex-start",
-                  spacing: 4,
-                  className: "block-library-html__modal-tabs",
-                  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"
-                            }
-                          )
-                        }
-                      ),
-                      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,
+              ) })
+            ]
+          }
+        ),
+        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,
                       {
-                        content: (0, import_utils.serializeContent)({
-                          html: editedHtml,
-                          css: editedCss,
-                          js: editedJs
-                        })
+                        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,
+                  {
+                    tabId: "css",
+                    focusable: false,
+                    className: "block-library-html__modal-tab",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_block_editor.PlainText,
                       {
-                        __next40pxDefaultSize: true,
-                        variant: "tertiary",
-                        onClick: handleCancel,
-                        children: (0, import_i18n.__)("Cancel")
+                        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,
+                  {
+                    tabId: "js",
+                    focusable: false,
+                    className: "block-library-html__modal-tab",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_block_editor.PlainText,
                       {
-                        __next40pxDefaultSize: true,
-                        variant: "primary",
-                        onClick: handleUpdateAndClose,
-                        children: (0, import_i18n.__)("Update")
+                        value: editedJs,
+                        onChange: setEditedJs,
+                        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,
+                {
+                  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")
                 }
               )
             ]
           }
-        ) })
-      }
-    ),
-    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")
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
+        )
+      ] }) })
+    }
+  ) });
 }
 //# 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__experimentalHStack as HStack,\n\t__experimentalGrid as Grid,\n} from '@wordpress/components';\nimport { PlainText, store as blockEditorStore } from '@wordpress/block-editor';\nimport { fullscreen, square } from '@wordpress/icons';\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\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<Grid\n\t\t\t\t\t\tcolumns={ 1 }\n\t\t\t\t\t\ttemplateRows=\"auto 1fr auto\"\n\t\t\t\t\t\tgap={ 4 }\n\t\t\t\t\t\tstyle={ { height: '100%' } }\n\t\t\t\t\t>\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<div>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\ticon={ isFullscreen ? square : fullscreen }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Enable/disable fullscreen' ) }\n\t\t\t\t\t\t\t\t\tonClick={ toggleFullscreen }\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\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</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<HStack\n\t\t\t\t\t\t\talignment=\"stretch\"\n\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tabs\"\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</HStack>\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</Grid>\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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",
-  "names": ["componentsPrivateApis", "blockEditorStore", "Grid", "HStack", "Preview"]
+  "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/icon/block.json

@@ -59,19 +59,10 @@
 		}
 	},
 	"selectors": {
-		"root": ".wp-block-icon",
-		"color": {
-			"root": ".wp-block-icon svg"
-		},
-		"border": {
-			"root": ".wp-block-icon svg"
-		},
+		"root": ".wp-block-icon svg",
+		"css": ".wp-block-icon",
 		"spacing": {
-			"padding": ".wp-block-icon svg"
-		},
-		"dimensions": {
-			"root": ".wp-block-icon svg",
-			"width": ".wp-block-icon svg"
+			"margin": ".wp-block-icon"
 		}
 	},
 	"style": "wp-block-icon",

package/build/image/image.cjs

@@ -986,7 +986,7 @@ function Image({
       type: "snackbar"
     });
   };
-  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") }) });
+  const featuredImageControl = !isDescendentOfQueryLoop && postId && id ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockSettingsMenuControls, { children: ({ canEdit, selectedClientIds }) => canEdit && selectedClientIds.length === 1 && clientId === selectedClientIds[0] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuItem, { onClick: setPostFeatureImage, children: (0, import_i18n.__)("Set as featured image") }) }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     editMediaButton,
     mediaReplaceFlow,