@wordpress/edit-site 6.33.5 → 6.34.1-next.2f1c7c01b.0

package/build-module/components/global-styles/preview-styles.js

@@ -1,188 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
-import {
-  __experimentalHStack as HStack,
-  __experimentalVStack as VStack,
-  __unstableMotion as motion
-} from "@wordpress/components";
-import { unlock } from "../../lock-unlock";
-import { useStylesPreviewColors } from "./hooks";
-import TypographyExample from "./typography-example";
-import HighlightedColors from "./highlighted-colors";
-import PreviewWrapper from "./preview-wrapper";
-const { useGlobalStyle } = unlock(blockEditorPrivateApis);
-const firstFrameVariants = {
-  start: {
-    scale: 1,
-    opacity: 1
-  },
-  hover: {
-    scale: 0,
-    opacity: 0
-  }
-};
-const midFrameVariants = {
-  hover: {
-    opacity: 1
-  },
-  start: {
-    opacity: 0.5
-  }
-};
-const secondFrameVariants = {
-  hover: {
-    scale: 1,
-    opacity: 1
-  },
-  start: {
-    scale: 0,
-    opacity: 0
-  }
-};
-const PreviewStyles = ({ label, isFocused, withHoverView, variation }) => {
-  const [fontWeight] = useGlobalStyle("typography.fontWeight");
-  const [fontFamily = "serif"] = useGlobalStyle("typography.fontFamily");
-  const [headingFontFamily = fontFamily] = useGlobalStyle(
-    "elements.h1.typography.fontFamily"
-  );
-  const [headingFontWeight = fontWeight] = useGlobalStyle(
-    "elements.h1.typography.fontWeight"
-  );
-  const [textColor = "black"] = useGlobalStyle("color.text");
-  const [headingColor = textColor] = useGlobalStyle(
-    "elements.h1.color.text"
-  );
-  const { paletteColors } = useStylesPreviewColors();
-  return /* @__PURE__ */ jsxs(
-    PreviewWrapper,
-    {
-      label,
-      isFocused,
-      withHoverView,
-      children: [
-        ({ ratio, key }) => /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            variants: firstFrameVariants,
-            style: {
-              height: "100%",
-              overflow: "hidden"
-            },
-            children: /* @__PURE__ */ jsxs(
-              HStack,
-              {
-                spacing: 10 * ratio,
-                justify: "center",
-                style: {
-                  height: "100%",
-                  overflow: "hidden"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    TypographyExample,
-                    {
-                      fontSize: 65 * ratio,
-                      variation
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(VStack, { spacing: 4 * ratio, children: /* @__PURE__ */ jsx(
-                    HighlightedColors,
-                    {
-                      normalizedColorSwatchSize: 32,
-                      ratio
-                    }
-                  ) })
-                ]
-              }
-            )
-          },
-          key
-        ),
-        ({ key }) => /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            variants: withHoverView && midFrameVariants,
-            style: {
-              height: "100%",
-              width: "100%",
-              position: "absolute",
-              top: 0,
-              overflow: "hidden",
-              filter: "blur(60px)",
-              opacity: 0.1
-            },
-            children: /* @__PURE__ */ jsx(
-              HStack,
-              {
-                spacing: 0,
-                justify: "flex-start",
-                style: {
-                  height: "100%",
-                  overflow: "hidden"
-                },
-                children: paletteColors.slice(0, 4).map(({ color }, index) => /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      height: "100%",
-                      background: color,
-                      flexGrow: 1
-                    }
-                  },
-                  index
-                ))
-              }
-            )
-          },
-          key
-        ),
-        ({ ratio, key }) => /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            variants: secondFrameVariants,
-            style: {
-              height: "100%",
-              width: "100%",
-              overflow: "hidden",
-              position: "absolute",
-              top: 0
-            },
-            children: /* @__PURE__ */ jsx(
-              VStack,
-              {
-                spacing: 3 * ratio,
-                justify: "center",
-                style: {
-                  height: "100%",
-                  overflow: "hidden",
-                  padding: 10 * ratio,
-                  boxSizing: "border-box"
-                },
-                children: label && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      fontSize: 40 * ratio,
-                      fontFamily: headingFontFamily,
-                      color: headingColor,
-                      fontWeight: headingFontWeight,
-                      lineHeight: "1em",
-                      textAlign: "center"
-                    },
-                    children: label
-                  }
-                )
-              }
-            )
-          },
-          key
-        )
-      ]
-    }
-  );
-};
-var preview_styles_default = PreviewStyles;
-export {
-  preview_styles_default as default
-};
-//# sourceMappingURL=preview-styles.js.map

