@wordpress/lazy-editor 1.1.0

package/README.md

@@ -0,0 +1,65 @@
+# Lazy Editor
+
+Lazy-loading editor component with automatic asset and settings management.
+
+## Overview
+
+This package provides a single `<Editor>` component that handles all the complexity of loading and initializing the WordPress block editor. It automatically:
+
+- **Loads editor assets** - Fetches and injects scripts and styles with proper dependency resolution
+- **Loads editor settings** - Retrieves editor configuration from the REST API
+- **Resolves global styles** - Applies theme.json styles based on the current template
+- **Manages template contexts** - Automatically determines the correct template for the post being edited
+- **Shows loading states** - Displays a spinner while assets and settings are being loaded
+
+## Installation
+
+Install the module:
+
+```bash
+npm install @wordpress/lazy-editor --save
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { Editor } from '@wordpress/lazy-editor';
+
+function App() {
+	return <Editor postType="page" postId="123" />;
+}
+```
+
+That's it! The component handles everything internally:
+1. Resolves the template ID from the post type and ID
+2. Resolves the styles ID from the template
+3. Loads editor settings from `/wp-block-editor/v1/settings`
+4. Loads editor assets from `/wp-block-editor/v1/assets`
+5. Injects scripts and styles into the DOM
+6. Renders the editor when ready
+
+### With Different Post Types
+
+```tsx
+// Edit a post
+<Editor postType="post" postId="42" />
+
+// Edit a page
+<Editor postType="page" postId="123" />
+
+// Edit a template
+<Editor postType="wp_template" postId="index" />
+
+// Edit a custom post type
+<Editor postType="product" postId="789" />
+```
+
+## Contributing
+
+See [CONTRIBUTING.md](../../CONTRIBUTING.md).
+
+## License
+
+GPL-2.0-or-later

package/build/component.js

@@ -0,0 +1,100 @@
+"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/lazy-editor/src/component.tsx
+var component_exports = {};
+__export(component_exports, {
+  Editor: () => Editor
+});
+module.exports = __toCommonJS(component_exports);
+var import_editor = require("@wordpress/editor");
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_use_styles_id = require("./hooks/use-styles-id");
+var import_use_editor_settings = require("./hooks/use-editor-settings");
+var import_use_editor_assets = require("./hooks/use-editor-assets");
+var import_lock_unlock = require("./lock-unlock");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { Editor: PrivateEditor, BackButton } = (0, import_lock_unlock.unlock)(import_editor.privateApis);
+function Editor({
+  postType,
+  postId,
+  settings,
+  backButton
+}) {
+  const templateId = (0, import_data.useSelect)(
+    (select) => {
+      if (!postType || !postId) {
+        return void 0;
+      }
+      if (postType === "wp_template") {
+        return postId;
+      }
+      return (0, import_lock_unlock.unlock)(select(import_core_data.store)).getTemplateId(
+        postType,
+        postId
+      );
+    },
+    [postType, postId]
+  );
+  const stylesId = (0, import_use_styles_id.useStylesId)({ templateId });
+  const { isReady: settingsReady, editorSettings } = (0, import_use_editor_settings.useEditorSettings)({
+    stylesId
+  });
+  const { isReady: assetsReady } = (0, import_use_editor_assets.useEditorAssets)();
+  const finalSettings = (0, import_element.useMemo)(
+    () => ({
+      ...editorSettings,
+      ...settings
+    }),
+    [editorSettings, settings]
+  );
+  if (!settingsReady || !assetsReady) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    PrivateEditor,
+    {
+      postType,
+      postId,
+      templateId,
+      settings: finalSettings,
+      styles: finalSettings.styles,
+      children: backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BackButton, { children: backButton })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Editor
+});
+//# sourceMappingURL=component.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,oBAAiD;AACjD,uBAAuC;AACvC,kBAA0B;AAC1B,wBAAwB;AACxB,qBAAwB;AAKxB,2BAA4B;AAC5B,iCAAkC;AAClC,+BAAgC;AAChC,yBAAuB;AAwEnB;AAtEJ,IAAM,EAAE,QAAQ,eAAe,WAAW,QAAI,2BAAQ,cAAAA,WAAkB;AAmBjE,SAAS,OAAQ;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAiB;AAEhB,QAAM,iBAAa;AAAA,IAClB,CAAE,WAAY;AACb,UAAK,CAAE,YAAY,CAAE,QAAS;AAC7B,eAAO;AAAA,MACR;AACA,UAAK,aAAa,eAAgB;AACjC,eAAO;AAAA,MACR;AAEA,iBAAO,2BAAQ,OAAQ,iBAAAC,KAAc,CAAE,EAAE;AAAA,QACxC;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,UAAU,MAAO;AAAA,EACpB;AAGA,QAAM,eAAW,kCAAa,EAAE,WAAW,CAAE;AAG7C,QAAM,EAAE,SAAS,eAAe,eAAe,QAAI,8CAAmB;AAAA,IACrE;AAAA,EACD,CAAE;AACF,QAAM,EAAE,SAAS,YAAY,QAAI,0CAAgB;AACjD,QAAM,oBAAgB;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,sDAAC,6BAAQ;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,4CAAC,cAAa,sBAAY;AAAA;AAAA,EAC3C;AAEF;",
+  "names": ["editorPrivateApis", "coreDataStore"]
+}

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

