@wordpress/lazy-editor 1.1.0

package/build-module/component.js

@@ -0,0 +1,75 @@
+// packages/lazy-editor/src/component.tsx
+import { privateApis as editorPrivateApis } from "@wordpress/editor";
+import { store as coreDataStore } from "@wordpress/core-data";
+import { useSelect } from "@wordpress/data";
+import { Spinner } from "@wordpress/components";
+import { useMemo } from "@wordpress/element";
+import { useStylesId } from "./hooks/use-styles-id";
+import { useEditorSettings } from "./hooks/use-editor-settings";
+import { useEditorAssets } from "./hooks/use-editor-assets";
+import { unlock } from "./lock-unlock";
+import { jsx } from "react/jsx-runtime";
+var { Editor: PrivateEditor, BackButton } = unlock(editorPrivateApis);
+function Editor({
+  postType,
+  postId,
+  settings,
+  backButton
+}) {
+  const templateId = useSelect(
+    (select) => {
+      if (!postType || !postId) {
+        return void 0;
+      }
+      if (postType === "wp_template") {
+        return postId;
+      }
+      return unlock(select(coreDataStore)).getTemplateId(
+        postType,
+        postId
+      );
+    },
+    [postType, postId]
+  );
+  const stylesId = useStylesId({ templateId });
+  const { isReady: settingsReady, editorSettings } = useEditorSettings({
+    stylesId
+  });
+  const { isReady: assetsReady } = useEditorAssets();
+  const finalSettings = useMemo(
+    () => ({
+      ...editorSettings,
+      ...settings
+    }),
+    [editorSettings, settings]
+  );
+  if (!settingsReady || !assetsReady) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh"
+        },
+        children: /* @__PURE__ */ jsx(Spinner, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    PrivateEditor,
+    {
+      postType,
+      postId,
+      templateId,
+      settings: finalSettings,
+      styles: finalSettings.styles,
+      children: backButton && /* @__PURE__ */ jsx(BackButton, { children: backButton })
+    }
+  );
+}
+export {
+  Editor
+};
+//# sourceMappingURL=component.js.map

package/build-module/component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\nimport { store as coreDataStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { Spinner } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStylesId } from './hooks/use-styles-id';\nimport { useEditorSettings } from './hooks/use-editor-settings';\nimport { useEditorAssets } from './hooks/use-editor-assets';\nimport { unlock } from './lock-unlock';\n\nconst { Editor: PrivateEditor, BackButton } = unlock( editorPrivateApis );\n\ninterface EditorProps {\n\tpostType: string;\n\tpostId: string;\n\tsettings?: Record< string, any >;\n\tbackButton?: ReactNode;\n}\n\n/**\n * Lazy-loading editor component that handles asset loading and settings initialization.\n *\n * @param {Object}    props            Component props\n * @param {string}    props.postType   The post type to edit\n * @param {string}    props.postId     The post ID to edit\n * @param {Object}    props.settings   Optional extra settings to merge with editor settings\n * @param {ReactNode} props.backButton Optional back button to render in editor header\n * @return The editor component with loading states\n */\nexport function Editor( {\n\tpostType,\n\tpostId,\n\tsettings,\n\tbackButton,\n}: EditorProps ) {\n\t// Resolve template ID from post type/ID\n\tconst templateId = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! postType || ! postId ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tif ( postType === 'wp_template' ) {\n\t\t\t\treturn postId;\n\t\t\t}\n\t\t\t// Use private API to get template ID for this post\n\t\t\treturn unlock( select( coreDataStore ) ).getTemplateId(\n\t\t\t\tpostType,\n\t\t\t\tpostId\n\t\t\t);\n\t\t},\n\t\t[ postType, postId ]\n\t);\n\n\t// Resolve styles ID from template\n\tconst stylesId = useStylesId( { templateId } );\n\n\t// Load editor settings and assets\n\tconst { isReady: settingsReady, editorSettings } = useEditorSettings( {\n\t\tstylesId,\n\t} );\n\tconst { isReady: assetsReady } = useEditorAssets();\n\tconst finalSettings = useMemo(\n\t\t() => ( {\n\t\t\t...editorSettings,\n\t\t\t...settings,\n\t\t} ),\n\t\t[ editorSettings, settings ]\n\t);\n\n\t// Show loading spinner while assets or settings are loading\n\tif ( ! settingsReady || ! assetsReady ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\theight: '100vh',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Spinner />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Render the editor when ready\n\treturn (\n\t\t<PrivateEditor\n\t\t\tpostType={ postType }\n\t\t\tpostId={ postId }\n\t\t\ttemplateId={ templateId }\n\t\t\tsettings={ finalSettings }\n\t\t\tstyles={ finalSettings.styles }\n\t\t>\n\t\t\t{ backButton && <BackButton>{ backButton }</BackButton> }\n\t\t</PrivateEditor>\n\t);\n}\n"],
+  "mappings": ";AAQA,SAAS,eAAe,yBAAyB;AACjD,SAAS,SAAS,qBAAqB;AACvC,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,eAAe;AAKxB,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,cAAc;AAwEnB;AAtEJ,IAAM,EAAE,QAAQ,eAAe,WAAW,IAAI,OAAQ,iBAAkB;AAmBjE,SAAS,OAAQ;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAiB;AAEhB,QAAM,aAAa;AAAA,IAClB,CAAE,WAAY;AACb,UAAK,CAAE,YAAY,CAAE,QAAS;AAC7B,eAAO;AAAA,MACR;AACA,UAAK,aAAa,eAAgB;AACjC,eAAO;AAAA,MACR;AAEA,aAAO,OAAQ,OAAQ,aAAc,CAAE,EAAE;AAAA,QACxC;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,UAAU,MAAO;AAAA,EACpB;AAGA,QAAM,WAAW,YAAa,EAAE,WAAW,CAAE;AAG7C,QAAM,EAAE,SAAS,eAAe,eAAe,IAAI,kBAAmB;AAAA,IACrE;AAAA,EACD,CAAE;AACF,QAAM,EAAE,SAAS,YAAY,IAAI,gBAAgB;AACjD,QAAM,gBAAgB;AAAA,IACrB,OAAQ;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,IACJ;AAAA,IACA,CAAE,gBAAgB,QAAS;AAAA,EAC5B;AAGA,MAAK,CAAE,iBAAiB,CAAE,aAAc;AACvC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,QAAQ;AAAA,QACT;AAAA,QAEA,8BAAC,WAAQ;AAAA;AAAA,IACV;AAAA,EAEF;AAGA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAW;AAAA,MACX,QAAS,cAAc;AAAA,MAErB,wBAAc,oBAAC,cAAa,sBAAY;AAAA;AAAA,EAC3C;AAEF;",
+  "names": []
+}