package/build-module/components/global-styles/preview-styles.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/global-styles/preview-styles.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\nimport TypographyExample from './typography-example';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewWrapper from './preview-wrapper';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst firstFrameVariants = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrameVariants = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrameVariants = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\t\tfontSize={ 65 * ratio }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 32 }\n\t\t\t\t\t\t\t\tratio={ ratio }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ withHoverView && midFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ secondFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default PreviewStyles;\n"],
-  "mappings": "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",
-  "names": []
-}

package/build-module/components/global-styles/preview-typography.js

@@ -1,38 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { __experimentalHStack as HStack } from "@wordpress/components";
-import TypographyExample from "./typography-example";
-import PreviewWrapper from "./preview-wrapper";
-const StylesPreviewTypography = ({ variation, isFocused, withHoverView }) => {
-  return /* @__PURE__ */ jsx(
-    PreviewWrapper,
-    {
-      label: variation.title,
-      isFocused,
-      withHoverView,
-      children: ({ ratio, key }) => /* @__PURE__ */ jsx(
-        HStack,
-        {
-          spacing: 10 * ratio,
-          justify: "center",
-          style: {
-            height: "100%",
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ jsx(
-            TypographyExample,
-            {
-              variation,
-              fontSize: 85 * ratio
-            }
-          )
-        },
-        key
-      )
-    }
-  );
-};
-var preview_typography_default = StylesPreviewTypography;
-export {
-  preview_typography_default as default
-};
-//# sourceMappingURL=preview-typography.js.map

package/build-module/components/global-styles/preview-typography.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/global-styles/preview-typography.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TypographyExample from './typography-example';\nimport PreviewWrapper from './preview-wrapper';\n\nconst StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ variation.title }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<HStack\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default StylesPreviewTypography;\n"],
-  "mappings": "AA4BK;AAzBL,SAAS,wBAAwB,cAAc;AAK/C,OAAO,uBAAuB;AAC9B,OAAO,oBAAoB;AAE3B,MAAM,0BAA0B,CAAE,EAAE,WAAW,WAAW,cAAc,MAAO;AAC9E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,UAAU;AAAA,MAClB;AAAA,MACA;AAAA,MAEE,WAAE,EAAE,OAAO,IAAI,MAChB;AAAA,QAAC;AAAA;AAAA,UAEA,SAAU,KAAK;AAAA,UACf,SAAQ;AAAA,UACR,OAAQ;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,UACX;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,UAAW,KAAK;AAAA;AAAA,UACjB;AAAA;AAAA,QAXM;AAAA,MAYP;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,6BAAQ;",
-  "names": []
-}

package/build-module/components/global-styles/preview-wrapper.js

