@wordpress/global-styles-ui 1.1.0

package/build/screen-revisions/use-global-styles-revisions.js

@@ -0,0 +1,163 @@
+"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);
+var use_global_styles_revisions_exports = {};
+__export(use_global_styles_revisions_exports, {
+  default: () => useGlobalStylesRevisions
+});
+module.exports = __toCommonJS(use_global_styles_revisions_exports);
+var import_data = require("@wordpress/data");
+var import_core_data = require("@wordpress/core-data");
+var import_element = require("@wordpress/element");
+var import_context = require("../context");
+const SITE_EDITOR_AUTHORS_QUERY = {
+  per_page: -1,
+  _fields: "id,name,avatar_urls",
+  context: "view",
+  capabilities: ["edit_theme_options"]
+};
+const DEFAULT_QUERY = { per_page: 100, page: 1 };
+const EMPTY_ARRAY = [];
+function useGlobalStylesRevisions({
+  query
+} = {}) {
+  const { user: userConfig } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  const _query = (0, import_element.useMemo)(
+    () => ({ ...DEFAULT_QUERY, ...query }),
+    [query]
+  );
+  const {
+    authors,
+    currentUser,
+    isDirty,
+    revisions,
+    isLoadingGlobalStylesRevisions,
+    revisionsCount
+  } = (0, import_data.useSelect)(
+    (select) => {
+      const {
+        __experimentalGetDirtyEntityRecords,
+        getCurrentUser,
+        getUsers,
+        getRevisions,
+        __experimentalGetCurrentGlobalStylesId,
+        getEntityRecord,
+        // @ts-expect-error
+        isResolving
+      } = select(import_core_data.store);
+      const dirtyEntityRecords = __experimentalGetDirtyEntityRecords() || [];
+      const _currentUser = getCurrentUser();
+      const _isDirty = dirtyEntityRecords.length > 0;
+      const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+      const globalStyles = globalStylesId ? getEntityRecord(
+        "root",
+        "globalStyles",
+        globalStylesId
+      ) : void 0;
+      const _revisionsCount = (
+        // @ts-expect-error - _links is not typed in GlobalStylesRevision
+        globalStyles?._links?.["version-history"]?.[0]?.count ?? 0
+      );
+      const globalStylesRevisions = globalStylesId ? getRevisions(
+        "root",
+        "globalStyles",
+        globalStylesId,
+        _query
+      ) || EMPTY_ARRAY : EMPTY_ARRAY;
+      const _authors = getUsers(SITE_EDITOR_AUTHORS_QUERY) || [];
+      const _isResolving = globalStylesId ? isResolving("getRevisions", [
+        "root",
+        "globalStyles",
+        globalStylesId,
+        _query
+      ]) : false;
+      return {
+        authors: _authors,
+        currentUser: _currentUser,
+        isDirty: _isDirty,
+        revisions: globalStylesRevisions,
+        isLoadingGlobalStylesRevisions: _isResolving,
+        revisionsCount: _revisionsCount
+      };
+    },
+    [_query]
+  );
+  return (0, import_element.useMemo)(() => {
+    if (!authors.length || isLoadingGlobalStylesRevisions) {
+      return {
+        revisions: EMPTY_ARRAY,
+        hasUnsavedChanges: isDirty,
+        isLoading: true,
+        revisionsCount
+      };
+    }
+    const _modifiedRevisions = revisions.map((revision) => {
+      return {
+        ...revision,
+        author: authors.find(
+          (author) => author.id === revision.author
+        )
+      };
+    });
+    const fetchedRevisionsCount = revisions.length;
+    if (fetchedRevisionsCount) {
+      if (_modifiedRevisions[0].id !== "unsaved" && _query.page === 1) {
+        _modifiedRevisions[0].isLatest = true;
+      }
+      if (isDirty && userConfig && Object.keys(userConfig).length > 0 && currentUser && _query.page === 1) {
+        const unsavedRevision = {
+          id: "unsaved",
+          styles: userConfig?.styles,
+          settings: userConfig?.settings,
+          _links: userConfig?._links,
+          author: {
+            name: currentUser?.name || "",
+            // @ts-expect-error - avatar_urls is not typed in User
+            avatar_urls: currentUser?.avatar_urls || {}
+          },
+          modified: /* @__PURE__ */ new Date()
+        };
+        _modifiedRevisions.unshift(unsavedRevision);
+      }
+      if (_query.per_page && _query.page === Math.ceil(revisionsCount / _query.per_page)) {
+        _modifiedRevisions.push({
+          id: "parent",
+          styles: {},
+          settings: {}
+        });
+      }
+    }
+    return {
+      revisions: _modifiedRevisions,
+      hasUnsavedChanges: isDirty,
+      isLoading: false,
+      revisionsCount
+    };
+  }, [
+    isDirty,
+    revisions,
+    currentUser,
+    authors,
+    userConfig,
+    isLoadingGlobalStylesRevisions,
+    revisionsCount,
+    _query.page,
+    _query.per_page
+  ]);
+}
+//# sourceMappingURL=use-global-styles-revisions.js.map

