@wordpress/block-library 9.34.1-next.2f1c7c01b.0 → 9.35.0

package/build/heading/variations.js

@@ -0,0 +1,55 @@
+"use strict";
+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);
+
+// packages/block-library/src/heading/variations.js
+var variations_exports = {};
+__export(variations_exports, {
+  default: () => variations_default
+});
+module.exports = __toCommonJS(variations_exports);
+var import_i18n = require("@wordpress/i18n");
+var import_primitives = require("@wordpress/primitives");
+var import_icons = require("@wordpress/icons");
+var import_jsx_runtime = require("react/jsx-runtime");
+var variations = [
+  {
+    name: "heading",
+    title: (0, import_i18n.__)("Heading"),
+    description: (0, import_i18n.__)(
+      "Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content."
+    ),
+    isDefault: true,
+    scope: ["inserter", "transform"],
+    attributes: { fitText: void 0 },
+    icon: import_icons.heading
+  },
+  // There is a hardcoded workaround in packages/block-editor/src/store/selectors.js
+  // to make Stretchy variations appear as the last of their sections in the inserter.
+  {
+    name: "stretchy-heading",
+    title: (0, import_i18n.__)("Stretchy Heading"),
+    description: (0, import_i18n.__)("Heading that resizes to fit its container."),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.Path, { d: "m3 18.6 6-4.7 6 4.7V5H3v13.6Zm16.2-9.8v1.5h2.2L17.7 14l1.1 1.1 3.7-3.7v2.2H24V8.8h-4.8Z" }) }),
+    attributes: { fitText: true },
+    scope: ["inserter", "transform"],
+    isActive: (blockAttributes) => blockAttributes.fitText === true
+  }
+];
+var variations_default = variations;
+//# sourceMappingURL=variations.js.map

package/build/heading/variations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/heading/variations.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Path, SVG } from '@wordpress/primitives';\nimport { heading } from '@wordpress/icons';\n\nconst variations = [\n\t{\n\t\tname: 'heading',\n\t\ttitle: __( 'Heading' ),\n\t\tdescription: __(\n\t\t\t'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.'\n\t\t),\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tattributes: { fitText: undefined },\n\t\ticon: heading,\n\t},\n\t// There is a hardcoded workaround in packages/block-editor/src/store/selectors.js\n\t// to make Stretchy variations appear as the last of their sections in the inserter.\n\t{\n\t\tname: 'stretchy-heading',\n\t\ttitle: __( 'Stretchy Heading' ),\n\t\tdescription: __( 'Heading that resizes to fit its container.' ),\n\t\ticon: (\n\t\t\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t\t\t<Path d=\"m3 18.6 6-4.7 6 4.7V5H3v13.6Zm16.2-9.8v1.5h2.2L17.7 14l1.1 1.1 3.7-3.7v2.2H24V8.8h-4.8Z\" />\n\t\t\t</SVG>\n\t\t),\n\t\tattributes: { fitText: true },\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes.fitText === true,\n\t},\n];\n\nexport default variations;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAA0B;AAC1B,mBAAwB;AAsBpB;AApBJ,IAAM,aAAa;AAAA,EAClB;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,SAAU;AAAA,IACrB,iBAAa;AAAA,MACZ;AAAA,IACD;AAAA,IACA,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,YAAY,EAAE,SAAS,OAAU;AAAA,IACjC,MAAM;AAAA,EACP;AAAA;AAAA;AAAA,EAGA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,kBAAmB;AAAA,IAC9B,iBAAa,gBAAI,4CAA6C;AAAA,IAC9D,MACC,4CAAC,yBAAI,OAAM,8BAA6B,SAAQ,aAC/C,sDAAC,0BAAK,GAAE,2FAA0F,GACnG;AAAA,IAED,YAAY,EAAE,SAAS,KAAK;AAAA,IAC5B,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,gBAAgB,YAAY;AAAA,EAC9D;AACD;AAEA,IAAO,qBAAQ;",
+  "names": []
+}

package/build/html/edit.js

@@ -37,64 +37,74 @@ var import_i18n = require("@wordpress/i18n");
 var import_element = require("@wordpress/element");
 var import_block_editor = require("@wordpress/block-editor");
 var import_components = require("@wordpress/components");