@@ -1,85 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
-import { __unstableMotion as motion } from "@wordpress/components";
-import {
-  useThrottle,
-  useReducedMotion,
-  useResizeObserver
-} from "@wordpress/compose";
-import { useLayoutEffect, useState } from "@wordpress/element";
-import { unlock } from "../../lock-unlock";
-const { useGlobalStyle } = unlock(blockEditorPrivateApis);
-const normalizedWidth = 248;
-const normalizedHeight = 152;
-const THROTTLE_OPTIONS = {
-  leading: true,
-  trailing: true
-};
-function PreviewWrapper({
-  children,
-  label,
-  isFocused,
-  withHoverView
-}) {
-  const [backgroundColor = "white"] = useGlobalStyle("color.background");
-  const [gradientValue] = useGlobalStyle("color.gradient");
-  const disableMotion = useReducedMotion();
-  const [isHovered, setIsHovered] = useState(false);
-  const [containerResizeListener, { width }] = useResizeObserver();
-  const [throttledWidth, setThrottledWidthState] = useState(width);
-  const [ratioState, setRatioState] = useState();
-  const setThrottledWidth = useThrottle(
-    setThrottledWidthState,
-    250,
-    THROTTLE_OPTIONS
-  );
-  useLayoutEffect(() => {
-    if (width) {
-      setThrottledWidth(width);
-    }
-  }, [width, setThrottledWidth]);
-  useLayoutEffect(() => {
-    const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
-    const ratioDiff = newRatio - (ratioState || 0);
-    const isRatioDiffBigEnough = Math.abs(ratioDiff) > 0.1;
-    if (isRatioDiffBigEnough || !ratioState) {
-      setRatioState(newRatio);
-    }
-  }, [throttledWidth, ratioState]);
-  const fallbackRatio = width ? width / normalizedWidth : 1;
-  const ratio = ratioState ? ratioState : fallbackRatio;
-  const isReady = !!width;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: containerResizeListener }),
-    isReady && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "edit-site-global-styles-preview__wrapper",
-        style: {
-          height: normalizedHeight * ratio
-        },
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
-        tabIndex: -1,
-        children: /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            style: {
-              height: normalizedHeight * ratio,
-              width: "100%",
-              background: gradientValue ?? backgroundColor,
-              cursor: withHoverView ? "pointer" : void 0
-            },
-            initial: "start",
-            animate: (isHovered || isFocused) && !disableMotion && label ? "hover" : "start",
-            children: [].concat(children).map((child, key) => child({ ratio, key }))
-          }
-        )
-      }
-    )
-  ] });
-}
-export {
-  PreviewWrapper as default
-};
-//# sourceMappingURL=preview-wrapper.js.map

package/build-module/components/global-styles/preview-wrapper.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/global-styles/preview-wrapper.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\nexport default function PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the container  at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__wrapper\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: withHoverView ? 'pointer' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
-  "mappings": "AAuFE,mBACC,KADD;AApFF,SAAS,eAAe,8BAA8B;AACtD,SAAS,oBAAoB,cAAc;AAC3C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,gBAAgB;AAK1C,SAAS,cAAc;AAEvB,MAAM,EAAE,eAAe,IAAI,OAAQ,sBAAuB;AAE1D,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAIzB,MAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAEe,SAAR,eAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,kBAAkB,OAAQ,IAAI,eAAgB,kBAAmB;AACzE,QAAM,CAAE,aAAc,IAAI,eAAgB,gBAAiB;AAC3D,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,IAAI,kBAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,IAAI,SAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,IAAI,SAAS;AAE/C,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,kBAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,kBAAiB,MAAM;AACtB,UAAM,WAAW,iBAAiB,iBAAiB,kBAAkB;AACrE,UAAM,YAAY,YAAa,cAAc;AAM7C,UAAM,uBAAuB,KAAK,IAAK,SAAU,IAAI;AAErD,QAAK,wBAAwB,CAAE,YAAa;AAC3C,oBAAe,QAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,gBAAgB,UAAW,CAAE;AAGlC,QAAM,gBAAgB,QAAQ,QAAQ,kBAAkB;AAOxD,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,UAAU,CAAC,CAAE;AAEnB,SACC,iCACC;AAAA,wBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,WACD;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAQ;AAAA,UACP,QAAQ,mBAAmB;AAAA,QAC5B;AAAA,QACA,cAAe,MAAM,aAAc,IAAK;AAAA,QACxC,cAAe,MAAM,aAAc,KAAM;AAAA,QACzC,UAAW;AAAA,QAEX;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,OAAQ;AAAA,cACP,QAAQ,mBAAmB;AAAA,cAC3B,OAAO;AAAA,cACP,YAAY,iBAAiB;AAAA,cAC7B,QAAQ,gBAAgB,YAAY;AAAA,YACrC;AAAA,YACA,SAAQ;AAAA,YACR,UACG,aAAa,cACf,CAAE,iBACF,QACG,UACA;AAAA,YAGF,WAAC,EACD,OAAQ,QAAS,EACjB,IAAK,CAAE,OAAO,QAAS,MAAO,EAAE,OAAO,IAAI,CAAE,CAAE;AAAA;AAAA,QAClD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
-  "names": []
-}

