@wordpress/block-library 9.34.1-next.2f1c7c01b.0 → 9.35.1-next.16d95556a.0

package/build-module/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": ";AAGA,SAAS,UAAU;AACnB,SAAS,YAAY,gBAAgB;AACrC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAK9B,OAAO,aAAa;AA4BhB,SAgBA,UAfC,KADD;AA1BW,SAAR,SAA2B,EAAE,YAAY,eAAe,WAAW,GAAI;AAC7E,QAAM,CAAE,WAAW,YAAa,IAAI,SAAS;AAC7C,QAAM,aAAa,WAAY,SAAS,OAAQ;AAEhD,QAAM,aAAa,cAAe,UAAU,gBAAiB;AAE7D,QAAM,gBAAgB,UAAW,CAAE,WAAY;AAC9C,WAAO,OAAQ,gBAAiB,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,aAAa,cAAe;AAAA,IACjC,WAAW;AAAA,IACX,oBAAoB,YAAY,aAAa;AAAA,EAC9C,CAAE;AAEF,SACC,qBAAC,SAAM,GAAG,YACT;AAAA,wBAAC,iBACA,+BAAC,gBACA;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,aAAI,SAAU;AAAA;AAAA,MACjB;AAAA,OACD,GACD;AAAA,IACE,aAAa,iBAAiB,aAC/B,iCACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,SAAU,WAAW;AAAA,UACrB;AAAA;AAAA,MACD;AAAA,MACA,oBAAC,kBAAe,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,aAAc,GAAI,kBAAc;AAAA,QAChC,cAAa,GAAI,MAAO;AAAA;AAAA,IACzB;AAAA,KAEF;AAEF;",
+  "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": ";AAGA,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,OAClB;AACP,SAAS,YAAY;AAKrB,OAAO,aAAa;AACpB,OAAO,mBAAmB;AAWvB,SAES,KAFT;AATY,SAAR,SAA2B,EAAE,YAAY,eAAe,WAAW,GAAI;AAC7E,QAAM,CAAE,aAAa,cAAe,IAAI,SAAU,KAAM;AACxD,QAAM,aAAa,cAAe;AAAA,IACjC,WAAW;AAAA,EACZ,CAAE;AAGF,MAAK,CAAE,WAAW,SAAS,KAAK,GAAI;AACnC,WACC,qBAAC,SAAM,GAAG,YACT;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,MAAO,oBAAC,aAAU,MAAO,MAAO;AAAA,UAChC,OAAQ,GAAI,aAAc;AAAA,UAC1B,cAAe;AAAA,YACd;AAAA,UACD;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAQ;AAAA,cACR,SAAU,MAAM,eAAgB,IAAK;AAAA,cAEnC,aAAI,WAAY;AAAA;AAAA,UACnB;AAAA;AAAA,MACD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,QAAS;AAAA,UACT,gBAAiB,MAAM,eAAgB,KAAM;AAAA,UAC7C,SAAU,WAAW;AAAA,UACrB;AAAA;AAAA,MACD;AAAA,OACD;AAAA,EAEF;AAEA,SACC,qBAAC,SAAM,GAAG,YACT;AAAA,wBAAC,iBACA,8BAAC,gBACA,8BAAC,iBAAc,SAAU,MAAM,eAAgB,IAAK,GACjD,aAAI,WAAY,GACnB,GACD,GACD;AAAA,IACA,oBAAC,qBACA;AAAA,MAAC;AAAA;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,aAAI,WAAY;AAAA;AAAA,QACnB;AAAA;AAAA,IACD,GACD;AAAA,IACA,oBAAC,WAAQ,SAAU,WAAW,SAAU,YAA0B;AAAA,IAClE;AAAA,MAAC;AAAA;AAAA,QACA,QAAS;AAAA,QACT,gBAAiB,MAAM,eAAgB,KAAM;AAAA,QAC7C,SAAU,WAAW;AAAA,QACrB;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
   "names": []
 }