package/build-module/hooks/use-editor-assets.js

@@ -0,0 +1,48 @@
+// packages/lazy-editor/src/hooks/use-editor-assets.tsx
+import loadAssets from "@wordpress/asset-loader";
+import { store as coreDataStore } from "@wordpress/core-data";
+import { useState, useEffect } from "@wordpress/element";
+import { resolveSelect, useSelect } from "@wordpress/data";
+import { unlock } from "../lock-unlock";
+var loadAssetsPromise;
+async function loadEditorAssets() {
+  const load = async () => {
+    const editorAssets = await unlock(
+      resolveSelect(coreDataStore)
+    ).getEditorAssets();
+    await loadAssets(
+      editorAssets.scripts || {},
+      editorAssets.inline_scripts || { before: {}, after: {} },
+      editorAssets.styles || {},
+      editorAssets.inline_styles || { before: {}, after: {} }
+    );
+  };
+  if (!loadAssetsPromise) {
+    loadAssetsPromise = load();
+  }
+  return loadAssetsPromise;
+}
+function useEditorAssets() {
+  const editorAssets = useSelect((select) => {
+    return unlock(select(coreDataStore)).getEditorAssets();
+  }, []);
+  const [assetsLoaded, setAssetsLoaded] = useState(false);
+  useEffect(() => {
+    if (editorAssets && !assetsLoaded) {
+      loadEditorAssets().then(() => {
+        setAssetsLoaded(true);
+      }).catch((error) => {
+        console.error("Failed to load editor assets:", error);
+      });
+    }
+  }, [editorAssets, assetsLoaded]);
+  return {
+    isReady: !!editorAssets && assetsLoaded,
+    assetsLoaded
+  };
+}
+export {
+  loadEditorAssets,
+  useEditorAssets
+};
+//# sourceMappingURL=use-editor-assets.js.map