package/build-module/components/global-styles/root-menu.js

@@ -1,58 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { __experimentalItemGroup as ItemGroup } from "@wordpress/components";
-import {
-  background,
-  typography,
-  color,
-  layout,
-  shadow as shadowIcon
-} from "@wordpress/icons";
-import { __ } from "@wordpress/i18n";
-import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
-import { NavigationButtonAsItem } from "./navigation-button";
-import { unlock } from "../../lock-unlock";
-const {
-  useHasDimensionsPanel,
-  useHasTypographyPanel,
-  useHasColorPanel,
-  useGlobalSetting,
-  useSettingsForBlockElement,
-  useHasBackgroundPanel
-} = unlock(blockEditorPrivateApis);
-function RootMenu() {
-  const [rawSettings] = useGlobalSetting("");
-  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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ItemGroup, { children: [
-    hasTypographyPanel && /* @__PURE__ */ jsx(
-      NavigationButtonAsItem,
-      {
-        icon: typography,
-        path: "/typography",
-        children: __("Typography")
-      }
-    ),
-    hasColorPanel && /* @__PURE__ */ jsx(NavigationButtonAsItem, { icon: color, path: "/colors", children: __("Colors") }),
-    hasBackgroundPanel && /* @__PURE__ */ jsx(
-      NavigationButtonAsItem,
-      {
-        icon: background,
-        path: "/background",
-        "aria-label": __("Background styles"),
-        children: __("Background")
-      }
-    ),
-    hasShadowPanel && /* @__PURE__ */ jsx(NavigationButtonAsItem, { icon: shadowIcon, path: "/shadows", children: __("Shadows") }),
-    hasLayoutPanel && /* @__PURE__ */ jsx(NavigationButtonAsItem, { icon: layout, path: "/layout", children: __("Layout") })
-  ] }) });
-}
-var root_menu_default = RootMenu;
-export {
-  root_menu_default as default
-};
-//# sourceMappingURL=root-menu.js.map

package/build-module/components/global-styles/root-menu.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/global-styles/root-menu.js"],
-  "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';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasBackgroundPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\t/*\n\t * Use the raw settings to determine if the background panel should be displayed,\n\t * as the background panel is not dependent on the block element settings.\n\t */\n\tconst hasBackgroundPanel = useHasBackgroundPanel( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasShadowPanel = true; // useHasShadowPanel( settings );\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": "AA4CE,mBAGG,KAFF,YADD;AAzCF,SAAS,2BAA2B,iBAAiB;AACrD;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,OACJ;AACP,SAAS,UAAU;AACnB,SAAS,eAAe,8BAA8B;AAKtD,SAAS,8BAA8B;AACvC,SAAS,cAAc;AAEvB,MAAM;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,IAAI,OAAQ,sBAAuB;AAEnC,SAAS,WAAW;AACnB,QAAM,CAAE,WAAY,IAAI,iBAAkB,EAAG;AAC7C,QAAM,WAAW,2BAA4B,WAAY;AAKzD,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,gCACC,+BAAC,aACE;AAAA,0BACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAK;AAAA,QAEH,aAAI,YAAa;AAAA;AAAA,IACpB;AAAA,IAEC,iBACD,oBAAC,0BAAuB,MAAO,OAAQ,MAAK,WACzC,aAAI,QAAS,GAChB;AAAA,IAEC,sBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAK;AAAA,QACL,cAAa,GAAI,mBAAoB;AAAA,QAEnC,aAAI,YAAa;AAAA;AAAA,IACpB;AAAA,IAEC,kBACD,oBAAC,0BAAuB,MAAO,YAAa,MAAK,YAC9C,aAAI,SAAU,GACjB;AAAA,IAEC,kBACD,oBAAC,0BAAuB,MAAO,QAAS,MAAK,WAC1C,aAAI,QAAS,GAChB;AAAA,KAEF,GACD;AAEF;AAEA,IAAO,oBAAQ;",
-  "names": []
-}

