@wordpress/edit-site 5.19.6 → 5.20.1

package/build/components/global-styles/palette.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_components","_i18n","_icons","_blockEditor","_subtitle","_interopRequireDefault","_navigationButton","_hooks","_colorIndicatorWrapper","_lockUnlock","useGlobalSetting","unlock","blockEditorPrivateApis","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","useColorRandomizer","colors","useMemo","screenPath","encodeURIComponent","paletteButtonText","length","sprintf","_n","__","createElement","__experimentalVStack","spacing","default","level","__experimentalItemGroup","isBordered","isSeparated","NavigationButtonAsItem","path","__experimentalHStack","direction","__experimentalZStack","isLayered","offset","slice","map","color","index","key","ColorIndicator","colorValue","FlexItem","window","__experimentalEnableColorRandomizer","Button","variant","icon","shuffle","onClick","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n\tButton,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { shuffle } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useColorRandomizer } from './hooks';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useGlobalSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst [ randomizeThemeColors ] = useColorRandomizer();\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors || EMPTY_COLORS ),\n\t\t\t...( themeColors || EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t  )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\tpath={ screenPath }\n\t\t\t\t\taria-label={ __( 'Color palettes' ) }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\tcolors.length === 0 ? 'row-reverse' : 'row'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t\t{ window.__experimentalEnableColorRandomizer &&\n\t\t\t\tthemeColors?.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\ticon={ shuffle }\n\t\t\t\t\t\tonClick={ randomizeThemeColors }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Randomize colors' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_i18n","_icons","_element","_blockEditor","_subtitle","_interopRequireDefault","_navigationButton","_hooks","_colorIndicatorWrapper","_lockUnlock","useGlobalSetting","unlock","blockEditorPrivateApis","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","useColorRandomizer","colors","useMemo","screenPath","encodeURIComponent","paletteButtonText","length","sprintf","_n","__","_react","createElement","__experimentalVStack","spacing","default","level","__experimentalItemGroup","isBordered","isSeparated","NavigationButtonAsItem","path","__experimentalHStack","direction","__experimentalZStack","isLayered","offset","slice","map","color","index","key","ColorIndicator","colorValue","FlexItem","window","__experimentalEnableColorRandomizer","Button","variant","icon","shuffle","onClick","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n\tButton,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { shuffle } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useColorRandomizer } from './hooks';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useGlobalSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst [ randomizeThemeColors ] = useColorRandomizer();\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors || EMPTY_COLORS ),\n\t\t\t...( themeColors || EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t  )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\tpath={ screenPath }\n\t\t\t\t\taria-label={ __( 'Color palettes' ) }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\tcolors.length === 0 ? 'row-reverse' : 'row'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t\t{ window.__experimentalEnableColorRandomizer &&\n\t\t\t\tthemeColors?.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\ticon={ shuffle }\n\t\t\t\t\t\tonClick={ randomizeThemeColors }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Randomize colors' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"],"mappings":"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"}

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

@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _blockEditor = require("@wordpress/block-editor");
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _lockUnlock = require("../../lock-unlock");
 var _hooks = require("./hooks");
 /**
@@ -89,11 +90,11 @@ const StylesPreview = ({
     return styles;
   }, [styles]);
   const isReady = !!width;
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
+  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("div", {
     style: {
       position: 'relative'
     }
-  }, containerResizeListener), isReady && (0, _element.createElement)(_blockEditor.__unstableIframe, {
+  }, containerResizeListener), isReady && (0, _react.createElement)(_blockEditor.__unstableIframe, {
     className: "edit-site-global-styles-preview__iframe",
     style: {
       height: normalizedHeight * ratio
@@ -101,9 +102,9 @@ const StylesPreview = ({
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false),
     tabIndex: -1
-  }, (0, _element.createElement)(_blockEditor.__unstableEditorStyles, {
+  }, (0, _react.createElement)(_blockEditor.__unstableEditorStyles, {
     styles: editorStyles
-  }), (0, _element.createElement)(_components.__unstableMotion.div, {
+  }), (0, _react.createElement)(_components.__unstableMotion.div, {
     style: {
       height: normalizedHeight * ratio,
       width: '100%',
@@ -112,20 +113,20 @@ const StylesPreview = ({
     },
     initial: "start",
     animate: (isHovered || isFocused) && !disableMotion && label ? 'hover' : 'start'
-  }, (0, _element.createElement)(_components.__unstableMotion.div, {
+  }, (0, _react.createElement)(_components.__unstableMotion.div, {
     variants: firstFrame,
     style: {
       height: '100%',
       overflow: 'hidden'
     }
-  }, (0, _element.createElement)(_components.__experimentalHStack, {
+  }, (0, _react.createElement)(_components.__experimentalHStack, {
     spacing: 10 * ratio,
     justify: "center",
     style: {
       height: '100%',
       overflow: 'hidden'
     }
-  }, (0, _element.createElement)(_components.__unstableMotion.div, {
+  }, (0, _react.createElement)(_components.__unstableMotion.div, {
     style: {
       fontFamily: headingFontFamily,
       fontSize: 65 * ratio,
@@ -144,12 +145,12 @@ const StylesPreview = ({
       delay: 0.3,
       type: 'tween'
     }
-  }, "Aa"), (0, _element.createElement)(_components.__experimentalVStack, {
+  }, "Aa"), (0, _react.createElement)(_components.__experimentalVStack, {
     spacing: 4 * ratio
   }, highlightedColors.map(({
     slug,
     color
-  }, index) => (0, _element.createElement)(_components.__unstableMotion.div, {
+  }, index) => (0, _react.createElement)(_components.__unstableMotion.div, {
     key: slug,
     style: {
       height: normalizedColorSwatchSize * ratio,
@@ -168,7 +169,7 @@ const StylesPreview = ({
     transition: {
       delay: index === 1 ? 0.2 : 0.1
     }
-  }))))), (0, _element.createElement)(_components.__unstableMotion.div, {
+  }))))), (0, _react.createElement)(_components.__unstableMotion.div, {
     variants: withHoverView && midFrame,
     style: {
       height: '100%',
@@ -179,7 +180,7 @@ const StylesPreview = ({
       filter: 'blur(60px)',
       opacity: 0.1
     }
-  }, (0, _element.createElement)(_components.__experimentalHStack, {
+  }, (0, _react.createElement)(_components.__experimentalHStack, {
     spacing: 0,
     justify: "flex-start",
     style: {
@@ -188,14 +189,14 @@ const StylesPreview = ({
     }
   }, paletteColors.slice(0, 4).map(({
     color
-  }, index) => (0, _element.createElement)("div", {
+  }, index) => (0, _react.createElement)("div", {
     key: index,
     style: {
       height: '100%',
       background: color,
       flexGrow: 1
     }
-  })))), (0, _element.createElement)(_components.__unstableMotion.div, {
+  })))), (0, _react.createElement)(_components.__unstableMotion.div, {
     variants: secondFrame,
     style: {
       height: '100%',
@@ -204,7 +205,7 @@ const StylesPreview = ({
       position: 'absolute',
       top: 0
     }
-  }, (0, _element.createElement)(_components.__experimentalVStack, {
+  }, (0, _react.createElement)(_components.__experimentalVStack, {
     spacing: 3 * ratio,
     justify: "center",
     style: {
@@ -213,7 +214,7 @@ const StylesPreview = ({
       padding: 10 * ratio,
       boxSizing: 'border-box'
     }
-  }, label && (0, _element.createElement)("div", {
+  }, label && (0, _react.createElement)("div", {
     style: {
       fontSize: 40 * ratio,
       fontFamily: headingFontFamily,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_blockEditor","_components","_compose","_lockUnlock","_hooks","useGlobalStyle","useGlobalStylesOutput","unlock","blockEditorPrivateApis","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","useReducedMotion","isHovered","setIsHovered","useState","containerResizeListener","width","useResizeObserver","ratio","paletteColors","highlightedColors","useStylesPreviewColors","editorStyles","useMemo","css","isGlobalStyles","isReady","createElement","Fragment","style","position","__unstableIframe","className","height","onMouseEnter","onMouseLeave","tabIndex","__unstableEditorStyles","__unstableMotion","div","background","cursor","undefined","initial","animate","variants","overflow","__experimentalHStack","spacing","justify","fontSize","color","transition","delay","type","__experimentalVStack","map","slug","index","key","borderRadius","top","filter","slice","flexGrow","padding","boxSizing","lineHeight","textAlign","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst firstFrame = {\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 midFrame = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrame = {\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 normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused, withHoverView } ) => {\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\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst { paletteColors, highlightedColors } = useStylesPreviewColors();\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\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<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\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<EditorStyles styles={ editorStyles } />\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<motion.div\n\t\t\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\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<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\t\t\ttransition={ { delay: 0.3, type: 'tween' } }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t\t\t{ highlightedColors.map(\n\t\t\t\t\t\t\t\t\t\t( { slug, color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tdelay:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex === 1 ? 0.2 : 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\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</VStack>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ withHoverView && midFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\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{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\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</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\t\t\tboxSizing: 'border-box',\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\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\t\t\ttextAlign: 'center',\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\t\t{ label }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport default StylesPreview;\n"],"mappings":"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"}
+{"version":3,"names":["_blockEditor","require","_components","_compose","_element","_lockUnlock","_hooks","useGlobalStyle","useGlobalStylesOutput","unlock","blockEditorPrivateApis","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","useReducedMotion","isHovered","setIsHovered","useState","containerResizeListener","width","useResizeObserver","ratio","paletteColors","highlightedColors","useStylesPreviewColors","editorStyles","useMemo","css","isGlobalStyles","isReady","_react","createElement","Fragment","style","position","__unstableIframe","className","height","onMouseEnter","onMouseLeave","tabIndex","__unstableEditorStyles","__unstableMotion","div","background","cursor","undefined","initial","animate","variants","overflow","__experimentalHStack","spacing","justify","fontSize","color","transition","delay","type","__experimentalVStack","map","slug","index","key","borderRadius","top","filter","slice","flexGrow","padding","boxSizing","lineHeight","textAlign","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst firstFrame = {\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 midFrame = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrame = {\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 normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused, withHoverView } ) => {\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\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst { paletteColors, highlightedColors } = useStylesPreviewColors();\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\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<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\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<EditorStyles styles={ editorStyles } />\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<motion.div\n\t\t\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\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<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\t\t\ttransition={ { delay: 0.3, type: 'tween' } }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t\t\t{ highlightedColors.map(\n\t\t\t\t\t\t\t\t\t\t( { slug, color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tdelay:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex === 1 ? 0.2 : 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\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</VStack>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ withHoverView && midFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\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{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\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</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\t\t\tboxSizing: 'border-box',\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\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\t\t\ttextAlign: 'center',\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\t\t{ label }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport default StylesPreview;\n"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
@@ -33,15 +33,15 @@ function RootMenu() {
   const hasColorPanel = useHasColorPanel(settings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasLayoutPanel = hasDimensionsPanel;
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalItemGroup, null, hasTypographyPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalItemGroup, null, hasTypographyPanel && (0, _react.createElement)(_navigationButton.NavigationButtonAsItem, {
     icon: _icons.typography,
     path: "/typography",
     "aria-label": (0, _i18n.__)('Typography styles')
-  }, (0, _i18n.__)('Typography')), hasColorPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+  }, (0, _i18n.__)('Typography')), hasColorPanel && (0, _react.createElement)(_navigationButton.NavigationButtonAsItem, {
     icon: _icons.color,
     path: "/colors",
     "aria-label": (0, _i18n.__)('Colors styles')
-  }, (0, _i18n.__)('Colors')), hasLayoutPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+  }, (0, _i18n.__)('Colors')), hasLayoutPanel && (0, _react.createElement)(_navigationButton.NavigationButtonAsItem, {
     icon: _icons.layout,
     path: "/layout",
     "aria-label": (0, _i18n.__)('Layout styles')

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_icons","_i18n","_blockEditor","_navigationButton","_lockUnlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","unlock","blockEditorPrivateApis","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","_element","createElement","Fragment","__experimentalItemGroup","NavigationButtonAsItem","icon","typography","path","__","color","layout","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } 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} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( 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\taria-label={ __( 'Typography styles' ) }\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\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath=\"/colors\"\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\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{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath=\"/layout\"\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\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":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,iBAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAMA;AACA;AACA;;AAIA,MAAM;EACLM,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC,gBAAgB;EAChBC;AACD,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAEpC,SAASC,QAAQA,CAAA,EAAG;EACnB,MAAM,CAAEC,WAAW,CAAE,GAAGL,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMM,QAAQ,GAAGL,0BAA0B,CAAEI,WAAY,CAAC;EAC1D,MAAME,kBAAkB,GAAGT,qBAAqB,CAAEQ,QAAS,CAAC;EAC5D,MAAME,aAAa,GAAGT,gBAAgB,CAAEO,QAAS,CAAC;EAClD,MAAMG,kBAAkB,GAAGZ,qBAAqB,CAAES,QAAS,CAAC;EAC5D,MAAMI,cAAc,GAAGD,kBAAkB;EAEzC,OACC,IAAAE,QAAA,CAAAC,aAAA,EAAAD,QAAA,CAAAE,QAAA,QACC,IAAAF,QAAA,CAAAC,aAAA,EAACtB,WAAA,CAAAwB,uBAAS,QACPP,kBAAkB,IACnB,IAAAI,QAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAoB,sBAAsB;IACtBC,IAAI,EAAGC,iBAAY;IACnBC,IAAI,EAAC,aAAa;IAClB,cAAa,IAAAC,QAAE,EAAE,mBAAoB;EAAG,GAEtC,IAAAA,QAAE,EAAE,YAAa,CACI,CACxB,EACCX,aAAa,IACd,IAAAG,QAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAoB,sBAAsB;IACtBC,IAAI,EAAGI,YAAO;IACdF,IAAI,EAAC,SAAS;IACd,cAAa,IAAAC,QAAE,EAAE,eAAgB;EAAG,GAElC,IAAAA,QAAE,EAAE,QAAS,CACQ,CACxB,EACCT,cAAc,IACf,IAAAC,QAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAoB,sBAAsB;IACtBC,IAAI,EAAGK,aAAQ;IACfH,IAAI,EAAC,SAAS;IACd,cAAa,IAAAC,QAAE,EAAE,eAAgB;EAAG,GAElC,IAAAA,QAAE,EAAE,QAAS,CACQ,CAEf,CACV,CAAC;AAEL;AAAC,IAAAG,QAAA,GAEclB,QAAQ;AAAAmB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_components","require","_icons","_i18n","_blockEditor","_navigationButton","_lockUnlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","unlock","blockEditorPrivateApis","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","_react","createElement","Fragment","__experimentalItemGroup","NavigationButtonAsItem","icon","typography","path","__","color","layout","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } 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} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( 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\taria-label={ __( 'Typography styles' ) }\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\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath=\"/colors\"\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\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{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath=\"/layout\"\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\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":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,iBAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAMA;AACA;AACA;;AAIA,MAAM;EACLM,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC,gBAAgB;EAChBC;AACD,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAEpC,SAASC,QAAQA,CAAA,EAAG;EACnB,MAAM,CAAEC,WAAW,CAAE,GAAGL,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMM,QAAQ,GAAGL,0BAA0B,CAAEI,WAAY,CAAC;EAC1D,MAAME,kBAAkB,GAAGT,qBAAqB,CAAEQ,QAAS,CAAC;EAC5D,MAAME,aAAa,GAAGT,gBAAgB,CAAEO,QAAS,CAAC;EAClD,MAAMG,kBAAkB,GAAGZ,qBAAqB,CAAES,QAAS,CAAC;EAC5D,MAAMI,cAAc,GAAGD,kBAAkB;EAEzC,OACC,IAAAE,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACtB,WAAA,CAAAwB,uBAAS,QACPP,kBAAkB,IACnB,IAAAI,MAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAoB,sBAAsB;IACtBC,IAAI,EAAGC,iBAAY;IACnBC,IAAI,EAAC,aAAa;IAClB,cAAa,IAAAC,QAAE,EAAE,mBAAoB;EAAG,GAEtC,IAAAA,QAAE,EAAE,YAAa,CACI,CACxB,EACCX,aAAa,IACd,IAAAG,MAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAoB,sBAAsB;IACtBC,IAAI,EAAGI,YAAO;IACdF,IAAI,EAAC,SAAS;IACd,cAAa,IAAAC,QAAE,EAAE,eAAgB;EAAG,GAElC,IAAAA,QAAE,EAAE,QAAS,CACQ,CACxB,EACCT,cAAc,IACf,IAAAC,MAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAoB,sBAAsB;IACtBC,IAAI,EAAGK,aAAQ;IACfH,IAAI,EAAC,SAAS;IACd,cAAa,IAAAC,QAAE,EAAE,eAAgB;EAAG,GAElC,IAAAA,QAAE,EAAE,QAAS,CACQ,CAEf,CACV,CAAC;AAEL;AAAC,IAAAG,QAAA,GAEclB,QAAQ;AAAAmB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

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

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.useBlockHasGlobalStyles = useBlockHasGlobalStyles;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _blocks = require("@wordpress/blocks");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _data = require("@wordpress/data");
+var _element = require("@wordpress/element");
 var _blockEditor = require("@wordpress/block-editor");
 var _compose = require("@wordpress/compose");
 var _a11y = require("@wordpress/a11y");
@@ -81,14 +82,14 @@ function BlockMenuItem({
   const navigationButtonLabel = (0, _i18n.sprintf)(
   // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
   (0, _i18n.__)('%s block styles'), block.title);
-  return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
+  return (0, _react.createElement)(_navigationButton.NavigationButtonAsItem, {
     path: '/blocks/' + encodeURIComponent(block.name),
     "aria-label": navigationButtonLabel
-  }, (0, _element.createElement)(_components.__experimentalHStack, {
+  }, (0, _react.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
-  }, (0, _element.createElement)(_blockEditor.BlockIcon, {
+  }, (0, _react.createElement)(_blockEditor.BlockIcon, {
     icon: block.icon
-  }), (0, _element.createElement)(_components.FlexItem, null, block.title)));
+  }), (0, _react.createElement)(_components.FlexItem, null, block.title)));
 }
 function ScreenBlockList() {
   const sortedBlockTypes = useSortedBlockTypes();
@@ -121,20 +122,20 @@ function ScreenBlockList() {
     (0, _i18n._n)('%d result found.', '%d results found.', count), count);
     debouncedSpeak(resultsFoundMessage, count);
   }, [filterValue, debouncedSpeak]);
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
+  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_header.default, {
     title: (0, _i18n.__)('Blocks'),
     description: (0, _i18n.__)('Customize the appearance of specific blocks and for the whole site.')
-  }), (0, _element.createElement)(_components.SearchControl, {
+  }), (0, _react.createElement)(_components.SearchControl, {
     __nextHasNoMarginBottom: true,
     className: "edit-site-block-types-search",
     onChange: setFilterValue,
     value: filterValue,
     label: (0, _i18n.__)('Search for blocks'),
     placeholder: (0, _i18n.__)('Search')
-  }), (0, _element.createElement)("div", {
+  }), (0, _react.createElement)("div", {
     ref: blockTypesListRef,
     className: "edit-site-block-types-item-list"
-  }, filteredBlockTypes.map(block => (0, _element.createElement)(BlockMenuItem, {
+  }, filteredBlockTypes.map(block => (0, _react.createElement)(BlockMenuItem, {
     block: block,
     key: 'menu-itemblock-' + block.name
   }))));

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_blocks","_i18n","_components","_data","_blockEditor","_compose","_a11y","_variationsPanel","_header","_interopRequireDefault","_navigationButton","_lockUnlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","unlock","blockEditorPrivateApis","useSortedBlockTypes","blockItems","useSelect","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","useBlockHasGlobalStyles","blockName","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","useBlockVariations","length","hasGlobalStyles","BlockMenuItem","hasBlockMenuItem","navigationButtonLabel","sprintf","__","title","createElement","NavigationButtonAsItem","path","encodeURIComponent","__experimentalHStack","justify","BlockIcon","icon","FlexItem","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","useState","debouncedSpeak","useDebounce","speak","isMatchingSearchTerm","filteredBlockTypes","useMemo","filter","blockType","blockTypesListRef","useRef","useEffect","count","current","childElementCount","resultsFoundMessage","_n","Fragment","default","description","SearchControl","__nextHasNoMarginBottom","className","onChange","value","label","placeholder","ref","map","key","_default","exports"],"sources":["@wordpress/edit-site/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} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } 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-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\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\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 ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\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<>\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 for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.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</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],"mappings":"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"}
+{"version":3,"names":["_blocks","require","_i18n","_components","_data","_element","_blockEditor","_compose","_a11y","_variationsPanel","_header","_interopRequireDefault","_navigationButton","_lockUnlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","unlock","blockEditorPrivateApis","useSortedBlockTypes","blockItems","useSelect","select","blocksStore","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","useBlockHasGlobalStyles","blockName","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","useBlockVariations","length","hasGlobalStyles","BlockMenuItem","hasBlockMenuItem","navigationButtonLabel","sprintf","__","title","_react","createElement","NavigationButtonAsItem","path","encodeURIComponent","__experimentalHStack","justify","BlockIcon","icon","FlexItem","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","useState","debouncedSpeak","useDebounce","speak","isMatchingSearchTerm","filteredBlockTypes","useMemo","filter","blockType","blockTypesListRef","useRef","useEffect","count","current","childElementCount","resultsFoundMessage","_n","Fragment","default","description","SearchControl","__nextHasNoMarginBottom","className","onChange","value","label","placeholder","ref","map","key","_default","exports"],"sources":["@wordpress/edit-site/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} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } 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-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\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\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 ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\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<>\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 for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.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</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],"mappings":"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"}

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

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _blocks = require("@wordpress/blocks");
 var _blockEditor = require("@wordpress/block-editor");
+var _element = require("@wordpress/element");
 var _data = require("@wordpress/data");
 var _coreData = require("@wordpress/core-data");
 var _components = require("@wordpress/components");
@@ -213,45 +214,45 @@ function ScreenBlock({
       }
     });
   };
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
+  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_header.default, {
     title: variation ? currentBlockStyle.label : blockType.title
-  }), (0, _element.createElement)(_blockPreviewPanel.default, {
+  }), (0, _react.createElement)(_blockPreviewPanel.default, {
     name: name,
     variation: variation
-  }), hasVariationsPanel && (0, _element.createElement)("div", {
+  }), hasVariationsPanel && (0, _react.createElement)("div", {
     className: "edit-site-global-styles-screen-variations"
-  }, (0, _element.createElement)(_components.__experimentalVStack, {
+  }, (0, _react.createElement)(_components.__experimentalVStack, {
     spacing: 3
-  }, (0, _element.createElement)(_subtitle.default, null, (0, _i18n.__)('Style Variations')), (0, _element.createElement)(_variationsPanel.VariationsPanel, {
+  }, (0, _react.createElement)(_subtitle.default, null, (0, _i18n.__)('Style Variations')), (0, _react.createElement)(_variationsPanel.VariationsPanel, {
     name: name
-  }))), hasColorPanel && (0, _element.createElement)(StylesColorPanel, {
+  }))), hasColorPanel && (0, _react.createElement)(StylesColorPanel, {
     inheritedValue: inheritedStyle,
     value: style,
     onChange: setStyle,
     settings: settings
-  }), hasTypographyPanel && (0, _element.createElement)(StylesTypographyPanel, {
+  }), hasTypographyPanel && (0, _react.createElement)(StylesTypographyPanel, {
     inheritedValue: inheritedStyle,
     value: style,
     onChange: setStyle,
     settings: settings
-  }), hasDimensionsPanel && (0, _element.createElement)(StylesDimensionsPanel, {
+  }), hasDimensionsPanel && (0, _react.createElement)(StylesDimensionsPanel, {
     inheritedValue: inheritedStyleWithLayout,
     value: styleWithLayout,
     onChange: onChangeDimensions,
     settings: settings,
     includeLayoutControls: true
-  }), hasBorderPanel && (0, _element.createElement)(StylesBorderPanel, {
+  }), hasBorderPanel && (0, _react.createElement)(StylesBorderPanel, {
     inheritedValue: inheritedStyle,
     value: style,
     onChange: onChangeBorders,
     settings: settings
-  }), hasEffectsPanel && (0, _element.createElement)(StylesEffectsPanel, {
+  }), hasEffectsPanel && (0, _react.createElement)(StylesEffectsPanel, {
     inheritedValue: inheritedStyleWithLayout,
     value: styleWithLayout,
     onChange: setStyle,
     settings: settings,
     includeLayoutControls: true
-  }), hasFiltersPanel && (0, _element.createElement)(StylesFiltersPanel, {
+  }), hasFiltersPanel && (0, _react.createElement)(StylesFiltersPanel, {
     inheritedValue: inheritedStyleWithLayout,
     value: styleWithLayout,
     onChange: setStyle,
@@ -264,16 +265,16 @@ function ScreenBlock({
     },
 
     includeLayoutControls: true
-  }), hasImageSettingsPanel && (0, _element.createElement)(ImageSettingsPanel, {
+  }), hasImageSettingsPanel && (0, _react.createElement)(ImageSettingsPanel, {
     onChange: onChangeLightbox,
     value: userSettings,
     inheritedValue: settings
-  }), canEditCSS && (0, _element.createElement)(_components.PanelBody, {
+  }), canEditCSS && (0, _react.createElement)(_components.PanelBody, {
     title: (0, _i18n.__)('Advanced'),
     initialOpen: false
-  }, (0, _element.createElement)("p", null, (0, _i18n.sprintf)(
+  }, (0, _react.createElement)("p", null, (0, _i18n.sprintf)(
   // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
-  (0, _i18n.__)('Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'), blockType?.title)), (0, _element.createElement)(StylesAdvancedPanel, {
+  (0, _i18n.__)('Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'), blockType?.title)), (0, _react.createElement)(StylesAdvancedPanel, {
     value: style,
     onChange: setStyle,
     inheritedValue: inheritedStyle