@wordpress/edit-site 4.7.0 → 4.10.0

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

@@ -18,6 +18,10 @@ const elements = {
   link: {
     description: __('Manage the fonts and typography used on the links.'),
     title: __('Links')
+  },
+  button: {
+    description: __('Manage the fonts and typography used on buttons.'),
+    title: __('Buttons')
   }
 };
 

package/build-module/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":["__","TypographyPanel","ScreenHeader","elements","text","description","title","link","ScreenTypographyElement","name","element"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,YAAP,MAAyB,UAAzB;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAEL,EAAE,CAAE,oCAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,MAAF;AAFJ,GADU;AAKhBO,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAEL,EAAE,CAAE,oDAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,OAAF;AAFJ;AALU,CAAjB;;AAWA,SAASQ,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGP,QAAQ,CAAEO,OAAF,CAAR,CAAoBJ,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAEO,OAAF,CAAR,CAAoBL;AAFnC,IADD,EAKC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGI,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;AAED,eAAeF,uBAAf","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":["__","TypographyPanel","ScreenHeader","elements","text","description","title","link","button","ScreenTypographyElement","name","element"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,YAAP,MAAyB,UAAzB;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAEL,EAAE,CAAE,oCAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,MAAF;AAFJ,GADU;AAKhBO,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAEL,EAAE,CAAE,oDAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,OAAF;AAFJ,GALU;AAShBQ,EAAAA,MAAM,EAAE;AACPH,IAAAA,WAAW,EAAEL,EAAE,CAAE,kDAAF,CADR;AAEPM,IAAAA,KAAK,EAAEN,EAAE,CAAE,SAAF;AAFF;AATQ,CAAjB;;AAeA,SAASS,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGR,QAAQ,CAAEQ,OAAF,CAAR,CAAoBL,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAEQ,OAAF,CAAR,CAAoBN;AAFnC,IADD,EAKC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGK,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;AAED,eAAeF,uBAAf","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-module/components/global-styles/screen-typography.js

@@ -3,7 +3,7 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { __experimentalItemGroup as ItemGroup, __experimentalVStack as VStack, __experimentalHStack as HStack, FlexItem } from '@wordpress/components';
 /**
  * Internal dependencies
@@ -39,8 +39,11 @@ function Item(_ref) {
     return null;
   }
 
+  const navigationButtonLabel = sprintf( // translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
+  __('Typography %s styles'), label);
   return createElement(NavigationButtonAsItem, {
-    path: parentMenu + '/typography/' + element
+    path: parentMenu + '/typography/' + element,
+    "aria-label": navigationButtonLabel
   }, createElement(HStack, {
     justify: "flex-start"
   }, createElement(FlexItem, {
@@ -82,6 +85,11 @@ function ScreenTypography(_ref2) {
     parentMenu: parentMenu,
     element: "link",
     label: __('Links')
+  }), createElement(Item, {
+    name: name,
+    parentMenu: parentMenu,
+    element: "button",
+    label: __('Buttons')
   })))), !!name && createElement(TypographyPanel, {
     name: name,
     element: "text"

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["__","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","ScreenHeader","NavigationButtonAsItem","useStyle","Subtitle","TypographyPanel","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":["__","sprintf","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","ScreenHeader","NavigationButtonAsItem","useStyle","Subtitle","TypographyPanel","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-module/components/global-styles/ui.js

@@ -20,6 +20,7 @@ import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
+import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 
@@ -52,6 +53,11 @@ function ContextScreens(_ref2) {
   }, createElement(ScreenTypographyElement, {
     name: name,
     element: "link"
+  })), createElement(GlobalStylesNavigationScreen, {
+    path: parentMenu + '/typography/button'
+  }, createElement(ScreenTypographyElement, {
+    name: name,
+    element: "button"
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors'
   }, createElement(ScreenColors, {
@@ -72,6 +78,10 @@ function ContextScreens(_ref2) {
     path: parentMenu + '/colors/link'
   }, createElement(ScreenLinkColor, {
     name: name
+  })), createElement(GlobalStylesNavigationScreen, {
+    path: parentMenu + '/colors/button'
+  }, createElement(ScreenButtonColor, {
+    name: name
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/layout'
   }, createElement(ScreenLayout, {

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","getBlockTypes","ScreenRoot","ScreenBlockList","ScreenBlock","ScreenTypography","ScreenTypographyElement","ScreenColors","ScreenColorPalette","ScreenBackgroundColor","ScreenTextColor","ScreenLinkColor","ScreenLayout","ScreenStyleVariations","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":["__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","getBlockTypes","ScreenRoot","ScreenBlockList","ScreenBlock","ScreenTypography","ScreenTypographyElement","ScreenColors","ScreenColorPalette","ScreenBackgroundColor","ScreenTextColor","ScreenLinkColor","ScreenButtonColor","ScreenLayout","ScreenStyleVariations","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 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-module/components/global-styles/use-global-styles-output.js

@@ -3,7 +3,7 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { first, forEach, get, isEmpty, isString, kebabCase, pickBy, reduce, set, startsWith } from 'lodash';
+import { first, forEach, get, isEmpty, kebabCase, pickBy, reduce, set, startsWith } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -11,7 +11,7 @@ import { first, forEach, get, isEmpty, isString, kebabCase, pickBy, reduce, set,
 import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY, __EXPERIMENTAL_ELEMENTS as ELEMENTS, getBlockTypes } from '@wordpress/blocks';
 import { useEffect, useState, useContext } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
-import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress/block-editor';
+import { __unstablePresetDuotoneFilter as PresetDuotoneFilter, __experimentalGetGapCSSValue as getGapCSSValue } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
@@ -167,7 +167,7 @@ function getStylesDeclarations() {
 
     const styleValue = get(blockStyles, pathToValue);
 
-    if (!!properties && !isString(styleValue)) {
+    if (!!properties && typeof styleValue !== 'string') {
       Object.entries(properties).forEach(entry => {
         const [name, prop] = entry;
 
@@ -196,7 +196,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.
+ */
+
+
+export 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 ? getGapCSSValue(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 === 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 === 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 === ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
+      ruleset += `${selector} { --wp--style--block-gap: ${gapValue}; }`;
+    }
+  } // Output base styles
+
+
+  if (selector === 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;
+}
 export const getNodesWithStyles = (tree, blockSelectors) => {
   var _tree$styles, _tree$styles2;
 
@@ -234,9 +344,11 @@ export 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
       });
     }
 