package/build-module/components/global-styles/screen-background.js

@@ -1,29 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { __ } from "@wordpress/i18n";
-import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
-import { __experimentalText as Text } from "@wordpress/components";
-import BackgroundPanel from "./background-panel";
-import ScreenHeader from "./header";
-import { unlock } from "../../lock-unlock";
-const { useHasBackgroundPanel, useGlobalSetting } = unlock(
-  blockEditorPrivateApis
-);
-function ScreenBackground() {
-  const [settings] = useGlobalSetting("");
-  const hasBackgroundPanel = useHasBackgroundPanel(settings);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ScreenHeader,
-      {
-        title: __("Background"),
-        description: /* @__PURE__ */ jsx(Text, { children: __("Set styles for the site\u2019s background.") })
-      }
-    ),
-    hasBackgroundPanel && /* @__PURE__ */ jsx(BackgroundPanel, {})
-  ] });
-}
-var screen_background_default = ScreenBackground;
-export {
-  screen_background_default as default
-};
-//# sourceMappingURL=screen-background.js.map

package/build-module/components/global-styles/screen-background.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/global-styles/screen-background.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\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 './header';\nimport { unlock } from '../../lock-unlock';\n\nconst { useHasBackgroundPanel, useGlobalSetting } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction ScreenBackground() {\n\tconst [ settings ] = useGlobalSetting( '' );\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\u2019s 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": "AAsBE,mBAIG,KAJH;AAnBF,SAAS,UAAU;AACnB,SAAS,eAAe,8BAA8B;AACtD,SAAS,sBAAsB,YAAY;AAK3C,OAAO,qBAAqB;AAC5B,OAAO,kBAAkB;AACzB,SAAS,cAAc;AAEvB,MAAM,EAAE,uBAAuB,iBAAiB,IAAI;AAAA,EACnD;AACD;AAEA,SAAS,mBAAmB;AAC3B,QAAM,CAAE,QAAS,IAAI,iBAAkB,EAAG;AAC1C,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,YAAa;AAAA,QACzB,aACC,oBAAC,QACE,aAAI,4CAAwC,GAC/C;AAAA;AAAA,IAEF;AAAA,IACE,sBAAsB,oBAAC,mBAAgB;AAAA,KAC1C;AAEF;AAEA,IAAO,4BAAQ;",
-  "names": []
-}

package/build-module/components/global-styles/screen-block-list.js

