@wordpress/global-styles-ui 1.1.0

package/build/provider.js

@@ -0,0 +1,54 @@
+"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 provider_exports = {};
+__export(provider_exports, {
+  GlobalStylesProvider: () => GlobalStylesProvider
+});
+module.exports = __toCommonJS(provider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_element = require("@wordpress/element");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_context = require("./context");
+function GlobalStylesProvider({
+  children,
+  value,
+  baseValue,
+  onChange,
+  fontLibraryEnabled
+}) {
+  const merged = (0, import_element.useMemo)(() => {
+    return (0, import_global_styles_engine.mergeGlobalStyles)(baseValue, value);
+  }, [baseValue, value]);
+  const contextValue = (0, import_element.useMemo)(
+    () => ({
+      user: value,
+      base: baseValue,
+      merged,
+      onChange,
+      fontLibraryEnabled
+    }),
+    [value, baseValue, merged, onChange, fontLibraryEnabled]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.GlobalStylesContext.Provider, { value: contextValue, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlobalStylesProvider
+});
+//# sourceMappingURL=provider.js.map

package/build/provider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/provider.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\nimport { mergeGlobalStyles } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\n\ninterface GlobalStylesProviderProps {\n\tchildren: ReactNode;\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\tfontLibraryEnabled?: boolean;\n}\n\nexport function GlobalStylesProvider( {\n\tchildren,\n\tvalue,\n\tbaseValue,\n\tonChange,\n\tfontLibraryEnabled,\n}: GlobalStylesProviderProps ) {\n\t// Compute merged with memoization since merging can be expensive\n\tconst merged = useMemo( () => {\n\t\treturn mergeGlobalStyles( baseValue, value );\n\t}, [ baseValue, value ] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tuser: value,\n\t\t\tbase: baseValue,\n\t\t\tmerged,\n\t\t\tonChange,\n\t\t\tfontLibraryEnabled,\n\t\t} ),\n\t\t[ value, baseValue, merged, onChange, fontLibraryEnabled ]\n\t);\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDE;AAzCF,qBAAwB;AAExB,kCAAkC;AAKlC,qBAAoC;AAU7B,SAAS,qBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+B;AAE9B,QAAM,aAAS,wBAAS,MAAM;AAC7B,eAAO,+CAAmB,WAAW,KAAM;AAAA,EAC5C,GAAG,CAAE,WAAW,KAAM,CAAE;AAExB,QAAM,mBAAe;AAAA,IACpB,OAAQ;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA,CAAE,OAAO,WAAW,QAAQ,UAAU,kBAAmB;AAAA,EAC1D;AAEA,SACC,4CAAC,mCAAoB,UAApB,EAA6B,OAAQ,cACnC,UACH;AAEF;",
+  "names": []
+}

package/build/root-menu.js

@@ -0,0 +1,72 @@
+"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 root_menu_exports = {};
+__export(root_menu_exports, {
+  default: () => root_menu_default
+});
+module.exports = __toCommonJS(root_menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_icons = require("@wordpress/icons");
+var import_i18n = require("@wordpress/i18n");
+var import_block_editor = require("@wordpress/block-editor");
+var import_navigation_button = require("./navigation-button");
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./lock-unlock");
+const {
+  useHasDimensionsPanel,
+  useHasTypographyPanel,
+  useHasColorPanel,
+  useSettingsForBlockElement,
+  useHasBackgroundPanel
+} = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+function RootMenu() {
+  const [rawSettings] = (0, import_hooks.useSetting)("");
+  const settings = useSettingsForBlockElement(rawSettings);
+  const hasBackgroundPanel = useHasBackgroundPanel(rawSettings);
+  const hasTypographyPanel = useHasTypographyPanel(settings);
+  const hasColorPanel = useHasColorPanel(settings);
+  const hasShadowPanel = true;
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
+  const hasLayoutPanel = hasDimensionsPanel;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalItemGroup, { children: [
+    hasTypographyPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_navigation_button.NavigationButtonAsItem,
+      {
+        icon: import_icons.typography,
+        path: "/typography",
+        children: (0, import_i18n.__)("Typography")
+      }
+    ),
+    hasColorPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_button.NavigationButtonAsItem, { icon: import_icons.color, path: "/colors", children: (0, import_i18n.__)("Colors") }),
+    hasBackgroundPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_navigation_button.NavigationButtonAsItem,
+      {
+        icon: import_icons.background,
+        path: "/background",
+        "aria-label": (0, import_i18n.__)("Background styles"),
+        children: (0, import_i18n.__)("Background")
+      }
+    ),
+    hasShadowPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_button.NavigationButtonAsItem, { icon: import_icons.shadow, path: "/shadows", children: (0, import_i18n.__)("Shadows") }),
+    hasLayoutPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_button.NavigationButtonAsItem, { icon: import_icons.layout, path: "/layout", children: (0, import_i18n.__)("Layout") })
+  ] }) });
+}
+var root_menu_default = RootMenu;
+//# sourceMappingURL=root-menu.js.map

