@wordpress/edit-site 5.31.0 → 5.33.0

package/build-module/components/global-styles/gradients-palette-panel.js.map

@@ -1 +1 @@
-{"version":3,"names":["useViewportMatch","__experimentalVStack","VStack","__experimentalPaletteEdit","PaletteEdit","__experimentalSpacer","Spacer","DuotonePicker","__","privateApis","blockEditorPrivateApis","Subtitle","unlock","useGlobalSetting","mobilePopoverProps","placement","offset","noop","GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","customDuotone","defaultDuotone","themeDuotone","defaultDuotoneEnabled","duotonePalette","isMobileViewport","popoverProps","undefined","createElement","className","spacing","length","canReset","canOnlyChangeValues","gradients","onChange","paletteLabel","paletteLabelHeadingLevel","paletteLabelLevel","emptyMessage","slugPrefix","level","margin","disableCustomDuotone","disableCustomColors","clearable"],"sources":["@wordpress/edit-site/src/components/global-styles/gradients-palette-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalSpacer as Spacer,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nconst mobilePopoverProps = { placement: 'bottom-start', offset: 8 };\n\nconst noop = () => {};\n\nexport default function GradientPalettePanel( { name } ) {\n\tconst [ themeGradients, setThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\n\tconst [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];\n\tconst [ defaultDuotone ] =\n\t\tuseGlobalSetting( 'color.duotone.default' ) || [];\n\tconst [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];\n\tconst [ defaultDuotoneEnabled ] = useGlobalSetting(\n\t\t'color.defaultDuotone'\n\t);\n\n\tconst duotonePalette = [\n\t\t...( customDuotone || [] ),\n\t\t...( themeDuotone || [] ),\n\t\t...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),\n\t];\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tconst popoverProps = isMobileViewport ? mobilePopoverProps : undefined;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-gradient-palette-panel\"\n\t\t\tspacing={ 10 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\temptyMessage={ __(\n\t\t\t\t\t'Custom gradients are empty! Add some gradients to create your own palette.'\n\t\t\t\t) }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t/>\n\t\t\t{ !! duotonePalette && !! duotonePalette.length && (\n\t\t\t\t<div>\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomDuotone\n\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,QAAQ,oBAAoB;AACrD,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,yBAAyB,IAAIC,WAAW,EACxCC,oBAAoB,IAAIC,MAAM,EAC9BC,aAAa,QACP,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAiB,CAAC,GAAGD,MAAM,CAAEF,sBAAuB,CAAC;AAC7D,MAAMI,kBAAkB,GAAG;EAAEC,SAAS,EAAE,cAAc;EAAEC,MAAM,EAAE;AAAE,CAAC;AAEnE,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,oBAAoBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACxD,MAAM,CAAEC,cAAc,EAAEC,iBAAiB,CAAE,GAAGR,gBAAgB,CAC7D,uBAAuB,EACvBM,IACD,CAAC;EACD,MAAM,CAAEG,kBAAkB,CAAE,GAAGT,gBAAgB,CAC9C,uBAAuB,EACvBM,IAAI,EACJ,MACD,CAAC;EACD,MAAM,CAAEI,gBAAgB,EAAEC,mBAAmB,CAAE,GAAGX,gBAAgB,CACjE,yBAAyB,EACzBM,IACD,CAAC;EACD,MAAM,CAAEM,oBAAoB,CAAE,GAAGZ,gBAAgB,CAChD,yBAAyB,EACzBM,IAAI,EACJ,MACD,CAAC;EACD,MAAM,CAAEO,eAAe,EAAEC,kBAAkB,CAAE,GAAGd,gBAAgB,CAC/D,wBAAwB,EACxBM,IACD,CAAC;EAED,MAAM,CAAES,qBAAqB,CAAE,GAAGf,gBAAgB,CACjD,wBAAwB,EACxBM,IACD,CAAC;EAED,MAAM,CAAEU,aAAa,CAAE,GAAGhB,gBAAgB,CAAE,sBAAuB,CAAC,IAAI,EAAE;EAC1E,MAAM,CAAEiB,cAAc,CAAE,GACvBjB,gBAAgB,CAAE,uBAAwB,CAAC,IAAI,EAAE;EAClD,MAAM,CAAEkB,YAAY,CAAE,GAAGlB,gBAAgB,CAAE,qBAAsB,CAAC,IAAI,EAAE;EACxE,MAAM,CAAEmB,qBAAqB,CAAE,GAAGnB,gBAAgB,CACjD,sBACD,CAAC;EAED,MAAMoB,cAAc,GAAG,CACtB,IAAKJ,aAAa,IAAI,EAAE,CAAE,EAC1B,IAAKE,YAAY,IAAI,EAAE,CAAE,EACzB,IAAKD,cAAc,IAAIE,qBAAqB,GAAGF,cAAc,GAAG,EAAE,CAAE,CACpE;EAED,MAAMI,gBAAgB,GAAGlC,gBAAgB,CAAE,OAAO,EAAE,GAAI,CAAC;EACzD,MAAMmC,YAAY,GAAGD,gBAAgB,GAAGpB,kBAAkB,GAAGsB,SAAS;EAEtE,OACCC,aAAA,CAACnC,MAAM;IACNoC,SAAS,EAAC,gDAAgD;IAC1DC,OAAO,EAAG;EAAI,GAEZ,CAAC,CAAEnB,cAAc,IAAI,CAAC,CAAEA,cAAc,CAACoB,MAAM,IAC9CH,aAAA,CAACjC,WAAW;IACXqC,QAAQ,EAAGrB,cAAc,KAAKE,kBAAoB;IAClDoB,mBAAmB;IACnBC,SAAS,EAAGvB,cAAgB;IAC5BwB,QAAQ,EAAGvB,iBAAmB;IAC9BwB,YAAY,EAAGrC,EAAE,CAAE,OAAQ,CAAG;IAC9BsC,wBAAwB,EAAG,CAAG;IAC9BX,YAAY,EAAGA;EAAc,CAC7B,CACD,EACC,CAAC,CAAEZ,gBAAgB,IACpB,CAAC,CAAEA,gBAAgB,CAACiB,MAAM,IAC1B,CAAC,CAAEZ,qBAAqB,IACvBS,aAAA,CAACjC,WAAW;IACXqC,QAAQ,EAAGlB,gBAAgB,KAAKE,oBAAsB;IACtDiB,mBAAmB;IACnBC,SAAS,EAAGpB,gBAAkB;IAC9BqB,QAAQ,EAAGpB,mBAAqB;IAChCqB,YAAY,EAAGrC,EAAE,CAAE,SAAU,CAAG;IAChCuC,iBAAiB,EAAG,CAAG;IACvBZ,YAAY,EAAGA;EAAc,CAC7B,CACD,EACFE,aAAA,CAACjC,WAAW;IACXuC,SAAS,EAAGjB,eAAiB;IAC7BkB,QAAQ,EAAGjB,kBAAoB;IAC/BkB,YAAY,EAAGrC,EAAE,CAAE,QAAS,CAAG;IAC/BuC,iBAAiB,EAAG,CAAG;IACvBC,YAAY,EAAGxC,EAAE,CAChB,4EACD,CAAG;IACHyC,UAAU,EAAC,SAAS;IACpBd,YAAY,EAAGA;EAAc,CAC7B,CAAC,EACA,CAAC,CAAEF,cAAc,IAAI,CAAC,CAAEA,cAAc,CAACO,MAAM,IAC9CH,aAAA,cACCA,aAAA,CAAC1B,QAAQ;IAACuC,KAAK,EAAG;EAAG,GAAG1C,EAAE,CAAE,SAAU,CAAa,CAAC,EACpD6B,aAAA,CAAC/B,MAAM;IAAC6C,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBd,aAAA,CAAC9B,aAAa;IACb0B,cAAc,EAAGA,cAAgB;IACjCmB,oBAAoB;IACpBC,mBAAmB;IACnBC,SAAS,EAAG,KAAO;IACnBV,QAAQ,EAAG3B;EAAM,CACjB,CACG,CAEC,CAAC;AAEX"}
+{"version":3,"names":["useViewportMatch","__experimentalVStack","VStack","__experimentalPaletteEdit","PaletteEdit","__experimentalSpacer","Spacer","DuotonePicker","__","privateApis","blockEditorPrivateApis","Subtitle","unlock","useGlobalSetting","mobilePopoverProps","placement","offset","noop","GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","customDuotone","defaultDuotone","themeDuotone","defaultDuotoneEnabled","duotonePalette","isMobileViewport","popoverProps","undefined","createElement","className","spacing","length","canReset","canOnlyChangeValues","gradients","onChange","paletteLabel","paletteLabelHeadingLevel","paletteLabelLevel","emptyMessage","slugPrefix","level","margin","disableCustomDuotone","disableCustomColors","clearable"],"sources":["@wordpress/edit-site/src/components/global-styles/gradients-palette-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalSpacer as Spacer,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nconst mobilePopoverProps = { placement: 'bottom-start', offset: 8 };\n\nconst noop = () => {};\n\nexport default function GradientPalettePanel( { name } ) {\n\tconst [ themeGradients, setThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\n\tconst [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];\n\tconst [ defaultDuotone ] =\n\t\tuseGlobalSetting( 'color.duotone.default' ) || [];\n\tconst [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];\n\tconst [ defaultDuotoneEnabled ] = useGlobalSetting(\n\t\t'color.defaultDuotone'\n\t);\n\n\tconst duotonePalette = [\n\t\t...( customDuotone || [] ),\n\t\t...( themeDuotone || [] ),\n\t\t...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),\n\t];\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tconst popoverProps = isMobileViewport ? mobilePopoverProps : undefined;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-gradient-palette-panel\"\n\t\t\tspacing={ 10 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\temptyMessage={ __(\n\t\t\t\t\t'Custom gradients are empty! Add some gradients to create your own palette.'\n\t\t\t\t) }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t/>\n\t\t\t{ !! duotonePalette && !! duotonePalette.length && (\n\t\t\t\t<div>\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomDuotone\n\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,QAAQ,oBAAoB;AACrD,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,yBAAyB,IAAIC,WAAW,EACxCC,oBAAoB,IAAIC,MAAM,EAC9BC,aAAa,QACP,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAiB,CAAC,GAAGD,MAAM,CAAEF,sBAAuB,CAAC;AAC7D,MAAMI,kBAAkB,GAAG;EAAEC,SAAS,EAAE,cAAc;EAAEC,MAAM,EAAE;AAAE,CAAC;AAEnE,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,eAAe,SAASC,oBAAoBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACxD,MAAM,CAAEC,cAAc,EAAEC,iBAAiB,CAAE,GAAGR,gBAAgB,CAC7D,uBAAuB,EACvBM,IACD,CAAC;EACD,MAAM,CAAEG,kBAAkB,CAAE,GAAGT,gBAAgB,CAC9C,uBAAuB,EACvBM,IAAI,EACJ,MACD,CAAC;EACD,MAAM,CAAEI,gBAAgB,EAAEC,mBAAmB,CAAE,GAAGX,gBAAgB,CACjE,yBAAyB,EACzBM,IACD,CAAC;EACD,MAAM,CAAEM,oBAAoB,CAAE,GAAGZ,gBAAgB,CAChD,yBAAyB,EACzBM,IAAI,EACJ,MACD,CAAC;EACD,MAAM,CAAEO,eAAe,EAAEC,kBAAkB,CAAE,GAAGd,gBAAgB,CAC/D,wBAAwB,EACxBM,IACD,CAAC;EAED,MAAM,CAAES,qBAAqB,CAAE,GAAGf,gBAAgB,CACjD,wBAAwB,EACxBM,IACD,CAAC;EAED,MAAM,CAAEU,aAAa,CAAE,GAAGhB,gBAAgB,CAAE,sBAAuB,CAAC,IAAI,EAAE;EAC1E,MAAM,CAAEiB,cAAc,CAAE,GACvBjB,gBAAgB,CAAE,uBAAwB,CAAC,IAAI,EAAE;EAClD,MAAM,CAAEkB,YAAY,CAAE,GAAGlB,gBAAgB,CAAE,qBAAsB,CAAC,IAAI,EAAE;EACxE,MAAM,CAAEmB,qBAAqB,CAAE,GAAGnB,gBAAgB,CACjD,sBACD,CAAC;EAED,MAAMoB,cAAc,GAAG,CACtB,IAAKJ,aAAa,IAAI,EAAE,CAAE,EAC1B,IAAKE,YAAY,IAAI,EAAE,CAAE,EACzB,IAAKD,cAAc,IAAIE,qBAAqB,GAAGF,cAAc,GAAG,EAAE,CAAE,CACpE;EAED,MAAMI,gBAAgB,GAAGlC,gBAAgB,CAAE,OAAO,EAAE,GAAI,CAAC;EACzD,MAAMmC,YAAY,GAAGD,gBAAgB,GAAGpB,kBAAkB,GAAGsB,SAAS;EAEtE,OACCC,aAAA,CAACnC,MAAM;IACNoC,SAAS,EAAC,gDAAgD;IAC1DC,OAAO,EAAG;EAAI,GAEZ,CAAC,CAAEnB,cAAc,IAAI,CAAC,CAAEA,cAAc,CAACoB,MAAM,IAC9CH,aAAA,CAACjC,WAAW;IACXqC,QAAQ,EAAGrB,cAAc,KAAKE,kBAAoB;IAClDoB,mBAAmB;IACnBC,SAAS,EAAGvB,cAAgB;IAC5BwB,QAAQ,EAAGvB,iBAAmB;IAC9BwB,YAAY,EAAGrC,EAAE,CAAE,OAAQ,CAAG;IAC9BsC,wBAAwB,EAAG,CAAG;IAC9BX,YAAY,EAAGA;EAAc,CAC7B,CACD,EACC,CAAC,CAAEZ,gBAAgB,IACpB,CAAC,CAAEA,gBAAgB,CAACiB,MAAM,IAC1B,CAAC,CAAEZ,qBAAqB,IACvBS,aAAA,CAACjC,WAAW;IACXqC,QAAQ,EAAGlB,gBAAgB,KAAKE,oBAAsB;IACtDiB,mBAAmB;IACnBC,SAAS,EAAGpB,gBAAkB;IAC9BqB,QAAQ,EAAGpB,mBAAqB;IAChCqB,YAAY,EAAGrC,EAAE,CAAE,SAAU,CAAG;IAChCuC,iBAAiB,EAAG,CAAG;IACvBZ,YAAY,EAAGA;EAAc,CAC7B,CACD,EACFE,aAAA,CAACjC,WAAW;IACXuC,SAAS,EAAGjB,eAAiB;IAC7BkB,QAAQ,EAAGjB,kBAAoB;IAC/BkB,YAAY,EAAGrC,EAAE,CAAE,QAAS,CAAG;IAC/BuC,iBAAiB,EAAG,CAAG;IACvBC,YAAY,EAAGxC,EAAE,CAChB,4EACD,CAAG;IACHyC,UAAU,EAAC,SAAS;IACpBd,YAAY,EAAGA;EAAc,CAC7B,CAAC,EACA,CAAC,CAAEF,cAAc,IAAI,CAAC,CAAEA,cAAc,CAACO,MAAM,IAC9CH,aAAA,cACCA,aAAA,CAAC1B,QAAQ;IAACuC,KAAK,EAAG;EAAG,GAAG1C,EAAE,CAAE,SAAU,CAAa,CAAC,EACpD6B,aAAA,CAAC/B,MAAM;IAAC6C,MAAM,EAAG;EAAG,CAAE,CAAC,EACvBd,aAAA,CAAC9B,aAAa;IACb0B,cAAc,EAAGA,cAAgB;IACjCmB,oBAAoB;IACpBC,mBAAmB;IACnBC,SAAS,EAAG,KAAO;IACnBV,QAAQ,EAAG3B;EAAM,CACjB,CACG,CAEC,CAAC;AAEX","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalSpacer","Spacer","__experimentalHeading","Heading","__experimentalView","View","__experimentalNavigatorToParentButton","NavigatorToParentButton","isRTL","__","chevronRight","chevronLeft","ScreenHeader","title","description","onBack","createElement","spacing","marginBottom","paddingX","paddingY","style","minWidth","padding","icon","size","label","onClick","className","level"],"sources":["@wordpress/edit-site/src/components/global-styles/header.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n\nfunction ScreenHeader( { title, description, onBack } ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"edit-site-global-styles-header__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default ScreenHeader;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,qBAAqB,IAAIC,OAAO,EAChCC,kBAAkB,IAAIC,IAAI,EAC1BC,qCAAqC,IAAIC,uBAAuB,QAC1D,uBAAuB;AAC9B,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;AAC3C,SAASC,YAAY,EAAEC,WAAW,QAAQ,kBAAkB;AAE5D,SAASC,YAAYA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAO,CAAC,EAAG;EACvD,OACCC,aAAA,CAACjB,MAAM;IAACkB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACX,IAAI,QACJW,aAAA,CAACf,MAAM;IAACiB,YAAY,EAAG,CAAG;IAACC,QAAQ,EAAG,CAAG;IAACC,QAAQ,EAAG;EAAG,GACvDJ,aAAA,CAACnB,MAAM;IAACoB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACT,uBAAuB;IACvBc,KAAK;IACJ;IACA;IACA;MAAEC,QAAQ,EAAE,EAAE;MAAEC,OAAO,EAAE;IAAE,CAC3B;IACDC,IAAI,EAAGhB,KAAK,CAAC,CAAC,GAAGE,YAAY,GAAGC,WAAa;IAC7Cc,IAAI,EAAC,OAAO;IACZC,KAAK,EAAGjB,EAAE,CAAE,MAAO,CAAG;IACtBkB,OAAO,EAAGZ;EAAQ,CAClB,CAAC,EACFC,aAAA,CAACf,MAAM,QACNe,aAAA,CAACb,OAAO;IACPyB,SAAS,EAAC,gCAAgC;IAC1CC,KAAK,EAAG,CAAG;IACXJ,IAAI,EAAG;EAAI,GAETZ,KACM,CACF,CACD,CACD,CACH,CAAC,EACLC,WAAW,IACZE,aAAA;IAAGY,SAAS,EAAC;EAA6C,GACvDd,WACA,CAEG,CAAC;AAEX;AAEA,eAAeF,YAAY"}
+{"version":3,"names":["__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalSpacer","Spacer","__experimentalHeading","Heading","__experimentalView","View","__experimentalNavigatorToParentButton","NavigatorToParentButton","isRTL","__","chevronRight","chevronLeft","ScreenHeader","title","description","onBack","createElement","spacing","marginBottom","paddingX","paddingY","style","minWidth","padding","icon","size","label","onClick","className","level"],"sources":["@wordpress/edit-site/src/components/global-styles/header.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n\nfunction ScreenHeader( { title, description, onBack } ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"edit-site-global-styles-header__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default ScreenHeader;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,qBAAqB,IAAIC,OAAO,EAChCC,kBAAkB,IAAIC,IAAI,EAC1BC,qCAAqC,IAAIC,uBAAuB,QAC1D,uBAAuB;AAC9B,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;AAC3C,SAASC,YAAY,EAAEC,WAAW,QAAQ,kBAAkB;AAE5D,SAASC,YAAYA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAO,CAAC,EAAG;EACvD,OACCC,aAAA,CAACjB,MAAM;IAACkB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACX,IAAI,QACJW,aAAA,CAACf,MAAM;IAACiB,YAAY,EAAG,CAAG;IAACC,QAAQ,EAAG,CAAG;IAACC,QAAQ,EAAG;EAAG,GACvDJ,aAAA,CAACnB,MAAM;IAACoB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACT,uBAAuB;IACvBc,KAAK;IACJ;IACA;IACA;MAAEC,QAAQ,EAAE,EAAE;MAAEC,OAAO,EAAE;IAAE,CAC3B;IACDC,IAAI,EAAGhB,KAAK,CAAC,CAAC,GAAGE,YAAY,GAAGC,WAAa;IAC7Cc,IAAI,EAAC,OAAO;IACZC,KAAK,EAAGjB,EAAE,CAAE,MAAO,CAAG;IACtBkB,OAAO,EAAGZ;EAAQ,CAClB,CAAC,EACFC,aAAA,CAACf,MAAM,QACNe,aAAA,CAACb,OAAO;IACPyB,SAAS,EAAC,gCAAgC;IAC1CC,KAAK,EAAG,CAAG;IACXJ,IAAI,EAAG;EAAI,GAETZ,KACM,CACF,CACD,CACD,CACH,CAAC,EACLC,WAAW,IACZE,aAAA;IAAGY,SAAS,EAAC;EAA6C,GACvDd,WACA,CAEG,CAAC;AAEX;AAEA,eAAeF,YAAY","ignoreList":[]}

package/build-module/components/global-styles/highlighted-colors.js

@@ -20,7 +20,7 @@ export default function HighlightedColors({
     slug,
     color
   }, index) => createElement(motion.div, {
-    key: slug,
+    key: `${slug}-${index}`,
     style: {
       height: scaledSwatchSize,
       width: scaledSwatchSize,

package/build-module/components/global-styles/highlighted-colors.js.map

@@ -1 +1 @@
-{"version":3,"names":["__unstableMotion","motion","useStylesPreviewColors","HighlightedColors","normalizedColorSwatchSize","ratio","highlightedColors","scaledSwatchSize","map","slug","color","index","createElement","div","key","style","height","width","background","borderRadius","animate","scale","opacity","initial","transition","delay"],"sources":["@wordpress/edit-site/src/components/global-styles/highlighted-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './hooks';\n\nexport default function HighlightedColors( {\n\tnormalizedColorSwatchSize,\n\tratio,\n} ) {\n\tconst { highlightedColors } = useStylesPreviewColors();\n\tconst scaledSwatchSize = normalizedColorSwatchSize * ratio;\n\treturn highlightedColors.map( ( { slug, color }, index ) => (\n\t\t<motion.div\n\t\t\tkey={ slug }\n\t\t\tstyle={ {\n\t\t\t\theight: scaledSwatchSize,\n\t\t\t\twidth: scaledSwatchSize,\n\t\t\t\tbackground: color,\n\t\t\t\tborderRadius: scaledSwatchSize / 2,\n\t\t\t} }\n\t\t\tanimate={ {\n\t\t\t\tscale: 1,\n\t\t\t\topacity: 1,\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tscale: 0.1,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\ttransition={ {\n\t\t\t\tdelay: index === 1 ? 0.2 : 0.1,\n\t\t\t} }\n\t\t/>\n\t) );\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,IAAIC,MAAM,QAAQ,uBAAuB;;AAElE;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,SAAS;AAEhD,eAAe,SAASC,iBAAiBA,CAAE;EAC1CC,yBAAyB;EACzBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAkB,CAAC,GAAGJ,sBAAsB,CAAC,CAAC;EACtD,MAAMK,gBAAgB,GAAGH,yBAAyB,GAAGC,KAAK;EAC1D,OAAOC,iBAAiB,CAACE,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,EAAEC,KAAK,KACrDC,aAAA,CAACX,MAAM,CAACY,GAAG;IACVC,GAAG,EAAGL,IAAM;IACZM,KAAK,EAAG;MACPC,MAAM,EAAET,gBAAgB;MACxBU,KAAK,EAAEV,gBAAgB;MACvBW,UAAU,EAAER,KAAK;MACjBS,YAAY,EAAEZ,gBAAgB,GAAG;IAClC,CAAG;IACHa,OAAO,EAAG;MACTC,KAAK,EAAE,CAAC;MACRC,OAAO,EAAE;IACV,CAAG;IACHC,OAAO,EAAG;MACTF,KAAK,EAAE,GAAG;MACVC,OAAO,EAAE;IACV,CAAG;IACHE,UAAU,EAAG;MACZC,KAAK,EAAEd,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG;IAC5B;EAAG,CACH,CACA,CAAC;AACJ"}
+{"version":3,"names":["__unstableMotion","motion","useStylesPreviewColors","HighlightedColors","normalizedColorSwatchSize","ratio","highlightedColors","scaledSwatchSize","map","slug","color","index","createElement","div","key","style","height","width","background","borderRadius","animate","scale","opacity","initial","transition","delay"],"sources":["@wordpress/edit-site/src/components/global-styles/highlighted-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './hooks';\n\nexport default function HighlightedColors( {\n\tnormalizedColorSwatchSize,\n\tratio,\n} ) {\n\tconst { highlightedColors } = useStylesPreviewColors();\n\tconst scaledSwatchSize = normalizedColorSwatchSize * ratio;\n\treturn highlightedColors.map( ( { slug, color }, index ) => (\n\t\t<motion.div\n\t\t\tkey={ `${ slug }-${ index }` }\n\t\t\tstyle={ {\n\t\t\t\theight: scaledSwatchSize,\n\t\t\t\twidth: scaledSwatchSize,\n\t\t\t\tbackground: color,\n\t\t\t\tborderRadius: scaledSwatchSize / 2,\n\t\t\t} }\n\t\t\tanimate={ {\n\t\t\t\tscale: 1,\n\t\t\t\topacity: 1,\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tscale: 0.1,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\ttransition={ {\n\t\t\t\tdelay: index === 1 ? 0.2 : 0.1,\n\t\t\t} }\n\t\t/>\n\t) );\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,IAAIC,MAAM,QAAQ,uBAAuB;;AAElE;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,SAAS;AAEhD,eAAe,SAASC,iBAAiBA,CAAE;EAC1CC,yBAAyB;EACzBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAkB,CAAC,GAAGJ,sBAAsB,CAAC,CAAC;EACtD,MAAMK,gBAAgB,GAAGH,yBAAyB,GAAGC,KAAK;EAC1D,OAAOC,iBAAiB,CAACE,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,EAAEC,KAAK,KACrDC,aAAA,CAACX,MAAM,CAACY,GAAG;IACVC,GAAG,EAAI,GAAGL,IAAM,IAAIE,KAAO,EAAG;IAC9BI,KAAK,EAAG;MACPC,MAAM,EAAET,gBAAgB;MACxBU,KAAK,EAAEV,gBAAgB;MACvBW,UAAU,EAAER,KAAK;MACjBS,YAAY,EAAEZ,gBAAgB,GAAG;IAClC,CAAG;IACHa,OAAO,EAAG;MACTC,KAAK,EAAE,CAAC;MACRC,OAAO,EAAE;IACV,CAAG;IACHC,OAAO,EAAG;MACTF,KAAK,EAAE,GAAG;MACVC,OAAO,EAAE;IACV,CAAG;IACHE,UAAU,EAAG;MACZC,KAAK,EAAEd,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG;IAC5B;EAAG,CACH,CACA,CAAC;AACJ","ignoreList":[]}

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

@@ -53,15 +53,23 @@ export function useStylesPreviewColors() {
   const [textColor = 'black'] = useGlobalStyle('color.text');
   const [backgroundColor = 'white'] = useGlobalStyle('color.background');
   const [headingColor = textColor] = useGlobalStyle('elements.h1.color.text');
+  const [linkColor = headingColor] = useGlobalStyle('elements.link.color.text');
+  const [buttonBackgroundColor = linkColor] = useGlobalStyle('elements.button.color.background');
   const [coreColors] = useGlobalSetting('color.palette.core');
   const [themeColors] = useGlobalSetting('color.palette.theme');
   const [customColors] = useGlobalSetting('color.palette.custom');
   const paletteColors = (themeColors !== null && themeColors !== void 0 ? themeColors : []).concat(customColors !== null && customColors !== void 0 ? customColors : []).concat(coreColors !== null && coreColors !== void 0 ? coreColors : []);
-  const highlightedColors = paletteColors.filter(
-  // we exclude these two colors because they are already visible in the preview.
+  const textColorObject = paletteColors.filter(({
+    color
+  }) => color === textColor);
+  const buttonBackgroundColorObject = paletteColors.filter(({
+    color
+  }) => color === buttonBackgroundColor);
+  const highlightedColors = textColorObject.concat(buttonBackgroundColorObject).concat(paletteColors).filter(
+  // we exclude these background color because it is already visible in the preview.
   ({
     color
-  }) => color !== backgroundColor && color !== headingColor).slice(0, 2);
+  }) => color !== backgroundColor).slice(0, 2);
   return {
     paletteColors,
     highlightedColors

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

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","useContext","__","mergeBaseAndUserConfigs","useCurrentMergeThemeStyleVariationsWithUserConfig","getFontFamilies","unlock","useSelect","useGlobalSetting","useGlobalStyle","GlobalStylesContext","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","coreColors","customColors","paletteColors","concat","highlightedColors","filter","slice","useSupportedStyles","element","supportedPanels","select","getSupportedStyles","useColorVariations","colorVariations","property","length","variation","settings","styles","title","Object","keys","useTypographyVariations","typographyVariations","base","values","reduce","acc","bodyFontFamily","headingFontFamily"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport { getFontFamilies } from './utils';\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(\n\tblockEditorPrivateApis\n);\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n\nexport function useColorVariations() {\n\tconst colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\tproperty: 'color',\n\t} );\n\t/*\n\t * Filter out variations with no settings or styles.\n\t */\n\treturn colorVariations?.length\n\t\t? colorVariations.filter( ( variation ) => {\n\t\t\t\tconst { settings, styles, title } = variation;\n\t\t\t\treturn (\n\t\t\t\t\ttitle === __( 'Default' ) || // Always preseve the default variation.\n\t\t\t\t\tObject.keys( settings ).length > 0 ||\n\t\t\t\t\tObject.keys( styles ).length > 0\n\t\t\t\t);\n\t\t  } )\n\t\t: [];\n}\n\nexport function useTypographyVariations() {\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t} );\n\n\tconst { base } = useContext( GlobalStylesContext );\n\t/*\n\t * Filter duplicate variations based on whether the variaitons\n\t * have different heading and body font families.\n\t */\n\treturn typographyVariations?.length\n\t\t? Object.values(\n\t\t\t\ttypographyVariations.reduce( ( acc, variation ) => {\n\t\t\t\t\tconst [ bodyFontFamily, headingFontFamily ] =\n\t\t\t\t\t\tgetFontFamilies(\n\t\t\t\t\t\t\tmergeBaseAndUserConfigs( base, variation )\n\t\t\t\t\t\t);\n\n\t\t\t\t\t// Always preseve the default variation.\n\t\t\t\t\tif ( variation?.title === 'Default' ) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t} else if (\n\t\t\t\t\t\theadingFontFamily?.name &&\n\t\t\t\t\t\tbodyFontFamily?.name &&\n\t\t\t\t\t\t! acc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t]\n\t\t\t\t\t) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t}\n\t\t\t\t\treturn acc;\n\t\t\t\t}, {} )\n\t\t  )\n\t\t: [];\n}\n"],"mappings":"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"}
+{"version":3,"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","useContext","__","mergeBaseAndUserConfigs","useCurrentMergeThemeStyleVariationsWithUserConfig","getFontFamilies","unlock","useSelect","useGlobalSetting","useGlobalStyle","GlobalStylesContext","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","linkColor","buttonBackgroundColor","coreColors","customColors","paletteColors","concat","textColorObject","filter","buttonBackgroundColorObject","highlightedColors","slice","useSupportedStyles","element","supportedPanels","select","getSupportedStyles","useColorVariations","colorVariations","property","length","variation","settings","styles","title","Object","keys","useTypographyVariations","typographyVariations","base","values","reduce","acc","bodyFontFamily","headingFontFamily"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport { getFontFamilies } from './utils';\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(\n\tblockEditorPrivateApis\n);\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ linkColor = headingColor ] = useGlobalStyle(\n\t\t'elements.link.color.text'\n\t);\n\n\tconst [ buttonBackgroundColor = linkColor ] = useGlobalStyle(\n\t\t'elements.button.color.background'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\n\tconst textColorObject = paletteColors.filter(\n\t\t( { color } ) => color === textColor\n\t);\n\tconst buttonBackgroundColorObject = paletteColors.filter(\n\t\t( { color } ) => color === buttonBackgroundColor\n\t);\n\n\tconst highlightedColors = textColorObject\n\t\t.concat( buttonBackgroundColorObject )\n\t\t.concat( paletteColors )\n\t\t.filter(\n\t\t\t// we exclude these background color because it is already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n\nexport function useColorVariations() {\n\tconst colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\tproperty: 'color',\n\t} );\n\t/*\n\t * Filter out variations with no settings or styles.\n\t */\n\treturn colorVariations?.length\n\t\t? colorVariations.filter( ( variation ) => {\n\t\t\t\tconst { settings, styles, title } = variation;\n\t\t\t\treturn (\n\t\t\t\t\ttitle === __( 'Default' ) || // Always preseve the default variation.\n\t\t\t\t\tObject.keys( settings ).length > 0 ||\n\t\t\t\t\tObject.keys( styles ).length > 0\n\t\t\t\t);\n\t\t  } )\n\t\t: [];\n}\n\nexport function useTypographyVariations() {\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t} );\n\n\tconst { base } = useContext( GlobalStylesContext );\n\t/*\n\t * Filter duplicate variations based on whether the variaitons\n\t * have different heading and body font families.\n\t */\n\treturn typographyVariations?.length\n\t\t? Object.values(\n\t\t\t\ttypographyVariations.reduce( ( acc, variation ) => {\n\t\t\t\t\tconst [ bodyFontFamily, headingFontFamily ] =\n\t\t\t\t\t\tgetFontFamilies(\n\t\t\t\t\t\t\tmergeBaseAndUserConfigs( base, variation )\n\t\t\t\t\t\t);\n\n\t\t\t\t\t// Always preseve the default variation.\n\t\t\t\t\tif ( variation?.title === 'Default' ) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t} else if (\n\t\t\t\t\t\theadingFontFamily?.name &&\n\t\t\t\t\t\tbodyFontFamily?.name &&\n\t\t\t\t\t\t! acc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t]\n\t\t\t\t\t) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t}\n\t\t\t\t\treturn acc;\n\t\t\t\t}, {} )\n\t\t  )\n\t\t: [];\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/global-styles/icon-with-current-color.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","Icon","IconWithCurrentColor","className","props","createElement"],"sources":["@wordpress/edit-site/src/components/global-styles/icon-with-current-color.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\n\nexport function IconWithCurrentColor( { className, ...props } ) {\n\treturn (\n\t\t<Icon\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'edit-site-global-styles-icon-with-current-color'\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,IAAI,QAAQ,uBAAuB;AAE5C,OAAO,SAASC,oBAAoBA,CAAE;EAAEC,SAAS;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC/D,OACCC,aAAA,CAACJ,IAAI;IACJE,SAAS,EAAGH,UAAU,CACrBG,SAAS,EACT,iDACD,CAAG;IAAA,GACEC;EAAK,CACV,CAAC;AAEJ"}
+{"version":3,"names":["classnames","Icon","IconWithCurrentColor","className","props","createElement"],"sources":["@wordpress/edit-site/src/components/global-styles/icon-with-current-color.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\n\nexport function IconWithCurrentColor( { className, ...props } ) {\n\treturn (\n\t\t<Icon\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'edit-site-global-styles-icon-with-current-color'\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,IAAI,QAAQ,uBAAuB;AAE5C,OAAO,SAASC,oBAAoBA,CAAE;EAAEC,SAAS;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC/D,OACCC,aAAA,CAACJ,IAAI;IACJE,SAAS,EAAGH,UAAU,CACrBG,SAAS,EACT,iDACD,CAAG;IAAA,GACEC;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["default","GlobalStylesUI"],"sources":["@wordpress/edit-site/src/components/global-styles/index.js"],"sourcesContent":["export { default as GlobalStylesUI } from './ui';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAAc,QAAQ,MAAM"}
+{"version":3,"names":["default","GlobalStylesUI"],"sources":["@wordpress/edit-site/src/components/global-styles/index.js"],"sourcesContent":["export { default as GlobalStylesUI } from './ui';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAAc,QAAQ,MAAM","ignoreList":[]}

package/build-module/components/global-styles/navigation-button.js.map

@@ -1 +1 @@
-{"version":3,"names":["__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorToParentButton","NavigatorToParentButton","__experimentalItem","Item","FlexItem","__experimentalHStack","HStack","IconWithCurrentColor","GenericNavigationButton","icon","children","props","createElement","justify","size","NavigationButtonAsItem","as","NavigationBackButtonAsItem"],"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalItem as Item,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\n\nfunction GenericNavigationButton( { icon, children, ...props } ) {\n\treturn (\n\t\t<Item { ...props }>\n\t\t\t{ icon && (\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<IconWithCurrentColor icon={ icon } size={ 24 } />\n\t\t\t\t\t<FlexItem>{ children }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ ! icon && children }\n\t\t</Item>\n\t);\n}\n\nfunction NavigationButtonAsItem( props ) {\n\treturn <NavigatorButton as={ GenericNavigationButton } { ...props } />;\n}\n\nfunction NavigationBackButtonAsItem( props ) {\n\treturn (\n\t\t<NavigatorToParentButton as={ GenericNavigationButton } { ...props } />\n\t);\n}\n\nexport { NavigationButtonAsItem, NavigationBackButtonAsItem };\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,6BAA6B,IAAIC,eAAe,EAChDC,qCAAqC,IAAIC,uBAAuB,EAChEC,kBAAkB,IAAIC,IAAI,EAC1BC,QAAQ,EACRC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE,SAASC,uBAAuBA,CAAE;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAG;EAChE,OACCC,aAAA,CAACT,IAAI;IAAA,GAAMQ;EAAK,GACbF,IAAI,IACLG,aAAA,CAACN,MAAM;IAACO,OAAO,EAAC;EAAY,GAC3BD,aAAA,CAACL,oBAAoB;IAACE,IAAI,EAAGA,IAAM;IAACK,IAAI,EAAG;EAAI,CAAE,CAAC,EAClDF,aAAA,CAACR,QAAQ,QAAGM,QAAoB,CACzB,CACR,EACC,CAAED,IAAI,IAAIC,QACP,CAAC;AAET;AAEA,SAASK,sBAAsBA,CAAEJ,KAAK,EAAG;EACxC,OAAOC,aAAA,CAACb,eAAe;IAACiB,EAAE,EAAGR,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AACvE;AAEA,SAASM,0BAA0BA,CAAEN,KAAK,EAAG;EAC5C,OACCC,aAAA,CAACX,uBAAuB;IAACe,EAAE,EAAGR,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AAEzE;AAEA,SAASI,sBAAsB,EAAEE,0BAA0B"}
+{"version":3,"names":["__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorToParentButton","NavigatorToParentButton","__experimentalItem","Item","FlexItem","__experimentalHStack","HStack","IconWithCurrentColor","GenericNavigationButton","icon","children","props","createElement","justify","size","NavigationButtonAsItem","as","NavigationBackButtonAsItem"],"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalItem as Item,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\n\nfunction GenericNavigationButton( { icon, children, ...props } ) {\n\treturn (\n\t\t<Item { ...props }>\n\t\t\t{ icon && (\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<IconWithCurrentColor icon={ icon } size={ 24 } />\n\t\t\t\t\t<FlexItem>{ children }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ ! icon && children }\n\t\t</Item>\n\t);\n}\n\nfunction NavigationButtonAsItem( props ) {\n\treturn <NavigatorButton as={ GenericNavigationButton } { ...props } />;\n}\n\nfunction NavigationBackButtonAsItem( props ) {\n\treturn (\n\t\t<NavigatorToParentButton as={ GenericNavigationButton } { ...props } />\n\t);\n}\n\nexport { NavigationButtonAsItem, NavigationBackButtonAsItem };\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,6BAA6B,IAAIC,eAAe,EAChDC,qCAAqC,IAAIC,uBAAuB,EAChEC,kBAAkB,IAAIC,IAAI,EAC1BC,QAAQ,EACRC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE,SAASC,uBAAuBA,CAAE;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAG;EAChE,OACCC,aAAA,CAACT,IAAI;IAAA,GAAMQ;EAAK,GACbF,IAAI,IACLG,aAAA,CAACN,MAAM;IAACO,OAAO,EAAC;EAAY,GAC3BD,aAAA,CAACL,oBAAoB;IAACE,IAAI,EAAGA,IAAM;IAACK,IAAI,EAAG;EAAI,CAAE,CAAC,EAClDF,aAAA,CAACR,QAAQ,QAAGM,QAAoB,CACzB,CACR,EACC,CAAED,IAAI,IAAIC,QACP,CAAC;AAET;AAEA,SAASK,sBAAsBA,CAAEJ,KAAK,EAAG;EACxC,OAAOC,aAAA,CAACb,eAAe;IAACiB,EAAE,EAAGR,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AACvE;AAEA,SAASM,0BAA0BA,CAAEN,KAAK,EAAG;EAC5C,OACCC,aAAA,CAACX,uBAAuB;IAACe,EAAE,EAAGR,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AAEzE;AAEA,SAASI,sBAAsB,EAAEE,0BAA0B","ignoreList":[]}

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

@@ -54,7 +54,9 @@ function Palette({
     key: `${color}-${index}`
   }, createElement(ColorIndicator, {
     colorValue: color
-  })))), createElement(FlexItem, null, paletteButtonText)))), window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && createElement(Button, {
+  })))), createElement(FlexItem, {
+    className: "edit-site-global-styles-screen-colors__palette-count"
+  }, paletteButtonText)))), window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && createElement(Button, {
     variant: "secondary",
     icon: shuffle,
     onClick: randomizeThemeColors

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalItemGroup","ItemGroup","FlexItem","__experimentalHStack","HStack","__experimentalZStack","ZStack","__experimentalVStack","VStack","ColorIndicator","Button","__","_n","sprintf","shuffle","useMemo","privateApis","blockEditorPrivateApis","Subtitle","NavigationButtonAsItem","useColorRandomizer","ColorIndicatorWrapper","unlock","useGlobalSetting","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","colors","screenPath","encodeURIComponent","paletteButtonText","length","createElement","spacing","level","isBordered","isSeparated","path","direction","isLayered","offset","slice","map","color","index","key","colorValue","window","__experimentalEnableColorRandomizer","variant","icon","onClick"],"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":["__experimentalItemGroup","ItemGroup","FlexItem","__experimentalHStack","HStack","__experimentalZStack","ZStack","__experimentalVStack","VStack","ColorIndicator","Button","__","_n","sprintf","shuffle","useMemo","privateApis","blockEditorPrivateApis","Subtitle","NavigationButtonAsItem","useColorRandomizer","ColorIndicatorWrapper","unlock","useGlobalSetting","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","colors","screenPath","encodeURIComponent","paletteButtonText","length","createElement","spacing","level","isBordered","isSeparated","path","direction","isLayered","offset","slice","map","color","index","key","colorValue","className","window","__experimentalEnableColorRandomizer","variant","icon","onClick"],"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 className=\"edit-site-global-styles-screen-colors__palette-count\">\n\t\t\t\t\t\t\t{ paletteButtonText }\n\t\t\t\t\t\t</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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","ignoreList":[]}

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

@@ -39,14 +39,14 @@ const StylesPreviewColors = ({
       overflow: 'hidden'
     }
   }, createElement(HStack, {
-    spacing: 10 * ratio,
+    spacing: 5 * ratio,
     justify: "center",
     style: {
       height: '100%',
       overflow: 'hidden'
     }
   }, createElement(HighlightedColors, {
-    normalizedColorSwatchSize: 66,
+    normalizedColorSwatchSize: 56,
     ratio: ratio
   }))));
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalHStack","HStack","__unstableMotion","motion","HighlightedColors","PreviewIframe","firstFrameVariants","start","scale","opacity","hover","StylesPreviewColors","label","isFocused","withHoverView","createElement","ratio","key","div","variants","style","height","overflow","spacing","justify","normalizedColorSwatchSize"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport HighlightedColors from './highlighted-colors';\nimport PreviewIframe from './preview-iframe';\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 StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {\n\treturn (\n\t\t<PreviewIframe\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<HighlightedColors\n\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 66 }\n\t\t\t\t\t\t\tratio={ ratio }\n\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</PreviewIframe>\n\t);\n};\n\nexport default StylesPreviewColors;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,gBAAgB,IAAIC,MAAM,QACpB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,sBAAsB;AACpD,OAAOC,aAAa,MAAM,kBAAkB;AAE5C,MAAMC,kBAAkB,GAAG;EAC1BC,KAAK,EAAE;IACNC,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACNF,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACV;AACD,CAAC;AAED,MAAME,mBAAmB,GAAGA,CAAE;EAAEC,KAAK;EAAEC,SAAS;EAAEC;AAAc,CAAC,KAAM;EACtE,OACCC,aAAA,CAACV,aAAa;IACbO,KAAK,EAAGA,KAAO;IACfC,SAAS,EAAGA,SAAW;IACvBC,aAAa,EAAGA;EAAe,GAE7B,CAAE;IAAEE,KAAK;IAAEC;EAAI,CAAC,KACjBF,aAAA,CAACZ,MAAM,CAACe,GAAG;IACVD,GAAG,EAAGA,GAAK;IACXE,QAAQ,EAAGb,kBAAoB;IAC/Bc,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHP,aAAA,CAACd,MAAM;IACNsB,OAAO,EAAG,EAAE,GAAGP,KAAO;IACtBQ,OAAO,EAAC,QAAQ;IAChBJ,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHP,aAAA,CAACX,iBAAiB;IACjBqB,yBAAyB,EAAG,EAAI;IAChCT,KAAK,EAAGA;EAAO,CACf,CACM,CACG,CAEC,CAAC;AAElB,CAAC;AAED,eAAeL,mBAAmB"}
+{"version":3,"names":["__experimentalHStack","HStack","__unstableMotion","motion","HighlightedColors","PreviewIframe","firstFrameVariants","start","scale","opacity","hover","StylesPreviewColors","label","isFocused","withHoverView","createElement","ratio","key","div","variants","style","height","overflow","spacing","justify","normalizedColorSwatchSize"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport HighlightedColors from './highlighted-colors';\nimport PreviewIframe from './preview-iframe';\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 StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {\n\treturn (\n\t\t<PreviewIframe\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={ 5 * 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<HighlightedColors\n\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 56 }\n\t\t\t\t\t\t\tratio={ ratio }\n\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</PreviewIframe>\n\t);\n};\n\nexport default StylesPreviewColors;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,gBAAgB,IAAIC,MAAM,QACpB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,sBAAsB;AACpD,OAAOC,aAAa,MAAM,kBAAkB;AAE5C,MAAMC,kBAAkB,GAAG;EAC1BC,KAAK,EAAE;IACNC,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACNF,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACV;AACD,CAAC;AAED,MAAME,mBAAmB,GAAGA,CAAE;EAAEC,KAAK;EAAEC,SAAS;EAAEC;AAAc,CAAC,KAAM;EACtE,OACCC,aAAA,CAACV,aAAa;IACbO,KAAK,EAAGA,KAAO;IACfC,SAAS,EAAGA,SAAW;IACvBC,aAAa,EAAGA;EAAe,GAE7B,CAAE;IAAEE,KAAK;IAAEC;EAAI,CAAC,KACjBF,aAAA,CAACZ,MAAM,CAACe,GAAG;IACVD,GAAG,EAAGA,GAAK;IACXE,QAAQ,EAAGb,kBAAoB;IAC/Bc,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHP,aAAA,CAACd,MAAM;IACNsB,OAAO,EAAG,CAAC,GAAGP,KAAO;IACrBQ,OAAO,EAAC,QAAQ;IAChBJ,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHP,aAAA,CAACX,iBAAiB;IACjBqB,yBAAyB,EAAG,EAAI;IAChCT,KAAK,EAAGA;EAAO,CACf,CACM,CACG,CAEC,CAAC;AAElB,CAAC;AAED,eAAeL,mBAAmB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","useMemo","unlock","useGlobalStyle","useGlobalStylesOutput","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewIframe","children","label","isFocused","withHoverView","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","editorStyles","css","isGlobalStyles","isReady","createElement","Fragment","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-iframe.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 { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\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 PreviewIframe( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\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 [ 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 iframe 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 iframe 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\t/*\n\t * Reset leaked styles from WP common.css and remove main content layout padding and border.\n\t * Add pointer cursor to the body to indicate the iframe is interactive,\n\t * similar to Typography variation previews.\n\t */\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;cursor: pointer;}',\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{ []\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</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","useMemo","unlock","useGlobalStyle","useGlobalStylesOutput","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewIframe","children","label","isFocused","withHoverView","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","editorStyles","css","isGlobalStyles","isReady","createElement","Fragment","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-iframe.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 { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\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 PreviewIframe( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\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 [ 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 iframe 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 iframe 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\t/*\n\t * Reset leaked styles from WP common.css and remove main content layout padding and border.\n\t * Add pointer cursor to the body to indicate the iframe is interactive,\n\t * similar to Typography variation previews.\n\t */\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;cursor: pointer;}',\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{ []\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</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["privateApis","blockEditorPrivateApis","__experimentalHStack","HStack","__experimentalVStack","VStack","__unstableMotion","motion","unlock","useStylesPreviewColors","TypographyExample","HighlightedColors","PreviewIframe","useGlobalStyle","firstFrameVariants","start","scale","opacity","hover","midFrameVariants","secondFrameVariants","PreviewStyles","label","isFocused","withHoverView","variation","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","paletteColors","createElement","ratio","key","div","variants","style","height","overflow","spacing","justify","fontSize","normalizedColorSwatchSize","width","position","top","filter","slice","map","color","index","background","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/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 PreviewIframe from './preview-iframe';\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<PreviewIframe\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</PreviewIframe>\n\t);\n};\n\nexport default PreviewStyles;\n"],"mappings":"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"}
+{"version":3,"names":["privateApis","blockEditorPrivateApis","__experimentalHStack","HStack","__experimentalVStack","VStack","__unstableMotion","motion","unlock","useStylesPreviewColors","TypographyExample","HighlightedColors","PreviewIframe","useGlobalStyle","firstFrameVariants","start","scale","opacity","hover","midFrameVariants","secondFrameVariants","PreviewStyles","label","isFocused","withHoverView","variation","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","paletteColors","createElement","ratio","key","div","variants","style","height","overflow","spacing","justify","fontSize","normalizedColorSwatchSize","width","position","top","filter","slice","map","color","index","background","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/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 PreviewIframe from './preview-iframe';\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<PreviewIframe\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</PreviewIframe>\n\t);\n};\n\nexport default PreviewStyles;\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,7 +3,7 @@ import { createElement, Fragment } from "react";
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout } from '@wordpress/icons';
+import { typography, color, layout, image } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -17,7 +17,8 @@ const {
   useHasTypographyPanel,
   useHasColorPanel,
   useGlobalSetting,
-  useSettingsForBlockElement
+  useSettingsForBlockElement,
+  useHasBackgroundPanel
 } = unlock(blockEditorPrivateApis);
 function RootMenu() {
   const [rawSettings] = useGlobalSetting('');
@@ -26,6 +27,7 @@ function RootMenu() {
   const hasColorPanel = useHasColorPanel(settings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasLayoutPanel = hasDimensionsPanel;
+  const hasBackgroundPanel = useHasBackgroundPanel(settings);
   return createElement(Fragment, null, createElement(ItemGroup, null, hasTypographyPanel && createElement(NavigationButtonAsItem, {
     icon: typography,
     path: "/typography",
@@ -38,7 +40,11 @@ function RootMenu() {
     icon: layout,
     path: "/layout",
     "aria-label": __('Layout styles')
-  }, __('Layout'))));
+  }, __('Layout')), hasBackgroundPanel && createElement(NavigationButtonAsItem, {
+    icon: image,
+    path: "/background",
+    "aria-label": __('Background image styles')
+  }, __('Background image'))));
 }
 export default RootMenu;
 //# sourceMappingURL=root-menu.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalItemGroup","ItemGroup","typography","color","layout","__","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","createElement","Fragment","icon","path"],"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":";AAAA;AACA;AACA;AACA,SAASA,uBAAuB,IAAIC,SAAS,QAAQ,uBAAuB;AAC5E,SAASC,UAAU,EAAEC,KAAK,EAAEC,MAAM,QAAQ,kBAAkB;AAC5D,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EACLC,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC,gBAAgB;EAChBC;AACD,CAAC,GAAGL,MAAM,CAAEF,sBAAuB,CAAC;AAEpC,SAASQ,QAAQA,CAAA,EAAG;EACnB,MAAM,CAAEC,WAAW,CAAE,GAAGH,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMI,QAAQ,GAAGH,0BAA0B,CAAEE,WAAY,CAAC;EAC1D,MAAME,kBAAkB,GAAGP,qBAAqB,CAAEM,QAAS,CAAC;EAC5D,MAAME,aAAa,GAAGP,gBAAgB,CAAEK,QAAS,CAAC;EAClD,MAAMG,kBAAkB,GAAGV,qBAAqB,CAAEO,QAAS,CAAC;EAC5D,MAAMI,cAAc,GAAGD,kBAAkB;EAEzC,OACCE,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACrB,SAAS,QACPiB,kBAAkB,IACnBI,aAAA,CAACd,sBAAsB;IACtBgB,IAAI,EAAGtB,UAAY;IACnBuB,IAAI,EAAC,aAAa;IAClB,cAAapB,EAAE,CAAE,mBAAoB;EAAG,GAEtCA,EAAE,CAAE,YAAa,CACI,CACxB,EACCc,aAAa,IACdG,aAAA,CAACd,sBAAsB;IACtBgB,IAAI,EAAGrB,KAAO;IACdsB,IAAI,EAAC,SAAS;IACd,cAAapB,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CACxB,EACCgB,cAAc,IACfC,aAAA,CAACd,sBAAsB;IACtBgB,IAAI,EAAGpB,MAAQ;IACfqB,IAAI,EAAC,SAAS;IACd,cAAapB,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CAEf,CACV,CAAC;AAEL;AAEA,eAAeU,QAAQ"}
+{"version":3,"names":["__experimentalItemGroup","ItemGroup","typography","color","layout","image","__","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","useHasBackgroundPanel","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","hasBackgroundPanel","createElement","Fragment","icon","path"],"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, image } 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\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\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\t{ hasBackgroundPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ image }\n\t\t\t\t\t\tpath=\"/background\"\n\t\t\t\t\t\taria-label={ __( 'Background image styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Background image' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,uBAAuB,IAAIC,SAAS,QAAQ,uBAAuB;AAC5E,SAASC,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,KAAK,QAAQ,kBAAkB;AACnE,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EACLC,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC,gBAAgB;EAChBC,0BAA0B;EAC1BC;AACD,CAAC,GAAGN,MAAM,CAAEF,sBAAuB,CAAC;AAEpC,SAASS,QAAQA,CAAA,EAAG;EACnB,MAAM,CAAEC,WAAW,CAAE,GAAGJ,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMK,QAAQ,GAAGJ,0BAA0B,CAAEG,WAAY,CAAC;EAC1D,MAAME,kBAAkB,GAAGR,qBAAqB,CAAEO,QAAS,CAAC;EAC5D,MAAME,aAAa,GAAGR,gBAAgB,CAAEM,QAAS,CAAC;EAClD,MAAMG,kBAAkB,GAAGX,qBAAqB,CAAEQ,QAAS,CAAC;EAC5D,MAAMI,cAAc,GAAGD,kBAAkB;EACzC,MAAME,kBAAkB,GAAGR,qBAAqB,CAAEG,QAAS,CAAC;EAE5D,OACCM,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACxB,SAAS,QACPmB,kBAAkB,IACnBK,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGzB,UAAY;IACnB0B,IAAI,EAAC,aAAa;IAClB,cAAatB,EAAE,CAAE,mBAAoB;EAAG,GAEtCA,EAAE,CAAE,YAAa,CACI,CACxB,EACCe,aAAa,IACdI,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGxB,KAAO;IACdyB,IAAI,EAAC,SAAS;IACd,cAAatB,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CACxB,EACCiB,cAAc,IACfE,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGvB,MAAQ;IACfwB,IAAI,EAAC,SAAS;IACd,cAAatB,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CACxB,EACCkB,kBAAkB,IACnBC,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGtB,KAAO;IACduB,IAAI,EAAC,aAAa;IAClB,cAAatB,EAAE,CAAE,yBAA0B;EAAG,GAE5CA,EAAE,CAAE,kBAAmB,CACF,CAEf,CACV,CAAC;AAEL;AAEA,eAAeW,QAAQ","ignoreList":[]}

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

@@ -0,0 +1,26 @@
+import { createElement, Fragment } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+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 createElement(Fragment, null, createElement(ScreenHeader, {
+    title: __('Background image')
+  }), hasBackgroundPanel && createElement(BackgroundPanel, null));
+}
+export default ScreenBackground;
+//# sourceMappingURL=screen-background.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","privateApis","blockEditorPrivateApis","BackgroundPanel","ScreenHeader","unlock","useHasBackgroundPanel","useGlobalSetting","ScreenBackground","settings","hasBackgroundPanel","createElement","Fragment","title"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-background.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\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 title={ __( 'Background image' ) } />\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenBackground;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,YAAY,MAAM,UAAU;AACnC,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC,qBAAqB;EAAEC;AAAiB,CAAC,GAAGF,MAAM,CACzDH,sBACD,CAAC;AAED,SAASM,gBAAgBA,CAAA,EAAG;EAC3B,MAAM,CAAEC,QAAQ,CAAE,GAAGF,gBAAgB,CAAE,EAAG,CAAC;EAC3C,MAAMG,kBAAkB,GAAGJ,qBAAqB,CAAEG,QAAS,CAAC;EAC5D,OACCE,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACP,YAAY;IAACS,KAAK,EAAGb,EAAE,CAAE,kBAAmB;EAAG,CAAE,CAAC,EACjDU,kBAAkB,IAAIC,aAAA,CAACR,eAAe,MAAE,CACzC,CAAC;AAEL;AAEA,eAAeK,gBAAgB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["store","blocksStore","__","sprintf","_n","FlexItem","SearchControl","__experimentalHStack","HStack","useSelect","useState","useEffect","useRef","useDeferredValue","memo","BlockIcon","privateApis","blockEditorPrivateApis","useDebounce","speak","useBlockVariations","ScreenHeader","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","useSortedBlockTypes","blockItems","select","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","useBlockHasGlobalStyles","blockName","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","length","hasGlobalStyles","BlockMenuItem","hasBlockMenuItem","navigationButtonLabel","title","createElement","path","encodeURIComponent","justify","icon","BlockList","filterValue","sortedBlockTypes","debouncedSpeak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","ref","className","map","key","MemoizedBlockList","ScreenBlockList","setFilterValue","deferredFilterValue","Fragment","description","__nextHasNoMarginBottom","onChange","value","label","placeholder"],"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 {\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\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 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>\n\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t<BlockMenuItem\n\t\t\t\t\tblock={ block }\n\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\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 for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<MemoizedBlockList filterValue={ deferredFilterValue } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],"mappings":"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"}
+{"version":3,"names":["store","blocksStore","__","sprintf","_n","FlexItem","SearchControl","__experimentalHStack","HStack","useSelect","useState","useEffect","useRef","useDeferredValue","memo","BlockIcon","privateApis","blockEditorPrivateApis","useDebounce","speak","useBlockVariations","ScreenHeader","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","useSortedBlockTypes","blockItems","select","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","useBlockHasGlobalStyles","blockName","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","length","hasGlobalStyles","BlockMenuItem","hasBlockMenuItem","navigationButtonLabel","title","createElement","path","encodeURIComponent","justify","icon","BlockList","filterValue","sortedBlockTypes","debouncedSpeak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","ref","className","map","key","MemoizedBlockList","ScreenBlockList","setFilterValue","deferredFilterValue","Fragment","description","__nextHasNoMarginBottom","onChange","value","label","placeholder"],"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 {\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\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 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>\n\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t<BlockMenuItem\n\t\t\t\t\tblock={ block }\n\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\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 for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<MemoizedBlockList filterValue={ deferredFilterValue } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],"mappings":"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","ignoreList":[]}