package/build-module/html/modal.js

@@ -0,0 +1,304 @@
+// packages/block-library/src/html/modal.js
+import { __ } from "@wordpress/i18n";
+import { useState, useMemo } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+import {
+  Modal,
+  Button,
+  Flex,
+  privateApis as componentsPrivateApis,
+  __experimentalHStack as HStack,
+  __experimentalVStack as VStack
+} from "@wordpress/components";
+import { PlainText, store as blockEditorStore } from "@wordpress/block-editor";
+import { fullscreen, square } from "@wordpress/icons";
+import { unlock } from "../lock-unlock";
+import Preview from "./preview";
+import { parseContent, serializeContent } from "./utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var { Tabs } = unlock(componentsPrivateApis);
+function HTMLEditModal({
+  isOpen,
+  onRequestClose,
+  content,
+  setAttributes
+}) {
+  const { html, css, js } = parseContent(content);
+  const [editedHtml, setEditedHtml] = useState(html);
+  const [editedCss, setEditedCss] = useState(css);
+  const [editedJs, setEditedJs] = useState(js);
+  const [isDirty, setIsDirty] = useState(false);
+  const [showUnsavedWarning, setShowUnsavedWarning] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const { canUserUseUnfilteredHTML, editorStyles } = useSelect(
+    (select) => {
+      const settings = select(blockEditorStore).getSettings();
+      return {
+        canUserUseUnfilteredHTML: settings.__experimentalCanUserUseUnfilteredHTML,
+        editorStyles: settings.styles
+      };
+    },
+    []
+  );
+  const shouldShowJsTab = canUserUseUnfilteredHTML || js.trim() !== "";
+  const styleContent = 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: 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        title: __("Edit HTML"),
+        onRequestClose: handleRequestClose,
+        className: "block-library-html__modal",
+        size: "large",
+        isDismissible: false,
+        shouldCloseOnClickOutside: !isDirty,
+        shouldCloseOnEsc: !isDirty,
+        isFullScreen: isFullscreen,
+        __experimentalHideHeader: true,
+        children: [
+          styleContent && /* @__PURE__ */ jsx(
+            "style",
+            {
+              dangerouslySetInnerHTML: { __html: styleContent }
+            }
+          ),
+          /* @__PURE__ */ jsx(Tabs, { orientation: "horizontal", defaultTabId: "html", children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, style: { height: "100%" }, children: [
+            /* @__PURE__ */ jsxs(HStack, { justify: "space-between", children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Tabs.TabList, { children: [
+                /* @__PURE__ */ jsx(Tabs.Tab, { tabId: "html", children: "HTML" }),
+                /* @__PURE__ */ jsx(Tabs.Tab, { tabId: "css", children: "CSS" }),
+                shouldShowJsTab && /* @__PURE__ */ jsx(Tabs.Tab, { tabId: "js", children: __("JavaScript") })
+              ] }) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  __next40pxDefaultSize: true,
+                  icon: isFullscreen ? square : fullscreen,
+                  label: __("Enable/disable fullscreen"),
+                  onClick: toggleFullscreen,
+                  variant: "tertiary"
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              HStack,
+              {
+                alignment: "stretch",
+                justify: "flex-start",
+                spacing: 4,
+                className: "block-library-html__modal-tabs",
+                style: { flexGrow: 1 },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { style: { flexGrow: 1 }, children: [
+                    /* @__PURE__ */ jsx(
+                      Tabs.TabPanel,
+                      {
+                        tabId: "html",
+                        focusable: false,
+                        className: "block-library-html__modal-tab",
+                        children: /* @__PURE__ */ jsx(
+                          PlainText,
+                          {
+                            value: editedHtml,
+                            onChange: handleHtmlChange,
+                            placeholder: __("Write HTML\u2026"),
+                            "aria-label": __("HTML"),
+                            className: "block-library-html__modal-editor"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Tabs.TabPanel,
+                      {
+                        tabId: "css",
+                        focusable: false,
+                        className: "block-library-html__modal-tab",
+                        children: /* @__PURE__ */ jsx(
+                          PlainText,
+                          {
+                            value: editedCss,
+                            onChange: handleCssChange,
+                            placeholder: __("Write CSS\u2026"),
+                            "aria-label": __("CSS"),
+                            className: "block-library-html__modal-editor"
+                          }
+                        )
+                      }
+                    ),
+                    shouldShowJsTab && /* @__PURE__ */ jsx(
+                      Tabs.TabPanel,
+                      {
+                        tabId: "js",
+                        focusable: false,
+                        className: "block-library-html__modal-tab",
+                        children: /* @__PURE__ */ jsx(
+                          PlainText,
+                          {
+                            value: editedJs,
+                            onChange: handleJsChange,
+                            placeholder: __(
+                              "Write JavaScript\u2026"
+                            ),
+                            "aria-label": __("JavaScript"),
+                            className: "block-library-html__modal-editor"
+                          }
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "block-library-html__preview",
+                      style: { width: "50%" },
+                      children: /* @__PURE__ */ jsx(
+                        Preview,
+                        {
+                          content: serializeContent({
+                            html: editedHtml,
+                            css: editedCss,
+                            js: editedJs
+                          })
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              HStack,
+              {
+                alignment: "center",
+                justify: "flex-end",
+                spacing: 4,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      __next40pxDefaultSize: true,
+                      variant: "tertiary",
+                      onClick: handleCancel,
+                      children: __("Cancel")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      __next40pxDefaultSize: true,
+                      variant: "primary",
+                      onClick: handleUpdateAndClose,
+                      children: __("Update")
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) })
+        ]
+      }
+    ),
+    showUnsavedWarning && /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        title: __("Unsaved changes"),
+        onRequestClose: handleContinueEditing,
+        size: "medium",
+        children: [
+          /* @__PURE__ */ jsx("p", { children: __(
+            "You have unsaved changes. What would you like to do?"
+          ) }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "flex-end", gap: 2, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                __next40pxDefaultSize: true,
+                variant: "secondary",
+                onClick: handleDiscardChanges,
+                children: __("Discard unsaved changes")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                __next40pxDefaultSize: true,
+                variant: "secondary",
+                onClick: handleContinueEditing,
+                children: __("Continue editing")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                __next40pxDefaultSize: true,
+                variant: "primary",
+                onClick: handleUpdateAndClose,
+                children: __("Update and close")
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  HTMLEditModal as default
+};
+//# sourceMappingURL=modal.js.map

package/build-module/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": []
+}

package/build-module/html/utils.js

@@ -0,0 +1,46 @@
+// packages/block-library/src/html/utils.js
+function parseContent(content = "") {
+  if (!content || !content.trim()) {
+    return { html: "", css: "", js: "" };
+  }
+  const doc = document.implementation.createHTMLDocument("");
+  doc.body.innerHTML = content;
+  const styleTag = doc.body.querySelector(
+    'style[data-wp-block-html="css"]'
+  );
+  const css = styleTag ? styleTag.textContent.trim() : "";
+  if (styleTag) {
+    styleTag.remove();
+  }
+  const scriptTag = doc.body.querySelector(
+    'script[data-wp-block-html="js"]'
+  );
+  const js = scriptTag ? scriptTag.textContent.trim() : "";
+  if (scriptTag) {
+    scriptTag.remove();
+  }
+  const html = doc.body.innerHTML.trim();
+  return { html, css, js };
+}
+function serializeContent({ html = "", css = "", js = "" }) {
+  const parts = [];
+  if (css.trim()) {
+    parts.push(`<style data-wp-block-html="css">
+${css}
+</style>`);
+  }
+  if (js.trim()) {
+    parts.push(`<script data-wp-block-html="js">
+${js}
+</script>`);
+  }
+  if (html.trim()) {
+    parts.push(html);
+  }
+  return parts.join("\n\n");
+}
+export {
+  parseContent,
+  serializeContent
+};
+//# sourceMappingURL=utils.js.map

package/build-module/html/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/html/utils.js"],
+  "sourcesContent": ["/**\n * Parses content string into separate HTML, CSS, and JS sections.\n *\n * Extracts CSS from <style data-wp-block-html=\"css\"> tags and\n * JavaScript from <script data-wp-block-html=\"js\"> tags.\n * Everything else is treated as HTML.\n *\n * @param {string} content - The combined content string\n * @return {Object} Object with html, css, and js properties\n */\nexport function parseContent( content = '' ) {\n\tif ( ! content || ! content.trim() ) {\n\t\treturn { html: '', css: '', js: '' };\n\t}\n\n\t// Create a temporary document to parse HTML safely\n\tconst doc = document.implementation.createHTMLDocument( '' );\n\tdoc.body.innerHTML = content;\n\n\t// Extract CSS from marked style tag\n\tconst styleTag = doc.body.querySelector(\n\t\t'style[data-wp-block-html=\"css\"]'\n\t);\n\tconst css = styleTag ? styleTag.textContent.trim() : '';\n\tif ( styleTag ) {\n\t\tstyleTag.remove();\n\t}\n\n\t// Extract JS from marked script tag\n\tconst scriptTag = doc.body.querySelector(\n\t\t'script[data-wp-block-html=\"js\"]'\n\t);\n\tconst js = scriptTag ? scriptTag.textContent.trim() : '';\n\tif ( scriptTag ) {\n\t\tscriptTag.remove();\n\t}\n\n\t// Everything else is HTML\n\tconst html = doc.body.innerHTML.trim();\n\n\treturn { html, css, js };\n}\n\n/**\n * Serializes HTML, CSS, and JS into a single content string.\n *\n * Creates marked <style> and <script> tags for CSS and JS sections,\n * then appends the HTML content.\n *\n * @param {Object} sections      Object with html, css, and js properties\n * @param {string} sections.html HTML content\n * @param {string} sections.css  CSS content\n * @param {string} sections.js   JavaScript content\n * @return {string} Combined content string\n */\nexport function serializeContent( { html = '', css = '', js = '' } ) {\n\tconst parts = [];\n\n\t// Add CSS if present\n\tif ( css.trim() ) {\n\t\tparts.push( `<style data-wp-block-html=\"css\">\\n${ css }\\n</style>` );\n\t}\n\n\t// Add JS if present\n\tif ( js.trim() ) {\n\t\tparts.push( `<script data-wp-block-html=\"js\">\\n${ js }\\n</script>` );\n\t}\n\n\t// Add HTML\n\tif ( html.trim() ) {\n\t\tparts.push( html );\n\t}\n\n\treturn parts.join( '\\n\\n' );\n}\n"],
+  "mappings": ";AAUO,SAAS,aAAc,UAAU,IAAK;AAC5C,MAAK,CAAE,WAAW,CAAE,QAAQ,KAAK,GAAI;AACpC,WAAO,EAAE,MAAM,IAAI,KAAK,IAAI,IAAI,GAAG;AAAA,EACpC;AAGA,QAAM,MAAM,SAAS,eAAe,mBAAoB,EAAG;AAC3D,MAAI,KAAK,YAAY;AAGrB,QAAM,WAAW,IAAI,KAAK;AAAA,IACzB;AAAA,EACD;AACA,QAAM,MAAM,WAAW,SAAS,YAAY,KAAK,IAAI;AACrD,MAAK,UAAW;AACf,aAAS,OAAO;AAAA,EACjB;AAGA,QAAM,YAAY,IAAI,KAAK;AAAA,IAC1B;AAAA,EACD;AACA,QAAM,KAAK,YAAY,UAAU,YAAY,KAAK,IAAI;AACtD,MAAK,WAAY;AAChB,cAAU,OAAO;AAAA,EAClB;AAGA,QAAM,OAAO,IAAI,KAAK,UAAU,KAAK;AAErC,SAAO,EAAE,MAAM,KAAK,GAAG;AACxB;AAcO,SAAS,iBAAkB,EAAE,OAAO,IAAI,MAAM,IAAI,KAAK,GAAG,GAAI;AACpE,QAAM,QAAQ,CAAC;AAGf,MAAK,IAAI,KAAK,GAAI;AACjB,UAAM,KAAM;AAAA,EAAsC,GAAI;AAAA,SAAa;AAAA,EACpE;AAGA,MAAK,GAAG,KAAK,GAAI;AAChB,UAAM,KAAM;AAAA,EAAsC,EAAG;AAAA,UAAc;AAAA,EACpE;AAGA,MAAK,KAAK,KAAK,GAAI;AAClB,UAAM,KAAM,IAAK;AAAA,EAClB;AAEA,SAAO,MAAM,KAAM,MAAO;AAC3B;",
+  "names": []
+}

package/build-module/navigation-link/edit.js

@@ -61,20 +61,30 @@ var useIsInvalidLink = (kind, type, id, enabled) => {
   const isPostType = kind === "post-type" || type === "post" || type === "page";
   const hasId = Number.isInteger(id);
   const blockEditingMode = useBlockEditingMode();
-  const postStatus = useSelect(
+  const { postStatus, isDeleted } = useSelect(
     (select) => {
       if (!isPostType) {
-        return null;
+        return { postStatus: null, isDeleted: false };
       }
       if (blockEditingMode === "disabled" || !enabled) {
-        return null;
+        return { postStatus: null, isDeleted: false };
       }
-      const { getEntityRecord } = select(coreStore);
-      return getEntityRecord("postType", type, id)?.status;
+      const { getEntityRecord, hasFinishedResolution } = select(coreStore);
+      const entityRecord = getEntityRecord("postType", type, id);
+      const hasResolved = hasFinishedResolution("getEntityRecord", [
+        "postType",
+        type,
+        id
+      ]);
+      const deleted = hasResolved && entityRecord === void 0;
+      return {
+        postStatus: entityRecord?.status,
+        isDeleted: deleted
+      };
     },
     [isPostType, blockEditingMode, enabled, type, id]
   );
-  const isInvalid = isPostType && hasId && postStatus && "trash" === postStatus;
+  const isInvalid = isPostType && hasId && (isDeleted || postStatus && "trash" === postStatus);
   const isDraft = "draft" === postStatus;
   return [isInvalid, isDraft];
 };
@@ -166,7 +176,12 @@ function NavigationLinkEdit({
     [clientId, maxNestingLevel]
   );
   const { getBlocks } = useSelect(blockEditorStore);
-  const { clearBinding, createBinding } = useEntityBinding({
+  const {
+    clearBinding,
+    createBinding,
+    hasUrlBinding,
+    isBoundEntityAvailable
+  } = useEntityBinding({
     clientId,
     attributes
   });
@@ -273,13 +288,13 @@ function NavigationLinkEdit({
       renderAppender: false
     }
   );
-  if (!url || isInvalid || isDraft) {
+  if (!url || isInvalid || isDraft || hasUrlBinding && !isBoundEntityAvailable) {
     blockProps.onClick = () => {
       setIsLinkOpen(true);
     };
   }
   const classes = clsx("wp-block-navigation-item__content", {
-    "wp-block-navigation-link__placeholder": !url || isInvalid || isDraft
+    "wp-block-navigation-link__placeholder": !url || isInvalid || isDraft || hasUrlBinding && !isBoundEntityAvailable
   });
   const missingText = getMissingText(type);
   const placeholderText = `(${isInvalid ? __("Invalid") : __("Draft")})`;
@@ -375,7 +390,7 @@ function NavigationLinkEdit({
             link: attributes,
             onClose: () => {
               setIsLinkOpen(false);
-              if (!url) {
+              if (!url && !hasUrlBinding) {
                 onReplace([]);
               } else if (isNewLink.current) {
                 selectBlock(clientId);