package/build-module/hooks/use-editor-assets.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/use-editor-assets.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport loadAssets from '@wordpress/asset-loader';\nimport { store as coreDataStore } from '@wordpress/core-data';\nimport { useState, useEffect } from '@wordpress/element';\nimport { resolveSelect, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\n\nlet loadAssetsPromise: Promise< void >;\n\nexport async function loadEditorAssets() {\n\tconst load = async () => {\n\t\tconst editorAssets = await unlock(\n\t\t\tresolveSelect( coreDataStore )\n\t\t).getEditorAssets();\n\t\tawait loadAssets(\n\t\t\teditorAssets.scripts || {},\n\t\t\teditorAssets.inline_scripts || { before: {}, after: {} },\n\t\t\teditorAssets.styles || {},\n\t\t\teditorAssets.inline_styles || { before: {}, after: {} }\n\t\t);\n\t};\n\n\tif ( ! loadAssetsPromise ) {\n\t\tloadAssetsPromise = load();\n\t}\n\n\treturn loadAssetsPromise;\n}\n\n/**\n * This is a React hook that handles loading editor assets from the REST API.\n *\n * @return Editor assets loading state.\n */\nexport function useEditorAssets() {\n\tconst editorAssets = useSelect( ( select ) => {\n\t\treturn unlock( select( coreDataStore ) ).getEditorAssets();\n\t}, [] );\n\n\tconst [ assetsLoaded, setAssetsLoaded ] = useState( false );\n\n\tuseEffect( () => {\n\t\tif ( editorAssets && ! assetsLoaded ) {\n\t\t\tloadEditorAssets()\n\t\t\t\t.then( () => {\n\t\t\t\t\tsetAssetsLoaded( true );\n\t\t\t\t} )\n\t\t\t\t.catch( ( error: Error ) => {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.error( 'Failed to load editor assets:', error );\n\t\t\t\t} );\n\t\t}\n\t}, [ editorAssets, assetsLoaded ] );\n\n\treturn {\n\t\tisReady: !! editorAssets && assetsLoaded,\n\t\tassetsLoaded,\n\t};\n}\n"],
+  "mappings": ";AAGA,OAAO,gBAAgB;AACvB,SAAS,SAAS,qBAAqB;AACvC,SAAS,UAAU,iBAAiB;AACpC,SAAS,eAAe,iBAAiB;AAKzC,SAAS,cAAc;AAEvB,IAAI;AAEJ,eAAsB,mBAAmB;AACxC,QAAM,OAAO,YAAY;AACxB,UAAM,eAAe,MAAM;AAAA,MAC1B,cAAe,aAAc;AAAA,IAC9B,EAAE,gBAAgB;AAClB,UAAM;AAAA,MACL,aAAa,WAAW,CAAC;AAAA,MACzB,aAAa,kBAAkB,EAAE,QAAQ,CAAC,GAAG,OAAO,CAAC,EAAE;AAAA,MACvD,aAAa,UAAU,CAAC;AAAA,MACxB,aAAa,iBAAiB,EAAE,QAAQ,CAAC,GAAG,OAAO,CAAC,EAAE;AAAA,IACvD;AAAA,EACD;AAEA,MAAK,CAAE,mBAAoB;AAC1B,wBAAoB,KAAK;AAAA,EAC1B;AAEA,SAAO;AACR;AAOO,SAAS,kBAAkB;AACjC,QAAM,eAAe,UAAW,CAAE,WAAY;AAC7C,WAAO,OAAQ,OAAQ,aAAc,CAAE,EAAE,gBAAgB;AAAA,EAC1D,GAAG,CAAC,CAAE;AAEN,QAAM,CAAE,cAAc,eAAgB,IAAI,SAAU,KAAM;AAE1D,YAAW,MAAM;AAChB,QAAK,gBAAgB,CAAE,cAAe;AACrC,uBAAiB,EACf,KAAM,MAAM;AACZ,wBAAiB,IAAK;AAAA,MACvB,CAAE,EACD,MAAO,CAAE,UAAkB;AAE3B,gBAAQ,MAAO,iCAAiC,KAAM;AAAA,MACvD,CAAE;AAAA,IACJ;AAAA,EACD,GAAG,CAAE,cAAc,YAAa,CAAE;AAElC,SAAO;AAAA,IACN,SAAS,CAAC,CAAE,gBAAgB;AAAA,IAC5B;AAAA,EACD;AACD;",
+  "names": []
+}

package/build-module/hooks/use-editor-settings.js