-var import_data = require("@wordpress/data");
-var import_compose = require("@wordpress/compose");
+var import_icons = require("@wordpress/icons");
 var import_preview = __toESM(require("./preview"));
+var import_modal = __toESM(require("./modal"));
 var import_jsx_runtime = require("react/jsx-runtime");
 function HTMLEdit({ attributes, setAttributes, isSelected }) {
-  const [isPreview, setIsPreview] = (0, import_element.useState)();
-  const isDisabled = (0, import_element.useContext)(import_components.Disabled.Context);
-  const instanceId = (0, import_compose.useInstanceId)(HTMLEdit, "html-edit-desc");
-  const isPreviewMode = (0, import_data.useSelect)((select) => {
-    return select(import_block_editor.store).getSettings().isPreviewMode;
-  }, []);
-  function switchToPreview() {
-    setIsPreview(true);
-  }
-  function switchToHTML() {
-    setIsPreview(false);
-  }
+  const [isModalOpen, setIsModalOpen] = (0, import_element.useState)(false);
   const blockProps = (0, import_block_editor.useBlockProps)({
-    className: "block-library-html__edit",
-    "aria-describedby": isPreview ? instanceId : void 0
+    className: "block-library-html__edit"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...blockProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.ToolbarGroup, { children: [
+  if (!attributes.content?.trim()) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...blockProps, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.ToolbarButton,
+        import_components.Placeholder,
         {
-          isPressed: !isPreview,
-          onClick: switchToHTML,
-          children: "HTML"
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockIcon, { icon: import_icons.code }),
+          label: (0, import_i18n.__)("Custom HTML"),
+          instructions: (0, import_i18n.__)(
+            "Add custom HTML code and preview how it looks."
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              __next40pxDefaultSize: true,
+              variant: "primary",
+              onClick: () => setIsModalOpen(true),
+              children: (0, import_i18n.__)("Edit HTML")
+            }
+          )
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.ToolbarButton,
-        {
-          isPressed: isPreview,
-          onClick: switchToPreview,
-          children: (0, import_i18n.__)("Preview")
-        }
-      )
-    ] }) }),
-    isPreview || isPreviewMode || isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_preview.default,
+        import_modal.default,
         {
+          isOpen: isModalOpen,
+          onRequestClose: () => setIsModalOpen(false),
           content: attributes.content,
-          isSelected
+          setAttributes
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { id: instanceId, children: (0, import_i18n.__)(
-        "HTML preview is not yet fully accessible. Please switch screen reader to virtualized mode to navigate the below iFrame."
-      ) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_block_editor.PlainText,
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...blockProps, children: [
+    /* @__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: () => setIsModalOpen(true), children: (0, import_i18n.__)("Edit code") }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalVStack,
+      {
+        className: "block-editor-block-inspector-edit-contents",
+        expanded: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            className: "block-editor-block-inspector-edit-contents__button",
+            __next40pxDefaultSize: true,
+            variant: "secondary",
+            onClick: () => setIsModalOpen(true),
+            children: (0, import_i18n.__)("Edit code")
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_preview.default, { content: attributes.content, isSelected }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_modal.default,
       {
-        value: attributes.content,
-        onChange: (content) => setAttributes({ content }),
-        placeholder: (0, import_i18n.__)("Write HTML\u2026"),
-        "aria-label": (0, import_i18n.__)("HTML")
+        isOpen: isModalOpen,
+        onRequestClose: () => setIsModalOpen(false),
+        content: attributes.content,
+        setAttributes
       }
     )
   ] });

package/build/html/edit.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/html/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useState } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tPlainText,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport {\n\tToolbarButton,\n\tDisabled,\n\tToolbarGroup,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Preview from './preview';\n\nexport default function HTMLEdit( { attributes, setAttributes, isSelected } ) {\n\tconst [ isPreview, setIsPreview ] = useState();\n\tconst isDisabled = useContext( Disabled.Context );\n\n\tconst instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );\n\n\tconst isPreviewMode = useSelect( ( select ) => {\n\t\treturn select( blockEditorStore ).getSettings().isPreviewMode;\n\t}, [] );\n\n\tfunction switchToPreview() {\n\t\tsetIsPreview( true );\n\t}\n\n\tfunction switchToHTML() {\n\t\tsetIsPreview( false );\n\t}\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: 'block-library-html__edit',\n\t\t'aria-describedby': isPreview ? instanceId : undefined,\n\t} );\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tisPressed={ ! isPreview }\n\t\t\t\t\t\tonClick={ switchToHTML }\n\t\t\t\t\t>\n\t\t\t\t\t\tHTML\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tisPressed={ isPreview }\n\t\t\t\t\t\tonClick={ switchToPreview }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Preview' ) }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t\t{ isPreview || isPreviewMode || isDisabled ? (\n\t\t\t\t<>\n\t\t\t\t\t<Preview\n\t\t\t\t\t\tcontent={ attributes.content }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t/>\n\t\t\t\t\t<VisuallyHidden id={ instanceId }>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'HTML preview is not yet fully accessible. Please switch screen reader to virtualized mode to navigate the below iFrame.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<PlainText\n\t\t\t\t\tvalue={ attributes.content }\n\t\t\t\t\tonChange={ ( content ) => setAttributes( { content } ) }\n\t\t\t\t\tplaceholder={ __( 'Write HTML\u2026' ) }\n\t\t\t\t\taria-label={ __( 'HTML' ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAqC;AACrC,0BAKO;AACP,wBAKO;AACP,kBAA0B;AAC1B,qBAA8B;AAK9B,qBAAoB;AA4BhB;AA1BW,SAAR,SAA2B,EAAE,YAAY,eAAe,WAAW,GAAI;AAC7E,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAS;AAC7C,QAAM,iBAAa,2BAAY,2BAAS,OAAQ;AAEhD,QAAM,iBAAa,8BAAe,UAAU,gBAAiB;AAE7D,QAAM,oBAAgB,uBAAW,CAAE,WAAY;AAC9C,WAAO,OAAQ,oBAAAA,KAAiB,EAAE,YAAY,EAAE;AAAA,EACjD,GAAG,CAAC,CAAE;AAEN,WAAS,kBAAkB;AAC1B,iBAAc,IAAK;AAAA,EACpB;AAEA,WAAS,eAAe;AACvB,iBAAc,KAAM;AAAA,EACrB;AAEA,QAAM,iBAAa,mCAAe;AAAA,IACjC,WAAW;AAAA,IACX,oBAAoB,YAAY,aAAa;AAAA,EAC9C,CAAE;AAEF,SACC,6CAAC,SAAM,GAAG,YACT;AAAA,gDAAC,qCACA,uDAAC,kCACA;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,CAAE;AAAA,UACd,SAAU;AAAA,UACV;AAAA;AAAA,MAED;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,WAAY;AAAA,UACZ,SAAU;AAAA,UAER,8BAAI,SAAU;AAAA;AAAA,MACjB;AAAA,OACD,GACD;AAAA,IACE,aAAa,iBAAiB,aAC/B,4EACC;AAAA;AAAA,QAAC,eAAAC;AAAA,QAAA;AAAA,UACA,SAAU,WAAW;AAAA,UACrB;AAAA;AAAA,MACD;AAAA,MACA,4CAAC,oCAAe,IAAK,YAClB;AAAA,QACD;AAAA,MACD,GACD;AAAA,OACD,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,WAAW;AAAA,QACnB,UAAW,CAAE,YAAa,cAAe,EAAE,QAAQ,CAAE;AAAA,QACrD,iBAAc,gBAAI,kBAAc;AAAA,QAChC,kBAAa,gBAAI,MAAO;AAAA;AAAA,IACzB;AAAA,KAEF;AAEF;",
-  "names": ["blockEditorStore", "Preview"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tInspectorControls,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\nimport {\n\tToolbarButton,\n\tToolbarGroup,\n\tPlaceholder,\n\tButton,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { code } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Preview from './preview';\nimport HTMLEditModal from './modal';\n\nexport default function HTMLEdit( { attributes, setAttributes, isSelected } ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst blockProps = useBlockProps( {\n\t\tclassName: 'block-library-html__edit',\n\t} );\n\n\t// Show placeholder when content is empty\n\tif ( ! attributes.content?.trim() ) {\n\t\treturn (\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<Placeholder\n\t\t\t\t\ticon={ <BlockIcon icon={ code } /> }\n\t\t\t\t\tlabel={ __( 'Custom HTML' ) }\n\t\t\t\t\tinstructions={ __(\n\t\t\t\t\t\t'Add custom HTML code and preview how it looks.'\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Edit HTML' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</Placeholder>\n\t\t\t\t<HTMLEditModal\n\t\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\t\tonRequestClose={ () => setIsModalOpen( false ) }\n\t\t\t\t\tcontent={ attributes.content }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ToolbarButton onClick={ () => setIsModalOpen( true ) }>\n\t\t\t\t\t\t{ __( 'Edit code' ) }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls>\n\t\t\t\t<VStack\n\t\t\t\t\tclassName=\"block-editor-block-inspector-edit-contents\"\n\t\t\t\t\texpanded\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"block-editor-block-inspector-edit-contents__button\"\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Edit code' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</VStack>\n\t\t\t</InspectorControls>\n\t\t\t<Preview content={ attributes.content } isSelected={ isSelected } />\n\t\t\t<HTMLEditModal\n\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\tonRequestClose={ () => setIsModalOpen( false ) }\n\t\t\t\tcontent={ attributes.content }\n\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAyB;AACzB,0BAKO;AACP,wBAMO;AACP,mBAAqB;AAKrB,qBAAoB;AACpB,mBAA0B;AAWvB;AATY,SAAR,SAA2B,EAAE,YAAY,eAAe,WAAW,GAAI;AAC7E,QAAM,CAAE,aAAa,cAAe,QAAI,yBAAU,KAAM;AACxD,QAAM,iBAAa,mCAAe;AAAA,IACjC,WAAW;AAAA,EACZ,CAAE;AAGF,MAAK,CAAE,WAAW,SAAS,KAAK,GAAI;AACnC,WACC,6CAAC,SAAM,GAAG,YACT;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,MAAO,4CAAC,iCAAU,MAAO,mBAAO;AAAA,UAChC,WAAQ,gBAAI,aAAc;AAAA,UAC1B,kBAAe;AAAA,YACd;AAAA,UACD;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAQ;AAAA,cACR,SAAU,MAAM,eAAgB,IAAK;AAAA,cAEnC,8BAAI,WAAY;AAAA;AAAA,UACnB;AAAA;AAAA,MACD;AAAA,MACA;AAAA,QAAC,aAAAA;AAAA,QAAA;AAAA,UACA,QAAS;AAAA,UACT,gBAAiB,MAAM,eAAgB,KAAM;AAAA,UAC7C,SAAU,WAAW;AAAA,UACrB;AAAA;AAAA,MACD;AAAA,OACD;AAAA,EAEF;AAEA,SACC,6CAAC,SAAM,GAAG,YACT;AAAA,gDAAC,qCACA,sDAAC,kCACA,sDAAC,mCAAc,SAAU,MAAM,eAAgB,IAAK,GACjD,8BAAI,WAAY,GACnB,GACD,GACD;AAAA,IACA,4CAAC,yCACA;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,UAAQ;AAAA,QAER;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,uBAAqB;AAAA,YACrB,SAAQ;AAAA,YACR,SAAU,MAAM,eAAgB,IAAK;AAAA,YAEnC,8BAAI,WAAY;AAAA;AAAA,QACnB;AAAA;AAAA,IACD,GACD;AAAA,IACA,4CAAC,eAAAC,SAAA,EAAQ,SAAU,WAAW,SAAU,YAA0B;AAAA,IAClE;AAAA,MAAC,aAAAF;AAAA,MAAA;AAAA,QACA,QAAS;AAAA,QACT,gBAAiB,MAAM,eAAgB,KAAM;AAAA,QAC7C,SAAU,WAAW;AAAA,QACrB;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "names": ["HTMLEditModal", "VStack", "Preview"]
 }

package/build/html/modal.js

@@ -0,0 +1,328 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-library/src/html/modal.js
+var modal_exports = {};
+__export(modal_exports, {
+  default: () => HTMLEditModal
+});
+module.exports = __toCommonJS(modal_exports);
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+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_lock_unlock = require("../lock-unlock");
+var import_preview = __toESM(require("./preview"));
+var import_utils = require("./utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+function HTMLEditModal({
+  isOpen,
+  onRequestClose,
+  content,
+  setAttributes
+}) {
+  const { html, css, js } = (0, import_utils.parseContent)(content);
+  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 { canUserUseUnfilteredHTML, editorStyles } = (0, import_data.useSelect)(
+    (select) => {
+      const settings = select(import_block_editor.store).getSettings();
+      return {
+        canUserUseUnfilteredHTML: settings.__experimentalCanUserUseUnfilteredHTML,
+        editorStyles: settings.styles
+      };
+    },
+    []
+  );
+  const shouldShowJsTab = canUserUseUnfilteredHTML || js.trim() !== "";
+  const styleContent = (0, import_element.useMemo)(() => {
+    if (!editorStyles) {
+      return "";
+    }
+    return editorStyles.filter((style) => style.css).map((style) => style.css).join("\n");
+  }, [editorStyles]);
+  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)({
+        html: editedHtml,
+        css: editedCss,
+        js: 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();
+    onRequestClose();
+  };
+  const toggleFullscreen = () => {
+    setIsFullscreen((prevState) => !prevState);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      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: [
+          styleContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "style",
+            {
+              dangerouslySetInnerHTML: { __html: styleContent }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs, { orientation: "horizontal", defaultTabId: "html", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, style: { height: "100%" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", 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" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "css", children: "CSS" }),
+                shouldShowJsTab && /* @__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"
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_components.__experimentalHStack,
+              {
+                alignment: "stretch",
+                justify: "flex-start",
+                spacing: 4,
+                className: "block-library-html__modal-tabs",
+                style: { flexGrow: 1 },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flexGrow: 1 }, 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"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__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"
+                          }
+                        )
+                      }
+                    ),
+                    shouldShowJsTab && /* @__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",
+                      style: { width: "50%" },
+                      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,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_components.Button,
+                    {
+                      __next40pxDefaultSize: true,
+                      variant: "tertiary",
+                      onClick: handleCancel,
+                      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.js.map

package/build/html/modal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/html/modal.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tModal,\n\tButton,\n\tFlex,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\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, editorStyles } = useSelect(\n\t\t( select ) => {\n\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\treturn {\n\t\t\t\tcanUserUseUnfilteredHTML:\n\t\t\t\t\tsettings.__experimentalCanUserUseUnfilteredHTML,\n\t\t\t\teditorStyles: settings.styles,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\t// Show JS tab if user has permission OR if block contains JavaScript\n\tconst shouldShowJsTab = canUserUseUnfilteredHTML || js.trim() !== '';\n\n\t// Combine all editor styles to inject into modal\n\tconst styleContent = useMemo( () => {\n\t\tif ( ! editorStyles ) {\n\t\t\treturn '';\n\t\t}\n\t\treturn editorStyles\n\t\t\t.filter( ( style ) => style.css )\n\t\t\t.map( ( style ) => style.css )\n\t\t\t.join( '\\n' );\n\t}, [ editorStyles ] );\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\tsetAttributes( {\n\t\t\tcontent: serializeContent( {\n\t\t\t\thtml: editedHtml,\n\t\t\t\tcss: editedCss,\n\t\t\t\tjs: 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{ styleContent && (\n\t\t\t\t\t<style\n\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: styleContent } }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<Tabs orientation=\"horizontal\" defaultTabId=\"html\">\n\t\t\t\t\t<VStack spacing={ 4 } style={ { height: '100%' } }>\n\t\t\t\t\t\t<HStack justify=\"space-between\">\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<Tabs.Tab tabId=\"css\">CSS</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t{ shouldShowJsTab && (\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<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\tstyle={ { flexGrow: 1 } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div style={ { flexGrow: 1 } }>\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<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId=\"css\"\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={ editedCss }\n\t\t\t\t\t\t\t\t\t\tonChange={ handleCssChange }\n\t\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Write CSS\u2026' ) }\n\t\t\t\t\t\t\t\t\t\taria-label={ __( 'CSS' ) }\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{ shouldShowJsTab && (\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\n\t\t\t\t\t\t\t\tclassName=\"block-library-html__preview\"\n\t\t\t\t\t\t\t\tstyle={ { width: '50%' } }\n\t\t\t\t\t\t\t>\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>\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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",
+  "names": ["componentsPrivateApis", "blockEditorStore", "VStack", "HStack", "Preview"]
+}