@wordpress/edit-site 4.19.0 → 5.1.0

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

@@ -67,7 +67,7 @@ function BlockMenuItem(_ref) {
   const navigationButtonLabel = sprintf( // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
   __('%s block styles'), block.title);
   return createElement(NavigationButtonAsItem, {
-    path: '/blocks/' + block.name,
+    path: '/blocks/' + encodeURIComponent(block.name),
     "aria-label": navigationButtonLabel
   }, createElement(HStack, {
     justify: "flex-start"
@@ -113,6 +113,7 @@ function ScreenBlockList() {
     title: __('Blocks'),
     description: __('Customize the appearance of specific blocks and for the whole site.')
   }), createElement(SearchControl, {
+    __nextHasNoMarginBottom: true,
     className: "edit-site-block-types-search",
     onChange: setFilterValue,
     value: filterValue,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["store","blocksStore","__","sprintf","_n","FlexItem","SearchControl","__experimentalHStack","HStack","useSelect","useState","useMemo","useEffect","useRef","BlockIcon","useDebounce","speak","useHasBorderPanel","useHasColorPanel","useHasDimensionsPanel","useHasTypographyPanel","ScreenHeader","NavigationButtonAsItem","useSortedBlockTypes","blockItems","select","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","navigationButtonLabel","title","icon","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,WAAlB,QAAqC,mBAArC;AACA,SAASC,EAAT,EAAaC,OAAb,EAAsBC,EAAtB,QAAgC,iBAAhC;AACA,SACCC,QADD,EAECC,aAFD,EAGCC,oBAAoB,IAAIC,MAHzB,QAIO,uBAJP;AAKA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,QAAT,EAAmBC,OAAnB,EAA4BC,SAA5B,EAAuCC,MAAvC,QAAqD,oBAArD;AACA,SAASC,SAAT,QAA0B,yBAA1B;AACA,SAASC,WAAT,QAA4B,oBAA5B;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,QAAkC,gBAAlC;AACA,SAASC,gBAAT,QAAiC,eAAjC;AACA,SAASC,qBAAT,QAAsC,oBAAtC;AACA,SAASC,qBAAT,QAAsC,oBAAtC;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SAASC,sBAAT,QAAuC,qBAAvC;;AAEA,SAASC,mBAAT,GAA+B;AAC9B,QAAMC,UAAU,GAAGf,SAAS,CACzBgB,MAAF,IAAcA,MAAM,CAAExB,WAAF,CAAN,CAAsByB,aAAtB,EADa,EAE3B,EAF2B,CAA5B,CAD8B,CAK9B;AACA;AACA;AACA;AACA;;AACA,QAAMC,WAAW,GAAG,CAAEC,MAAF,EAAUC,KAAV,KAAqB;AACxC,UAAM;AAAEC,MAAAA,IAAF;AAAQC,MAAAA;AAAR,QAAoBH,MAA1B;AACA,UAAMI,IAAI,GAAGH,KAAK,CAACI,IAAN,CAAWC,UAAX,CAAuB,OAAvB,IAAmCJ,IAAnC,GAA0CC,OAAvD;AACAC,IAAAA,IAAI,CAACG,IAAL,CAAWN,KAAX;AACA,WAAOD,MAAP;AACA,GALD;;AAMA,QAAM;AAAEE,IAAAA,IAAI,EAAEM,SAAR;AAAmBL,IAAAA,OAAO,EAAEM;AAA5B,MAA6Cb,UAAU,CAACc,MAAX,CAClDX,WADkD,EAElD;AAAEG,IAAAA,IAAI,EAAE,EAAR;AAAYC,IAAAA,OAAO,EAAE;AAArB,GAFkD,CAAnD;AAIA,SAAO,CAAE,GAAGK,SAAL,EAAgB,GAAGC,YAAnB,CAAP;AACA;;AAED,SAASE,aAAT,OAAoC;AAAA,MAAZ;AAAEV,IAAAA;AAAF,GAAY;AACnC,QAAMW,kBAAkB,GAAGpB,qBAAqB,CAAES,KAAK,CAACI,IAAR,CAAhD;AACA,QAAMQ,aAAa,GAAGvB,gBAAgB,CAAEW,KAAK,CAACI,IAAR,CAAtC;AACA,QAAMS,cAAc,GAAGzB,iBAAiB,CAAEY,KAAK,CAACI,IAAR,CAAxC;AACA,QAAMU,kBAAkB,GAAGxB,qBAAqB,CAAEU,KAAK,CAACI,IAAR,CAAhD;AACA,QAAMW,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AACA,QAAME,gBAAgB,GACrBL,kBAAkB,IAAIC,aAAtB,IAAuCG,cADxC;;AAGA,MAAK,CAAEC,gBAAP,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,QAAMC,qBAAqB,GAAG3C,OAAO,EACpC;AACAD,EAAAA,EAAE,CAAE,iBAAF,CAFkC,EAGpC2B,KAAK,CAACkB,KAH8B,CAArC;AAMA,SACC,cAAC,sBAAD;AACC,IAAA,IAAI,EAAG,aAAalB,KAAK,CAACI,IAD3B;AAEC,kBAAaa;AAFd,KAIC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,SAAD;AAAW,IAAA,IAAI,EAAGjB,KAAK,CAACmB;AAAxB,IADD,EAEC,cAAC,QAAD,QAAYnB,KAAK,CAACkB,KAAlB,CAFD,CAJD,CADD;AAWA;;AAED,SAASE,eAAT,GAA2B;AAC1B,QAAMC,gBAAgB,GAAG3B,mBAAmB,EAA5C;AACA,QAAM,CAAE4B,WAAF,EAAeC,cAAf,IAAkC1C,QAAQ,CAAE,EAAF,CAAhD;AACA,QAAM2C,cAAc,GAAGtC,WAAW,CAAEC,KAAF,EAAS,GAAT,CAAlC;AACA,QAAMsC,oBAAoB,GAAG7C,SAAS,CACnCgB,MAAF,IAAcA,MAAM,CAAExB,WAAF,CAAN,CAAsBqD,oBADC,EAErC,EAFqC,CAAtC;AAIA,QAAMC,kBAAkB,GAAG5C,OAAO,CAAE,MAAM;AACzC,QAAK,CAAEwC,WAAP,EAAqB;AACpB,aAAOD,gBAAP;AACA;;AACD,WAAOA,gBAAgB,CAACM,MAAjB,CAA2BC,SAAF,IAC/BH,oBAAoB,CAAEG,SAAF,EAAaN,WAAb,CADd,CAAP;AAGA,GAPiC,EAO/B,CAAEA,WAAF,EAAeD,gBAAf,EAAiCI,oBAAjC,CAP+B,CAAlC;AASA,QAAMI,iBAAiB,GAAG7C,MAAM,EAAhC,CAjB0B,CAmB1B;;AACAD,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,CAAEuC,WAAP,EAAqB;AACpB;AACA,KAHe,CAIhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,UAAMQ,KAAK,GAAGD,iBAAiB,CAACE,OAAlB,CAA0BC,iBAAxC;AACA,UAAMC,mBAAmB,GAAG3D,OAAO;AAClC;AACAC,IAAAA,EAAE,CAAE,kBAAF,EAAsB,mBAAtB,EAA2CuD,KAA3C,CAFgC,EAGlCA,KAHkC,CAAnC;AAKAN,IAAAA,cAAc,CAAES,mBAAF,EAAuBH,KAAvB,CAAd;AACA,GAnBQ,EAmBN,CAAER,WAAF,EAAeE,cAAf,CAnBM,CAAT;AAqBA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGnD,EAAE,CAAE,QAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,qEADe;AAFjB,IADD,EAOC,cAAC,aAAD;AACC,IAAA,SAAS,EAAC,8BADX;AAEC,IAAA,QAAQ,EAAGkD,cAFZ;AAGC,IAAA,KAAK,EAAGD,WAHT;AAIC,IAAA,KAAK,EAAGjD,EAAE,CAAE,mBAAF,CAJX;AAKC,IAAA,WAAW,EAAGA,EAAE,CAAE,QAAF;AALjB,IAPD,EAcC;AACC,IAAA,GAAG,EAAGwD,iBADP;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGH,kBAAkB,CAACQ,GAAnB,CAA0BlC,KAAF,IACzB,cAAC,aAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,GAAG,EAAG,oBAAoBA,KAAK,CAACI;AAFjC,IADC,CAJH,CAdD,CADD;AA4BA;;AAED,eAAegB,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport { BlockIcon } from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\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\nfunction BlockMenuItem( { block } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( block.name );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel || hasColorPanel || hasLayoutPanel;\n\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/' + block.name }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["store","blocksStore","__","sprintf","_n","FlexItem","SearchControl","__experimentalHStack","HStack","useSelect","useState","useMemo","useEffect","useRef","BlockIcon","useDebounce","speak","useHasBorderPanel","useHasColorPanel","useHasDimensionsPanel","useHasTypographyPanel","ScreenHeader","NavigationButtonAsItem","useSortedBlockTypes","blockItems","select","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","navigationButtonLabel","title","encodeURIComponent","icon","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport { BlockIcon } from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\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\nfunction BlockMenuItem( { block } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( block.name );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel || hasColorPanel || hasLayoutPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}

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

@@ -10,6 +10,7 @@ import { getBlockType } from '@wordpress/blocks';
 
 import ContextMenu from './context-menu';
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenBlock(_ref) {
   let {
@@ -18,8 +19,10 @@ function ScreenBlock(_ref) {
   const blockType = getBlockType(name);
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: blockType.title
+  }), createElement(BlockPreviewPanel, {
+    name: name
   }), createElement(ContextMenu, {
-    parentMenu: '/blocks/' + name,
+    parentMenu: '/blocks/' + encodeURIComponent(name),
     name: name
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"names":["getBlockType","ContextMenu","ScreenHeader","ScreenBlock","name","blockType","title"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,QAA6B,mBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,WAAT,OAAiC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAChC,QAAMC,SAAS,GAAGL,YAAY,CAAEI,IAAF,CAA9B;AAEA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGC,SAAS,CAACC;AAAhC,IADD,EAEC,cAAC,WAAD;AAAa,IAAA,UAAU,EAAG,aAAaF,IAAvC;AAA8C,IAAA,IAAI,EAAGA;AAArD,IAFD,CADD;AAMA;;AAED,eAAeD,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ContextMenu from './context-menu';\nimport ScreenHeader from './header';\n\nfunction ScreenBlock( { name } ) {\n\tconst blockType = getBlockType( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ blockType.title } />\n\t\t\t<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"names":["getBlockType","ContextMenu","ScreenHeader","BlockPreviewPanel","ScreenBlock","name","blockType","title","encodeURIComponent"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,QAA6B,mBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;;AAEA,SAASC,WAAT,OAAiC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAChC,QAAMC,SAAS,GAAGN,YAAY,CAAEK,IAAF,CAA9B;AAEA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGC,SAAS,CAACC;AAAhC,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGF;AAA1B,IAFD,EAGC,cAAC,WAAD;AACC,IAAA,UAAU,EAAG,aAAaG,kBAAkB,CAAEH,IAAF,CAD7C;AAEC,IAAA,IAAI,EAAGA;AAFR,IAHD,CADD;AAUA;;AAED,eAAeD,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ContextMenu from './context-menu';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\n\nfunction ScreenBlock( { name } ) {\n\tconst blockType = getBlockType( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ blockType.title } />\n\t\t\t<BlockPreviewPanel name={ name } />\n\t\t\t<ContextMenu\n\t\t\t\tparentMenu={ '/blocks/' + encodeURIComponent( name ) }\n\t\t\t\tname={ name }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"]}

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

@@ -0,0 +1,30 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import ScreenHeader from './header';
+import BorderPanel, { useHasBorderPanel } from './border-panel';
+import BlockPreviewPanel from './block-preview-panel';
+
+function ScreenBorder(_ref) {
+  let {
+    name
+  } = _ref;
+  const hasBorderPanel = useHasBorderPanel(name);
+  return createElement(Fragment, null, createElement(ScreenHeader, {
+    title: __('Border')
+  }), createElement(BlockPreviewPanel, {
+    name: name
+  }), hasBorderPanel && createElement(BorderPanel, {
+    name: name
+  }));
+}
+
+export default ScreenBorder;
+//# sourceMappingURL=screen-border.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-border.js"],"names":["__","ScreenHeader","BorderPanel","useHasBorderPanel","BlockPreviewPanel","ScreenBorder","name","hasBorderPanel"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,WAAP,IAAsBC,iBAAtB,QAA+C,gBAA/C;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;;AAEA,SAASC,YAAT,OAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAMC,cAAc,GAAGJ,iBAAiB,CAAEG,IAAF,CAAxC;AAEA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGN,EAAE,CAAE,QAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGM;AAA1B,IAFD,EAGGC,cAAc,IAAI,cAAC,WAAD;AAAa,IAAA,IAAI,EAAGD;AAApB,IAHrB,CADD;AAOA;;AAED,eAAeD,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BorderPanel, { useHasBorderPanel } from './border-panel';\nimport BlockPreviewPanel from './block-preview-panel';\n\nfunction ScreenBorder( { name } ) {\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Border' ) } />\n\t\t\t<BlockPreviewPanel name={ name } />\n\t\t\t{ hasBorderPanel && <BorderPanel name={ name } /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenBorder;\n"]}

package/build-module/components/global-styles/screen-button-color.js

@@ -40,7 +40,6 @@ function ScreenButtonColor(_ref) {
     className: "edit-site-screen-button-color__control",
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
-    __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true,
@@ -53,7 +52,6 @@ function ScreenButtonColor(_ref) {
     className: "edit-site-screen-button-color__control",
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
-    __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-button-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenButtonColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isBackgroundEnabled","hasButtonColor","includes","length","buttonTextColor","setButtonTextColor","userButtonTextColor","buttonBgColor","setButtonBgColor","userButtonBgColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,kCAAkC,IAAIC,oBAA/C,QAA2E,yBAA3E;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SACCC,8BADD,EAECC,UAFD,EAGCC,QAHD,EAICC,kBAJD,QAKO,SALP;;AAOA,SAASC,iBAAT,OAAuC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACtC,QAAMC,QAAQ,GAAGN,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAM,CAAEE,MAAF,IAAaN,UAAU,CAAE,eAAF,EAAmBI,IAAnB,CAA7B;AACA,QAAM,CAAEG,sBAAF,IAA6BP,UAAU,CAAE,cAAF,EAAkBI,IAAlB,CAA7C;AAEA,QAAMI,eAAe,GAAGN,kBAAkB,CAAEE,IAAF,CAA1C;AAEA,QAAM,CAAEK,mBAAF,IAA0BT,UAAU,CAAE,kBAAF,EAAsBI,IAAtB,CAA1C;AAEA,QAAMM,cAAc,GACnBL,QAAQ,CAACM,QAAT,CAAmB,aAAnB,KACAF,mBADA,KAEEH,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,eAAF,EAAmBC,kBAAnB,IAA0Cb,QAAQ,CACvD,4BADuD,EAEvDG,IAFuD,CAAxD;AAIA,QAAM,CAAEW,mBAAF,IAA0Bd,QAAQ,CACvC,4BADuC,EAEvCG,IAFuC,EAGvC,MAHuC,CAAxC;AAMA,QAAM,CAAEY,aAAF,EAAiBC,gBAAjB,IAAsChB,QAAQ,CACnD,kCADmD,EAEnDG,IAFmD,CAApD;AAIA,QAAM,CAAEc,iBAAF,IAAwBjB,QAAQ,CACrC,kCADqC,EAErCG,IAFqC,EAGrC,MAHqC,CAAtC;;AAMA,MAAK,CAAEM,cAAP,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGf,EAAE,CAAE,SAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,0DADe;AAFjB,IADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGA,EAAE,CAAE,YAAF,CADL,CARD,EAYC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGa,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAED,sBAHzB;AAIC,IAAA,gCAAgC,MAJjC;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,WAAW,MANZ;AAOC,IAAA,iCAAiC,MAPlC;AAQC,IAAA,UAAU,EAAGM,eARd;AASC,IAAA,aAAa,EAAGC,kBATjB;AAUC,IAAA,SAAS,EAAGD,eAAe,KAAKE;AAVjC,IAZD,EAyBC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGpB,EAAE,CAAE,kBAAF,CADL,CAzBD,EA6BC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGa,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAED,sBAHzB;AAIC,IAAA,gCAAgC,MAJjC;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,WAAW,MANZ;AAOC,IAAA,iCAAiC,MAPlC;AAQC,IAAA,UAAU,EAAGS,aARd;AASC,IAAA,aAAa,EAAGC,gBATjB;AAUC,IAAA,SAAS,EAAGD,aAAa,KAAKE;AAV/B,IA7BD,CADD;AA4CA;;AAED,eAAef,iBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenButtonColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst hasButtonColor =\n\t\tsupports.includes( 'buttonColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ buttonTextColor, setButtonTextColor ] = useStyle(\n\t\t'elements.button.color.text',\n\t\tname\n\t);\n\tconst [ userButtonTextColor ] = useStyle(\n\t\t'elements.button.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ buttonBgColor, setButtonBgColor ] = useStyle(\n\t\t'elements.button.color.background',\n\t\tname\n\t);\n\tconst [ userButtonBgColor ] = useStyle(\n\t\t'elements.button.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasButtonColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Buttons' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default colors used for buttons across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<h4 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Text color' ) }\n\t\t\t</h4>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonTextColor }\n\t\t\t\tonColorChange={ setButtonTextColor }\n\t\t\t\tclearable={ buttonTextColor === userButtonTextColor }\n\t\t\t/>\n\n\t\t\t<h4 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Background color' ) }\n\t\t\t</h4>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonBgColor }\n\t\t\t\tonColorChange={ setButtonBgColor }\n\t\t\t\tclearable={ buttonBgColor === userButtonBgColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenButtonColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-button-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenButtonColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isBackgroundEnabled","hasButtonColor","includes","length","buttonTextColor","setButtonTextColor","userButtonTextColor","buttonBgColor","setButtonBgColor","userButtonBgColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,kCAAkC,IAAIC,oBAA/C,QAA2E,yBAA3E;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SACCC,8BADD,EAECC,UAFD,EAGCC,QAHD,EAICC,kBAJD,QAKO,SALP;;AAOA,SAASC,iBAAT,OAAuC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACtC,QAAMC,QAAQ,GAAGN,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAM,CAAEE,MAAF,IAAaN,UAAU,CAAE,eAAF,EAAmBI,IAAnB,CAA7B;AACA,QAAM,CAAEG,sBAAF,IAA6BP,UAAU,CAAE,cAAF,EAAkBI,IAAlB,CAA7C;AAEA,QAAMI,eAAe,GAAGN,kBAAkB,CAAEE,IAAF,CAA1C;AAEA,QAAM,CAAEK,mBAAF,IAA0BT,UAAU,CAAE,kBAAF,EAAsBI,IAAtB,CAA1C;AAEA,QAAMM,cAAc,GACnBL,QAAQ,CAACM,QAAT,CAAmB,aAAnB,KACAF,mBADA,KAEEH,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,eAAF,EAAmBC,kBAAnB,IAA0Cb,QAAQ,CACvD,4BADuD,EAEvDG,IAFuD,CAAxD;AAIA,QAAM,CAAEW,mBAAF,IAA0Bd,QAAQ,CACvC,4BADuC,EAEvCG,IAFuC,EAGvC,MAHuC,CAAxC;AAMA,QAAM,CAAEY,aAAF,EAAiBC,gBAAjB,IAAsChB,QAAQ,CACnD,kCADmD,EAEnDG,IAFmD,CAApD;AAIA,QAAM,CAAEc,iBAAF,IAAwBjB,QAAQ,CACrC,kCADqC,EAErCG,IAFqC,EAGrC,MAHqC,CAAtC;;AAMA,MAAK,CAAEM,cAAP,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGf,EAAE,CAAE,SAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,0DADe;AAFjB,IADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGA,EAAE,CAAE,YAAF,CADL,CARD,EAYC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGa,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAED,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGM,eAPd;AAQC,IAAA,aAAa,EAAGC,kBARjB;AASC,IAAA,SAAS,EAAGD,eAAe,KAAKE;AATjC,IAZD,EAwBC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGpB,EAAE,CAAE,kBAAF,CADL,CAxBD,EA4BC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGa,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAED,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGS,aAPd;AAQC,IAAA,aAAa,EAAGC,gBARjB;AASC,IAAA,SAAS,EAAGD,aAAa,KAAKE;AAT/B,IA5BD,CADD;AA0CA;;AAED,eAAef,iBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenButtonColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst hasButtonColor =\n\t\tsupports.includes( 'buttonColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ buttonTextColor, setButtonTextColor ] = useStyle(\n\t\t'elements.button.color.text',\n\t\tname\n\t);\n\tconst [ userButtonTextColor ] = useStyle(\n\t\t'elements.button.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ buttonBgColor, setButtonBgColor ] = useStyle(\n\t\t'elements.button.color.background',\n\t\tname\n\t);\n\tconst [ userButtonBgColor ] = useStyle(\n\t\t'elements.button.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasButtonColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Buttons' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default colors used for buttons across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<h4 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Text color' ) }\n\t\t\t</h4>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonTextColor }\n\t\t\t\tonColorChange={ setButtonTextColor }\n\t\t\t\tclearable={ buttonTextColor === userButtonTextColor }\n\t\t\t/>\n\n\t\t\t<h4 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Background color' ) }\n\t\t\t</h4>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonBgColor }\n\t\t\t\tonColorChange={ setButtonBgColor }\n\t\t\t\tclearable={ buttonBgColor === userButtonBgColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenButtonColor;\n"]}

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

@@ -15,6 +15,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
+import BlockPreviewPanel from './block-preview-panel';
 
 function BackgroundColorItem(_ref) {
   let {
@@ -179,10 +180,12 @@ function ScreenColors(_ref6) {
   let {
     name
   } = _ref6;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
+  const parentMenu = name === undefined ? '' : '/blocks/' + encodeURIComponent(name);
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Colors'),
     description: __('Manage palettes and the default color of different global elements on the site.')
+  }), createElement(BlockPreviewPanel, {
+    name: name
   }), createElement("div", {
     className: "edit-site-global-styles-screen-colors"
   }, createElement(VStack, {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["__","__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalZStack","ZStack","FlexItem","ColorIndicator","ScreenHeader","Palette","NavigationButtonAsItem","getSupportedGlobalStylesPanels","useStyle","Subtitle","ColorIndicatorWrapper","BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","colorHover","HeadingColorItem","bgColor","ButtonColorItem","ScreenColors","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalZStack as ZStack,\n\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\n\nfunction BackgroundColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) ||\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useStyle( 'color.background', name );\n\tconst [ gradientValue ] = useStyle( 'color.gradient', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/colors/background' }\n\t\t\taria-label={ __( 'Colors background styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t\tdata-testid=\"background-color-indicator\"\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Background' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TextColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/colors/text' }\n\t\t\taria-label={ __( 'Colors text styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tdata-testid=\"text-color-indicator\"\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Text' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction LinkColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useStyle( 'elements.link.color.text', name );\n\tconst [ colorHover ] = useStyle( 'elements.link.:hover.color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/colors/link' }\n\t\t\taria-label={ __( 'Colors link styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ colorHover } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Links' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction HeadingColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'elements.heading.color.text', name );\n\tconst [ bgColor ] = useStyle( 'elements.heading.color.background', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/colors/heading' }\n\t\t\taria-label={ __( 'Colors heading styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ bgColor } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem>{ __( 'Headings' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ButtonColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'buttonColor' );\n\tconst [ color ] = useStyle( 'elements.button.color.text', name );\n\tconst [ bgColor ] = useStyle( 'elements.button.color.background', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ bgColor } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Buttons' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenColors( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<BackgroundColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TextColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<LinkColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<HeadingColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ButtonColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["__","__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalZStack","ZStack","FlexItem","ColorIndicator","ScreenHeader","Palette","NavigationButtonAsItem","getSupportedGlobalStylesPanels","useStyle","Subtitle","ColorIndicatorWrapper","BlockPreviewPanel","BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","colorHover","HeadingColorItem","bgColor","ButtonColorItem","ScreenColors","undefined","encodeURIComponent"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalZStack as ZStack,\n\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport BlockPreviewPanel from './block-preview-panel';\n\nfunction BackgroundColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) ||\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useStyle( 'color.background', name );\n\tconst [ gradientValue ] = useStyle( 'color.gradient', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/colors/background' }\n\t\t\taria-label={ __( 'Colors background styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t\tdata-testid=\"background-color-indicator\"\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Background' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TextColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/colors/text' }\n\t\t\taria-label={ __( 'Colors text styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tdata-testid=\"text-color-indicator\"\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Text' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction LinkColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useStyle( 'elements.link.color.text', name );\n\tconst [ colorHover ] = useStyle( 'elements.link.:hover.color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/colors/link' }\n\t\t\taria-label={ __( 'Colors link styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ colorHover } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Links' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction HeadingColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'elements.heading.color.text', name );\n\tconst [ bgColor ] = useStyle( 'elements.heading.color.background', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/colors/heading' }\n\t\t\taria-label={ __( 'Colors heading styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ bgColor } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem>{ __( 'Headings' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ButtonColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'buttonColor' );\n\tconst [ color ] = useStyle( 'elements.button.color.text', name );\n\tconst [ bgColor ] = useStyle( 'elements.button.color.background', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ bgColor } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Buttons' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenColors( { name } ) {\n\tconst parentMenu =\n\t\tname === undefined ? '' : '/blocks/' + encodeURIComponent( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<BlockPreviewPanel name={ name } />\n\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<BackgroundColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TextColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<LinkColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<HeadingColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ButtonColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}

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

@@ -0,0 +1,28 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+
+import ScreenHeader from './header';
+import Subtitle from './subtitle';
+import CustomCSSControl from './custom-css';
+
+function ScreenCSS() {
+  return createElement(Fragment, null, createElement(ScreenHeader, {
+    title: __('CSS'),
+    description: __('Add your own CSS to customize the appearance and layout of your site.')
+  }), createElement("div", {
+    className: "edit-site-global-styles-screen-css"
+  }, createElement(VStack, {
+    spacing: 3
+  }, createElement(Subtitle, null, __('ADDITIONAL CSS')), createElement(CustomCSSControl, null))));
+}
+
+export default ScreenCSS;
+//# sourceMappingURL=screen-css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-css.js"],"names":["__","__experimentalVStack","VStack","ScreenHeader","Subtitle","CustomCSSControl","ScreenCSS"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,oBAAoB,IAAIC,MAAjC,QAA+C,uBAA/C;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,gBAAP,MAA6B,cAA7B;;AAEA,SAASC,SAAT,GAAqB;AACpB,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGN,EAAE,CAAE,KAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,uEADe;AAFjB,IADD,EAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,QAAD,QAAYA,EAAE,CAAE,gBAAF,CAAd,CADD,EAEC,cAAC,gBAAD,OAFD,CADD,CAPD,CADD;AAgBA;;AAED,eAAeM,SAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Subtitle from './subtitle';\nimport CustomCSSControl from './custom-css';\n\nfunction ScreenCSS() {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'CSS' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-css\">\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>\n\t\t\t\t\t<CustomCSSControl />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenCSS;\n"]}

package/build-module/components/global-styles/screen-heading-color.js

@@ -85,7 +85,7 @@ function ScreenHeadingColor(_ref) {
     isBlock: true
   }, createElement(ToggleGroupControlOption, {
     value: "heading"
-    /* translators: 'All' refers to selecting all heading levels 
+    /* translators: 'All' refers to selecting all heading levels
     and applying the same style to h1-h6. */
     ,
     label: __('All')
@@ -115,7 +115,6 @@ function ScreenHeadingColor(_ref) {
     className: "edit-site-screen-heading-text-color__control",
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
-    __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true,
@@ -132,7 +131,6 @@ function ScreenHeadingColor(_ref) {
     gradients: gradientsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
     disableCustomGradients: !areCustomGradientsEnabled,
-    __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-heading-color.js"],"names":["sprintf","__","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__experimentalColorGradientControl","ColorGradientControl","useState","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","useGradientsPerOrigin","ScreenHeadingColor","name","selectedLevel","setCurrentTab","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","isTextEnabled","isBackgroundEnabled","colorsPerOrigin","gradientsPerOrigin","hasTextColor","includes","length","hasBackgroundColor","hasGradientColor","color","setColor","userColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n} from './hooks';\n\nfunction ScreenHeadingColor( { name } ) {\n\tconst [ selectedLevel, setCurrentTab ] = useState( 'heading' );\n\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ gradients ] = useSetting( 'color.gradients', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradients.length > 0 || areCustomGradientsEnabled );\n\n\tconst [ color, setColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.text',\n\t\tname\n\t);\n\tconst [ userColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ backgroundColor, setBackgroundColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tconst controlProps = {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Headings' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for headings across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t<h4>{ __( 'Select heading level' ) }</h4>\n\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\tvalue={ selectedLevel }\n\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\tisBlock\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels \n\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleGroupControlOption value=\"h1\" label={ __( 'H1' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h2\" label={ __( 'H2' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h3\" label={ __( 'H3' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h4\" label={ __( 'H4' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h5\" label={ __( 'H5' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h6\" label={ __( 'H6' ) } />\n\t\t\t\t</ToggleGroupControl>\n\t\t\t</div>\n\t\t\t{ hasTextColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Text color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Text color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</h4>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-text-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tonColorChange={ setColor }\n\t\t\t\t\t\tclearable={ color === userColor }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasBackgroundColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Background color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Background color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</h4>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-background-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenHeadingColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-heading-color.js"],"names":["sprintf","__","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__experimentalColorGradientControl","ColorGradientControl","useState","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","useGradientsPerOrigin","ScreenHeadingColor","name","selectedLevel","setCurrentTab","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","isTextEnabled","isBackgroundEnabled","colorsPerOrigin","gradientsPerOrigin","hasTextColor","includes","length","hasBackgroundColor","hasGradientColor","color","setColor","userColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n} from './hooks';\n\nfunction ScreenHeadingColor( { name } ) {\n\tconst [ selectedLevel, setCurrentTab ] = useState( 'heading' );\n\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ gradients ] = useSetting( 'color.gradients', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradients.length > 0 || areCustomGradientsEnabled );\n\n\tconst [ color, setColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.text',\n\t\tname\n\t);\n\tconst [ userColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ backgroundColor, setBackgroundColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tconst controlProps = {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Headings' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for headings across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t<h4>{ __( 'Select heading level' ) }</h4>\n\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\tvalue={ selectedLevel }\n\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\tisBlock\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels\n\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleGroupControlOption value=\"h1\" label={ __( 'H1' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h2\" label={ __( 'H2' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h3\" label={ __( 'H3' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h4\" label={ __( 'H4' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h5\" label={ __( 'H5' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h6\" label={ __( 'H6' ) } />\n\t\t\t\t</ToggleGroupControl>\n\t\t\t</div>\n\t\t\t{ hasTextColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Text color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Text color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</h4>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-text-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tonColorChange={ setColor }\n\t\t\t\t\t\tclearable={ color === userColor }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasBackgroundColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Background color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Background color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</h4>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-background-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenHeadingColor;\n"]}

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

@@ -8,21 +8,20 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 
-import BorderPanel, { useHasBorderPanel } from './border-panel';
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenLayout(_ref) {
   let {
     name
   } = _ref;
-  const hasBorderPanel = useHasBorderPanel(name);
   const hasDimensionsPanel = useHasDimensionsPanel(name);
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Layout')
-  }), hasDimensionsPanel && createElement(DimensionsPanel, {
+  }), createElement(BlockPreviewPanel, {
     name: name
-  }), hasBorderPanel && createElement(BorderPanel, {
+  }), hasDimensionsPanel && createElement(DimensionsPanel, {
     name: name
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["__","BorderPanel","useHasBorderPanel","DimensionsPanel","useHasDimensionsPanel","ScreenHeader","ScreenLayout","name","hasBorderPanel","hasDimensionsPanel"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,IAAsBC,iBAAtB,QAA+C,gBAA/C;AACA,OAAOC,eAAP,IAA0BC,qBAA1B,QAAuD,oBAAvD;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,YAAT,OAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAMC,cAAc,GAAGN,iBAAiB,CAAEK,IAAF,CAAxC;AACA,QAAME,kBAAkB,GAAGL,qBAAqB,CAAEG,IAAF,CAAhD;AAEA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGP,EAAE,CAAE,QAAF;AAAxB,IADD,EAEGS,kBAAkB,IAAI,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGF;AAAxB,IAFzB,EAGGC,cAAc,IAAI,cAAC,WAAD;AAAa,IAAA,IAAI,EAAGD;AAApB,IAHrB,CADD;AAOA;;AAED,eAAeD,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderPanel, { useHasBorderPanel } from './border-panel';\nimport DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenLayout( { name } ) {\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }\n\t\t\t{ hasBorderPanel && <BorderPanel name={ name } /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["__","DimensionsPanel","useHasDimensionsPanel","ScreenHeader","BlockPreviewPanel","ScreenLayout","name","hasDimensionsPanel"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,IAA0BC,qBAA1B,QAAuD,oBAAvD;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;;AAEA,SAASC,YAAT,OAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAMC,kBAAkB,GAAGL,qBAAqB,CAAEI,IAAF,CAAhD;AAEA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGN,EAAE,CAAE,QAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGM;AAA1B,IAFD,EAGGC,kBAAkB,IAAI,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGD;AAAxB,IAHzB,CADD;AAOA;;AAED,eAAeD,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\n\nfunction ScreenLayout( { name } ) {\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t<BlockPreviewPanel name={ name } />\n\t\t\t{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}

package/build-module/components/global-styles/screen-link-color.js

@@ -68,7 +68,6 @@ function ScreenLinkColor(_ref) {
       className: "edit-site-screen-link-color__control",
       colors: colorsPerOrigin,
       disableCustomColors: !areCustomSolidsEnabled,
-      __experimentalHasMultipleOrigins: true,
       showTitle: false,
       enableAlpha: true,
       __experimentalIsRenderedInSidebar: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","TabPanel","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenLinkColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","pseudoStates","default","label","value","handler","userValue","hover","tabs","Object","entries","map","selector","config","title","className","tab","pseudoSelectorConfig"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { TabPanel } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenLinkColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst [ isLinkEnabled ] = useSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst pseudoStates = {\n\t\tdefault: {\n\t\t\tlabel: __( 'Default' ),\n\t\t\tvalue: useStyle( 'elements.link.color.text', name )[ 0 ],\n\t\t\thandler: useStyle( 'elements.link.color.text', name )[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\t'elements.link.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t\thover: {\n\t\t\tlabel: __( 'Hover' ),\n\t\t\tvalue: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],\n\t\t\thandler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\t'elements.link.:hover.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t};\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst tabs = Object.entries( pseudoStates ).map(\n\t\t( [ selector, config ] ) => {\n\t\t\treturn {\n\t\t\t\tname: selector,\n\t\t\t\ttitle: config.label,\n\t\t\t\tclassName: `color-text-${ selector }`,\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the colors used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<TabPanel tabs={ tabs }>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tconst pseudoSelectorConfig =\n\t\t\t\t\t\tpseudoStates[ tab.name ] ?? null;\n\n\t\t\t\t\tif ( ! pseudoSelectorConfig ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\tclassName=\"edit-site-screen-link-color__control\"\n\t\t\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tcolorValue={ pseudoSelectorConfig.value }\n\t\t\t\t\t\t\t\tonColorChange={ pseudoSelectorConfig.handler }\n\t\t\t\t\t\t\t\tclearable={\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.value ===\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.userValue\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["__","__experimentalColorGradientControl","ColorGradientControl","TabPanel","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenLinkColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","pseudoStates","default","label","value","handler","userValue","hover","tabs","Object","entries","map","selector","config","title","className","tab","pseudoSelectorConfig"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { TabPanel } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenLinkColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst [ isLinkEnabled ] = useSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst pseudoStates = {\n\t\tdefault: {\n\t\t\tlabel: __( 'Default' ),\n\t\t\tvalue: useStyle( 'elements.link.color.text', name )[ 0 ],\n\t\t\thandler: useStyle( 'elements.link.color.text', name )[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\t'elements.link.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t\thover: {\n\t\t\tlabel: __( 'Hover' ),\n\t\t\tvalue: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],\n\t\t\thandler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\t'elements.link.:hover.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t};\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst tabs = Object.entries( pseudoStates ).map(\n\t\t( [ selector, config ] ) => {\n\t\t\treturn {\n\t\t\t\tname: selector,\n\t\t\t\ttitle: config.label,\n\t\t\t\tclassName: `color-text-${ selector }`,\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the colors used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<TabPanel tabs={ tabs }>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tconst pseudoSelectorConfig =\n\t\t\t\t\t\tpseudoStates[ tab.name ] ?? null;\n\n\t\t\t\t\tif ( ! pseudoSelectorConfig ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\tclassName=\"edit-site-screen-link-color__control\"\n\t\t\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tcolorValue={ pseudoSelectorConfig.value }\n\t\t\t\t\t\t\t\tonColorChange={ pseudoSelectorConfig.handler }\n\t\t\t\t\t\t\t\tclearable={\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.value ===\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.userValue\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * WordPress dependencies
@@ -18,6 +18,8 @@ import ContextMenu from './context-menu';
 import StylesPreview from './preview';
 
 function ScreenRoot() {
+  var _window;
+
   const {
     variations
   } = useSelect(select => {
@@ -25,6 +27,9 @@ function ScreenRoot() {
       variations: select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations()
     };
   }, []);
+
+  const __experimentalGlobalStylesCustomCSS = (_window = window) === null || _window === void 0 ? void 0 : _window.__experimentalEnableGlobalStylesCustomCSS;
+
   return createElement(Card, {
     size: "small"
   }, createElement(CardBody, null, createElement(VStack, {
@@ -41,7 +46,8 @@ function ScreenRoot() {
     paddingTop: 2
     /*
      * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
-     * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
+     * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the
+     * the nav button inset should be looked at before reusing further.
      */
     ,
     paddingX: "13px",
@@ -53,7 +59,19 @@ function ScreenRoot() {
     justify: "space-between"
   }, createElement(FlexItem, null, __('Blocks')), createElement(IconWithCurrentColor, {
     icon: isRTL() ? chevronLeft : chevronRight
-  }))))));
+  }))))), __experimentalGlobalStylesCustomCSS && createElement(Fragment, null, createElement(CardDivider, null), createElement(CardBody, null, createElement(Spacer, {
+    as: "p",
+    paddingTop: 2,
+    paddingX: "13px",
+    marginBottom: 4
+  }, __('Add your own CSS to customize the appearance and layout of your site.')), createElement(ItemGroup, null, createElement(NavigationButtonAsItem, {
+    path: "/css",
+    "aria-label": __('Additional CSS')
+  }, createElement(HStack, {
+    justify: "space-between"
+  }, createElement(FlexItem, null, __('Custom')), createElement(IconWithCurrentColor, {
+    icon: isRTL() ? chevronLeft : chevronRight
+  })))))));
 }
 
 export default ScreenRoot;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalSpacer","Spacer","__experimentalVStack","VStack","FlexItem","CardBody","Card","CardDivider","CardMedia","isRTL","__","chevronLeft","chevronRight","useSelect","store","coreStore","IconWithCurrentColor","NavigationButtonAsItem","ContextMenu","StylesPreview","ScreenRoot","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","length"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,uBAAuB,IAAIC,SAD5B,EAECC,oBAAoB,IAAIC,MAFzB,EAGCC,oBAAoB,IAAIC,MAHzB,EAICC,oBAAoB,IAAIC,MAJzB,EAKCC,QALD,EAMCC,QAND,EAOCC,IAPD,EAQCC,WARD,EASCC,SATD,QAUO,uBAVP;AAWA,SAASC,KAAT,EAAgBC,EAAhB,QAA0B,iBAA1B;AACA,SAASC,WAAT,EAAsBC,YAAtB,QAA0C,kBAA1C;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,2BAArC;AACA,SAASC,sBAAT,QAAuC,qBAAvC;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,aAAP,MAA0B,WAA1B;;AAEA,SAASC,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiBR,SAAS,CAAIS,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EACTC,MAAM,CACLP,SADK,CAAN,CAEEQ,mDAFF;AAFK,KAAP;AAMA,GAP+B,EAO7B,EAP6B,CAAhC;AASA,SACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,cAAC,QAAD,QACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,IAAD,QACC,cAAC,SAAD,QACC,cAAC,aAAD,OADD,CADD,CADD,EAMG,CAAC,EAAEF,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEG,MAAd,CAAD,IACD,cAAC,SAAD,QACC,cAAC,sBAAD;AACC,IAAA,IAAI,EAAC,aADN;AAEC,kBAAad,EAAE,CAAE,eAAF;AAFhB,KAIC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QACGA,EAAE,CAAE,eAAF,CADL,CADD,EAIC,cAAC,oBAAD;AACC,IAAA,IAAI,EACHD,KAAK,KAAKE,WAAL,GAAmBC;AAF1B,IAJD,CAJD,CADD,CAPF,EAyBC,cAAC,WAAD,OAzBD,CADD,CADD,EA+BC,cAAC,WAAD,OA/BD,EAiCC,cAAC,QAAD,QACC,cAAC,MAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,UAAU,EAAG;AACb;AACL;AACA;AACA;AANI;AAOC,IAAA,QAAQ,EAAC,MAPV;AAQC,IAAA,YAAY,EAAG;AARhB,KAUGF,EAAE,CACH,iEADG,CAVL,CADD,EAeC,cAAC,SAAD,QACC,cAAC,sBAAD;AACC,IAAA,IAAI,EAAC,SADN;AAEC,kBAAaA,EAAE,CAAE,eAAF;AAFhB,KAIC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QAAYA,EAAE,CAAE,QAAF,CAAd,CADD,EAEC,cAAC,oBAAD;AACC,IAAA,IAAI,EAAGD,KAAK,KAAKE,WAAL,GAAmBC;AADhC,IAFD,CAJD,CADD,CAfD,CAjCD,CADD;AAiEA;;AAED,eAAeQ,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\n\nfunction ScreenRoot() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardMedia>\n\t\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tpath=\"/variations\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<ContextMenu />\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<Spacer\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t/*\n\t\t\t\t\t * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).\n\t\t\t\t\t * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.\n\t\t\t\t\t */\n\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t) }\n\t\t\t\t</Spacer>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tpath=\"/blocks\"\n\t\t\t\t\t\taria-label={ __( 'Blocks styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalSpacer","Spacer","__experimentalVStack","VStack","FlexItem","CardBody","Card","CardDivider","CardMedia","isRTL","__","chevronLeft","chevronRight","useSelect","store","coreStore","IconWithCurrentColor","NavigationButtonAsItem","ContextMenu","StylesPreview","ScreenRoot","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","__experimentalGlobalStylesCustomCSS","window","__experimentalEnableGlobalStylesCustomCSS","length"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\n\nfunction ScreenRoot() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\tconst __experimentalGlobalStylesCustomCSS =\n\t\twindow?.__experimentalEnableGlobalStylesCustomCSS;\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardMedia>\n\t\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tpath=\"/variations\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<ContextMenu />\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<Spacer\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t/*\n\t\t\t\t\t * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).\n\t\t\t\t\t * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the\n\t\t\t\t\t * the nav button inset should be looked at before reusing further.\n\t\t\t\t\t */\n\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t) }\n\t\t\t\t</Spacer>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tpath=\"/blocks\"\n\t\t\t\t\t\taria-label={ __( 'Blocks styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\n\t\t\t{ __experimentalGlobalStylesCustomCSS && (\n\t\t\t\t<>\n\t\t\t\t\t<CardDivider />\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tpath=\"/css\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>{ __( 'Custom' ) }</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}

package/build-module/components/global-styles/screen-style-variations.js

@@ -3,8 +3,8 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
 import classnames from 'classnames';
+import fastDeepEqual from 'fast-deep-equal/es6';
 /**
  * WordPress dependencies
  */
@@ -26,7 +26,7 @@ import StylesPreview from './preview';
 import ScreenHeader from './header';
 
 function compareVariations(a, b) {
-  return isEqual(a.styles, b.styles) && isEqual(a.settings, b.settings);
+  return fastDeepEqual(a.styles, b.styles) && fastDeepEqual(a.settings, b.settings);
 }
 
 function Variation(_ref) {