@@ -0,0 +1,43 @@
+// packages/lazy-editor/src/hooks/use-editor-settings.tsx
+import { generateGlobalStyles } from "@wordpress/global-styles-engine";
+import { store as coreDataStore } from "@wordpress/core-data";
+import { useMemo } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+import { useUserGlobalStyles } from "./use-global-styles";
+import { unlock } from "../lock-unlock";
+function useEditorSettings({ stylesId }) {
+  const { editorSettings } = useSelect(
+    (select) => ({
+      editorSettings: unlock(
+        select(coreDataStore)
+      ).getEditorSettings()
+    }),
+    []
+  );
+  const { user: globalStyles } = useUserGlobalStyles(stylesId);
+  const [globalStylesCSS] = generateGlobalStyles(globalStyles);
+  const hasEditorSettings = !!editorSettings;
+  const styles = useMemo(() => {
+    if (!hasEditorSettings) {
+      return [];
+    }
+    return [
+      ...editorSettings?.styles ?? [],
+      ...globalStylesCSS
+    ];
+  }, [hasEditorSettings, editorSettings?.styles, globalStylesCSS]);
+  return {
+    isReady: hasEditorSettings,
+    editorSettings: useMemo(
+      () => ({
+        ...editorSettings ?? {},
+        styles
+      }),
+      [editorSettings, styles]
+    )
+  };
+}
+export {
+  useEditorSettings
+};
+//# sourceMappingURL=use-editor-settings.js.map

package/build-module/hooks/use-editor-settings.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/use-editor-settings.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { generateGlobalStyles } from '@wordpress/global-styles-engine';\nimport { store as coreDataStore } from '@wordpress/core-data';\nimport { useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useUserGlobalStyles } from './use-global-styles';\nimport { unlock } from '../lock-unlock';\n\n/**\n * This is a React hook that provides the editor settings from the REST API.\n *\n * @param {Object} props            - The props object.\n * @param {string} [props.stylesId] - The ID of the user's global styles to use.\n * @return Editor settings.\n */\nexport function useEditorSettings( { stylesId }: { stylesId: string } ) {\n\tconst { editorSettings } = useSelect(\n\t\t( select ) => ( {\n\t\t\teditorSettings: unlock(\n\t\t\t\tselect( coreDataStore )\n\t\t\t).getEditorSettings(),\n\t\t} ),\n\t\t[]\n\t);\n\n\tconst { user: globalStyles } = useUserGlobalStyles( stylesId );\n\tconst [ globalStylesCSS ] = generateGlobalStyles( globalStyles );\n\n\tconst hasEditorSettings = !! editorSettings;\n\tconst styles = useMemo( () => {\n\t\tif ( ! hasEditorSettings ) {\n\t\t\treturn [];\n\t\t}\n\t\treturn [\n\t\t\t...( ( editorSettings?.styles as Array< any > ) ?? [] ),\n\t\t\t...globalStylesCSS,\n\t\t];\n\t}, [ hasEditorSettings, editorSettings?.styles, globalStylesCSS ] );\n\n\treturn {\n\t\tisReady: hasEditorSettings,\n\t\teditorSettings: useMemo(\n\t\t\t() => ( {\n\t\t\t\t...( editorSettings ?? {} ),\n\t\t\t\tstyles,\n\t\t\t} ),\n\t\t\t[ editorSettings, styles ]\n\t\t),\n\t};\n}\n"],
+  "mappings": ";AAGA,SAAS,4BAA4B;AACrC,SAAS,SAAS,qBAAqB;AACvC,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAK1B,SAAS,2BAA2B;AACpC,SAAS,cAAc;AAShB,SAAS,kBAAmB,EAAE,SAAS,GAA0B;AACvE,QAAM,EAAE,eAAe,IAAI;AAAA,IAC1B,CAAE,YAAc;AAAA,MACf,gBAAgB;AAAA,QACf,OAAQ,aAAc;AAAA,MACvB,EAAE,kBAAkB;AAAA,IACrB;AAAA,IACA,CAAC;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,aAAa,IAAI,oBAAqB,QAAS;AAC7D,QAAM,CAAE,eAAgB,IAAI,qBAAsB,YAAa;AAE/D,QAAM,oBAAoB,CAAC,CAAE;AAC7B,QAAM,SAAS,QAAS,MAAM;AAC7B,QAAK,CAAE,mBAAoB;AAC1B,aAAO,CAAC;AAAA,IACT;AACA,WAAO;AAAA,MACN,GAAO,gBAAgB,UAA4B,CAAC;AAAA,MACpD,GAAG;AAAA,IACJ;AAAA,EACD,GAAG,CAAE,mBAAmB,gBAAgB,QAAQ,eAAgB,CAAE;AAElE,SAAO;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,MACf,OAAQ;AAAA,QACP,GAAK,kBAAkB,CAAC;AAAA,QACxB;AAAA,MACD;AAAA,MACA,CAAE,gBAAgB,MAAO;AAAA,IAC1B;AAAA,EACD;AACD;",
+  "names": []
+}