@@ -0,0 +1,84 @@
+"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/lazy-editor/src/hooks/use-editor-assets.tsx
+var use_editor_assets_exports = {};
+__export(use_editor_assets_exports, {
+  loadEditorAssets: () => loadEditorAssets,
+  useEditorAssets: () => useEditorAssets
+});
+module.exports = __toCommonJS(use_editor_assets_exports);
+var import_asset_loader = __toESM(require("@wordpress/asset-loader"));
+var import_core_data = require("@wordpress/core-data");
+var import_element = require("@wordpress/element");
+var import_data = require("@wordpress/data");
+var import_lock_unlock = require("../lock-unlock");
+var loadAssetsPromise;
+async function loadEditorAssets() {
+  const load = async () => {
+    const editorAssets = await (0, import_lock_unlock.unlock)(
+      (0, import_data.resolveSelect)(import_core_data.store)
+    ).getEditorAssets();
+    await (0, import_asset_loader.default)(
+      editorAssets.scripts || {},
+      editorAssets.inline_scripts || { before: {}, after: {} },
+      editorAssets.styles || {},
+      editorAssets.inline_styles || { before: {}, after: {} }
+    );
+  };
+  if (!loadAssetsPromise) {
+    loadAssetsPromise = load();
+  }
+  return loadAssetsPromise;
+}
+function useEditorAssets() {
+  const editorAssets = (0, import_data.useSelect)((select) => {
+    return (0, import_lock_unlock.unlock)(select(import_core_data.store)).getEditorAssets();
+  }, []);
+  const [assetsLoaded, setAssetsLoaded] = (0, import_element.useState)(false);
+  (0, import_element.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
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  loadEditorAssets,
+  useEditorAssets
+});
+//# sourceMappingURL=use-editor-assets.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAAuB;AACvB,uBAAuC;AACvC,qBAAoC;AACpC,kBAAyC;AAKzC,yBAAuB;AAEvB,IAAI;AAEJ,eAAsB,mBAAmB;AACxC,QAAM,OAAO,YAAY;AACxB,UAAM,eAAe,UAAM;AAAA,UAC1B,2BAAe,iBAAAA,KAAc;AAAA,IAC9B,EAAE,gBAAgB;AAClB,cAAM,oBAAAC;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,mBAAe,uBAAW,CAAE,WAAY;AAC7C,eAAO,2BAAQ,OAAQ,iBAAAD,KAAc,CAAE,EAAE,gBAAgB;AAAA,EAC1D,GAAG,CAAC,CAAE;AAEN,QAAM,CAAE,cAAc,eAAgB,QAAI,yBAAU,KAAM;AAE1D,gCAAW,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": ["coreDataStore", "loadAssets"]
+}

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

@@ -0,0 +1,68 @@
+"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/lazy-editor/src/hooks/use-editor-settings.tsx
+var use_editor_settings_exports = {};
+__export(use_editor_settings_exports, {
+  useEditorSettings: () => useEditorSettings
+});
+module.exports = __toCommonJS(use_editor_settings_exports);
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_core_data = require("@wordpress/core-data");
+var import_element = require("@wordpress/element");
+var import_data = require("@wordpress/data");
+var import_use_global_styles = require("./use-global-styles");
+var import_lock_unlock = require("../lock-unlock");
+function useEditorSettings({ stylesId }) {
+  const { editorSettings } = (0, import_data.useSelect)(
+    (select) => ({
+      editorSettings: (0, import_lock_unlock.unlock)(
+        select(import_core_data.store)
+      ).getEditorSettings()
+    }),
+    []
+  );
+  const { user: globalStyles } = (0, import_use_global_styles.useUserGlobalStyles)(stylesId);
+  const [globalStylesCSS] = (0, import_global_styles_engine.generateGlobalStyles)(globalStyles);
+  const hasEditorSettings = !!editorSettings;
+  const styles = (0, import_element.useMemo)(() => {
+    if (!hasEditorSettings) {
+      return [];
+    }
+    return [
+      ...editorSettings?.styles ?? [],
+      ...globalStylesCSS
+    ];
+  }, [hasEditorSettings, editorSettings?.styles, globalStylesCSS]);
+  return {
+    isReady: hasEditorSettings,
+    editorSettings: (0, import_element.useMemo)(
+      () => ({
+        ...editorSettings ?? {},
+        styles
+      }),
+      [editorSettings, styles]
+    )
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useEditorSettings
+});
+//# sourceMappingURL=use-editor-settings.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kCAAqC;AACrC,uBAAuC;AACvC,qBAAwB;AACxB,kBAA0B;AAK1B,+BAAoC;AACpC,yBAAuB;AAShB,SAAS,kBAAmB,EAAE,SAAS,GAA0B;AACvE,QAAM,EAAE,eAAe,QAAI;AAAA,IAC1B,CAAE,YAAc;AAAA,MACf,oBAAgB;AAAA,QACf,OAAQ,iBAAAA,KAAc;AAAA,MACvB,EAAE,kBAAkB;AAAA,IACrB;AAAA,IACA,CAAC;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,aAAa,QAAI,8CAAqB,QAAS;AAC7D,QAAM,CAAE,eAAgB,QAAI,kDAAsB,YAAa;AAE/D,QAAM,oBAAoB,CAAC,CAAE;AAC7B,QAAM,aAAS,wBAAS,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,oBAAgB;AAAA,MACf,OAAQ;AAAA,QACP,GAAK,kBAAkB,CAAC;AAAA,QACxB;AAAA,MACD;AAAA,MACA,CAAE,gBAAgB,MAAO;AAAA,IAC1B;AAAA,EACD;AACD;",
+  "names": ["coreDataStore"]
+}

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