@@ -1,150 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { store as blocksStore } from "@wordpress/blocks";
-import { __, sprintf, _n } from "@wordpress/i18n";
-import {
-  FlexItem,
-  SearchControl,
-  __experimentalHStack as HStack,
-  __experimentalText as Text
-} from "@wordpress/components";
-import { useSelect } from "@wordpress/data";
-import {
-  useState,
-  useEffect,
-  useRef,
-  useDeferredValue,
-  memo
-} from "@wordpress/element";
-import {
-  BlockIcon,
-  privateApis as blockEditorPrivateApis
-} from "@wordpress/block-editor";
-import { useDebounce } from "@wordpress/compose";
-import { speak } from "@wordpress/a11y";
-import { useBlockVariations } from "./variations/variations-panel";
-import ScreenHeader from "./header";
-import { NavigationButtonAsItem } from "./navigation-button";
-import { unlock } from "../../lock-unlock";
-const {
-  useHasDimensionsPanel,
-  useHasTypographyPanel,
-  useHasBorderPanel,
-  useGlobalSetting,
-  useSettingsForBlockElement,
-  useHasColorPanel
-} = unlock(blockEditorPrivateApis);
-function useSortedBlockTypes() {
-  const blockItems = useSelect(
-    (select) => select(blocksStore).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] = useGlobalSetting("", 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 = !!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__ */ jsx(
-    NavigationButtonAsItem,
-    {
-      path: "/blocks/" + encodeURIComponent(block.name),
-      children: /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", children: [
-        /* @__PURE__ */ jsx(BlockIcon, { icon: block.icon }),
-        /* @__PURE__ */ jsx(FlexItem, { children: block.title })
-      ] })
-    }
-  );
-}
-function BlockList({ filterValue }) {
-  const sortedBlockTypes = useSortedBlockTypes();
-  const debouncedSpeak = useDebounce(speak, 500);
-  const { isMatchingSearchTerm } = useSelect(blocksStore);
-  const filteredBlockTypes = !filterValue ? sortedBlockTypes : sortedBlockTypes.filter(
-    (blockType) => isMatchingSearchTerm(blockType, filterValue)
-  );
-  const blockTypesListRef = useRef();
-  useEffect(() => {
-    if (!filterValue) {
-      return;
-    }
-    const count = blockTypesListRef.current.childElementCount;
-    const resultsFoundMessage = sprintf(
-      /* translators: %d: number of results. */
-      _n("%d result found.", "%d results found.", count),
-      count
-    );
-    debouncedSpeak(resultsFoundMessage, count);
-  }, [filterValue, debouncedSpeak]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: blockTypesListRef,
-      className: "edit-site-block-types-item-list",
-      role: "list",
-      children: filteredBlockTypes.length === 0 ? /* @__PURE__ */ jsx(Text, { align: "center", as: "p", children: __("No blocks found.") }) : filteredBlockTypes.map((block) => /* @__PURE__ */ jsx(
-        BlockMenuItem,
-        {
-          block
-        },
-        "menu-itemblock-" + block.name
-      ))
-    }
-  );
-}
-const MemoizedBlockList = memo(BlockList);
-function ScreenBlockList() {
-  const [filterValue, setFilterValue] = useState("");
-  const deferredFilterValue = useDeferredValue(filterValue);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ScreenHeader,
-      {
-        title: __("Blocks"),
-        description: __(
-          "Customize the appearance of specific blocks and for the whole site."
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      SearchControl,
-      {
-        __nextHasNoMarginBottom: true,
-        className: "edit-site-block-types-search",
-        onChange: setFilterValue,
-        value: filterValue,
-        label: __("Search"),
-        placeholder: __("Search")
-      }
-    ),
-    /* @__PURE__ */ jsx(MemoizedBlockList, { filterValue: deferredFilterValue })
-  ] });
-}
-var screen_block_list_default = ScreenBlockList;
-export {
-  screen_block_list_default as default,
-  useBlockHasGlobalStyles
-};
-//# sourceMappingURL=screen-block-list.js.map

