@wordpress/edit-site 4.7.0 → 4.10.0

package/build/components/global-styles/screen-typography-element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["elements","text","description","title","link","ScreenTypographyElement","name","element"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAE,cAAI,oCAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,MAAJ;AAFF,GADU;AAKhBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAE,cAAI,oDAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,OAAJ;AAFF;AALU,CAAjB;;AAWA,SAASE,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAGP,QAAQ,CAAEO,OAAF,CAAR,CAAoBJ,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAEO,OAAF,CAAR,CAAoBL;AAFnC,IADD,EAKC,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGI,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;eAEcF,uB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<TypographyPanel name={ name } element={ element } />\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["elements","text","description","title","link","button","ScreenTypographyElement","name","element"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAE,cAAI,oCAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,MAAJ;AAFF,GADU;AAKhBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAE,cAAI,oDAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,OAAJ;AAFF,GALU;AAShBE,EAAAA,MAAM,EAAE;AACPH,IAAAA,WAAW,EAAE,cAAI,kDAAJ,CADN;AAEPC,IAAAA,KAAK,EAAE,cAAI,SAAJ;AAFA;AATQ,CAAjB;;AAeA,SAASG,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAGR,QAAQ,CAAEQ,OAAF,CAAR,CAAoBL,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAEQ,OAAF,CAAR,CAAoBN;AAFnC,IADD,EAKC,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGK,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;eAEcF,uB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n\tbutton: {\n\t\tdescription: __( 'Manage the fonts and typography used on buttons.' ),\n\t\ttitle: __( 'Buttons' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<TypographyPanel name={ name } element={ element } />\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}

package/build/components/global-styles/screen-typography.js

@@ -54,8 +54,11 @@ function Item(_ref) {
     return null;
   }
 
+  const navigationButtonLabel = (0, _i18n.sprintf)( // translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
+  (0, _i18n.__)('Typography %s styles'), label);
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + '/typography/' + element
+    path: parentMenu + '/typography/' + element,
+    "aria-label": navigationButtonLabel
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
   }, (0, _element.createElement)(_components.FlexItem, {
@@ -97,6 +100,11 @@ function ScreenTypography(_ref2) {
     parentMenu: parentMenu,
     element: "link",
     label: (0, _i18n.__)('Links')
+  }), (0, _element.createElement)(Item, {
+    name: name,
+    parentMenu: parentMenu,
+    element: "button",
+    label: (0, _i18n.__)('Buttons')
   })))), !!name && (0, _element.createElement)(_typographyPanel.default, {
     name: name,
     element: "text"

package/build/components/global-styles/screen-typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","background","ScreenTypography","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\n\nfunction Item( { name, parentMenu, element, label } ) {\n\tconst hasSupport = ! name;\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenTypography( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t{ ! name && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"link\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ /* No typography elements support yet for blocks. */ }\n\t\t\t{ !! name && <TypographyPanel name={ name } element=\"text\" /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","navigationButtonLabel","background","ScreenTypography","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\n\nfunction Item( { name, parentMenu, element, label } ) {\n\tconst hasSupport = ! name;\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenTypography( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t{ ! name && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"link\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"button\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ /* No typography elements support yet for blocks. */ }\n\t\t\t{ !! name && <TypographyPanel name={ name } element=\"text\" /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}

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

@@ -35,6 +35,8 @@ var _screenTextColor = _interopRequireDefault(require("./screen-text-color"));
 
 var _screenLinkColor = _interopRequireDefault(require("./screen-link-color"));
 
+var _screenButtonColor = _interopRequireDefault(require("./screen-button-color"));
+
 var _screenLayout = _interopRequireDefault(require("./screen-layout"));
 
 var _screenStyleVariations = _interopRequireDefault(require("./screen-style-variations"));
@@ -75,6 +77,11 @@ function ContextScreens(_ref2) {
   }, (0, _element.createElement)(_screenTypographyElement.default, {
     name: name,
     element: "link"
+  })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
+    path: parentMenu + '/typography/button'
+  }, (0, _element.createElement)(_screenTypographyElement.default, {
+    name: name,
+    element: "button"
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors'
   }, (0, _element.createElement)(_screenColors.default, {
@@ -95,6 +102,10 @@ function ContextScreens(_ref2) {
     path: parentMenu + '/colors/link'
   }, (0, _element.createElement)(_screenLinkColor.default, {
     name: name
+  })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
+    path: parentMenu + '/colors/button'
+  }, (0, _element.createElement)(_screenButtonColor.default, {
+    name: name
   })), (0, _element.createElement)(GlobalStylesNavigationScreen, {
     path: parentMenu + '/layout'
   }, (0, _element.createElement)(_screenLayout.default, {

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","GlobalStylesUI","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} 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 ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\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 = name === undefined ? '' : '/blocks/' + 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 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 path={ parentMenu + '/layout' }>\n\t\t\t\t<ScreenLayout name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesUI() {\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/' + 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\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","ContextScreens","name","parentMenu","undefined","GlobalStylesUI","blocks","map","block"],"mappings":";;;;;;;;;;;;;AAGA;;AAIA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAxBA;AACA;AACA;;AAOA;AACA;AACA;AAeA,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,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AAEA,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;AAA8B,IAAA,IAAI,EAAGC,UAAU,GAAG;AAAlD,KACC,4BAAC,qBAAD;AAAc,IAAA,IAAI,EAAGD;AAArB,IADD,CAvBD,EA2BC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,2BAAD;AAAoB,IAAA,IAAI,EAAGD;AAA3B,IAHD,CA3BD,EAiCC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,8BAAD;AAAuB,IAAA,IAAI,EAAGD;AAA9B,IAHD,CAjCD,EAuCC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGC,UAAU,GAAG;AAAlD,KACC,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGD;AAAxB,IADD,CAvCD,EA2CC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGC,UAAU,GAAG;AAAlD,KACC,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGD;AAAxB,IADD,CA3CD,EA+CC,4BAAC,4BAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAG;AADrB,KAGC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGD;AAA1B,IAHD,CA/CD,EAqDC,4BAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGC,UAAU,GAAG;AAAlD,KACC,4BAAC,qBAAD;AAAc,IAAA,IAAI,EAAGD;AAArB,IADD,CArDD,CADD;AA2DA;;AAED,SAASG,cAAT,GAA0B;AACzB,QAAMC,MAAM,GAAG,4BAAf;AAEA,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,CAACN,IAD7B;AAEC,IAAA,IAAI,EAAG,aAAaM,KAAK,CAACN;AAF3B,KAIC,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGM,KAAK,CAACN;AAA1B,IAJD,CADC,CAhBH,EAyBC,4BAAC,cAAD,OAzBD,EA2BGI,MAAM,CAACC,GAAP,CAAcC,KAAF,IACb,4BAAC,cAAD;AACC,IAAA,GAAG,EAAG,mBAAmBA,KAAK,CAACN,IADhC;AAEC,IAAA,IAAI,EAAGM,KAAK,CAACN;AAFd,IADC,CA3BH,CADD;AAoCA;;eAEcG,c","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\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 ScreenButtonColor from './screen-button-color';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\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 = name === undefined ? '' : '/blocks/' + 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/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/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 + '/layout' }>\n\t\t\t\t<ScreenLayout name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesUI() {\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/' + 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\t\t</NavigatorProvider>\n\t);\n}\n\nexport default GlobalStylesUI;\n"]}

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getLayoutStyles = getLayoutStyles;
 exports.toStyles = exports.toCustomProperties = exports.getNodesWithStyles = exports.getNodesWithSettings = void 0;
 exports.toSvgFilters = toSvgFilters;
 exports.useGlobalStylesOutput = useGlobalStylesOutput;
@@ -181,7 +182,7 @@ function getStylesDeclarations() {
 
     const styleValue = (0, _lodash.get)(blockStyles, pathToValue);
 
-    if (!!properties && !(0, _lodash.isString)(styleValue)) {
+    if (!!properties && typeof styleValue !== 'string') {
       Object.entries(properties).forEach(entry => {
         const [name, prop] = entry;
 
@@ -210,6 +211,117 @@ function getStylesDeclarations() {
   });
   return output;
 }
+/**
+ * Get generated CSS for layout styles by looking up layout definitions provided
+ * in theme.json, and outputting common layout styles, and specific blockGap values.
+ *
+ * @param {Object}  props
+ * @param {Object}  props.tree                  A theme.json tree containing layout definitions.
+ * @param {Object}  props.style                 A style object containing spacing values.
+ * @param {string}  props.selector              Selector used to group together layout styling rules.
+ * @param {boolean} props.hasBlockGapSupport    Whether or not the theme opts-in to blockGap support.
+ * @param {boolean} props.hasFallbackGapSupport Whether or not the theme allows fallback gap styles.
+ * @param {?string} props.fallbackGapValue      An optional fallback gap value if no real gap value is available.
+ * @return {string} Generated CSS rules for the layout styles.
+ */
+
+
+function getLayoutStyles(_ref6) {
+  var _style$spacing, _tree$settings, _tree$settings$layout, _tree$settings2, _tree$settings2$layou;
+
+  let {
+    tree,
+    style,
+    selector,
+    hasBlockGapSupport,
+    hasFallbackGapSupport,
+    fallbackGapValue
+  } = _ref6;
+  let ruleset = '';
+  let gapValue = hasBlockGapSupport ? (0, _blockEditor.__experimentalGetGapCSSValue)(style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.blockGap) : ''; // Ensure a fallback gap value for the root layout definitions,
+  // and use a fallback value if one is provided for the current block.
+
+  if (hasFallbackGapSupport) {
+    if (selector === _utils.ROOT_BLOCK_SELECTOR) {
+      gapValue = !gapValue ? '0.5em' : gapValue;
+    } else if (!hasBlockGapSupport && fallbackGapValue) {
+      gapValue = fallbackGapValue;
+    }
+  }
+
+  if (gapValue && tree !== null && tree !== void 0 && (_tree$settings = tree.settings) !== null && _tree$settings !== void 0 && (_tree$settings$layout = _tree$settings.layout) !== null && _tree$settings$layout !== void 0 && _tree$settings$layout.definitions) {
+    Object.values(tree.settings.layout.definitions).forEach(_ref7 => {
+      let {
+        className,
+        name,
+        spacingStyles
+      } = _ref7;
+
+      // Allow skipping default layout for themes that opt-in to block styles, but opt-out of blockGap.
+      if (!hasBlockGapSupport && 'default' === name) {
+        return;
+      }
+
+      if (spacingStyles !== null && spacingStyles !== void 0 && spacingStyles.length) {
+        spacingStyles.forEach(spacingStyle => {
+          const declarations = [];
+
+          if (spacingStyle.rules) {
+            Object.entries(spacingStyle.rules).forEach(_ref8 => {
+              let [cssProperty, cssValue] = _ref8;
+              declarations.push(`${cssProperty}: ${cssValue ? cssValue : gapValue}`);
+            });
+          }
+
+          if (declarations.length) {
+            const combinedSelector = selector === _utils.ROOT_BLOCK_SELECTOR ? `${selector} .${className}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''}` : `${selector}.${className}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''}`;
+            ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
+          }
+        });
+      }
+    }); // For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+
+    if (selector === _utils.ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
+      ruleset += `${selector} { --wp--style--block-gap: ${gapValue}; }`;
+    }
+  } // Output base styles
+
+
+  if (selector === _utils.ROOT_BLOCK_SELECTOR && tree !== null && tree !== void 0 && (_tree$settings2 = tree.settings) !== null && _tree$settings2 !== void 0 && (_tree$settings2$layou = _tree$settings2.layout) !== null && _tree$settings2$layou !== void 0 && _tree$settings2$layou.definitions) {
+    const validDisplayModes = ['block', 'flex', 'grid'];
+    Object.values(tree.settings.layout.definitions).forEach(_ref9 => {
+      let {
+        className,
+        displayMode,
+        baseStyles
+      } = _ref9;
+
+      if (displayMode && validDisplayModes.includes(displayMode)) {
+        ruleset += `${selector} .${className} { display:${displayMode}; }`;
+      }
+
+      if (baseStyles !== null && baseStyles !== void 0 && baseStyles.length) {
+        baseStyles.forEach(baseStyle => {
+          const declarations = [];
+
+          if (baseStyle.rules) {
+            Object.entries(baseStyle.rules).forEach(_ref10 => {
+              let [cssProperty, cssValue] = _ref10;
+              declarations.push(`${cssProperty}: ${cssValue}`);
+            });
+          }
+
+          if (declarations.length) {
+            const combinedSelector = `${selector} .${className}${(baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.selector) || ''}`;
+            ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
+          }
+        });
+      }
+    });
+  }
+
+  return ruleset;
+}
 
 const getNodesWithStyles = (tree, blockSelectors) => {
   var _tree$styles, _tree$styles2;
@@ -248,9 +360,11 @@ const getNodesWithStyles = (tree, blockSelectors) => {
 
     if (!!blockStyles && !!(blockSelectors !== null && blockSelectors !== void 0 && (_blockSelectors$block = blockSelectors[blockName]) !== null && _blockSelectors$block !== void 0 && _blockSelectors$block.selector)) {
       nodes.push({
-        styles: blockStyles,
+        duotoneSelector: blockSelectors[blockName].duotoneSelector,
+        fallbackGapValue: blockSelectors[blockName].fallbackGapValue,
+        hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,
         selector: blockSelectors[blockName].selector,
-        duotoneSelector: blockSelectors[blockName].duotoneSelector
+        styles: blockStyles
       });
     }
 
@@ -258,7 +372,11 @@ const getNodesWithStyles = (tree, blockSelectors) => {
       if (!!value && !!(blockSelectors !== null && blockSelectors !== void 0 && blockSelectors[blockName]) && !!(_blocks.__EXPERIMENTAL_ELEMENTS !== null && _blocks.__EXPERIMENTAL_ELEMENTS !== void 0 && _blocks.__EXPERIMENTAL_ELEMENTS[elementName])) {
         nodes.push({
           styles: value,
-          selector: blockSelectors[blockName].selector.split(',').map(sel => sel + ' ' + _blocks.__EXPERIMENTAL_ELEMENTS[elementName]).join(',')
+          selector: blockSelectors[blockName].selector.split(',').map(sel => {
+            const elementSelectors = _blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(',');
+
+            return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);
+          }).join(',')
         });
       }
     });
@@ -269,7 +387,7 @@ const getNodesWithStyles = (tree, blockSelectors) => {
 exports.getNodesWithStyles = getNodesWithStyles;
 
 const getNodesWithSettings = (tree, blockSelectors) => {
-  var _tree$settings, _tree$settings2;
+  var _tree$settings3, _tree$settings4;
 
   const nodes = [];
 
@@ -280,10 +398,10 @@ const getNodesWithSettings = (tree, blockSelectors) => {
   const pickPresets = treeToPickFrom => {
     const presets = {};
 
-    _utils.PRESET_METADATA.forEach(_ref6 => {
+    _utils.PRESET_METADATA.forEach(_ref11 => {
       let {
         path
-      } = _ref6;
+      } = _ref11;
       const value = (0, _lodash.get)(treeToPickFrom, path, false);
 
       if (value !== false) {
@@ -296,7 +414,7 @@ const getNodesWithSettings = (tree, blockSelectors) => {
 
 
   const presets = pickPresets(tree.settings);
-  const custom = (_tree$settings = tree.settings) === null || _tree$settings === void 0 ? void 0 : _tree$settings.custom;
+  const custom = (_tree$settings3 = tree.settings) === null || _tree$settings3 === void 0 ? void 0 : _tree$settings3.custom;
 
   if (!(0, _lodash.isEmpty)(presets) || !!custom) {
     nodes.push({
@@ -307,7 +425,7 @@ const getNodesWithSettings = (tree, blockSelectors) => {
   } // Blocks.
 
 
-  (0, _lodash.forEach)((_tree$settings2 = tree.settings) === null || _tree$settings2 === void 0 ? void 0 : _tree$settings2.blocks, (node, blockName) => {
+  (0, _lodash.forEach)((_tree$settings4 = tree.settings) === null || _tree$settings4 === void 0 ? void 0 : _tree$settings4.blocks, (node, blockName) => {
     const blockPresets = pickPresets(node);
     const blockCustom = node.custom;
 
@@ -327,12 +445,12 @@ exports.getNodesWithSettings = getNodesWithSettings;
 const toCustomProperties = (tree, blockSelectors) => {
   const settings = getNodesWithSettings(tree, blockSelectors);
   let ruleset = '';
-  settings.forEach(_ref7 => {
+  settings.forEach(_ref12 => {
     let {
       presets,
       custom,
       selector
-    } = _ref7;
+    } = _ref12;
     const declarations = getPresetsDeclarations(presets);
     const customProps = flattenTree(custom, '--wp--custom--', '--');
 
@@ -349,7 +467,7 @@ const toCustomProperties = (tree, blockSelectors) => {
 
 exports.toCustomProperties = toCustomProperties;
 
-const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
+const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport) => {
   const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
   /*
@@ -362,12 +480,14 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
    */
 
   let ruleset = 'body {margin: 0;}';
-  nodesWithStyles.forEach(_ref8 => {
+  nodesWithStyles.forEach(_ref13 => {
     let {
       selector,
       duotoneSelector,
-      styles
-    } = _ref8;
+      styles,
+      fallbackGapValue,
+      hasLayoutSupport
+    } = _ref13;
     const duotoneStyles = {};
 
     if (styles !== null && styles !== void 0 && styles.filter) {
@@ -384,16 +504,55 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
       }
 
       ruleset = ruleset + `${duotoneSelector}{${duotoneDeclarations.join(';')};}`;
-    } // Process the remaning block styles (they use either normal block class or __experimentalSelector).
+    } // Process blockGap and layout styles.
+
+
+    if (_utils.ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport) {
+      ruleset += getLayoutStyles({
+        tree,
+        style: styles,
+        selector,
+        hasBlockGapSupport,
+        hasFallbackGapSupport,
+        fallbackGapValue
+      });
+    } // Process the remaining block styles (they use either normal block class or __experimentalSelector).
 
 
     const declarations = getStylesDeclarations(styles);
 
-    if (declarations.length === 0) {
-      return;
-    }
+    if (declarations !== null && declarations !== void 0 && declarations.length) {
+      ruleset = ruleset + `${selector}{${declarations.join(';')};}`;
+    } // Check for pseudo selector in `styles` and handle separately.
 
-    ruleset = ruleset + `${selector}{${declarations.join(';')};}`;
+
+    const pseudoSelectorStyles = Object.entries(styles).filter(_ref14 => {
+      let [key] = _ref14;
+      return key.startsWith(':');
+    });
+
+    if (pseudoSelectorStyles !== null && pseudoSelectorStyles !== void 0 && pseudoSelectorStyles.length) {
+      pseudoSelectorStyles.forEach(_ref15 => {
+        let [pseudoKey, pseudoStyle] = _ref15;
+        const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
+
+        if (!(pseudoDeclarations !== null && pseudoDeclarations !== void 0 && pseudoDeclarations.length)) {
+          return;
+        } // `selector` maybe provided in a form
+        // where block level selectors have sub element
+        // selectors appended to them as a comma seperated
+        // string.
+        // e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
+        // Split and append pseudo selector to create
+        // the proper rules to target the elements.
+
+
+        const _selector = selector.split(',').map(sel => sel + pseudoKey).join(',');
+
+        const pseudoRule = `${_selector}{${pseudoDeclarations.join(';')};}`;
+        ruleset = ruleset + pseudoRule;
+      });
+    }
   });
   /* Add alignment / layout styles */
 
@@ -402,15 +561,19 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
   ruleset = ruleset + '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 
   if (hasBlockGapSupport) {
+    var _tree$styles3, _tree$styles3$spacing;
+
+    // Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
+    const gapValue = (0, _blockEditor.__experimentalGetGapCSSValue)(tree === null || tree === void 0 ? void 0 : (_tree$styles3 = tree.styles) === null || _tree$styles3 === void 0 ? void 0 : (_tree$styles3$spacing = _tree$styles3.spacing) === null || _tree$styles3$spacing === void 0 ? void 0 : _tree$styles3$spacing.blockGap) || '0.5em';
     ruleset = ruleset + '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
-    ruleset = ruleset + '.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
+    ruleset = ruleset + `.wp-site-blocks > * + * { margin-block-start: ${gapValue}; }`;
   }
 
-  nodesWithSettings.forEach(_ref9 => {
+  nodesWithSettings.forEach(_ref16 => {
     let {
       selector,
       presets
-    } = _ref9;
+    } = _ref16;
 
     if (_utils.ROOT_BLOCK_SELECTOR === selector) {
       // Do not add extra specificity for top-level classes.
@@ -430,10 +593,10 @@ exports.toStyles = toStyles;
 
 function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(_ref10 => {
+  return nodesWithSettings.flatMap(_ref17 => {
     let {
       presets
-    } = _ref10;
+    } = _ref17;
     return getPresetsSvgFilters(presets);
   });
 }
@@ -441,15 +604,19 @@ function toSvgFilters(tree, blockSelectors) {
 const getBlockSelectors = blockTypes => {
   const result = {};
   blockTypes.forEach(blockType => {
-    var _blockType$supports$_, _blockType$supports, _blockType$supports$c, _blockType$supports2, _blockType$supports2$;
+    var _blockType$supports$_, _blockType$supports, _blockType$supports$c, _blockType$supports2, _blockType$supports2$, _blockType$supports3, _blockType$supports4, _blockType$supports4$, _blockType$supports4$2;
 
     const name = blockType.name;
     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;
     result[name] = {
+      duotoneSelector,
+      fallbackGapValue,
+      hasLayoutSupport,
       name,
-      selector,
-      duotoneSelector
+      selector
     };
   });
   return result;
@@ -464,6 +631,8 @@ function useGlobalStylesOutput() {
   } = (0, _element.useContext)(_context.GlobalStylesContext);
   const [blockGap] = (0, _hooks.useSetting)('spacing.blockGap');
   const hasBlockGapSupport = blockGap !== null;
+  const hasFallbackGapSupport = !hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
+
   (0, _element.useEffect)(() => {
     if (!(mergedConfig !== null && mergedConfig !== void 0 && mergedConfig.styles) || !(mergedConfig !== null && mergedConfig !== void 0 && mergedConfig.settings)) {
       return;
@@ -471,7 +640,7 @@ function useGlobalStylesOutput() {
 
     const blockSelectors = getBlockSelectors((0, _blocks.getBlockTypes)());
     const customProperties = toCustomProperties(mergedConfig, blockSelectors);
-    const globalStyles = toStyles(mergedConfig, blockSelectors, hasBlockGapSupport);
+    const globalStyles = toStyles(mergedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport);
     const filters = toSvgFilters(mergedConfig, blockSelectors);
     setStylesheets([{
       css: customProperties,
@@ -482,7 +651,7 @@ function useGlobalStylesOutput() {
     }]);
     setSettings(mergedConfig.settings);
     setSvgFilters(filters);
-  }, [mergedConfig]);
+  }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig]);
   return [stylesheets, settings, svgFilters, hasBlockGapSupport];
 }
 //# sourceMappingURL=use-global-styles-output.js.map