package/build-module/hooks/use-global-styles.js

@@ -0,0 +1,56 @@
+// packages/lazy-editor/src/hooks/use-global-styles.tsx
+import { store as coreStore } from "@wordpress/core-data";
+import { useSelect } from "@wordpress/data";
+import { useMemo } from "@wordpress/element";
+function useUserGlobalStyles(id) {
+  const { userGlobalStyles } = useSelect(
+    (select) => {
+      const { getEntityRecord, getEditedEntityRecord, canUser } = select(coreStore);
+      const userCanEditGlobalStyles = canUser("update", {
+        kind: "root",
+        name: "globalStyles",
+        id
+      });
+      let record;
+      if (
+        /*
+         * Test that the OPTIONS request for user capabilities is complete
+         * before fetching the global styles entity record.
+         * This is to avoid fetching the global styles entity unnecessarily.
+         */
+        typeof userCanEditGlobalStyles === "boolean"
+      ) {
+        if (userCanEditGlobalStyles) {
+          record = getEditedEntityRecord(
+            "root",
+            "globalStyles",
+            id
+          );
+        } else {
+          record = getEntityRecord("root", "globalStyles", id, {
+            context: "view"
+          });
+        }
+      }
+      return {
+        userGlobalStyles: record
+      };
+    },
+    [id]
+  );
+  return useMemo(() => {
+    if (!userGlobalStyles) {
+      return {
+        user: void 0
+      };
+    }
+    const user = userGlobalStyles;
+    return {
+      user
+    };
+  }, [userGlobalStyles]);
+}
+export {
+  useUserGlobalStyles
+};
+//# sourceMappingURL=use-global-styles.js.map

package/build-module/hooks/use-global-styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/use-global-styles.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\n\nexport function useUserGlobalStyles( id: string ) {\n\tconst { userGlobalStyles } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecord, getEditedEntityRecord, canUser } =\n\t\t\t\tselect( coreStore );\n\n\t\t\t/*\n\t\t\t * Ensure that the global styles ID request is complete by testing `_globalStylesId`,\n\t\t\t * before firing off the `canUser` OPTIONS request for user capabilities, otherwise it will\n\t\t\t * fetch `/wp/v2/global-styles` instead of `/wp/v2/global-styles/{id}`.\n\t\t\t * NOTE: Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,\n\t\t\t * or set using the `block_editor_rest_api_preload_paths` filter, if this changes.\n\t\t\t */\n\t\t\tconst userCanEditGlobalStyles = canUser( 'update', {\n\t\t\t\tkind: 'root',\n\t\t\t\tname: 'globalStyles',\n\t\t\t\tid,\n\t\t\t} );\n\n\t\t\tlet record;\n\t\t\tif (\n\t\t\t\t/*\n\t\t\t\t * Test that the OPTIONS request for user capabilities is complete\n\t\t\t\t * before fetching the global styles entity record.\n\t\t\t\t * This is to avoid fetching the global styles entity unnecessarily.\n\t\t\t\t */\n\t\t\t\ttypeof userCanEditGlobalStyles === 'boolean'\n\t\t\t) {\n\t\t\t\t/*\n\t\t\t\t * Fetch the global styles entity record based on the user's capabilities.\n\t\t\t\t * The default context is `edit` for users who can edit global styles.\n\t\t\t\t * Otherwise, the context is `view`.\n\t\t\t\t */\n\t\t\t\tif ( userCanEditGlobalStyles ) {\n\t\t\t\t\trecord = getEditedEntityRecord(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\tid\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\trecord = getEntityRecord( 'root', 'globalStyles', id, {\n\t\t\t\t\t\tcontext: 'view',\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tuserGlobalStyles: record,\n\t\t\t};\n\t\t},\n\t\t[ id ]\n\t);\n\n\treturn useMemo( () => {\n\t\tif ( ! userGlobalStyles ) {\n\t\t\treturn {\n\t\t\t\tuser: undefined,\n\t\t\t};\n\t\t}\n\n\t\tconst user = userGlobalStyles as GlobalStylesConfig;\n\n\t\treturn {\n\t\t\tuser,\n\t\t};\n\t}, [ userGlobalStyles ] );\n}\n"],
+  "mappings": ";AAIA,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAEjB,SAAS,oBAAqB,IAAa;AACjD,QAAM,EAAE,iBAAiB,IAAI;AAAA,IAC5B,CAAE,WAAY;AACb,YAAM,EAAE,iBAAiB,uBAAuB,QAAQ,IACvD,OAAQ,SAAU;AASnB,YAAM,0BAA0B,QAAS,UAAU;AAAA,QAClD,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,MACD,CAAE;AAEF,UAAI;AACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMC,OAAO,4BAA4B;AAAA,QAClC;AAMD,YAAK,yBAA0B;AAC9B,mBAAS;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD,OAAO;AACN,mBAAS,gBAAiB,QAAQ,gBAAgB,IAAI;AAAA,YACrD,SAAS;AAAA,UACV,CAAE;AAAA,QACH;AAAA,MACD;AAEA,aAAO;AAAA,QACN,kBAAkB;AAAA,MACnB;AAAA,IACD;AAAA,IACA,CAAE,EAAG;AAAA,EACN;AAEA,SAAO,QAAS,MAAM;AACrB,QAAK,CAAE,kBAAmB;AACzB,aAAO;AAAA,QACN,MAAM;AAAA,MACP;AAAA,IACD;AAEA,UAAM,OAAO;AAEb,WAAO;AAAA,MACN;AAAA,IACD;AAAA,EACD,GAAG,CAAE,gBAAiB,CAAE;AACzB;",
+  "names": []
+}