package/build-module/components/global-styles/screen-block-list.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/global-styles/screen-block-list.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\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} 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 './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\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, block ) => {\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 ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', 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\nfunction BlockMenuItem( { block } ) {\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\nfunction BlockList( { filterValue } ) {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\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();\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;\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, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ blockTypesListRef }\n\t\t\tclassName=\"edit-site-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=\"edit-site-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": "AA6FG,SAyED,UAxEE,KADD;AA1FH,SAAS,SAAS,mBAAmB;AACrC,SAAS,IAAI,SAAS,UAAU;AAChC;AAAA,EACC;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,OAChB;AACP,SAAS,iBAAiB;AAC1B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA,eAAe;AAAA,OACT;AACP,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AAKtB,SAAS,0BAA0B;AACnC,OAAO,kBAAkB;AACzB,SAAS,8BAA8B;AACvC,SAAS,cAAc;AAEvB,MAAM;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,IAAI,OAAQ,sBAAuB;AAEnC,SAAS,sBAAsB;AAC9B,QAAM,aAAa;AAAA,IAClB,CAAE,WAAY,OAAQ,WAAY,EAAE,cAAc;AAAA,IAClD,CAAC;AAAA,EACF;AAMA,QAAM,cAAc,CAAE,QAAQ,UAAW;AACxC,UAAM,EAAE,MAAM,QAAQ,IAAI;AAC1B,UAAM,OAAO,MAAM,KAAK,WAAY,OAAQ,IAAI,OAAO;AACvD,SAAK,KAAM,KAAM;AACjB,WAAO;AAAA,EACR;AACA,QAAM,EAAE,MAAM,WAAW,SAAS,aAAa,IAAI,WAAW;AAAA,IAC7D;AAAA,IACA,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,EAAE;AAAA,EACzB;AACA,SAAO,CAAE,GAAG,WAAW,GAAG,YAAa;AACxC;AAEO,SAAS,wBAAyB,WAAY;AACpD,QAAM,CAAE,WAAY,IAAI,iBAAkB,IAAI,SAAU;AACxD,QAAM,WAAW,2BAA4B,aAAa,SAAU;AACpE,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,gBAAgB,iBAAkB,QAAS;AACjD,QAAM,iBAAiB,kBAAmB,QAAS;AACnD,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,qBAAqB,CAAC,CAAE,mBAAoB,SAAU,GAAG;AAC/D,QAAM,kBACL,sBACA,iBACA,kBACA;AACD,SAAO;AACR;AAEA,SAAS,cAAe,EAAE,MAAM,GAAI;AACnC,QAAM,mBAAmB,wBAAyB,MAAM,IAAK;AAC7D,MAAK,CAAE,kBAAmB;AACzB,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO,aAAa,mBAAoB,MAAM,IAAK;AAAA,MAEnD,+BAAC,UAAO,SAAQ,cACf;AAAA,4BAAC,aAAU,MAAO,MAAM,MAAO;AAAA,QAC/B,oBAAC,YAAW,gBAAM,OAAO;AAAA,SAC1B;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,UAAW,EAAE,YAAY,GAAI;AACrC,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,iBAAiB,YAAa,OAAO,GAAI;AAC/C,QAAM,EAAE,qBAAqB,IAAI,UAAW,WAAY;AAExD,QAAM,qBAAqB,CAAE,cAC1B,mBACA,iBAAiB;AAAA,IAAQ,CAAE,cAC3B,qBAAsB,WAAW,WAAY;AAAA,EAC7C;AAEH,QAAM,oBAAoB,OAAO;AAGjC,YAAW,MAAM;AAChB,QAAK,CAAE,aAAc;AACpB;AAAA,IACD;AASA,UAAM,QAAQ,kBAAkB,QAAQ;AACxC,UAAM,sBAAsB;AAAA;AAAA,MAE3B,GAAI,oBAAoB,qBAAqB,KAAM;AAAA,MACnD;AAAA,IACD;AACA,mBAAgB,qBAAqB,KAAM;AAAA,EAC5C,GAAG,CAAE,aAAa,cAAe,CAAE;AAEnC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MAEV,MAAK;AAAA,MAEH,6BAAmB,WAAW,IAC/B,oBAAC,QAAK,OAAM,UAAS,IAAG,KACrB,aAAI,kBAAmB,GAC1B,IAEA,mBAAmB,IAAK,CAAE,UACzB;AAAA,QAAC;AAAA;AAAA,UACA;AAAA;AAAA,QACM,oBAAoB,MAAM;AAAA,MACjC,CACC;AAAA;AAAA,EAEJ;AAEF;AAEA,MAAM,oBAAoB,KAAM,SAAU;AAE1C,SAAS,kBAAkB;AAC1B,QAAM,CAAE,aAAa,cAAe,IAAI,SAAU,EAAG;AACrD,QAAM,sBAAsB,iBAAkB,WAAY;AAE1D,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,QAAS;AAAA,QACrB,aAAc;AAAA,UACb;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,yBAAuB;AAAA,QACvB,WAAU;AAAA,QACV,UAAW;AAAA,QACX,OAAQ;AAAA,QACR,OAAQ,GAAI,QAAS;AAAA,QACrB,aAAc,GAAI,QAAS;AAAA;AAAA,IAC5B;AAAA,IACA,oBAAC,qBAAkB,aAAc,qBAAsB;AAAA,KACxD;AAEF;AAEA,IAAO,4BAAQ;",
-  "names": []
-}