package/build/screen-revisions/use-global-styles-revisions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/screen-revisions/use-global-styles-revisions.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\tstore as coreStore,\n\ttype GlobalStylesRevision,\n} from '@wordpress/core-data';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from '../context';\nimport type { Revision, User } from './types';\n\ninterface RawRevision extends Omit< Revision, 'author' > {\n\tauthor?: number;\n}\n\ninterface Query {\n\tper_page?: number;\n\tpage?: number;\n}\n\ninterface UseGlobalStylesRevisionsParams {\n\tquery?: Query;\n}\n\ninterface UseGlobalStylesRevisionsReturn {\n\trevisions: Revision[];\n\thasUnsavedChanges: boolean;\n\tisLoading: boolean;\n\trevisionsCount: number;\n}\n\nconst SITE_EDITOR_AUTHORS_QUERY = {\n\tper_page: -1,\n\t_fields: 'id,name,avatar_urls',\n\tcontext: 'view',\n\tcapabilities: [ 'edit_theme_options' ],\n};\nconst DEFAULT_QUERY = { per_page: 100, page: 1 };\nconst EMPTY_ARRAY: RawRevision[] = [];\n\nexport default function useGlobalStylesRevisions( {\n\tquery,\n}: UseGlobalStylesRevisionsParams = {} ): UseGlobalStylesRevisionsReturn {\n\tconst { user: userConfig } = useContext( GlobalStylesContext );\n\tconst _query: Query = useMemo(\n\t\t() => ( { ...DEFAULT_QUERY, ...query } ),\n\t\t[ query ]\n\t);\n\tconst {\n\t\tauthors,\n\t\tcurrentUser,\n\t\tisDirty,\n\t\trevisions,\n\t\tisLoadingGlobalStylesRevisions,\n\t\trevisionsCount,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__experimentalGetDirtyEntityRecords,\n\t\t\t\tgetCurrentUser,\n\t\t\t\tgetUsers,\n\t\t\t\tgetRevisions,\n\t\t\t\t__experimentalGetCurrentGlobalStylesId,\n\t\t\t\tgetEntityRecord,\n\t\t\t\t// @ts-expect-error\n\t\t\t\tisResolving,\n\t\t\t} = select( coreStore );\n\t\t\tconst dirtyEntityRecords =\n\t\t\t\t__experimentalGetDirtyEntityRecords() || [];\n\t\t\tconst _currentUser = getCurrentUser();\n\t\t\tconst _isDirty = dirtyEntityRecords.length > 0;\n\t\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\t\tconst globalStyles = globalStylesId\n\t\t\t\t? getEntityRecord< GlobalStylesRevision >(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\tglobalStylesId\n\t\t\t\t  )\n\t\t\t\t: undefined;\n\t\t\tconst _revisionsCount: number =\n\t\t\t\t// @ts-expect-error - _links is not typed in GlobalStylesRevision\n\t\t\t\tglobalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;\n\t\t\t// @ts-expect-error - getRevisions is not fully typed\n\t\t\tconst globalStylesRevisions: RawRevision[] = globalStylesId\n\t\t\t\t? getRevisions(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\tglobalStylesId,\n\t\t\t\t\t\t_query\n\t\t\t\t  ) || EMPTY_ARRAY\n\t\t\t\t: EMPTY_ARRAY;\n\t\t\t// @ts-expect-error - getUsers is not fully typed\n\t\t\tconst _authors: User[] =\n\t\t\t\tgetUsers( SITE_EDITOR_AUTHORS_QUERY ) || [];\n\t\t\tconst _isResolving = globalStylesId\n\t\t\t\t? isResolving( 'getRevisions', [\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\tglobalStylesId,\n\t\t\t\t\t\t_query,\n\t\t\t\t  ] )\n\t\t\t\t: false;\n\t\t\treturn {\n\t\t\t\tauthors: _authors,\n\t\t\t\tcurrentUser: _currentUser,\n\t\t\t\tisDirty: _isDirty,\n\t\t\t\trevisions: globalStylesRevisions,\n\t\t\t\tisLoadingGlobalStylesRevisions: _isResolving,\n\t\t\t\trevisionsCount: _revisionsCount,\n\t\t\t};\n\t\t},\n\t\t[ _query ]\n\t);\n\treturn useMemo( (): UseGlobalStylesRevisionsReturn => {\n\t\tif ( ! authors.length || isLoadingGlobalStylesRevisions ) {\n\t\t\treturn {\n\t\t\t\trevisions: EMPTY_ARRAY as Revision[],\n\t\t\t\thasUnsavedChanges: isDirty,\n\t\t\t\tisLoading: true,\n\t\t\t\trevisionsCount,\n\t\t\t};\n\t\t}\n\n\t\t// Adds author details to each revision.\n\t\tconst _modifiedRevisions: Revision[] = revisions.map( ( revision ) => {\n\t\t\treturn {\n\t\t\t\t...revision,\n\t\t\t\tauthor: authors.find(\n\t\t\t\t\t( author ) => author.id === revision.author\n\t\t\t\t),\n\t\t\t};\n\t\t} );\n\n\t\tconst fetchedRevisionsCount = revisions.length;\n\n\t\tif ( fetchedRevisionsCount ) {\n\t\t\t// Flags the most current saved revision.\n\t\t\tif (\n\t\t\t\t_modifiedRevisions[ 0 ].id !== 'unsaved' &&\n\t\t\t\t_query.page === 1\n\t\t\t) {\n\t\t\t\t_modifiedRevisions[ 0 ].isLatest = true;\n\t\t\t}\n\n\t\t\t// Adds an item for unsaved changes.\n\t\t\tif (\n\t\t\t\tisDirty &&\n\t\t\t\tuserConfig &&\n\t\t\t\tObject.keys( userConfig ).length > 0 &&\n\t\t\t\tcurrentUser &&\n\t\t\t\t_query.page === 1\n\t\t\t) {\n\t\t\t\tconst unsavedRevision: Revision = {\n\t\t\t\t\tid: 'unsaved',\n\t\t\t\t\tstyles: userConfig?.styles,\n\t\t\t\t\tsettings: userConfig?.settings,\n\t\t\t\t\t_links: userConfig?._links,\n\t\t\t\t\tauthor: {\n\t\t\t\t\t\tname: currentUser?.name || '',\n\t\t\t\t\t\t// @ts-expect-error - avatar_urls is not typed in User\n\t\t\t\t\t\tavatar_urls: currentUser?.avatar_urls || {},\n\t\t\t\t\t},\n\t\t\t\t\tmodified: new Date(),\n\t\t\t\t};\n\n\t\t\t\t_modifiedRevisions.unshift( unsavedRevision );\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t_query.per_page &&\n\t\t\t\t_query.page === Math.ceil( revisionsCount / _query.per_page )\n\t\t\t) {\n\t\t\t\t// Adds an item for the default theme styles.\n\t\t\t\t_modifiedRevisions.push( {\n\t\t\t\t\tid: 'parent',\n\t\t\t\t\tstyles: {},\n\t\t\t\t\tsettings: {},\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\trevisions: _modifiedRevisions,\n\t\t\thasUnsavedChanges: isDirty,\n\t\t\tisLoading: false,\n\t\t\trevisionsCount,\n\t\t};\n\t}, [\n\t\tisDirty,\n\t\trevisions,\n\t\tcurrentUser,\n\t\tauthors,\n\t\tuserConfig,\n\t\tisLoadingGlobalStylesRevisions,\n\t\trevisionsCount,\n\t\t_query.page,\n\t\t_query.per_page,\n\t] );\n}\n"],
+  "mappings": "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",
+  "names": ["coreStore"]
+}

package/build/screen-root.js

@@ -0,0 +1,134 @@
+"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);
+var screen_root_exports = {};
+__export(screen_root_exports, {
+  default: () => screen_root_default
+});
+module.exports = __toCommonJS(screen_root_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_data = require("@wordpress/data");
+var import_core_data = require("@wordpress/core-data");
+var import_icon_with_current_color = require("./icon-with-current-color");
+var import_navigation_button = require("./navigation-button");
+var import_root_menu = __toESM(require("./root-menu"));
+var import_preview_styles = __toESM(require("./preview-styles"));
+function ScreenRoot() {
+  const { hasVariations, canEditCSS } = (0, import_data.useSelect)((select) => {
+    const {
+      __experimentalGetCurrentThemeGlobalStylesVariations,
+      __experimentalGetCurrentGlobalStylesId,
+      getEntityRecord
+    } = select(import_core_data.store);
+    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+    const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
+    return {
+      hasVariations: !!__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
+      canEditCSS: !!globalStyles?._links?.["wp:action-edit-css"]
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.Card,
+    {
+      size: "small",
+      isBorderless: true,
+      className: "global-styles-ui-screen-root",
+      isRounded: false,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Card, { className: "global-styles-ui-screen-root__active-style-tile", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardMedia, { className: "global-styles-ui-screen-root__active-style-tile-preview", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_preview_styles.default, {}) }) }),
+          hasVariations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_button.NavigationButtonAsItem, { path: "/variations", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: (0, import_i18n.__)("Browse styles") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icon_with_current_color.IconWithCurrentColor,
+              {
+                icon: (0, import_i18n.isRTL)() ? import_icons.chevronLeft : import_icons.chevronRight
+              }
+            )
+          ] }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_root_menu.default, {})
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalSpacer,
+            {
+              as: "p",
+              paddingTop: 2,
+              paddingX: "13px",
+              marginBottom: 4,
+              children: (0, import_i18n.__)(
+                "Customize the appearance of specific blocks for the whole site."
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_button.NavigationButtonAsItem, { path: "/blocks", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: (0, import_i18n.__)("Blocks") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icon_with_current_color.IconWithCurrentColor,
+              {
+                icon: (0, import_i18n.isRTL)() ? import_icons.chevronLeft : import_icons.chevronRight
+              }
+            )
+          ] }) }) })
+        ] }),
+        canEditCSS && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardDivider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.CardBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalSpacer,
+              {
+                as: "p",
+                paddingTop: 2,
+                paddingX: "13px",
+                marginBottom: 4,
+                children: (0, import_i18n.__)(
+                  "Add your own CSS to customize the appearance and layout of your site."
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_button.NavigationButtonAsItem, { path: "/css", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: (0, import_i18n.__)("Additional CSS") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_icon_with_current_color.IconWithCurrentColor,
+                {
+                  icon: (0, import_i18n.isRTL)() ? import_icons.chevronLeft : import_icons.chevronRight
+                }
+              )
+            ] }) }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var screen_root_default = ScreenRoot;
+//# sourceMappingURL=screen-root.js.map

