@wordpress/edit-site 5.7.0 → 5.8.0

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","privateApis","blockEditorPrivateApis","useDebounce","speak","useHasVariationsPanel","ScreenHeader","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","useSortedBlockTypes","blockItems","select","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","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 {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasVariationsPanel } from './variations-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', block.name );\n\tconst settings = useSettingsForBlockElement( rawSettings, block.name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( block.name );\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\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"]}
+{"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","privateApis","blockEditorPrivateApis","useDebounce","speak","useHasVariationsPanel","ScreenHeader","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","useSortedBlockTypes","blockItems","select","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","useBlockHasGlobalStyles","blockName","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","hasGlobalStyles","BlockMenuItem","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 {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasVariationsPanel } from './variations-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( blockName );\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}

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

@@ -26,7 +26,7 @@ function ScreenCSS(_ref) {
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('CSS'),
     description: createElement(Fragment, null, description, createElement(ExternalLink, {
-      href: "https://wordpress.org/support/article/css/",
+      href: "https://wordpress.org/documentation/article/css/",
       className: "edit-site-global-styles-screen-css-help-link"
     }, __('Learn more about CSS')))
   }), createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-css.js"],"names":["sprintf","__","ExternalLink","getBlockType","ScreenHeader","CustomCSSControl","ScreenCSS","name","blockType","title","description","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,EAAlB,QAA4B,iBAA5B;AACA,SAASC,YAAT,QAA6B,uBAA7B;AACA,SAASC,YAAT,QAA6B,mBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,gBAAP,MAA6B,cAA7B;;AAEA,SAASC,SAAT,OAA+B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC9B;AACA;AACA,QAAMC,SAAS,GAAGL,YAAY,CAAEI,IAAF,CAA9B;AACA,QAAME,KAAK,GAAGD,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEC,KAAzB;AAEA,QAAMC,WAAW,GAChBD,KAAK,KAAKE,SAAV,GACGX,OAAO,EACP;AACAC,EAAAA,EAAE,CACD,+DADC,CAFK,EAKPQ,KALO,CADV,GAQGR,EAAE,CACF,uEADE,CATN;AAaA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGA,EAAE,CAAE,KAAF,CADX;AAEC,IAAA,WAAW,EACV,8BACGS,WADH,EAEC,cAAC,YAAD;AACC,MAAA,IAAI,EAAC,4CADN;AAEC,MAAA,SAAS,EAAC;AAFX,OAIGT,EAAE,CAAE,sBAAF,CAJL,CAFD;AAHF,IADD,EAeC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,gBAAD;AAAkB,IAAA,SAAS,EAAGM;AAA9B,IADD,CAfD,CADD;AAqBA;;AAED,eAAeD,SAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { ExternalLink } from '@wordpress/components';\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport CustomCSSControl from './custom-css';\n\nfunction ScreenCSS( { name } ) {\n\t// If name is defined, we are customizing CSS at the block level.\n\t// Display the block title in the description.\n\tconst blockType = getBlockType( name );\n\tconst title = blockType?.title;\n\n\tconst description =\n\t\ttitle !== undefined\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block.'\n\t\t\t\t\t),\n\t\t\t\t\ttitle\n\t\t\t  )\n\t\t\t: __(\n\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t  );\n\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<>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref=\"https://wordpress.org/support/article/css/\"\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-css-help-link\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about CSS' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</>\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<CustomCSSControl blockName={ name } />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenCSS;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-css.js"],"names":["sprintf","__","ExternalLink","getBlockType","ScreenHeader","CustomCSSControl","ScreenCSS","name","blockType","title","description","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,EAAlB,QAA4B,iBAA5B;AACA,SAASC,YAAT,QAA6B,uBAA7B;AACA,SAASC,YAAT,QAA6B,mBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,gBAAP,MAA6B,cAA7B;;AAEA,SAASC,SAAT,OAA+B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC9B;AACA;AACA,QAAMC,SAAS,GAAGL,YAAY,CAAEI,IAAF,CAA9B;AACA,QAAME,KAAK,GAAGD,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEC,KAAzB;AAEA,QAAMC,WAAW,GAChBD,KAAK,KAAKE,SAAV,GACGX,OAAO,EACP;AACAC,EAAAA,EAAE,CACD,+DADC,CAFK,EAKPQ,KALO,CADV,GAQGR,EAAE,CACF,uEADE,CATN;AAaA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGA,EAAE,CAAE,KAAF,CADX;AAEC,IAAA,WAAW,EACV,8BACGS,WADH,EAEC,cAAC,YAAD;AACC,MAAA,IAAI,EAAC,kDADN;AAEC,MAAA,SAAS,EAAC;AAFX,OAIGT,EAAE,CAAE,sBAAF,CAJL,CAFD;AAHF,IADD,EAeC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,gBAAD;AAAkB,IAAA,SAAS,EAAGM;AAA9B,IADD,CAfD,CADD;AAqBA;;AAED,eAAeD,SAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { ExternalLink } from '@wordpress/components';\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport CustomCSSControl from './custom-css';\n\nfunction ScreenCSS( { name } ) {\n\t// If name is defined, we are customizing CSS at the block level.\n\t// Display the block title in the description.\n\tconst blockType = getBlockType( name );\n\tconst title = blockType?.title;\n\n\tconst description =\n\t\ttitle !== undefined\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block.'\n\t\t\t\t\t),\n\t\t\t\t\ttitle\n\t\t\t  )\n\t\t\t: __(\n\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t  );\n\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<>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\thref=\"https://wordpress.org/documentation/article/css/\"\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-css-help-link\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Learn more about CSS' ) }\n\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t</>\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<CustomCSSControl blockName={ name } />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenCSS;\n"]}

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

@@ -4,6 +4,7 @@ import { createElement, Fragment } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
@@ -11,21 +12,29 @@ import { __ } from '@wordpress/i18n';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
-import ShadowPanel, { useHasShadowControl } from './shadow-panel';
+import { unlock } from '../../private-apis';
+import EffectsPanel from './effects-panel';
+const {
+  useGlobalSetting,
+  useSettingsForBlockElement,
+  useHasEffectsPanel
+} = unlock(blockEditorPrivateApis);
 
 function ScreenEffects(_ref) {
   let {
     name,
     variation = ''
   } = _ref;
+  const [rawSettings] = useGlobalSetting('', name);
+  const settings = useSettingsForBlockElement(rawSettings, name);
   const variationClassName = getVariationClassName(variation);
-  const hasShadowPanel = useHasShadowControl(name);
+  const hasEffectsPanel = useHasEffectsPanel(settings);
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    title: __('Shadow')
+    title: __('Effects')
   }), createElement(BlockPreviewPanel, {
     name: name,
     variation: variationClassName
-  }), hasShadowPanel && createElement(ShadowPanel, {
+  }), hasEffectsPanel && createElement(EffectsPanel, {
     name: name,
     variation: variation
   }));

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-effects.js"],"names":["__","ScreenHeader","BlockPreviewPanel","getVariationClassName","ShadowPanel","useHasShadowControl","ScreenEffects","name","variation","variationClassName","hasShadowPanel"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,qBAAT,QAAsC,SAAtC;AACA,OAAOC,WAAP,IAAsBC,mBAAtB,QAAiD,gBAAjD;;AAEA,SAASC,aAAT,OAAmD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AAClD,QAAMC,kBAAkB,GAAGN,qBAAqB,CAAEK,SAAF,CAAhD;AACA,QAAME,cAAc,GAAGL,mBAAmB,CAAEE,IAAF,CAA1C;AACA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGP,EAAE,CAAE,QAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGO,IAA1B;AAAiC,IAAA,SAAS,EAAGE;AAA7C,IAFD,EAGGC,cAAc,IACf,cAAC,WAAD;AAAa,IAAA,IAAI,EAAGH,IAApB;AAA2B,IAAA,SAAS,EAAGC;AAAvC,IAJF,CADD;AASA;;AAED,eAAeF,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport ShadowPanel, { useHasShadowControl } from './shadow-panel';\n\nfunction ScreenEffects( { name, variation = '' } ) {\n\tconst variationClassName = getVariationClassName( variation );\n\tconst hasShadowPanel = useHasShadowControl( name );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Shadow' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasShadowPanel && (\n\t\t\t\t<ShadowPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenEffects;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-effects.js"],"names":["__","privateApis","blockEditorPrivateApis","ScreenHeader","BlockPreviewPanel","getVariationClassName","unlock","EffectsPanel","useGlobalSetting","useSettingsForBlockElement","useHasEffectsPanel","ScreenEffects","name","variation","rawSettings","settings","variationClassName","hasEffectsPanel"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,qBAAT,QAAsC,SAAtC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AAEA,MAAM;AAAEC,EAAAA,gBAAF;AAAoBC,EAAAA,0BAApB;AAAgDC,EAAAA;AAAhD,IACLJ,MAAM,CAAEJ,sBAAF,CADP;;AAGA,SAASS,aAAT,OAAmD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AAClD,QAAM,CAAEC,WAAF,IAAkBN,gBAAgB,CAAE,EAAF,EAAMI,IAAN,CAAxC;AACA,QAAMG,QAAQ,GAAGN,0BAA0B,CAAEK,WAAF,EAAeF,IAAf,CAA3C;AACA,QAAMI,kBAAkB,GAAGX,qBAAqB,CAAEQ,SAAF,CAAhD;AACA,QAAMI,eAAe,GAAGP,kBAAkB,CAAEK,QAAF,CAA1C;AACA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGf,EAAE,CAAE,SAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGY,IAA1B;AAAiC,IAAA,SAAS,EAAGI;AAA7C,IAFD,EAGGC,eAAe,IAChB,cAAC,YAAD;AAAc,IAAA,IAAI,EAAGL,IAArB;AAA4B,IAAA,SAAS,EAAGC;AAAxC,IAJF,CADD;AASA;;AAED,eAAeF,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\nimport EffectsPanel from './effects-panel';\n\nconst { useGlobalSetting, useSettingsForBlockElement, useHasEffectsPanel } =\n\tunlock( blockEditorPrivateApis );\n\nfunction ScreenEffects( { name, variation = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst variationClassName = getVariationClassName( variation );\n\tconst hasEffectsPanel = useHasEffectsPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Effects' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasEffectsPanel && (\n\t\t\t\t<EffectsPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenEffects;\n"]}

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

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 
-import DuotonePanel from './duotone-panel';
+import FiltersPanel from './filters-panel';
 import BlockPreviewPanel from './block-preview-panel';
 /**
  * Internal dependencies
@@ -24,7 +24,7 @@ function ScreenFilters(_ref) {
     title: __('Filters')
   }), createElement(BlockPreviewPanel, {
     name: name
-  }), createElement(DuotonePanel, {
+  }), createElement(FiltersPanel, {
     name: name
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-filters.js"],"names":["__","DuotonePanel","BlockPreviewPanel","ScreenHeader","ScreenFilters","name"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,aAAT,OAAmC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAClC,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGL,EAAE,CAAE,SAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGK;AAA1B,IAFD,EAGC,cAAC,YAAD;AAAc,IAAA,IAAI,EAAGA;AAArB,IAHD,CADD;AAOA;;AAED,eAAeD,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DuotonePanel from './duotone-panel';\nimport BlockPreviewPanel from './block-preview-panel';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\n\nfunction ScreenFilters( { name } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Filters' ) } />\n\t\t\t<BlockPreviewPanel name={ name } />\n\t\t\t<DuotonePanel name={ name } />\n\t\t</>\n\t);\n}\n\nexport default ScreenFilters;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-filters.js"],"names":["__","FiltersPanel","BlockPreviewPanel","ScreenHeader","ScreenFilters","name"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,aAAT,OAAmC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAClC,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGL,EAAE,CAAE,SAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGK;AAA1B,IAFD,EAGC,cAAC,YAAD;AAAc,IAAA,IAAI,EAAGA;AAArB,IAHD,CADD;AAOA;;AAED,eAAeD,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport FiltersPanel from './filters-panel';\nimport BlockPreviewPanel from './block-preview-panel';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\n\nfunction ScreenFilters( { name } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Filters' ) } />\n\t\t\t<BlockPreviewPanel name={ name } />\n\t\t\t<FiltersPanel name={ name } />\n\t\t</>\n\t);\n}\n\nexport default ScreenFilters;\n"]}

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

@@ -1,130 +1,28 @@
 import { createElement, Fragment } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import fastDeepEqual from 'fast-deep-equal/es6';
 /**
  * WordPress dependencies
  */
-
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useContext, useState, useEffect, useRef } from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
-import { __experimentalGrid as Grid, Card, CardBody } from '@wordpress/components';
+import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import StylesPreview from './preview';
 import ScreenHeader from './header';
-import { unlock } from '../../private-apis';
-const {
-  GlobalStylesContext
-} = unlock(blockEditorPrivateApis);
-
-function compareVariations(a, b) {
-  return fastDeepEqual(a.styles, b.styles) && fastDeepEqual(a.settings, b.settings);
-}
-
-function Variation(_ref) {
-  let {
-    variation
-  } = _ref;
-  const [isFocused, setIsFocused] = useState(false);
-  const {
-    base,
-    user,
-    setUserConfig
-  } = useContext(GlobalStylesContext);
-  const context = useMemo(() => {
-    var _variation$settings, _variation$styles;
-
-    return {
-      user: {
-        settings: (_variation$settings = variation.settings) !== null && _variation$settings !== void 0 ? _variation$settings : {},
-        styles: (_variation$styles = variation.styles) !== null && _variation$styles !== void 0 ? _variation$styles : {}
-      },
-      base,
-      merged: mergeBaseAndUserConfigs(base, variation),
-      setUserConfig: () => {}
-    };
-  }, [variation, base]);
-
-  const selectVariation = () => {
-    setUserConfig(() => {
-      return {
-        settings: variation.settings,
-        styles: variation.styles
-      };
-    });
-  };
-
-  const selectOnEnter = event => {
-    if (event.keyCode === ENTER) {
-      event.preventDefault();
-      selectVariation();
-    }
-  };
-
-  const isActive = useMemo(() => {
-    return compareVariations(user, variation);
-  }, [user, variation]);
-  return createElement(GlobalStylesContext.Provider, {
-    value: context
-  }, createElement("div", {
-    className: classnames('edit-site-global-styles-variations_item', {
-      'is-active': isActive
-    }),
-    role: "button",
-    onClick: selectVariation,
-    onKeyDown: selectOnEnter,
-    tabIndex: "0",
-    "aria-label": variation === null || variation === void 0 ? void 0 : variation.title,
-    "aria-current": isActive,
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false)
-  }, createElement("div", {
-    className: "edit-site-global-styles-variations_item-preview"
-  }, createElement(StylesPreview, {
-    label: variation === null || variation === void 0 ? void 0 : variation.title,
-    isFocused: isFocused,
-    withHoverView: true
-  }))));
-}
+import StyleVariationsContainer from './style-variations-container';
 
 function ScreenStyleVariations() {
   const {
-    variations,
     mode
   } = useSelect(select => {
     return {
-      variations: select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations(),
       mode: select(blockEditorStore).__unstableGetEditorMode()
     };
   }, []);
-  const withEmptyVariation = useMemo(() => {
-    return [{
-      title: __('Default'),
-      settings: {},
-      styles: {}
-    }, ...variations.map(variation => {
-      var _variation$settings2, _variation$styles2;
-
-      return { ...variation,
-        settings: (_variation$settings2 = variation.settings) !== null && _variation$settings2 !== void 0 ? _variation$settings2 : {},
-        styles: (_variation$styles2 = variation.styles) !== null && _variation$styles2 !== void 0 ? _variation$styles2 : {}
-      };
-    })];
-  }, [variations]);
-  const {
-    __unstableSetEditorMode
-  } = useDispatch(blockEditorStore);
   const shouldRevertInitialMode = useRef(null);
   useEffect(() => {
     // ignore changes to zoom-out mode as we explictily change to it on mount.
@@ -146,8 +44,12 @@ function ScreenStyleVariations() {
           __unstableSetEditorMode(mode);
         }
       };
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
+  const {
+    __unstableSetEditorMode
+  } = useDispatch(blockEditorStore);
   return createElement(Fragment, null, createElement(ScreenHeader, {
     back: "/",
     title: __('Browse styles'),
@@ -156,12 +58,7 @@ function ScreenStyleVariations() {
     size: "small",
     isBorderless: true,
     className: "edit-site-global-styles-screen-style-variations"
-  }, createElement(CardBody, null, createElement(Grid, {
-    columns: 2
-  }, withEmptyVariation === null || withEmptyVariation === void 0 ? void 0 : withEmptyVariation.map((variation, index) => createElement(Variation, {
-    key: index,
-    variation: variation
-  }))))));
+  }, createElement(CardBody, null, createElement(StyleVariationsContainer, null))));
 }
 
 export default ScreenStyleVariations;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["classnames","fastDeepEqual","store","coreStore","useSelect","useDispatch","useMemo","useContext","useState","useEffect","useRef","ENTER","__experimentalGrid","Grid","Card","CardBody","__","blockEditorStore","privateApis","blockEditorPrivateApis","mergeBaseAndUserConfigs","StylesPreview","ScreenHeader","unlock","GlobalStylesContext","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","title","ScreenStyleVariations","variations","mode","select","__experimentalGetCurrentThemeGlobalStylesVariations","__unstableGetEditorMode","withEmptyVariation","map","__unstableSetEditorMode","shouldRevertInitialMode","current","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseMemo,\n\tuseContext,\n\tuseState,\n\tuseEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\nimport { unlock } from '../../private-apis';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\nfunction compareVariations( a, b ) {\n\treturn (\n\t\tfastDeepEqual( a.styles, b.styles ) &&\n\t\tfastDeepEqual( a.settings, b.settings )\n\t);\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\n\tconst { variations, mode } = 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\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t// ignore changes to zoom-out mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [ mode ] );\n\n\t// Intentionality left without any dependency.\n\t// This effect should only run the first time the component is rendered.\n\t// The effect opens the zoom-out view if it is not open before when applying a style variation.\n\tuseEffect( () => {\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t// if there were not mode changes revert to the initial mode when unmounting.\n\t\t\t\tif ( shouldRevertInitialMode.current ) {\n\t\t\t\t\t__unstableSetEditorMode( mode );\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card\n\t\t\t\tsize=\"small\"\n\t\t\t\tisBorderless\n\t\t\t\tclassName=\"edit-site-global-styles-screen-style-variations\"\n\t\t\t>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["Card","CardBody","__","store","blockEditorStore","useEffect","useRef","useSelect","useDispatch","ScreenHeader","StyleVariationsContainer","ScreenStyleVariations","mode","select","__unstableGetEditorMode","shouldRevertInitialMode","current","__unstableSetEditorMode"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,QAAf,QAA+B,uBAA/B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,yBAA1C;AACA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,wBAAP,MAAqC,8BAArC;;AAEA,SAASC,qBAAT,GAAiC;AAChC,QAAM;AAAEC,IAAAA;AAAF,MAAWL,SAAS,CAAIM,MAAF,IAAc;AACzC,WAAO;AACND,MAAAA,IAAI,EAAEC,MAAM,CAAET,gBAAF,CAAN,CAA2BU,uBAA3B;AADA,KAAP;AAGA,GAJyB,EAIvB,EAJuB,CAA1B;AAMA,QAAMC,uBAAuB,GAAGT,MAAM,CAAE,IAAF,CAAtC;AACAD,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA,QAAKO,IAAI,KAAK,UAAd,EAA2B;AAC1BG,MAAAA,uBAAuB,CAACC,OAAxB,GAAkC,KAAlC;AACA;AACD,GALQ,EAKN,CAAEJ,IAAF,CALM,CAAT,CARgC,CAehC;AACA;AACA;;AACAP,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKO,IAAI,KAAK,UAAd,EAA2B;AAC1BK,MAAAA,uBAAuB,CAAE,UAAF,CAAvB;;AACAF,MAAAA,uBAAuB,CAACC,OAAxB,GAAkC,IAAlC;AACA,aAAO,MAAM;AACZ;AACA,YAAKD,uBAAuB,CAACC,OAA7B,EAAuC;AACtCC,UAAAA,uBAAuB,CAAEL,IAAF,CAAvB;AACA;AACD,OALD;AAMA,KAVe,CAWhB;;AACA,GAZQ,EAYN,EAZM,CAAT;AAcA,QAAM;AAAEK,IAAAA;AAAF,MAA8BT,WAAW,CAAEJ,gBAAF,CAA/C;AAEA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAC,GADN;AAEC,IAAA,KAAK,EAAGF,EAAE,CAAE,eAAF,CAFX;AAGC,IAAA,WAAW,EAAGA,EAAE,CACf,oDADe;AAHjB,IADD,EASC,cAAC,IAAD;AACC,IAAA,IAAI,EAAC,OADN;AAEC,IAAA,YAAY,MAFb;AAGC,IAAA,SAAS,EAAC;AAHX,KAKC,cAAC,QAAD,QACC,cAAC,wBAAD,OADD,CALD,CATD,CADD;AAqBA;;AAED,eAAeS,qBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Card, CardBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport StyleVariationsContainer from './style-variations-container';\n\nfunction ScreenStyleVariations() {\n\tconst { mode } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t// ignore changes to zoom-out mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [ mode ] );\n\n\t// Intentionality left without any dependency.\n\t// This effect should only run the first time the component is rendered.\n\t// The effect opens the zoom-out view if it is not open before when applying a style variation.\n\tuseEffect( () => {\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t// if there were not mode changes revert to the initial mode when unmounting.\n\t\t\t\tif ( shouldRevertInitialMode.current ) {\n\t\t\t\t\t__unstableSetEditorMode( mode );\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card\n\t\t\t\tsize=\"small\"\n\t\t\t\tisBorderless\n\t\t\t\tclassName=\"edit-site-global-styles-screen-style-variations\"\n\t\t\t>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<StyleVariationsContainer />\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}

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

@@ -0,0 +1,130 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import fastDeepEqual from 'fast-deep-equal/es6';
+/**
+ * WordPress dependencies
+ */
+
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo, useContext, useState } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import StylesPreview from './preview';
+import { unlock } from '../../private-apis';
+const {
+  GlobalStylesContext
+} = unlock(blockEditorPrivateApis);
+
+function compareVariations(a, b) {
+  return fastDeepEqual(a.styles, b.styles) && fastDeepEqual(a.settings, b.settings);
+}
+
+function Variation(_ref) {
+  let {
+    variation
+  } = _ref;
+  const [isFocused, setIsFocused] = useState(false);
+  const {
+    base,
+    user,
+    setUserConfig
+  } = useContext(GlobalStylesContext);
+  const context = useMemo(() => {
+    var _variation$settings, _variation$styles;
+
+    return {
+      user: {
+        settings: (_variation$settings = variation.settings) !== null && _variation$settings !== void 0 ? _variation$settings : {},
+        styles: (_variation$styles = variation.styles) !== null && _variation$styles !== void 0 ? _variation$styles : {}
+      },
+      base,
+      merged: mergeBaseAndUserConfigs(base, variation),
+      setUserConfig: () => {}
+    };
+  }, [variation, base]);
+
+  const selectVariation = () => {
+    setUserConfig(() => {
+      return {
+        settings: variation.settings,
+        styles: variation.styles
+      };
+    });
+  };
+
+  const selectOnEnter = event => {
+    if (event.keyCode === ENTER) {
+      event.preventDefault();
+      selectVariation();
+    }
+  };
+
+  const isActive = useMemo(() => {
+    return compareVariations(user, variation);
+  }, [user, variation]);
+  return createElement(GlobalStylesContext.Provider, {
+    value: context
+  }, createElement("div", {
+    className: classnames('edit-site-global-styles-variations_item', {
+      'is-active': isActive
+    }),
+    role: "button",
+    onClick: selectVariation,
+    onKeyDown: selectOnEnter,
+    tabIndex: "0",
+    "aria-label": variation === null || variation === void 0 ? void 0 : variation.title,
+    "aria-current": isActive,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false)
+  }, createElement("div", {
+    className: "edit-site-global-styles-variations_item-preview"
+  }, createElement(StylesPreview, {
+    label: variation === null || variation === void 0 ? void 0 : variation.title,
+    isFocused: isFocused,
+    withHoverView: true
+  }))));
+}
+
+export default function StyleVariationsContainer() {
+  const {
+    variations
+  } = useSelect(select => {
+    return {
+      variations: select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations() || []
+    };
+  }, []);
+  const withEmptyVariation = useMemo(() => {
+    return [{
+      title: __('Default'),
+      settings: {},
+      styles: {}
+    }, ...variations.map(variation => {
+      var _variation$settings2, _variation$styles2;
+
+      return { ...variation,
+        settings: (_variation$settings2 = variation.settings) !== null && _variation$settings2 !== void 0 ? _variation$settings2 : {},
+        styles: (_variation$styles2 = variation.styles) !== null && _variation$styles2 !== void 0 ? _variation$styles2 : {}
+      };
+    })];
+  }, [variations]);
+  return createElement(Fragment, null, createElement(Grid, {
+    columns: 2,
+    className: "edit-site-global-styles-style-variations-container"
+  }, withEmptyVariation === null || withEmptyVariation === void 0 ? void 0 : withEmptyVariation.map((variation, index) => createElement(Variation, {
+    key: index,
+    variation: variation
+  }))));
+}
+//# sourceMappingURL=style-variations-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/style-variations-container.js"],"names":["classnames","fastDeepEqual","store","coreStore","useSelect","useMemo","useContext","useState","ENTER","__experimentalGrid","Grid","__","privateApis","blockEditorPrivateApis","mergeBaseAndUserConfigs","StylesPreview","unlock","GlobalStylesContext","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","title","StyleVariationsContainer","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport StylesPreview from './preview';\nimport { unlock } from '../../private-apis';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\nfunction compareVariations( a, b ) {\n\treturn (\n\t\tfastDeepEqual( a.styles, b.styles ) &&\n\t\tfastDeepEqual( a.settings, b.settings )\n\t);\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nexport default function StyleVariationsContainer() {\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 withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations.map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 2 }\n\t\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n"]}

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