package/build/root-menu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/root-menu.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport {\n\tbackground,\n\ttypography,\n\tcolor,\n\tlayout,\n\tshadow as shadowIcon,\n} from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport type { GlobalStylesSettings } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseSettingsForBlockElement,\n\tuseHasBackgroundPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\t// Get the raw settings from our custom hook\n\tconst [ rawSettings ] = useSetting< GlobalStylesSettings >( '' );\n\n\t// Process settings the same way as Gutenberg\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\t// Use the same panel detection logic as Gutenberg\n\tconst hasBackgroundPanel = useHasBackgroundPanel( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasShadowPanel = true; // Same as Gutenberg\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath=\"/typography\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem icon={ color } path=\"/colors\">\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ background }\n\t\t\t\t\t\tpath=\"/background\"\n\t\t\t\t\t\taria-label={ __( 'Background styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Background' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasShadowPanel && (\n\t\t\t\t\t<NavigationButtonAsItem icon={ shadowIcon } path=\"/shadows\">\n\t\t\t\t\t\t{ __( 'Shadows' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem icon={ layout } path=\"/layout\">\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CE;AA5CF,wBAAqD;AACrD,mBAMO;AACP,kBAAmB;AAEnB,0BAAsD;AAMtD,+BAAuC;AACvC,mBAA2B;AAC3B,yBAAuB;AAEvB,MAAM;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,QAAI,2BAAQ,oBAAAA,WAAuB;AAEnC,SAAS,WAAW;AAEnB,QAAM,CAAE,WAAY,QAAI,yBAAoC,EAAG;AAG/D,QAAM,WAAW,2BAA4B,WAAY;AAGzD,QAAM,qBAAqB,sBAAuB,WAAY;AAC9D,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,gBAAgB,iBAAkB,QAAS;AACjD,QAAM,iBAAiB;AACvB,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,iBAAiB;AAEvB,SACC,2EACC,uDAAC,kBAAAC,yBAAA,EACE;AAAA,0BACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAK;AAAA,QAEH,8BAAI,YAAa;AAAA;AAAA,IACpB;AAAA,IAEC,iBACD,4CAAC,mDAAuB,MAAO,oBAAQ,MAAK,WACzC,8BAAI,QAAS,GAChB;AAAA,IAEC,sBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAK;AAAA,QACL,kBAAa,gBAAI,mBAAoB;AAAA,QAEnC,8BAAI,YAAa;AAAA;AAAA,IACpB;AAAA,IAEC,kBACD,4CAAC,mDAAuB,MAAO,aAAAC,QAAa,MAAK,YAC9C,8BAAI,SAAU,GACjB;AAAA,IAEC,kBACD,4CAAC,mDAAuB,MAAO,qBAAS,MAAK,WAC1C,8BAAI,QAAS,GAChB;AAAA,KAEF,GACD;AAEF;AAEA,IAAO,oBAAQ;",
+  "names": ["blockEditorPrivateApis", "ItemGroup", "shadowIcon"]
+}

package/build/screen-background.js

@@ -0,0 +1,58 @@
+"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_background_exports = {};
+__export(screen_background_exports, {
+  default: () => screen_background_default
+});
+module.exports = __toCommonJS(screen_background_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_block_editor = require("@wordpress/block-editor");
+var import_components = require("@wordpress/components");
+var import_background_panel = __toESM(require("./background-panel"));
+var import_screen_header = require("./screen-header");
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./lock-unlock");
+const { useHasBackgroundPanel } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+function ScreenBackground() {
+  const [settings] = (0, import_hooks.useSetting)("");
+  const hasBackgroundPanel = useHasBackgroundPanel(settings);
+  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.__)("Background"),
+        description: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { children: (0, import_i18n.__)("Set styles for the site's background.") })
+      }
+    ),
+    hasBackgroundPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_background_panel.default, {})
+  ] });
+}
+var screen_background_default = ScreenBackground;
+//# sourceMappingURL=screen-background.js.map

