@wordpress/edit-site 4.9.0 → 4.10.0

package/build/components/global-styles/screen-link-color.js

@@ -13,6 +13,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _blockEditor = require("@wordpress/block-editor");
 
+var _components = require("@wordpress/components");
+
 var _header = _interopRequireDefault(require("./header"));
 
 var _hooks = require("./hooks");
@@ -34,27 +36,59 @@ function ScreenLinkColor(_ref) {
   const colorsPerOrigin = (0, _hooks.useColorsPerOrigin)(name);
   const [isLinkEnabled] = (0, _hooks.useSetting)('color.link', name);
   const hasLinkColor = supports.includes('linkColor') && isLinkEnabled && (solids.length > 0 || areCustomSolidsEnabled);
-  const [linkColor, setLinkColor] = (0, _hooks.useStyle)('elements.link.color.text', name);
-  const [userLinkColor] = (0, _hooks.useStyle)('elements.link.color.text', name, 'user');
+  const pseudoStates = {
+    default: {
+      label: (0, _i18n.__)('Default'),
+      value: (0, _hooks.useStyle)('elements.link.color.text', name)[0],
+      handler: (0, _hooks.useStyle)('elements.link.color.text', name)[1],
+      userValue: (0, _hooks.useStyle)('elements.link.color.text', name, 'user')[0]
+    },
+    hover: {
+      label: (0, _i18n.__)('Hover'),
+      value: (0, _hooks.useStyle)('elements.link.:hover.color.text', name)[0],
+      handler: (0, _hooks.useStyle)('elements.link.:hover.color.text', name)[1],
+      userValue: (0, _hooks.useStyle)('elements.link.:hover.color.text', name, 'user')[0]
+    }
+  };
 
   if (!hasLinkColor) {
     return null;
   }
 
+  const tabs = Object.entries(pseudoStates).map(_ref2 => {
+    let [selector, config] = _ref2;
+    return {
+      name: selector,
+      title: config.label,
+      className: `color-text-${selector}`
+    };
+  });
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('Links'),
-    description: (0, _i18n.__)('Set the default color used for links across the site.')
-  }), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
-    className: "edit-site-screen-link-color__control",
-    colors: colorsPerOrigin,
-    disableCustomColors: !areCustomSolidsEnabled,
-    __experimentalHasMultipleOrigins: true,
-    showTitle: false,
-    enableAlpha: true,
-    __experimentalIsRenderedInSidebar: true,
-    colorValue: linkColor,
-    onColorChange: setLinkColor,
-    clearable: linkColor === userLinkColor
+    description: (0, _i18n.__)('Set the colors used for links across the site.')
+  }), (0, _element.createElement)(_components.TabPanel, {
+    tabs: tabs
+  }, tab => {
+    var _pseudoStates$tab$nam;
+
+    const pseudoSelectorConfig = (_pseudoStates$tab$nam = pseudoStates[tab.name]) !== null && _pseudoStates$tab$nam !== void 0 ? _pseudoStates$tab$nam : null;
+
+    if (!pseudoSelectorConfig) {
+      return null;
+    }
+
+    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
+      className: "edit-site-screen-link-color__control",
+      colors: colorsPerOrigin,
+      disableCustomColors: !areCustomSolidsEnabled,
+      __experimentalHasMultipleOrigins: true,
+      showTitle: false,
+      enableAlpha: true,
+      __experimentalIsRenderedInSidebar: true,
+      colorValue: pseudoSelectorConfig.value,
+      onColorChange: pseudoSelectorConfig.handler,
+      clearable: pseudoSelectorConfig.value === pseudoSelectorConfig.userValue
+    }));
   }));
 }
 

