@wordpress/edit-site 5.0.0 → 5.2.0

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

@@ -5,7 +5,8 @@ import { createElement, Fragment } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalUseNavigator as useNavigator } from '@wordpress/components';
-import { getBlockTypes } from '@wordpress/blocks';
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
@@ -24,6 +25,7 @@ import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
+import { ScreenVariation } from './screen-variations';
 import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
@@ -38,15 +40,61 @@ function GlobalStylesNavigationScreen(_ref) {
   }, props));
 }
 
-function ContextScreens(_ref2) {
+function BlockStyleVariationsScreens(_ref2) {
   let {
     name
   } = _ref2;
-  const parentMenu = name === undefined ? '' : '/blocks/' + encodeURIComponent(name);
+  const blockStyleVariations = useSelect(select => {
+    const {
+      getBlockStyles
+    } = select(blocksStore);
+    return getBlockStyles(name);
+  }, [name]);
+
+  if (!(blockStyleVariations !== null && blockStyleVariations !== void 0 && blockStyleVariations.length)) {
+    return null;
+  }
+
+  return blockStyleVariations.map(variation => createElement(ContextScreens, {
+    key: variation.name + name,
+    name: name,
+    parentMenu: '/blocks/' + encodeURIComponent(name) + '/variations/' + encodeURIComponent(variation.name)
+  }));
+}
+
+function ContextScreens(_ref3) {
+  let {
+    name,
+    parentMenu = ''
+  } = _ref3;
+  const hasVariationPath = parentMenu.search('variations');
+  const variationPath = hasVariationPath !== -1 ? parentMenu.substring(hasVariationPath).replace('/', '.').concat('', '.') : '';
+  const blockStyleVariations = useSelect(select => {
+    const {
+      getBlockStyles
+    } = select(blocksStore);
+    return getBlockStyles(name);
+  }, [name]);
+
+  const BlockStylesNavigationScreens = _ref4 => {
+    let {
+      blockStyles,
+      blockName
+    } = _ref4;
+    return blockStyles.map((style, index) => createElement(GlobalStylesNavigationScreen, {
+      key: index,
+      path: parentMenu + '/variations/' + style.name
+    }, createElement(ScreenVariation, {
+      blockName: blockName,
+      style: style
+    })));
+  };
+
   return createElement(Fragment, null, createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/typography'
   }, createElement(ScreenTypography, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/typography/text'
   }, createElement(ScreenTypographyElement, {
@@ -70,7 +118,8 @@ function ContextScreens(_ref2) {
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors'
   }, createElement(ScreenColors, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/palette'
   }, createElement(ScreenColorPalette, {
@@ -78,38 +127,48 @@ function ContextScreens(_ref2) {
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/background'
   }, createElement(ScreenBackgroundColor, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/text'
   }, createElement(ScreenTextColor, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/link'
   }, createElement(ScreenLinkColor, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/heading'
   }, createElement(ScreenHeadingColor, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/button'
   }, createElement(ScreenButtonColor, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/border'
   }, createElement(ScreenBorder, {
-    name: name
+    name: name,
+    variationPath: variationPath
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/layout'
   }, createElement(ScreenLayout, {
-    name: name
-  })));
+    name: name,
+    variationPath: variationPath
+  })), !!(blockStyleVariations !== null && blockStyleVariations !== void 0 && blockStyleVariations.length) && createElement(BlockStylesNavigationScreens, {
+    blockStyles: blockStyleVariations,
+    blockName: name
+  }));
 }
 
-function GlobalStylesStyleBook(_ref3) {
+function GlobalStylesStyleBook(_ref5) {
   let {
     onClose
-  } = _ref3;
+  } = _ref5;
   const navigator = useNavigator();
   const {
     path
@@ -134,11 +193,11 @@ function GlobalStylesStyleBook(_ref3) {
   });
 }
 