package/build/screen-background.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-background.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __experimentalText as Text } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BackgroundPanel from './background-panel';\nimport { ScreenHeader } from './screen-header';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useHasBackgroundPanel } = unlock( blockEditorPrivateApis );\n\nfunction ScreenBackground() {\n\tconst [ settings ] = useSetting( '' );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __( \"Set styles for the site's background.\" ) }\n\t\t\t\t\t</Text>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenBackground;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBE;AAnBF,kBAAmB;AAEnB,0BAAsD;AACtD,wBAA2C;AAK3C,8BAA4B;AAC5B,2BAA6B;AAC7B,mBAA2B;AAC3B,yBAAuB;AAEvB,MAAM,EAAE,sBAAsB,QAAI,2BAAQ,oBAAAA,WAAuB;AAEjE,SAAS,mBAAmB;AAC3B,QAAM,CAAE,QAAS,QAAI,yBAAY,EAAG;AACpC,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAQ,gBAAI,YAAa;AAAA,QACzB,aACC,4CAAC,kBAAAC,oBAAA,EACE,8BAAI,uCAAwC,GAC/C;AAAA;AAAA,IAEF;AAAA,IACE,sBAAsB,4CAAC,wBAAAC,SAAA,EAAgB;AAAA,KAC1C;AAEF;AAEA,IAAO,4BAAQ;",
+  "names": ["blockEditorPrivateApis", "Text", "BackgroundPanel"]
+}

package/build/screen-block-list.js

@@ -0,0 +1,160 @@
+"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_block_list_exports = {};
+__export(screen_block_list_exports, {
+  default: () => screen_block_list_default,
+  useBlockHasGlobalStyles: () => useBlockHasGlobalStyles
+});
+module.exports = __toCommonJS(screen_block_list_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_blocks = require("@wordpress/blocks");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_block_editor = require("@wordpress/block-editor");
+var import_compose = require("@wordpress/compose");
+var import_a11y = require("@wordpress/a11y");
+var import_variations_panel = require("./variations/variations-panel");
+var import_screen_header = require("./screen-header");
+var import_navigation_button = require("./navigation-button");
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./lock-unlock");
+const {
+  useHasDimensionsPanel,
+  useHasTypographyPanel,
+  useHasBorderPanel,
+  useSettingsForBlockElement,
+  useHasColorPanel
+} = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+function useSortedBlockTypes() {
+  const blockItems = (0, import_data.useSelect)(
+    (select) => select(import_blocks.store).getBlockTypes(),
+    []
+  );
+  const groupByType = (blocks, block) => {
+    const { core, noncore } = blocks;
+    const type = block.name.startsWith("core/") ? core : noncore;
+    type.push(block);
+    return blocks;
+  };
+  const { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(
+    groupByType,
+    { core: [], noncore: [] }
+  );
+  return [...coreItems, ...nonCoreItems];
+}
+function useBlockHasGlobalStyles(blockName) {
+  const [rawSettings] = (0, import_hooks.useSetting)("", blockName);
+  const settings = useSettingsForBlockElement(rawSettings, blockName);
+  const hasTypographyPanel = useHasTypographyPanel(settings);
+  const hasColorPanel = useHasColorPanel(settings);
+  const hasBorderPanel = useHasBorderPanel(settings);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
+  const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+  const hasVariationsPanel = !!(0, import_variations_panel.useBlockVariations)(blockName)?.length;
+  const hasGlobalStyles = hasTypographyPanel || hasColorPanel || hasLayoutPanel || hasVariationsPanel;
+  return hasGlobalStyles;
+}
+function BlockMenuItem({ block }) {
+  const hasBlockMenuItem = useBlockHasGlobalStyles(block.name);
+  if (!hasBlockMenuItem) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_navigation_button.NavigationButtonAsItem,
+    {
+      path: "/blocks/" + encodeURIComponent(block.name),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockIcon, { icon: block.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: block.title })
+      ] })
+    }
+  );
+}
+function BlockList({ filterValue }) {
+  const sortedBlockTypes = useSortedBlockTypes();
+  const debouncedSpeak = (0, import_compose.useDebounce)(import_a11y.speak, 500);
+  const { isMatchingSearchTerm } = (0, import_data.useSelect)(import_blocks.store);
+  const filteredBlockTypes = !filterValue ? sortedBlockTypes : sortedBlockTypes.filter(
+    (blockType) => isMatchingSearchTerm(blockType, filterValue)
+  );
+  const blockTypesListRef = (0, import_element.useRef)(null);
+  (0, import_element.useEffect)(() => {
+    if (!filterValue) {
+      return;
+    }
+    const count = blockTypesListRef.current?.childElementCount || 0;
+    const resultsFoundMessage = (0, import_i18n.sprintf)(
+      /* translators: %d: number of results. */
+      (0, import_i18n._n)("%d result found.", "%d results found.", count),
+      count
+    );
+    debouncedSpeak(resultsFoundMessage, "polite");
+  }, [filterValue, debouncedSpeak]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: blockTypesListRef,
+      className: "global-styles-ui-block-types-item-list",
+      role: "list",
+      children: filteredBlockTypes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { align: "center", as: "p", children: (0, import_i18n.__)("No blocks found.") }) : filteredBlockTypes.map((block) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        BlockMenuItem,
+        {
+          block
+        },
+        "menu-itemblock-" + block.name
+      ))
+    }
+  );
+}
+const MemoizedBlockList = (0, import_element.memo)(BlockList);
+function ScreenBlockList() {
+  const [filterValue, setFilterValue] = (0, import_element.useState)("");
+  const deferredFilterValue = (0, import_element.useDeferredValue)(filterValue);
+  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.__)("Blocks"),
+        description: (0, import_i18n.__)(
+          "Customize the appearance of specific blocks and for the whole site."
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.SearchControl,
+      {
+        __nextHasNoMarginBottom: true,
+        className: "global-styles-ui-block-types-search",
+        onChange: setFilterValue,
+        value: filterValue,
+        label: (0, import_i18n.__)("Search"),
+        placeholder: (0, import_i18n.__)("Search")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemoizedBlockList, { filterValue: deferredFilterValue })
+  ] });
+}
+var screen_block_list_default = ScreenBlockList;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBlockHasGlobalStyles
+});
+//# sourceMappingURL=screen-block-list.js.map