package/build/components/global-styles/screen-link-color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["ScreenLinkColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","linkColor","setLinkColor","userLinkColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,QAAQ,GAAG,2CAAgCD,IAAhC,CAAjB;AACA,QAAM,CAAEE,MAAF,IAAa,uBAAY,eAAZ,EAA6BF,IAA7B,CAAnB;AACA,QAAM,CAAEG,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BH,IAA5B,CAAnC;AAEA,QAAMI,eAAe,GAAG,+BAAoBJ,IAApB,CAAxB;AAEA,QAAM,CAAEK,aAAF,IAAoB,uBAAY,YAAZ,EAA0BL,IAA1B,CAA1B;AAEA,QAAMM,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,WAAnB,KACAF,aADA,KAEEH,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,SAAF,EAAaC,YAAb,IAA8B,qBACnC,0BADmC,EAEnCV,IAFmC,CAApC;AAIA,QAAM,CAAEW,aAAF,IAAoB,qBACzB,0BADyB,EAEzBX,IAFyB,EAGzB,MAHyB,CAA1B;;AAMA,MAAK,CAAEM,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,uDADa;AAFf,IADD,EAOC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGF,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAED,sBAHzB;AAIC,IAAA,gCAAgC,MAJjC;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,WAAW,MANZ;AAOC,IAAA,iCAAiC,MAPlC;AAQC,IAAA,UAAU,EAAGM,SARd;AASC,IAAA,aAAa,EAAGC,YATjB;AAUC,IAAA,SAAS,EAAGD,SAAS,KAAKE;AAV3B,IAPD,CADD;AAsBA;;eAEcZ,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenLinkColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst [ isLinkEnabled ] = useSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ linkColor, setLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname\n\t);\n\tconst [ userLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-link-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ linkColor }\n\t\t\t\tonColorChange={ setLinkColor }\n\t\t\t\tclearable={ linkColor === userLinkColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["ScreenLinkColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","pseudoStates","default","label","value","handler","userValue","hover","tabs","Object","entries","map","selector","config","title","className","tab","pseudoSelectorConfig"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { TabPanel } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenLinkColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst [ isLinkEnabled ] = useSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst pseudoStates = {\n\t\tdefault: {\n\t\t\tlabel: __( 'Default' ),\n\t\t\tvalue: useStyle( 'elements.link.color.text', name )[ 0 ],\n\t\t\thandler: useStyle( 'elements.link.color.text', name )[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\t'elements.link.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t\thover: {\n\t\t\tlabel: __( 'Hover' ),\n\t\t\tvalue: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],\n\t\t\thandler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\t'elements.link.:hover.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t};\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst tabs = Object.entries( pseudoStates ).map(\n\t\t( [ selector, config ] ) => {\n\t\t\treturn {\n\t\t\t\tname: selector,\n\t\t\t\ttitle: config.label,\n\t\t\t\tclassName: `color-text-${ selector }`,\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the colors used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<TabPanel tabs={ tabs }>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tconst pseudoSelectorConfig =\n\t\t\t\t\t\tpseudoStates[ tab.name ] ?? null;\n\n\t\t\t\t\tif ( ! pseudoSelectorConfig ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\tclassName=\"edit-site-screen-link-color__control\"\n\t\t\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tcolorValue={ pseudoSelectorConfig.value }\n\t\t\t\t\t\t\t\tonColorChange={ pseudoSelectorConfig.handler }\n\t\t\t\t\t\t\t\tclearable={\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.value ===\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.userValue\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\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
       });
     }
 
@@ -273,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 = [];
 
@@ -284,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) {
@@ -300,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({
@@ -311,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;
 
@@ -331,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--', '--');
 
@@ -353,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);
   /*
@@ -366,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) {
@@ -388,7 +504,19 @@ 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);
@@ -398,15 +526,15 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
     } // Check for pseudo selector in `styles` and handle separately.
 
 
-    const psuedoSelectorStyles = Object.entries(styles).filter(_ref9 => {
-      let [key] = _ref9;
+    const pseudoSelectorStyles = Object.entries(styles).filter(_ref14 => {
+      let [key] = _ref14;
       return key.startsWith(':');
     });
 
-    if (psuedoSelectorStyles !== null && psuedoSelectorStyles !== void 0 && psuedoSelectorStyles.length) {
-      psuedoSelectorStyles.forEach(_ref10 => {
-        let [pseudoKey, pseudoRule] = _ref10;
-        const pseudoDeclarations = getStylesDeclarations(pseudoRule);
+    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;
@@ -421,8 +549,8 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
 
         const _selector = selector.split(',').map(sel => sel + pseudoKey).join(',');
 
-        const psuedoRule = `${_selector}{${pseudoDeclarations.join(';')};}`;
-        ruleset = ruleset + psuedoRule;
+        const pseudoRule = `${_selector}{${pseudoDeclarations.join(';')};}`;
+        ruleset = ruleset + pseudoRule;
       });
     }
   });
@@ -433,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(_ref11 => {
+  nodesWithSettings.forEach(_ref16 => {
     let {
       selector,
       presets
-    } = _ref11;
+    } = _ref16;
 
     if (_utils.ROOT_BLOCK_SELECTOR === selector) {
       // Do not add extra specificity for top-level classes.
@@ -461,10 +593,10 @@ exports.toStyles = toStyles;
 
 function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(_ref12 => {
+  return nodesWithSettings.flatMap(_ref17 => {
     let {
       presets
-    } = _ref12;
+    } = _ref17;
     return getPresetsSvgFilters(presets);
   });
 }
@@ -472,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;
@@ -495,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;
@@ -502,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,
@@ -513,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