@@ -0,0 +1,81 @@
+"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/lazy-editor/src/hooks/use-global-styles.tsx
+var use_global_styles_exports = {};
+__export(use_global_styles_exports, {
+  useUserGlobalStyles: () => useUserGlobalStyles
+});
+module.exports = __toCommonJS(use_global_styles_exports);
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+function useUserGlobalStyles(id) {
+  const { userGlobalStyles } = (0, import_data.useSelect)(
+    (select) => {
+      const { getEntityRecord, getEditedEntityRecord, canUser } = select(import_core_data.store);
+      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 (0, import_element.useMemo)(() => {
+    if (!userGlobalStyles) {
+      return {
+        user: void 0
+      };
+    }
+    const user = userGlobalStyles;
+    return {
+      user
+    };
+  }, [userGlobalStyles]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useUserGlobalStyles
+});
+//# sourceMappingURL=use-global-styles.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,uBAAmC;AACnC,kBAA0B;AAC1B,qBAAwB;AAEjB,SAAS,oBAAqB,IAAa;AACjD,QAAM,EAAE,iBAAiB,QAAI;AAAA,IAC5B,CAAE,WAAY;AACb,YAAM,EAAE,iBAAiB,uBAAuB,QAAQ,IACvD,OAAQ,iBAAAA,KAAU;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,aAAO,wBAAS,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": ["coreStore"]
+}

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

@@ -0,0 +1,50 @@
+"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/lazy-editor/src/hooks/use-styles-id.tsx
+var use_styles_id_exports = {};
+__export(use_styles_id_exports, {
+  useStylesId: () => useStylesId
+});
+module.exports = __toCommonJS(use_styles_id_exports);
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+function useStylesId({ templateId }) {
+  const { globalStylesId, stylesId } = (0, import_data.useSelect)(
+    (select) => {
+      const coreDataSelect = select(import_core_data.store);
+      const template = templateId ? coreDataSelect.getEntityRecord(
+        "postType",
+        "wp_template",
+        templateId
+      ) : null;
+      return {
+        globalStylesId: coreDataSelect.__experimentalGetCurrentGlobalStylesId(),
+        stylesId: template?.styles_id
+      };
+    },
+    [templateId]
+  );
+  return stylesId || globalStylesId;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStylesId
+});
+//# sourceMappingURL=use-styles-id.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAmC;AACnC,kBAA0B;AAiBnB,SAAS,YAAa,EAAE,WAAW,GAA6B;AACtE,QAAM,EAAE,gBAAgB,SAAS,QAAI;AAAA,IACpC,CAAE,WAAY;AACb,YAAM,iBAAiB,OAAQ,iBAAAA,KAAU;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": ["coreStore"]
+}

package/build/index.js

@@ -0,0 +1,31 @@
+"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/lazy-editor/src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Editor: () => import_component.Editor
+});
+module.exports = __toCommonJS(index_exports);
+var import_component = require("./component");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Editor
+});
+//# sourceMappingURL=index.js.map

package/build/index.js.map

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

package/build/lock-unlock.js

@@ -0,0 +1,35 @@
+"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/lazy-editor/src/lock-unlock.ts
+var lock_unlock_exports = {};
+__export(lock_unlock_exports, {
+  unlock: () => unlock
+});
+module.exports = __toCommonJS(lock_unlock_exports);
+var import_private_apis = require("@wordpress/private-apis");
+var { unlock } = (0, import_private_apis.__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"
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  unlock
+});
+//# sourceMappingURL=lock-unlock.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAAiE;AAE1D,IAAM,EAAE,OAAO,QAAI;AAAA,EACzB;AAAA,EACA;AACD;",
+  "names": []
+}