-function GlobalStylesUI(_ref4) {
+function GlobalStylesUI(_ref6) {
   let {
     isStyleBookOpened,
     onCloseStyleBook
-  } = _ref4;
+  } = _ref6;
   const blocks = getBlockTypes();
   return createElement(NavigatorProvider, {
     className: "edit-site-global-styles-sidebar__navigator-provider",
@@ -156,8 +215,14 @@ function GlobalStylesUI(_ref4) {
     name: block.name
   }))), createElement(ContextScreens, null), blocks.map(block => createElement(ContextScreens, {
     key: 'screens-block-' + block.name,
-    name: block.name
-  })), isStyleBookOpened && createElement(GlobalStylesStyleBook, {
+    name: block.name,
+    parentMenu: '/blocks/' + encodeURIComponent(block.name)
+  })), blocks.map((block, index) => {
+    return createElement(BlockStyleVariationsScreens, {
+      key: 'screens-block-styles-' + block.name + index,
+      name: block.name
+    });
+  }), isStyleBookOpened && createElement(GlobalStylesStyleBook, {
     onClose: onCloseStyleBook
   }), createElement(GlobalStylesNavigationScreen, {
     path: "/css"

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"names":["__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalUseNavigator","useNavigator","getBlockTypes","ScreenRoot","ScreenBlockList","ScreenBlock","ScreenTypography","ScreenTypographyElement","ScreenColors","ScreenColorPalette","ScreenBackgroundColor","ScreenTextColor","ScreenLinkColor","ScreenHeadingColor","ScreenButtonColor","ScreenLayout","ScreenStyleVariations","ScreenBorder","StyleBook","ScreenCSS","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":"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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 } 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":["__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalUseNavigator","useNavigator","getBlockTypes","store","blocksStore","useSelect","ScreenRoot","ScreenBlockList","ScreenBlock","ScreenTypography","ScreenTypographyElement","ScreenColors","ScreenColorPalette","ScreenBackgroundColor","ScreenTextColor","ScreenLinkColor","ScreenHeadingColor","ScreenButtonColor","ScreenLayout","ScreenStyleVariations","ScreenVariation","ScreenBorder","StyleBook","ScreenCSS","GlobalStylesNavigationScreen","className","props","filter","Boolean","join","BlockStyleVariationsScreens","name","blockStyleVariations","select","getBlockStyles","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-module/components/global-styles/use-global-styles-output.js

@@ -3,12 +3,12 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { get, isEmpty, kebabCase, pickBy, set } from 'lodash';
+import { get, isEmpty, kebabCase, set } from 'lodash';
 /**
  * WordPress dependencies
  */
 
-import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY, __EXPERIMENTAL_ELEMENTS as ELEMENTS, getBlockTypes } from '@wordpress/blocks';
+import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY, __EXPERIMENTAL_ELEMENTS as ELEMENTS, getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
@@ -156,6 +156,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.
  *
@@ -395,7 +414,10 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
     return nodes;
   }
 
-  const pickStyleKeys = treeToPickFrom => 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);
@@ -407,10 +429,10 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
     });
   }
 
-  Object.entries(ELEMENTS).forEach(_ref11 => {
+  Object.entries(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;
@@ -422,12 +444,20 @@ export 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,
@@ -435,12 +465,13 @@ export 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]) && !!(ELEMENTS !== null && ELEMENTS !== void 0 && ELEMENTS[elementName])) {
         nodes.push({
@@ -466,10 +497,10 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 
   const pickPresets = treeToPickFrom => {
     const presets = {};
-    PRESET_METADATA.forEach(_ref14 => {
+    PRESET_METADATA.forEach(_ref15 => {
       let {
         path
-      } = _ref14;
+      } = _ref15;
       const value = get(treeToPickFrom, path, false);
 
       if (value !== false) {
@@ -492,8 +523,8 @@ export 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;
 
@@ -510,12 +541,12 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 export 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--', '--');
 
@@ -570,21 +601,22 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
   }
 
   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 = {
@@ -600,6 +632,46 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
       });
     }
 
+    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) {
@@ -636,14 +708,14 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
     } // 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)) {
@@ -679,11 +751,11 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
     ruleset = ruleset + `.wp-site-blocks > * + * { margin-block-start: ${gapValue}; }`;
   }
 
-  nodesWithSettings.forEach(_ref21 => {
+  nodesWithSettings.forEach(_ref24 => {
     let {
       selector,
       presets
-    } = _ref21;
+    } = _ref24;
 
     if (ROOT_BLOCK_SELECTOR === selector) {
       // Do not add extra specificity for top-level classes.
@@ -700,14 +772,14 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
 };
 export function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(_ref22 => {
+  return nodesWithSettings.flatMap(_ref25 => {
     let {
       presets
-    } = _ref22;
+    } = _ref25;
     return getPresetsSvgFilters(presets);
   });
 }
-export const getBlockSelectors = blockTypes => {
+export 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;
@@ -716,13 +788,23 @@ export 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) {
@@ -735,7 +817,8 @@ export const getBlockSelectors = blockTypes => {
       featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : undefined,
       hasLayoutSupport,
       name,
-      selector
+      selector,
+      styleVariationSelectors: Object.keys(styleVariationSelectors).length ? styleVariationSelectors : undefined
     };
   });
   return result;
@@ -786,6 +869,9 @@ export function useGlobalStylesOutput() {
     } = select(blockEditorStore);
     return !!getSettings().disableLayoutStyles;
   });
+  const getBlockStyles = useSelect(select => {
+    return select(blocksStore).getBlockStyles;
+  }, []);
   return useMemo(() => {
     var _mergedConfig, _mergedConfig2, _mergedConfig$styles$;
 
@@ -794,7 +880,7 @@ export function useGlobalStylesOutput() {
     }
 
     mergedConfig = updateConfigWithSeparator(mergedConfig);
-    const blockSelectors = getBlockSelectors(getBlockTypes());
+    const blockSelectors = getBlockSelectors(getBlockTypes(), getBlockStyles);
     const customProperties = toCustomProperties(mergedConfig, blockSelectors);
     const globalStyles = toStyles(mergedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles);
     const filters = toSvgFilters(mergedConfig, blockSelectors);