package/build/screen-root.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-root.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport RootMenu from './root-menu';\nimport PreviewStyles from './preview-styles';\n\nfunction ScreenRoot() {\n\tconst { hasVariations, canEditCSS } = useSelect( ( select ) => {\n\t\tconst {\n\t\t\t__experimentalGetCurrentThemeGlobalStylesVariations,\n\t\t\t__experimentalGetCurrentGlobalStylesId,\n\t\t\tgetEntityRecord,\n\t\t} = select( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\thasVariations:\n\t\t\t\t!! __experimentalGetCurrentThemeGlobalStylesVariations()\n\t\t\t\t\t?.length,\n\t\t\tcanEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[\n\t\t\t\t'wp:action-edit-css'\n\t\t\t],\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card\n\t\t\tsize=\"small\"\n\t\t\tisBorderless\n\t\t\tclassName=\"global-styles-ui-screen-root\"\n\t\t\tisRounded={ false }\n\t\t>\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<Card className=\"global-styles-ui-screen-root__active-style-tile\">\n\t\t\t\t\t\t<CardMedia className=\"global-styles-ui-screen-root__active-style-tile-preview\">\n\t\t\t\t\t\t\t<PreviewStyles />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ hasVariations && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem path=\"/variations\">\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<RootMenu />\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<Spacer\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t) }\n\t\t\t\t</Spacer>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<NavigationButtonAsItem path=\"/blocks\">\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\n\t\t\t{ canEditCSS && (\n\t\t\t\t<>\n\t\t\t\t\t<CardDivider />\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem path=\"/css\">\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DO;AA3DP,wBAUO;AACP,kBAA0B;AAC1B,mBAA0C;AAC1C,kBAA0B;AAC1B,uBAAmC;AAMnC,qCAAqC;AACrC,+BAAuC;AACvC,uBAAqB;AACrB,4BAA0B;AAE1B,SAAS,aAAa;AACrB,QAAM,EAAE,eAAe,WAAW,QAAI,uBAAW,CAAE,WAAY;AAC9D,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACD,IAAI,OAAQ,iBAAAA,KAAU;AAEtB,UAAM,iBAAiB,uCAAuC;AAC9D,UAAM,eAAe,iBAClB,gBAAiB,QAAQ,gBAAgB,cAAe,IACxD;AAEH,WAAO;AAAA,MACN,eACC,CAAC,CAAE,oDAAoD,GACpD;AAAA,MACJ,YAAY,CAAC,CAAI,cAAsC,SACtD,oBACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAU;AAAA,MACV,WAAY;AAAA,MAEZ;AAAA,oDAAC,8BACA,uDAAC,kBAAAC,sBAAA,EAAO,SAAU,GACjB;AAAA,sDAAC,0BAAK,WAAU,mDACf,sDAAC,+BAAU,WAAU,2DACpB,sDAAC,sBAAAC,SAAA,EAAc,GAChB,GACD;AAAA,UACE,iBACD,4CAAC,kBAAAC,yBAAA,EACA,sDAAC,mDAAuB,MAAK,eAC5B,uDAAC,kBAAAC,sBAAA,EAAO,SAAQ,iBACf;AAAA,wDAAC,8BACE,8BAAI,eAAgB,GACvB;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,UACC,mBAAM,IAAI,2BAAc;AAAA;AAAA,YAE1B;AAAA,aACD,GACD,GACD;AAAA,UAED,4CAAC,iBAAAC,SAAA,EAAS;AAAA,WACX,GACD;AAAA,QAEA,4CAAC,iCAAY;AAAA,QAEb,6CAAC,8BACA;AAAA;AAAA,YAAC,kBAAAC;AAAA,YAAA;AAAA,cACA,IAAG;AAAA,cACH,YAAa;AAAA,cACb,UAAS;AAAA,cACT,cAAe;AAAA,cAEb;AAAA,gBACD;AAAA,cACD;AAAA;AAAA,UACD;AAAA,UACA,4CAAC,kBAAAH,yBAAA,EACA,sDAAC,mDAAuB,MAAK,WAC5B,uDAAC,kBAAAC,sBAAA,EAAO,SAAQ,iBACf;AAAA,wDAAC,8BAAW,8BAAI,QAAS,GAAG;AAAA,YAC5B;AAAA,cAAC;AAAA;AAAA,gBACA,UAAO,mBAAM,IAAI,2BAAc;AAAA;AAAA,YAChC;AAAA,aACD,GACD,GACD;AAAA,WACD;AAAA,QAEE,cACD,4EACC;AAAA,sDAAC,iCAAY;AAAA,UACb,6CAAC,8BACA;AAAA;AAAA,cAAC,kBAAAE;AAAA,cAAA;AAAA,gBACA,IAAG;AAAA,gBACH,YAAa;AAAA,gBACb,UAAS;AAAA,gBACT,cAAe;AAAA,gBAEb;AAAA,kBACD;AAAA,gBACD;AAAA;AAAA,YACD;AAAA,YACA,4CAAC,kBAAAH,yBAAA,EACA,sDAAC,mDAAuB,MAAK,QAC5B,uDAAC,kBAAAC,sBAAA,EAAO,SAAQ,iBACf;AAAA,0DAAC,8BACE,8BAAI,gBAAiB,GACxB;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,UACC,mBAAM,IAAI,2BAAc;AAAA;AAAA,cAE1B;AAAA,eACD,GACD,GACD;AAAA,aACD;AAAA,WACD;AAAA;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,sBAAQ;",
+  "names": ["coreStore", "VStack", "PreviewStyles", "ItemGroup", "HStack", "RootMenu", "Spacer"]
+}

package/build/screen-shadows.js

@@ -0,0 +1,49 @@
+"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);
+var screen_shadows_exports = {};
+__export(screen_shadows_exports, {
+  ScreenShadows: () => ScreenShadows,
+  ScreenShadowsEdit: () => ScreenShadowsEdit
+});
+module.exports = __toCommonJS(screen_shadows_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_shadows_panel = __toESM(require("./shadows-panel"));
+var import_shadows_edit_panel = __toESM(require("./shadows-edit-panel"));
+function ScreenShadows() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shadows_panel.default, {});
+}
+function ScreenShadowsEdit() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shadows_edit_panel.default, {});
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScreenShadows,
+  ScreenShadowsEdit
+});
+//# sourceMappingURL=screen-shadows.js.map