package/build-module/hooks/use-styles-id.js

@@ -0,0 +1,25 @@
+// packages/lazy-editor/src/hooks/use-styles-id.tsx
+import { store as coreStore } from "@wordpress/core-data";
+import { useSelect } from "@wordpress/data";
+function useStylesId({ templateId }) {
+  const { globalStylesId, stylesId } = useSelect(
+    (select) => {
+      const coreDataSelect = select(coreStore);
+      const template = templateId ? coreDataSelect.getEntityRecord(
+        "postType",
+        "wp_template",
+        templateId
+      ) : null;
+      return {
+        globalStylesId: coreDataSelect.__experimentalGetCurrentGlobalStylesId(),
+        stylesId: template?.styles_id
+      };
+    },
+    [templateId]
+  );
+  return stylesId || globalStylesId;
+}
+export {
+  useStylesId
+};
+//# sourceMappingURL=use-styles-id.js.map

package/build-module/hooks/use-styles-id.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/use-styles-id.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\n\n// Define interface for template with optional styles_id\ninterface Template {\n\tstyles_id?: string;\n\t[ key: string ]: any;\n}\n\n/**\n * This is a React hook that provides the styles ID.\n * Styles ID can be associated with a template.\n * If a template has a styles ID, it will be used otherwise the global styles ID will be used.\n *\n * @param {Object} props              - The props object.\n * @param {string} [props.templateId] - The ID of the template to use.\n * @return The styles ID.\n */\nexport function useStylesId( { templateId }: { templateId?: string } ) {\n\tconst { globalStylesId, stylesId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst coreDataSelect = select( coreStore );\n\t\t\tconst template = templateId\n\t\t\t\t? ( coreDataSelect.getEntityRecord(\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t'wp_template',\n\t\t\t\t\t\ttemplateId\n\t\t\t\t  ) as Template | null )\n\t\t\t\t: null;\n\n\t\t\treturn {\n\t\t\t\tglobalStylesId:\n\t\t\t\t\tcoreDataSelect.__experimentalGetCurrentGlobalStylesId(),\n\t\t\t\tstylesId: template?.styles_id,\n\t\t\t};\n\t\t},\n\t\t[ templateId ]\n\t);\n\n\t// Otherwise, fall back to the global styles ID\n\treturn stylesId || globalStylesId;\n}\n"],
+  "mappings": ";AAGA,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB;AAiBnB,SAAS,YAAa,EAAE,WAAW,GAA6B;AACtE,QAAM,EAAE,gBAAgB,SAAS,IAAI;AAAA,IACpC,CAAE,WAAY;AACb,YAAM,iBAAiB,OAAQ,SAAU;AACzC,YAAM,WAAW,aACZ,eAAe;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACA,IACA;AAEH,aAAO;AAAA,QACN,gBACC,eAAe,uCAAuC;AAAA,QACvD,UAAU,UAAU;AAAA,MACrB;AAAA,IACD;AAAA,IACA,CAAE,UAAW;AAAA,EACd;AAGA,SAAO,YAAY;AACpB;",
+  "names": []
+}

package/build-module/index.js

@@ -0,0 +1,6 @@
+// packages/lazy-editor/src/index.tsx
+import { Editor } from "./component";
+export {
+  Editor
+};
+//# sourceMappingURL=index.js.map

