@wordpress/edit-site 5.1.0 → 5.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"names":["GlobalStylesNavigationScreen","className","props","filter","Boolean","join","ContextScreens","name","parentMenu","undefined","encodeURIComponent","GlobalStylesStyleBook","onClose","navigator","path","location","blockName","startsWith","depth","match","length","i","goBack","goTo","GlobalStylesUI","isStyleBookOpened","onCloseStyleBook","blocks","map","block"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AA7BA;AACA;AACA;;AAQA;AACA;AACA;AAmBA,SAASA,4BAAT,OAAiE;AAAA,MAA1B;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,GAA0B;AAChE,SACC,4BAAC,yCAAD;AACC,IAAA,SAAS,EAAG,CACX,mDADW,EAEXD,SAFW,EAIVE,MAJU,CAIFC,OAJE,EAKVC,IALU,CAKJ,GALI;AADb,KAOMH,KAPN,EADD;AAWA;;AAED,SAASI,cAAT,QAAoC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACnC,QAAMC,UAAU,GACfD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaC,kBAAkB,CAAEH,IAAF,CAD1D;AAGA,SACC,qDACC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGC,UAAU,GAAG;AAAlD,KACC,4BAAC,yBAAD;AAAkB,IAAA,IAAI,EAAGD;AAAzB,IADD,CADD,EAKC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,gCAAD;AAAyB,IAAA,IAAI,EAAGD,IAAhC;AAAuC,IAAA,OAAO,EAAC;AAA/C,IAHD,CALD,EAWC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,gCAAD;AAAyB,IAAA,IAAI,EAAGD,IAAhC;AAAuC,IAAA,OAAO,EAAC;AAA/C,IAHD,CAXD,EAiBC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,gCAAD;AAAyB,IAAA,IAAI,EAAGD,IAAhC;AAAuC,IAAA,OAAO,EAAC;AAA/C,IAHD,CAjBD,EAuBC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,gCAAD;AAAyB,IAAA,IAAI,EAAGD,IAAhC;AAAuC,IAAA,OAAO,EAAC;AAA/C,IAHD,CAvBD,EA6BC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGC,UAAU,GAAG;AAAlD,KACC,4BAAC,qBAAD;AAAc,IAAA,IAAI,EAAGD;AAArB,IADD,CA7BD,EAiCC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,2BAAD;AAAoB,IAAA,IAAI,EAAGD;AAA3B,IAHD,CAjCD,EAuCC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,8BAAD;AAAuB,IAAA,IAAI,EAAGD;AAA9B,IAHD,CAvCD,EA6CC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGC,UAAU,GAAG;AAAlD,KACC,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGD;AAAxB,IADD,CA7CD,EAiDC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGC,UAAU,GAAG;AAAlD,KACC,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGD;AAAxB,IADD,CAjDD,EAqDC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,2BAAD;AAAoB,IAAA,IAAI,EAAGD;AAA3B,IAHD,CArDD,EA2DC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGD;AAA1B,IAHD,CA3DD,EAiEC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGC,UAAU,GAAG;AAAlD,KACC,4BAAC,qBAAD;AAAc,IAAA,IAAI,EAAGD;AAArB,IADD,CAjED,EAqEC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGC,UAAU,GAAG;AAAlD,KACC,4BAAC,qBAAD;AAAc,IAAA,IAAI,EAAGD;AAArB,IADD,CArED,CADD;AA2EA;;AAED,SAASI,qBAAT,QAA8C;AAAA,MAAd;AAAEC,IAAAA;AAAF,GAAc;AAC7C,QAAMC,SAAS,GAAG,6CAAlB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAWD,SAAS,CAACE,QAA3B;AACA,SACC,4BAAC,kBAAD;AACC,IAAA,UAAU,EAAKC,SAAF,IACZ;AACA;AACA;AACAF,IAAAA,IAAI,KAAM,WAAWJ,kBAAkB,CAAEM,SAAF,CAAe,EAAtD,IACAF,IAAI,CAACG,UAAL,CACE,WAAWP,kBAAkB,CAAEM,SAAF,CAAe,GAD9C,CANF;AAUC,IAAA,QAAQ,EAAKA,SAAF,IAAiB;AAC3B;AACA,YAAME,KAAK,GAAGJ,IAAI,CAACK,KAAL,CAAY,KAAZ,EAAoBC,MAAlC;;AACA,WAAM,IAAIC,CAAC,GAAG,CAAd,EAAiBA,CAAC,GAAGH,KAArB,EAA4BG,CAAC,EAA7B,EAAkC;AACjCR,QAAAA,SAAS,CAACS,MAAV;AACA,OAL0B,CAM3B;;;AACAT,MAAAA,SAAS,CAACU,IAAV,CAAgB,aAAab,kBAAkB,CAAEM,SAAF,CAA/C;AACA,KAlBF;AAmBC,IAAA,OAAO,EAAGJ;AAnBX,IADD;AAuBA;;AAED,SAASY,cAAT,QAAmE;AAAA,MAA1C;AAAEC,IAAAA,iBAAF;AAAqBC,IAAAA;AAArB,GAA0C;AAClE,QAAMC,MAAM,GAAG,4BAAf;AACA,SACC,4BAAC,2CAAD;AACC,IAAA,SAAS,EAAC,qDADX;AAEC,IAAA,WAAW,EAAC;AAFb,KAIC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAC;AAAnC,KACC,4BAAC,mBAAD,OADD,CAJD,EAQC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAC;AAAnC,KACC,4BAAC,8BAAD,OADD,CARD,EAYC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAC;AAAnC,KACC,4BAAC,wBAAD,OADD,CAZD,EAgBGA,MAAM,CAACC,GAAP,CAAcC,KAAF,IACb,4BAAC,4BAAD;AACC,IAAA,GAAG,EAAG,gBAAgBA,KAAK,CAACtB,IAD7B;AAEC,IAAA,IAAI,EAAG,aAAaG,kBAAkB,CAAEmB,KAAK,CAACtB,IAAR;AAFvC,KAIC,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGsB,KAAK,CAACtB;AAA1B,IAJD,CADC,CAhBH,EAyBC,4BAAC,cAAD,OAzBD,EA2BGoB,MAAM,CAACC,GAAP,CAAcC,KAAF,IACb,4BAAC,cAAD;AACC,IAAA,GAAG,EAAG,mBAAmBA,KAAK,CAACtB,IADhC;AAEC,IAAA,IAAI,EAAGsB,KAAK,CAACtB;AAFd,IADC,CA3BH,EAkCGkB,iBAAiB,IAClB,4BAAC,qBAAD;AAAuB,IAAA,OAAO,EAAGC;AAAjC,IAnCF,EAqCC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAC;AAAnC,KACC,4BAAC,kBAAD,OADD,CArCD,CADD;AA2CA;;eAEcF,c","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalUseNavigator as useNavigator,\n} from '@wordpress/components';\nimport { getBlockTypes } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackgroundColor from './screen-background-color';\nimport ScreenTextColor from './screen-text-color';\nimport ScreenLinkColor from './screen-link-color';\nimport ScreenHeadingColor from './screen-heading-color';\nimport ScreenButtonColor from './screen-button-color';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport ScreenBorder from './screen-border';\nimport StyleBook from '../style-book';\nimport ScreenCSS from './screen-css';\n\nfunction GlobalStylesNavigationScreen( { className, ...props } ) {\n\treturn (\n\t\t<NavigatorScreen\n\t\t\tclassName={ [\n\t\t\t\t'edit-site-global-styles-sidebar__navigator-screen',\n\t\t\t\tclassName,\n\t\t\t]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( ' ' ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ContextScreens( { name } ) {\n\tconst parentMenu =\n\t\tname === undefined ? '' : '/blocks/' + encodeURIComponent( name );\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>\n\t\t\t\t<ScreenTypography name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/text' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"text\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/link' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"link\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/heading' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"heading\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/button' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"button\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>\n\t\t\t\t<ScreenColors name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/background' }\n\t\t\t>\n\t\t\t\t<ScreenBackgroundColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>\n\t\t\t\t<ScreenTextColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>\n\t\t\t\t<ScreenLinkColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/heading' }\n\t\t\t>\n\t\t\t\t<ScreenHeadingColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/button' }\n\t\t\t>\n\t\t\t\t<ScreenButtonColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>\n\t\t\t\t<ScreenBorder name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>\n\t\t\t\t<ScreenLayout name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesStyleBook( { onClose } ) {\n\tconst navigator = useNavigator();\n\tconst { path } = navigator.location;\n\treturn (\n\t\t<StyleBook\n\t\t\tisSelected={ ( blockName ) =>\n\t\t\t\t// Match '/blocks/core%2Fbutton' and\n\t\t\t\t// '/blocks/core%2Fbutton/typography', but not\n\t\t\t\t// '/blocks/core%2Fbuttons'.\n\t\t\t\tpath === `/blocks/${ encodeURIComponent( blockName ) }` ||\n\t\t\t\tpath.startsWith(\n\t\t\t\t\t`/blocks/${ encodeURIComponent( blockName ) }/`\n\t\t\t\t)\n\t\t\t}\n\t\t\tonSelect={ ( blockName ) => {\n\t\t\t\t// Clear navigator history by going back to the root.\n\t\t\t\tconst depth = path.match( /\\//g ).length;\n\t\t\t\tfor ( let i = 0; i < depth; i++ ) {\n\t\t\t\t\tnavigator.goBack();\n\t\t\t\t}\n\t\t\t\t// Now go to the selected block.\n\t\t\t\tnavigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );\n\t\t\t} }\n\t\t\tonClose={ onClose }\n\t\t/>\n\t);\n}\n\nfunction GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {\n\tconst blocks = getBlockTypes();\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-global-styles-sidebar__navigator-provider\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t<ScreenRoot />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t<ScreenStyleVariations />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t<ScreenBlockList />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<ContextScreens\n\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\tname={ block.name }\n\t\t\t\t/>\n\t\t\t) ) }\n\n\t\t\t{ isStyleBookOpened && (\n\t\t\t\t<GlobalStylesStyleBook onClose={ onCloseStyleBook } />\n\t\t\t) }\n\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t<ScreenCSS />\n\t\t\t</GlobalStylesNavigationScreen>\n\t\t</NavigatorProvider>\n\t);\n}\n\nexport default GlobalStylesUI;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"names":["GlobalStylesNavigationScreen","className","props","filter","Boolean","join","BlockStyleVariationsScreens","name","blockStyleVariations","select","getBlockStyles","blocksStore","length","map","variation","encodeURIComponent","ContextScreens","parentMenu","hasVariationPath","search","variationPath","substring","replace","concat","BlockStylesNavigationScreens","blockStyles","blockName","style","index","GlobalStylesStyleBook","onClose","navigator","path","location","startsWith","depth","match","i","goBack","goTo","GlobalStylesUI","isStyleBookOpened","onCloseStyleBook","blocks","block"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalUseNavigator as useNavigator,\n} from '@wordpress/components';\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\n\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackgroundColor from './screen-background-color';\nimport ScreenTextColor from './screen-text-color';\nimport ScreenLinkColor from './screen-link-color';\nimport ScreenHeadingColor from './screen-heading-color';\nimport ScreenButtonColor from './screen-button-color';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport { ScreenVariation } from './screen-variations';\nimport ScreenBorder from './screen-border';\nimport StyleBook from '../style-book';\nimport ScreenCSS from './screen-css';\n\nfunction GlobalStylesNavigationScreen( { className, ...props } ) {\n\treturn (\n\t\t<NavigatorScreen\n\t\t\tclassName={ [\n\t\t\t\t'edit-site-global-styles-sidebar__navigator-screen',\n\t\t\t\tclassName,\n\t\t\t]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( ' ' ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction BlockStyleVariationsScreens( { name } ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\tif ( ! blockStyleVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn blockStyleVariations.map( ( variation ) => (\n\t\t<ContextScreens\n\t\t\tkey={ variation.name + name }\n\t\t\tname={ name }\n\t\t\tparentMenu={\n\t\t\t\t'/blocks/' +\n\t\t\t\tencodeURIComponent( name ) +\n\t\t\t\t'/variations/' +\n\t\t\t\tencodeURIComponent( variation.name )\n\t\t\t}\n\t\t/>\n\t) );\n}\n\nfunction ContextScreens( { name, parentMenu = '' } ) {\n\tconst hasVariationPath = parentMenu.search( 'variations' );\n\tconst variationPath =\n\t\thasVariationPath !== -1\n\t\t\t? parentMenu\n\t\t\t\t\t.substring( hasVariationPath )\n\t\t\t\t\t.replace( '/', '.' )\n\t\t\t\t\t.concat( '', '.' )\n\t\t\t: '';\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\tconst BlockStylesNavigationScreens = ( { blockStyles, blockName } ) => {\n\t\treturn blockStyles.map( ( style, index ) => (\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tkey={ index }\n\t\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t\t>\n\t\t\t\t<ScreenVariation blockName={ blockName } style={ style } />\n\t\t\t</GlobalStylesNavigationScreen>\n\t\t) );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>\n\t\t\t\t<ScreenTypography\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t/>\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/text' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"text\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/link' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"link\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/heading' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"heading\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/button' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"button\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>\n\t\t\t\t<ScreenColors name={ name } variationPath={ variationPath } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/background' }\n\t\t\t>\n\t\t\t\t<ScreenBackgroundColor\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t/>\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>\n\t\t\t\t<ScreenTextColor\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t/>\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>\n\t\t\t\t<ScreenLinkColor\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t/>\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/heading' }\n\t\t\t>\n\t\t\t\t<ScreenHeadingColor\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t/>\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/button' }\n\t\t\t>\n\t\t\t\t<ScreenButtonColor\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t/>\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>\n\t\t\t\t<ScreenBorder name={ name } variationPath={ variationPath } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>\n\t\t\t\t<ScreenLayout name={ name } variationPath={ variationPath } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesStyleBook( { onClose } ) {\n\tconst navigator = useNavigator();\n\tconst { path } = navigator.location;\n\treturn (\n\t\t<StyleBook\n\t\t\tisSelected={ ( blockName ) =>\n\t\t\t\t// Match '/blocks/core%2Fbutton' and\n\t\t\t\t// '/blocks/core%2Fbutton/typography', but not\n\t\t\t\t// '/blocks/core%2Fbuttons'.\n\t\t\t\tpath === `/blocks/${ encodeURIComponent( blockName ) }` ||\n\t\t\t\tpath.startsWith(\n\t\t\t\t\t`/blocks/${ encodeURIComponent( blockName ) }/`\n\t\t\t\t)\n\t\t\t}\n\t\t\tonSelect={ ( blockName ) => {\n\t\t\t\t// Clear navigator history by going back to the root.\n\t\t\t\tconst depth = path.match( /\\//g ).length;\n\t\t\t\tfor ( let i = 0; i < depth; i++ ) {\n\t\t\t\t\tnavigator.goBack();\n\t\t\t\t}\n\t\t\t\t// Now go to the selected block.\n\t\t\t\tnavigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );\n\t\t\t} }\n\t\t\tonClose={ onClose }\n\t\t/>\n\t);\n}\n\nfunction GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {\n\tconst blocks = getBlockTypes();\n\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-global-styles-sidebar__navigator-provider\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t<ScreenRoot />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t<ScreenStyleVariations />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t<ScreenBlockList />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<ContextScreens\n\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\tname={ block.name }\n\t\t\t\t\tparentMenu={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t/>\n\t\t\t) ) }\n\n\t\t\t{ blocks.map( ( block, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<BlockStyleVariationsScreens\n\t\t\t\t\t\tkey={ 'screens-block-styles-' + block.name + index }\n\t\t\t\t\t\tname={ block.name }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ isStyleBookOpened && (\n\t\t\t\t<GlobalStylesStyleBook onClose={ onCloseStyleBook } />\n\t\t\t) }\n\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t<ScreenCSS />\n\t\t\t</GlobalStylesNavigationScreen>\n\t\t</NavigatorProvider>\n\t);\n}\n\nexport default GlobalStylesUI;\n"]}

package/build/components/global-styles/use-global-styles-output.js

@@ -177,6 +177,25 @@ function flattenTree() {
   });
   return result;
 }
+/**
+ * Gets variation selector string from feature selector.
+ *
+ * @param {string} featureSelector        The feature selector.
+ *
+ * @param {string} styleVariationSelector The style variation selector.
+ * @return {string} Combined selector string.
+ *
+ */
+
+
+function concatFeatureVariationSelectorString(featureSelector, styleVariationSelector) {
+  const featureSelectors = featureSelector.split(',');
+  const combinedSelectors = [];
+  featureSelectors.forEach(selector => {
+    combinedSelectors.push(`${styleVariationSelector.trim()}${selector.trim()}`);
+  });
+  return combinedSelectors.join(', ');
+}
 /**
  * Transform given style tree into a set of style declarations.
  *
@@ -418,7 +437,10 @@ const getNodesWithStyles = (tree, blockSelectors) => {
     return nodes;
   }
 
-  const pickStyleKeys = treeToPickFrom => (0, _lodash.pickBy)(treeToPickFrom, (value, key) => ['border', 'color', 'dimensions', 'spacing', 'typography', 'filter', 'outline', 'shadow'].includes(key)); // Top-level.
+  const pickStyleKeys = treeToPickFrom => Object.fromEntries(Object.entries(treeToPickFrom !== null && treeToPickFrom !== void 0 ? treeToPickFrom : {}).filter(_ref11 => {
+    let [key] = _ref11;
+    return ['border', 'color', 'dimensions', 'spacing', 'typography', 'filter', 'outline', 'shadow'].includes(key);
+  })); // Top-level.
 
 
   const styles = pickStyleKeys(tree.styles);
@@ -430,10 +452,10 @@ const getNodesWithStyles = (tree, blockSelectors) => {
     });
   }
 
-  Object.entries(_blocks.__EXPERIMENTAL_ELEMENTS).forEach(_ref11 => {
+  Object.entries(_blocks.__EXPERIMENTAL_ELEMENTS).forEach(_ref12 => {
     var _tree$styles;
 
-    let [name, selector] = _ref11;
+    let [name, selector] = _ref12;
 
     if (!!((_tree$styles = tree.styles) !== null && _tree$styles !== void 0 && _tree$styles.elements[name])) {
       var _tree$styles2;
@@ -445,12 +467,20 @@ const getNodesWithStyles = (tree, blockSelectors) => {
     }
   }); // Iterate over blocks: they can have styles & elements.
 
-  Object.entries((_tree$styles$blocks = (_tree$styles3 = tree.styles) === null || _tree$styles3 === void 0 ? void 0 : _tree$styles3.blocks) !== null && _tree$styles$blocks !== void 0 ? _tree$styles$blocks : {}).forEach(_ref12 => {
+  Object.entries((_tree$styles$blocks = (_tree$styles3 = tree.styles) === null || _tree$styles3 === void 0 ? void 0 : _tree$styles3.blocks) !== null && _tree$styles$blocks !== void 0 ? _tree$styles$blocks : {}).forEach(_ref13 => {
     var _blockSelectors$block, _node$elements;
 
-    let [blockName, node] = _ref12;
+    let [blockName, node] = _ref13;
     const blockStyles = pickStyleKeys(node);
 
+    if (node !== null && node !== void 0 && node.variations) {
+      const variations = {};
+      Object.keys(node.variations).forEach(variation => {
+        variations[variation] = pickStyleKeys(node.variations[variation]);
+      });
+      blockStyles.variations = variations;
+    }
+
     if (!!blockStyles && !!(blockSelectors !== null && blockSelectors !== void 0 && (_blockSelectors$block = blockSelectors[blockName]) !== null && _blockSelectors$block !== void 0 && _blockSelectors$block.selector)) {
       nodes.push({
         duotoneSelector: blockSelectors[blockName].duotoneSelector,
@@ -458,12 +488,13 @@ const getNodesWithStyles = (tree, blockSelectors) => {
         hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,
         selector: blockSelectors[blockName].selector,
         styles: blockStyles,
-        featureSelectors: blockSelectors[blockName].featureSelectors
+        featureSelectors: blockSelectors[blockName].featureSelectors,
+        styleVariationSelectors: blockSelectors[blockName].styleVariationSelectors
       });
     }
 
-    Object.entries((_node$elements = node === null || node === void 0 ? void 0 : node.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(_ref13 => {
-      let [elementName, value] = _ref13;
+    Object.entries((_node$elements = node === null || node === void 0 ? void 0 : node.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(_ref14 => {
+      let [elementName, value] = _ref14;
 
       if (!!value && !!(blockSelectors !== null && blockSelectors !== void 0 && blockSelectors[blockName]) && !!(_blocks.__EXPERIMENTAL_ELEMENTS !== null && _blocks.__EXPERIMENTAL_ELEMENTS !== void 0 && _blocks.__EXPERIMENTAL_ELEMENTS[elementName])) {
         nodes.push({
@@ -494,10 +525,10 @@ const getNodesWithSettings = (tree, blockSelectors) => {
   const pickPresets = treeToPickFrom => {
     const presets = {};
 
-    _utils.PRESET_METADATA.forEach(_ref14 => {
+    _utils.PRESET_METADATA.forEach(_ref15 => {
       let {
         path
-      } = _ref14;
+      } = _ref15;
       const value = (0, _lodash.get)(treeToPickFrom, path, false);
 
       if (value !== false) {
@@ -521,8 +552,8 @@ const getNodesWithSettings = (tree, blockSelectors) => {
   } // Blocks.
 
 
-  Object.entries((_tree$settings$blocks = (_tree$settings5 = tree.settings) === null || _tree$settings5 === void 0 ? void 0 : _tree$settings5.blocks) !== null && _tree$settings$blocks !== void 0 ? _tree$settings$blocks : {}).forEach(_ref15 => {
-    let [blockName, node] = _ref15;
+  Object.entries((_tree$settings$blocks = (_tree$settings5 = tree.settings) === null || _tree$settings5 === void 0 ? void 0 : _tree$settings5.blocks) !== null && _tree$settings$blocks !== void 0 ? _tree$settings$blocks : {}).forEach(_ref16 => {
+    let [blockName, node] = _ref16;
     const blockPresets = pickPresets(node);
     const blockCustom = node.custom;
 
@@ -542,12 +573,12 @@ exports.getNodesWithSettings = getNodesWithSettings;
 const toCustomProperties = (tree, blockSelectors) => {
   const settings = getNodesWithSettings(tree, blockSelectors);
   let ruleset = '';
-  settings.forEach(_ref16 => {
+  settings.forEach(_ref17 => {
     let {
       presets,
       custom,
       selector
-    } = _ref16;
+    } = _ref17;
     const declarations = getPresetsDeclarations(presets, tree === null || tree === void 0 ? void 0 : tree.settings);
     const customProps = flattenTree(custom, '--wp--custom--', '--');
 
@@ -605,21 +636,22 @@ const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasFallback
   }
 
   ruleset += '}';
-  nodesWithStyles.forEach(_ref17 => {
+  nodesWithStyles.forEach(_ref18 => {
     let {
       selector,
       duotoneSelector,
       styles,
       fallbackGapValue,
       hasLayoutSupport,
-      featureSelectors
-    } = _ref17;
+      featureSelectors,
+      styleVariationSelectors
+    } = _ref18;
 
     // Process styles for block support features with custom feature level
     // CSS selectors set.
     if (featureSelectors) {
-      Object.entries(featureSelectors).forEach(_ref18 => {
-        let [featureName, featureSelector] = _ref18;
+      Object.entries(featureSelectors).forEach(_ref19 => {
+        let [featureName, featureSelector] = _ref19;
 
         if (styles !== null && styles !== void 0 && styles[featureName]) {
           const featureStyles = {
@@ -635,6 +667,46 @@ const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasFallback
       });
     }
 
+    if (styleVariationSelectors) {
+      Object.entries(styleVariationSelectors).forEach(_ref20 => {
+        var _styles$variations;
+
+        let [styleVariationName, styleVariationSelector] = _ref20;
+
+        if (styles !== null && styles !== void 0 && (_styles$variations = styles.variations) !== null && _styles$variations !== void 0 && _styles$variations[styleVariationName]) {
+          var _styles$variations3;
+
+          // If the block uses any custom selectors for block support, add those first.
+          if (featureSelectors) {
+            Object.entries(featureSelectors).forEach(_ref21 => {
+              var _styles$variations2, _styles$variations2$s;
+
+              let [featureName, featureSelector] = _ref21;
+
+              if (styles !== null && styles !== void 0 && (_styles$variations2 = styles.variations) !== null && _styles$variations2 !== void 0 && (_styles$variations2$s = _styles$variations2[styleVariationName]) !== null && _styles$variations2$s !== void 0 && _styles$variations2$s[featureName]) {
+                const featureStyles = {
+                  [featureName]: styles.variations[styleVariationName][featureName]
+                };
+                const featureDeclarations = getStylesDeclarations(featureStyles);
+                delete styles.variations[styleVariationName][featureName];
+
+                if (!!featureDeclarations.length) {
+                  ruleset = ruleset + `${concatFeatureVariationSelectorString(featureSelector, styleVariationSelector)}{${featureDeclarations.join(';')} }`;
+                }
+              }
+            });
+          } // Otherwise add regular selectors.
+
+
+          const styleVariationDeclarations = getStylesDeclarations(styles === null || styles === void 0 ? void 0 : (_styles$variations3 = styles.variations) === null || _styles$variations3 === void 0 ? void 0 : _styles$variations3[styleVariationName], styleVariationSelector, useRootPaddingAlign, tree);
+
+          if (!!styleVariationDeclarations.length) {
+            ruleset = ruleset + `${styleVariationSelector}{${styleVariationDeclarations.join(';')}}`;
+          }
+        }
+      });
+    }
+
     const duotoneStyles = {};
 
     if (styles !== null && styles !== void 0 && styles.filter) {
@@ -671,14 +743,14 @@ const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasFallback
     } // Check for pseudo selector in `styles` and handle separately.
 
 
-    const pseudoSelectorStyles = Object.entries(styles).filter(_ref19 => {
-      let [key] = _ref19;
+    const pseudoSelectorStyles = Object.entries(styles).filter(_ref22 => {
+      let [key] = _ref22;
       return key.startsWith(':');
     });
 
     if (pseudoSelectorStyles !== null && pseudoSelectorStyles !== void 0 && pseudoSelectorStyles.length) {
-      pseudoSelectorStyles.forEach(_ref20 => {
-        let [pseudoKey, pseudoStyle] = _ref20;
+      pseudoSelectorStyles.forEach(_ref23 => {
+        let [pseudoKey, pseudoStyle] = _ref23;
         const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
 
         if (!(pseudoDeclarations !== null && pseudoDeclarations !== void 0 && pseudoDeclarations.length)) {
@@ -714,11 +786,11 @@ const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasFallback
     ruleset = ruleset + `.wp-site-blocks > * + * { margin-block-start: ${gapValue}; }`;
   }
 
-  nodesWithSettings.forEach(_ref21 => {
+  nodesWithSettings.forEach(_ref24 => {
     let {
       selector,
       presets
-    } = _ref21;
+    } = _ref24;
 
     if (_utils.ROOT_BLOCK_SELECTOR === selector) {
       // Do not add extra specificity for top-level classes.
@@ -738,15 +810,15 @@ exports.toStyles = toStyles;
 
 function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(_ref22 => {
+  return nodesWithSettings.flatMap(_ref25 => {
     let {
       presets
-    } = _ref22;
+    } = _ref25;
     return getPresetsSvgFilters(presets);
   });
 }
 
-const getBlockSelectors = blockTypes => {
+const getBlockSelectors = (blockTypes, getBlockStyles) => {
   const result = {};
   blockTypes.forEach(blockType => {
     var _blockType$supports$_, _blockType$supports, _blockType$supports$c, _blockType$supports2, _blockType$supports2$, _blockType$supports3, _blockType$supports4, _blockType$supports4$, _blockType$supports4$2;
@@ -755,13 +827,23 @@ const getBlockSelectors = blockTypes => {
     const selector = (_blockType$supports$_ = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports = blockType.supports) === null || _blockType$supports === void 0 ? void 0 : _blockType$supports.__experimentalSelector) !== null && _blockType$supports$_ !== void 0 ? _blockType$supports$_ : '.wp-block-' + name.replace('core/', '').replace('/', '-');
     const duotoneSelector = (_blockType$supports$c = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports2 = blockType.supports) === null || _blockType$supports2 === void 0 ? void 0 : (_blockType$supports2$ = _blockType$supports2.color) === null || _blockType$supports2$ === void 0 ? void 0 : _blockType$supports2$.__experimentalDuotone) !== null && _blockType$supports$c !== void 0 ? _blockType$supports$c : null;
     const hasLayoutSupport = !!(blockType !== null && blockType !== void 0 && (_blockType$supports3 = blockType.supports) !== null && _blockType$supports3 !== void 0 && _blockType$supports3.__experimentalLayout);
-    const fallbackGapValue = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports4 = blockType.supports) === null || _blockType$supports4 === void 0 ? void 0 : (_blockType$supports4$ = _blockType$supports4.spacing) === null || _blockType$supports4$ === void 0 ? void 0 : (_blockType$supports4$2 = _blockType$supports4$.blockGap) === null || _blockType$supports4$2 === void 0 ? void 0 : _blockType$supports4$2.__experimentalDefault; // For each block support feature add any custom selectors.
+    const fallbackGapValue = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports4 = blockType.supports) === null || _blockType$supports4 === void 0 ? void 0 : (_blockType$supports4$ = _blockType$supports4.spacing) === null || _blockType$supports4$ === void 0 ? void 0 : (_blockType$supports4$2 = _blockType$supports4$.blockGap) === null || _blockType$supports4$2 === void 0 ? void 0 : _blockType$supports4$2.__experimentalDefault;
+    const blockStyleVariations = getBlockStyles(name);
+    const styleVariationSelectors = {};
+
+    if (blockStyleVariations !== null && blockStyleVariations !== void 0 && blockStyleVariations.length) {
+      blockStyleVariations.forEach(variation => {
+        const styleVariationSelector = `.is-style-${variation.name}${selector}`;
+        styleVariationSelectors[variation.name] = styleVariationSelector;
+      });
+    } // For each block support feature add any custom selectors.
+
 
     const featureSelectors = {};
-    Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(_ref23 => {
+    Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(_ref26 => {
       var _blockType$supports5, _blockType$supports5$;
 
-      let [featureKey, featureName] = _ref23;
+      let [featureKey, featureName] = _ref26;
       const featureSelector = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports5 = blockType.supports) === null || _blockType$supports5 === void 0 ? void 0 : (_blockType$supports5$ = _blockType$supports5[featureKey]) === null || _blockType$supports5$ === void 0 ? void 0 : _blockType$supports5$.__experimentalSelector;
 
       if (featureSelector) {
@@ -774,7 +856,8 @@ const getBlockSelectors = blockTypes => {
       featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : undefined,
       hasLayoutSupport,
       name,
-      selector
+      selector,
+      styleVariationSelectors: Object.keys(styleVariationSelectors).length ? styleVariationSelectors : undefined
     };
   });
   return result;
@@ -828,6 +911,9 @@ function useGlobalStylesOutput() {
     } = select(_blockEditor.store);
     return !!getSettings().disableLayoutStyles;
   });
+  const getBlockStyles = (0, _data.useSelect)(select => {
+    return select(_blocks.store).getBlockStyles;
+  }, []);
   return (0, _element.useMemo)(() => {
     var _mergedConfig, _mergedConfig2, _mergedConfig$styles$;
 
@@ -836,7 +922,7 @@ function useGlobalStylesOutput() {
     }
 
     mergedConfig = updateConfigWithSeparator(mergedConfig);
-    const blockSelectors = getBlockSelectors((0, _blocks.getBlockTypes)());
+    const blockSelectors = getBlockSelectors((0, _blocks.getBlockTypes)(), getBlockStyles);
     const customProperties = toCustomProperties(mergedConfig, blockSelectors);
     const globalStyles = toStyles(mergedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles);
     const filters = toSvgFilters(mergedConfig, blockSelectors);