package/build/screen-shadows.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-shadows.tsx"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport ShadowsPanel from './shadows-panel';\nimport ShadowsEditPanel from './shadows-edit-panel';\n\nexport function ScreenShadows() {\n\treturn <ShadowsPanel />;\n}\n\nexport function ScreenShadowsEdit() {\n\treturn <ShadowsEditPanel />;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOQ;AAJR,2BAAyB;AACzB,gCAA6B;AAEtB,SAAS,gBAAgB;AAC/B,SAAO,4CAAC,qBAAAA,SAAA,EAAa;AACtB;AAEO,SAAS,oBAAoB;AACnC,SAAO,4CAAC,0BAAAC,SAAA,EAAiB;AAC1B;",
+  "names": ["ShadowsPanel", "ShadowsEditPanel"]
+}

package/build/screen-style-variations.js

@@ -0,0 +1,52 @@
+"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);
+var screen_style_variations_exports = {};
+__export(screen_style_variations_exports, {
+  default: () => screen_style_variations_default
+});
+module.exports = __toCommonJS(screen_style_variations_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_screen_header = require("./screen-header");
+var import_style_variations_content = require("./style-variations-content");
+function ScreenStyleVariations() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_screen_header.ScreenHeader,
+      {
+        title: (0, import_i18n.__)("Browse styles"),
+        description: (0, import_i18n.__)(
+          "Choose a variation to change the look of the site."
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Card,
+      {
+        size: "small",
+        isBorderless: true,
+        className: "global-styles-ui-screen-style-variations",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style_variations_content.StyleVariationsContent, {}) })
+      }
+    )
+  ] });
+}
+var screen_style_variations_default = ScreenStyleVariations;
+//# sourceMappingURL=screen-style-variations.js.map