@@ -244,7 +356,10 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
       if (!!value && !!(blockSelectors !== null && blockSelectors !== void 0 && blockSelectors[blockName]) && !!(ELEMENTS !== null && ELEMENTS !== void 0 && ELEMENTS[elementName])) {
         nodes.push({
           styles: value,
-          selector: blockSelectors[blockName].selector.split(',').map(sel => sel + ' ' + ELEMENTS[elementName]).join(',')
+          selector: blockSelectors[blockName].selector.split(',').map(sel => {
+            const elementSelectors = ELEMENTS[elementName].split(',');
+            return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);
+          }).join(',')
         });
       }
     });
@@ -252,7 +367,7 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
   return nodes;
 };
 export const getNodesWithSettings = (tree, blockSelectors) => {
-  var _tree$settings, _tree$settings2;
+  var _tree$settings3, _tree$settings4;
 
   const nodes = [];
 
@@ -262,10 +377,10 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 
   const pickPresets = treeToPickFrom => {
     const presets = {};
-    PRESET_METADATA.forEach(_ref6 => {
+    PRESET_METADATA.forEach(_ref11 => {
       let {
         path
-      } = _ref6;
+      } = _ref11;
       const value = get(treeToPickFrom, path, false);
 
       if (value !== false) {
@@ -277,7 +392,7 @@ export 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 (!isEmpty(presets) || !!custom) {
     nodes.push({
@@ -288,7 +403,7 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
   } // Blocks.
 
 
-  forEach((_tree$settings2 = tree.settings) === null || _tree$settings2 === void 0 ? void 0 : _tree$settings2.blocks, (node, blockName) => {
+  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;
 
@@ -305,12 +420,12 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 export 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--', '--');
 
@@ -324,7 +439,7 @@ export const toCustomProperties = (tree, blockSelectors) => {
   });
   return ruleset;
 };
-export const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
+export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport) => {
   const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
   /*
@@ -337,12 +452,14 @@ export 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) {
@@ -359,16 +476,55 @@ export 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 (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 */
 
@@ -377,15 +533,19 @@ export 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 = getGapCSSValue(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 (ROOT_BLOCK_SELECTOR === selector) {
       // Do not add extra specificity for top-level classes.
@@ -402,10 +562,10 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
 };
 export function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(_ref10 => {
+  return nodesWithSettings.flatMap(_ref17 => {
     let {
       presets
-    } = _ref10;
+    } = _ref17;
     return getPresetsSvgFilters(presets);
   });
 }
@@ -413,15 +573,19 @@ export 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;
@@ -436,6 +600,8 @@ export function useGlobalStylesOutput() {
   } = useContext(GlobalStylesContext);
   const [blockGap] = 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.
+
   useEffect(() => {
     if (!(mergedConfig !== null && mergedConfig !== void 0 && mergedConfig.styles) || !(mergedConfig !== null && mergedConfig !== void 0 && mergedConfig.settings)) {
       return;
@@ -443,7 +609,7 @@ export function useGlobalStylesOutput() {
 
     const blockSelectors = getBlockSelectors(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,
@@ -454,7 +620,7 @@ export function useGlobalStylesOutput() {
     }]);
     setSettings(mergedConfig.settings);
     setSvgFilters(filters);
-  }, [mergedConfig]);
+  }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig]);
   return [stylesheets, settings, svgFilters, hasBlockGapSupport];
 }
 //# sourceMappingURL=use-global-styles-output.js.map