@@ -7,17 +7,18 @@ import { createElement, Fragment } from "@wordpress/element";
 import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalUseNavigator as useNavigator, createSlotFill, DropdownMenu } from '@wordpress/components';
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis, store as blockEditorStore } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { useEffect, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 
 import ScreenRoot from './screen-root';
-import ScreenBlockList from './screen-block-list';
+import { useBlockHasGlobalStyles, default as ScreenBlockList } from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
@@ -236,6 +237,46 @@ function GlobalStylesStyleBook(_ref5) {
   });
 }
 
+function GlobalStylesBlockLink() {
+  const navigator = useNavigator();
+  const isMounted = useRef();
+  const {
+    selectedBlockName,
+    selectedBlockClientId
+  } = useSelect(select => {
+    const {
+      getSelectedBlockClientId,
+      getBlockName
+    } = select(blockEditorStore);
+    const clientId = getSelectedBlockClientId();
+    return {
+      selectedBlockName: getBlockName(clientId),
+      selectedBlockClientId: clientId
+    };
+  }, []);
+  const blockHasGlobalStyles = useBlockHasGlobalStyles(selectedBlockName);
+  useEffect(() => {
+    // Avoid navigating to the block screen on mount.
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+
+    if (!selectedBlockClientId || !blockHasGlobalStyles) {
+      return;
+    }
+
+    const path = '/blocks/' + encodeURIComponent(selectedBlockName); // Avoid navigating to the same path. This can happen when selecting
+    // a new block of the same type.
+
+    if (path !== navigator.location.path) {
+      navigator.goTo(path, {
+        skipFocus: true
+      });
+    }
+  }, [selectedBlockClientId, selectedBlockName, blockHasGlobalStyles]);
+}
+
 function GlobalStylesUI(_ref6) {
   let {
     isStyleBookOpened,
@@ -267,7 +308,7 @@ function GlobalStylesUI(_ref6) {
     });
   }), isStyleBookOpened && createElement(GlobalStylesStyleBook, {
     onClose: onCloseStyleBook
-  }), createElement(GlobalStylesActionMenu, null));
+  }), createElement(GlobalStylesActionMenu, null), createElement(GlobalStylesBlockLink, null));
 }
 
 export { GlobalStylesMenuSlot };