package/build/screen-style-variations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-style-variations.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Card, CardBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport { StyleVariationsContent } from './style-variations-content';\n\nfunction ScreenStyleVariations() {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card\n\t\t\t\tsize=\"small\"\n\t\t\t\tisBorderless\n\t\t\t\tclassName=\"global-styles-ui-screen-style-variations\"\n\t\t\t>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<StyleVariationsContent />\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcE;AAXF,wBAA+B;AAC/B,kBAAmB;AAKnB,2BAA6B;AAC7B,sCAAuC;AAEvC,SAAS,wBAAwB;AAChC,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAQ,gBAAI,eAAgB;AAAA,QAC5B,iBAAc;AAAA,UACb;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,WAAU;AAAA,QAEV,sDAAC,8BACA,sDAAC,0DAAuB,GACzB;AAAA;AAAA,IACD;AAAA,KACD;AAEF;AAEA,IAAO,kCAAQ;",
+  "names": []
+}

package/build/screen-typography-element.js

@@ -0,0 +1,167 @@
+"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);
+var screen_typography_element_exports = {};
+__export(screen_typography_element_exports, {
+  default: () => screen_typography_element_default
+});
+module.exports = __toCommonJS(screen_typography_element_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_typography_panel = __toESM(require("./typography-panel"));
+var import_screen_header = require("./screen-header");
+var import_typography_preview = __toESM(require("./typography-preview"));
+const elements = {
+  text: {
+    description: (0, import_i18n.__)("Manage the fonts used on the site."),
+    title: (0, import_i18n.__)("Text")
+  },
+  link: {
+    description: (0, import_i18n.__)("Manage the fonts and typography used on the links."),
+    title: (0, import_i18n.__)("Links")
+  },
+  heading: {
+    description: (0, import_i18n.__)("Manage the fonts and typography used on headings."),
+    title: (0, import_i18n.__)("Headings")
+  },
+  caption: {
+    description: (0, import_i18n.__)("Manage the fonts and typography used on captions."),
+    title: (0, import_i18n.__)("Captions")
+  },
+  button: {
+    description: (0, import_i18n.__)("Manage the fonts and typography used on buttons."),
+    title: (0, import_i18n.__)("Buttons")
+  }
+};
+function ScreenTypographyElement({ element }) {
+  const [headingLevel, setHeadingLevel] = (0, import_element.useState)("heading");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_screen_header.ScreenHeader,
+      {
+        title: elements[element].title,
+        description: elements[element].description
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { marginX: 4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_typography_preview.default,
+      {
+        element,
+        headingLevel
+      }
+    ) }),
+    element === "heading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { marginX: 4, marginBottom: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.__experimentalToggleGroupControl,
+      {
+        label: (0, import_i18n.__)("Select heading level"),
+        hideLabelFromVision: true,
+        value: headingLevel,
+        onChange: (value) => setHeadingLevel(value),
+        isBlock: true,
+        size: "__unstable-large",
+        __nextHasNoMarginBottom: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToggleGroupControlOption,
+            {
+              value: "heading",
+              showTooltip: true,
+              "aria-label": (0, import_i18n.__)("All headings"),
+              label: (0, import_i18n._x)("All", "heading levels")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToggleGroupControlOption,
+            {
+              value: "h1",
+              showTooltip: true,
+              "aria-label": (0, import_i18n.__)("Heading 1"),
+              label: (0, import_i18n.__)("H1")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToggleGroupControlOption,
+            {
+              value: "h2",
+              showTooltip: true,
+              "aria-label": (0, import_i18n.__)("Heading 2"),
+              label: (0, import_i18n.__)("H2")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToggleGroupControlOption,
+            {
+              value: "h3",
+              showTooltip: true,
+              "aria-label": (0, import_i18n.__)("Heading 3"),
+              label: (0, import_i18n.__)("H3")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToggleGroupControlOption,
+            {
+              value: "h4",
+              showTooltip: true,
+              "aria-label": (0, import_i18n.__)("Heading 4"),
+              label: (0, import_i18n.__)("H4")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToggleGroupControlOption,
+            {
+              value: "h5",
+              showTooltip: true,
+              "aria-label": (0, import_i18n.__)("Heading 5"),
+              label: (0, import_i18n.__)("H5")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToggleGroupControlOption,
+            {
+              value: "h6",
+              showTooltip: true,
+              "aria-label": (0, import_i18n.__)("Heading 6"),
+              label: (0, import_i18n.__)("H6")
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_typography_panel.default,
+      {
+        element,
+        headingLevel
+      }
+    )
+  ] });
+}
+var screen_typography_element_default = ScreenTypographyElement;
+//# sourceMappingURL=screen-typography-element.js.map

package/build/screen-typography-element.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-typography-element.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport { ScreenHeader } from './screen-header';\nimport TypographyPreview from './typography-preview';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n\theading: {\n\t\tdescription: __( 'Manage the fonts and typography used on headings.' ),\n\t\ttitle: __( 'Headings' ),\n\t},\n\tcaption: {\n\t\tdescription: __( 'Manage the fonts and typography used on captions.' ),\n\t\ttitle: __( 'Captions' ),\n\t},\n\tbutton: {\n\t\tdescription: __( 'Manage the fonts and typography used on buttons.' ),\n\t\ttitle: __( 'Buttons' ),\n\t},\n};\n\ninterface ScreenTypographyElementProps {\n\telement: keyof typeof elements;\n}\n\nfunction ScreenTypographyElement( { element }: ScreenTypographyElementProps ) {\n\tconst [ headingLevel, setHeadingLevel ] = useState( 'heading' );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<Spacer marginX={ 4 }>\n\t\t\t\t<TypographyPreview\n\t\t\t\t\telement={ element }\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t\t{ element === 'heading' && (\n\t\t\t\t<Spacer marginX={ 4 } marginBottom=\"1em\">\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ headingLevel }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tsetHeadingLevel( value as string )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\taria-label={ __( 'All headings' ) }\n\t\t\t\t\t\t\tlabel={ _x( 'All', 'heading levels' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h1\"\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\taria-label={ __( 'Heading 1' ) }\n\t\t\t\t\t\t\tlabel={ __( 'H1' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h2\"\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\taria-label={ __( 'Heading 2' ) }\n\t\t\t\t\t\t\tlabel={ __( 'H2' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h3\"\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\taria-label={ __( 'Heading 3' ) }\n\t\t\t\t\t\t\tlabel={ __( 'H3' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h4\"\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\taria-label={ __( 'Heading 4' ) }\n\t\t\t\t\t\t\tlabel={ __( 'H4' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h5\"\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\taria-label={ __( 'Heading 5' ) }\n\t\t\t\t\t\t\tlabel={ __( 'H5' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h6\"\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\taria-label={ __( 'Heading 6' ) }\n\t\t\t\t\t\t\tlabel={ __( 'H6' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t</Spacer>\n\t\t\t) }\n\t\t\t<TypographyPanel\n\t\t\t\telement={ element }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"],
+  "mappings": "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",
+  "names": ["Spacer", "TypographyPreview", "ToggleGroupControl", "ToggleGroupControlOption", "TypographyPanel"]
+}