package/build/screen-block-list.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-block-list.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseDeferredValue,\n\tmemo,\n} from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n\t// @ts-expect-error: Not typed yet.\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useBlockVariations } from './variations/variations-panel';\nimport { ScreenHeader } from './screen-header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks: any, block: any ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName: string ) {\n\tconst [ rawSettings ] = useSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = !! useBlockVariations( blockName )?.length;\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\ninterface BlockMenuItemProps {\n\tblock: any;\n}\n\nfunction BlockMenuItem( { block }: BlockMenuItemProps ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\ninterface BlockListProps {\n\tfilterValue: string;\n}\n\nfunction BlockList( { filterValue }: BlockListProps ) {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\t// @ts-expect-error - useSelect supports single argument calls\n\tconst { isMatchingSearchTerm } = useSelect( blocksStore );\n\n\tconst filteredBlockTypes = ! filterValue\n\t\t? sortedBlockTypes\n\t\t: sortedBlockTypes.filter( ( blockType ) =>\n\t\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t  );\n\n\tconst blockTypesListRef = useRef< HTMLDivElement >( null );\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current?.childElementCount || 0;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, 'polite' );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ blockTypesListRef }\n\t\t\tclassName=\"global-styles-ui-block-types-item-list\"\n\t\t\t// By default, BlockMenuItem has a role=listitem so this div must have a list role.\n\t\t\trole=\"list\"\n\t\t>\n\t\t\t{ filteredBlockTypes.length === 0 ? (\n\t\t\t\t<Text align=\"center\" as=\"p\">\n\t\t\t\t\t{ __( 'No blocks found.' ) }\n\t\t\t\t</Text>\n\t\t\t) : (\n\t\t\t\tfilteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nconst MemoizedBlockList = memo( BlockList );\n\nfunction ScreenBlockList() {\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst deferredFilterValue = useDeferredValue( filterValue );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"global-styles-ui-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<MemoizedBlockList filterValue={ deferredFilterValue } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],
+  "mappings": "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",
+  "names": ["blockEditorPrivateApis", "blocksStore", "HStack", "Text"]
+}