package/build-module/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.tsx"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nexport { Editor } from './component';\n"],
+  "mappings": ";AAGA,SAAS,cAAc;",
+  "names": []
+}

package/build-module/lock-unlock.js

@@ -0,0 +1,10 @@
+// packages/lazy-editor/src/lock-unlock.ts
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from "@wordpress/private-apis";
+var { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+  "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
+  "@wordpress/lazy-editor"
+);
+export {
+  unlock
+};
+//# sourceMappingURL=lock-unlock.js.map

package/build-module/lock-unlock.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/lock-unlock.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t'@wordpress/lazy-editor'\n);\n"],
+  "mappings": ";AAGA,SAAS,wDAAwD;AAE1D,IAAM,EAAE,OAAO,IAAI;AAAA,EACzB;AAAA,EACA;AACD;",
+  "names": []
+}

package/build-types/component.d.ts

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+interface EditorProps {
+    postType: string;
+    postId: string;
+    settings?: Record<string, any>;
+    backButton?: ReactNode;
+}
+/**
+ * Lazy-loading editor component that handles asset loading and settings initialization.
+ *
+ * @param {Object}    props            Component props
+ * @param {string}    props.postType   The post type to edit
+ * @param {string}    props.postId     The post ID to edit
+ * @param {Object}    props.settings   Optional extra settings to merge with editor settings
+ * @param {ReactNode} props.backButton Optional back button to render in editor header
+ * @return The editor component with loading states
+ */
+export declare function Editor({ postType, postId, settings, backButton, }: EditorProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=component.d.ts.map

package/build-types/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC,UAAU,WAAW;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAE,MAAM,EAAE,GAAG,CAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAE,EACvB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,UAAU,GACV,EAAE,WAAW,+BA+Db"}

package/build-types/hooks/use-editor-assets.d.ts

@@ -0,0 +1,11 @@
+export declare function loadEditorAssets(): Promise<void>;
+/**
+ * This is a React hook that handles loading editor assets from the REST API.
+ *
+ * @return Editor assets loading state.
+ */
+export declare function useEditorAssets(): {
+    isReady: boolean;
+    assetsLoaded: boolean;
+};
+//# sourceMappingURL=use-editor-assets.d.ts.map

package/build-types/hooks/use-editor-assets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-editor-assets.d.ts","sourceRoot":"","sources":["../../src/hooks/use-editor-assets.tsx"],"names":[],"mappings":"AAeA,wBAAsB,gBAAgB,kBAkBrC;AAED;;;;GAIG;AACH,wBAAgB,eAAe;;;EAwB9B"}

package/build-types/hooks/use-editor-settings.d.ts

@@ -0,0 +1,14 @@
+/**
+ * This is a React hook that provides the editor settings from the REST API.
+ *
+ * @param {Object} props            - The props object.
+ * @param {string} [props.stylesId] - The ID of the user's global styles to use.
+ * @return Editor settings.
+ */
+export declare function useEditorSettings({ stylesId }: {
+    stylesId: string;
+}): {
+    isReady: boolean;
+    editorSettings: any;
+};
+//# sourceMappingURL=use-editor-settings.d.ts.map

package/build-types/hooks/use-editor-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-editor-settings.d.ts","sourceRoot":"","sources":["../../src/hooks/use-editor-settings.tsx"],"names":[],"mappings":"AAcA;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAE,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE;;;EAkCpE"}

package/build-types/hooks/use-global-styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+export declare function useUserGlobalStyles(id: string): {
+    user: undefined;
+} | {
+    user: GlobalStylesConfig;
+};
+//# sourceMappingURL=use-global-styles.d.ts.map

package/build-types/hooks/use-global-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-global-styles.d.ts","sourceRoot":"","sources":["../../src/hooks/use-global-styles.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAK1E,wBAAgB,mBAAmB,CAAE,EAAE,EAAE,MAAM;;;;EAkE9C"}

package/build-types/hooks/use-styles-id.d.ts

@@ -0,0 +1,13 @@
+/**
+ * This is a React hook that provides the styles ID.
+ * Styles ID can be associated with a template.
+ * If a template has a styles ID, it will be used otherwise the global styles ID will be used.
+ *
+ * @param {Object} props              - The props object.
+ * @param {string} [props.templateId] - The ID of the template to use.
+ * @return The styles ID.
+ */
+export declare function useStylesId({ templateId }: {
+    templateId?: string;
+}): string;
+//# sourceMappingURL=use-styles-id.d.ts.map

package/build-types/hooks/use-styles-id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-styles-id.d.ts","sourceRoot":"","sources":["../../src/hooks/use-styles-id.tsx"],"names":[],"mappings":"AAYA;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAE,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,UAuBnE"}

package/build-types/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+export { Editor } from './component';
+//# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/build-types/lock-unlock.d.ts

@@ -0,0 +1,2 @@
+export declare const unlock: <T = any>(object: unknown) => T;
+//# sourceMappingURL=lock-unlock.d.ts.map

package/build-types/lock-unlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lock-unlock.d.ts","sourceRoot":"","sources":["../src/lock-unlock.ts"],"names":[],"mappings":"AAKA,eAAO,MAAQ,MAAM,iCAGpB,CAAC"}

package/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "@wordpress/lazy-editor",
+	"version": "1.1.0",
+	"description": "Lazy-loading editor component with automatic asset and settings management.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"editor",
+		"lazy-loading",
+		"assets"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/lazy-editor/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/lazy-editor"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js",
+			"default": "./build/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"react-native": "src/index",
+	"wpScriptModuleExports": "./build-module/index.js",
+	"types": "build-types",
+	"dependencies": {
+		"@wordpress/asset-loader": "^1.1.0",
+		"@wordpress/block-editor": "^15.8.0",
+		"@wordpress/components": "^30.8.0",
+		"@wordpress/core-data": "^7.35.0",
+		"@wordpress/data": "^10.35.0",
+		"@wordpress/editor": "^14.35.0",
+		"@wordpress/element": "^6.35.0",
+		"@wordpress/global-styles-engine": "^1.2.0",
+		"@wordpress/private-apis": "^1.35.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "77aa1f194edceafe8ac2a1b9438bf84b557e76e3"
+}

package/src/component.tsx

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { Spinner } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useStylesId } from './hooks/use-styles-id';
+import { useEditorSettings } from './hooks/use-editor-settings';
+import { useEditorAssets } from './hooks/use-editor-assets';
+import { unlock } from './lock-unlock';
+
+const { Editor: PrivateEditor, BackButton } = unlock( editorPrivateApis );
+
+interface EditorProps {
+	postType: string;
+	postId: string;
+	settings?: Record< string, any >;
+	backButton?: ReactNode;
+}
+
+/**
+ * Lazy-loading editor component that handles asset loading and settings initialization.
+ *
+ * @param {Object}    props            Component props
+ * @param {string}    props.postType   The post type to edit
+ * @param {string}    props.postId     The post ID to edit
+ * @param {Object}    props.settings   Optional extra settings to merge with editor settings
+ * @param {ReactNode} props.backButton Optional back button to render in editor header
+ * @return The editor component with loading states
+ */
+export function Editor( {
+	postType,
+	postId,
+	settings,
+	backButton,
+}: EditorProps ) {
+	// Resolve template ID from post type/ID
+	const templateId = useSelect(
+		( select ) => {
+			if ( ! postType || ! postId ) {
+				return undefined;
+			}
+			if ( postType === 'wp_template' ) {
+				return postId;
+			}
+			// Use private API to get template ID for this post
+			return unlock( select( coreDataStore ) ).getTemplateId(
+				postType,
+				postId
+			);
+		},
+		[ postType, postId ]
+	);
+
+	// Resolve styles ID from template
+	const stylesId = useStylesId( { templateId } );
+
+	// Load editor settings and assets
+	const { isReady: settingsReady, editorSettings } = useEditorSettings( {
+		stylesId,
+	} );
+	const { isReady: assetsReady } = useEditorAssets();
+	const finalSettings = useMemo(
+		() => ( {
+			...editorSettings,
+			...settings,
+		} ),
+		[ editorSettings, settings ]
+	);
+
+	// Show loading spinner while assets or settings are loading
+	if ( ! settingsReady || ! assetsReady ) {
+		return (
+			<div
+				style={ {
+					display: 'flex',
+					justifyContent: 'center',
+					alignItems: 'center',
+					height: '100vh',
+				} }
+			>
+				<Spinner />
+			</div>
+		);
+	}
+
+	// Render the editor when ready
+	return (
+		<PrivateEditor
+			postType={ postType }
+			postId={ postId }
+			templateId={ templateId }
+			settings={ finalSettings }
+			styles={ finalSettings.styles }
+		>
+			{ backButton && <BackButton>{ backButton }</BackButton> }
+		</PrivateEditor>
+	);
+}