@wordpress/block-editor 13.1.0 → 13.3.0

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

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.findNearestFontWeight = findNearestFontWeight;
 exports.getFluidTypographyOptionsFromSettings = getFluidTypographyOptionsFromSettings;
+exports.getMergedFontFamiliesAndFontFamilyFaces = getMergedFontFamiliesAndFontFamilyFaces;
 exports.getTypographyFontSizeValue = getTypographyFontSizeValue;
 var _fluidUtils = require("../font-sizes/fluid-utils");
 /**
@@ -106,4 +108,52 @@ function getFluidTypographyOptionsFromSettings(settings) {
     fluid: typographySettings?.fluid
   };
 }
+
+/**
+ * Returns an object of merged font families and the font faces from the selected font family
+ * based on the theme.json settings object and the currently selected font family.
+ *
+ * @param {Object} settings           Theme.json settings
+ * @param {string} selectedFontFamily Decoded font family string
+ * @return {Object} Merged font families and font faces from the selected font family
+ */
+function getMergedFontFamiliesAndFontFamilyFaces(settings, selectedFontFamily) {
+  var _fontFamilies$find$fo;
+  const fontFamiliesFromSettings = settings?.typography?.fontFamilies;
+  const fontFamilies = ['default', 'theme', 'custom'].flatMap(key => {
+    var _fontFamiliesFromSett;
+    return (_fontFamiliesFromSett = fontFamiliesFromSettings?.[key]) !== null && _fontFamiliesFromSett !== void 0 ? _fontFamiliesFromSett : [];
+  });
+  const fontFamilyFaces = (_fontFamilies$find$fo = fontFamilies.find(family => family.fontFamily === selectedFontFamily)?.fontFace) !== null && _fontFamilies$find$fo !== void 0 ? _fontFamilies$find$fo : [];
+  return {
+    fontFamilies,
+    fontFamilyFaces
+  };
+}
+
+/**
+ * Returns the nearest font weight value from the available font weight list based on the new font weight.
+ * The nearest font weight is the one with the smallest difference from the new font weight.
+ *
+ * @param {Array}  availableFontWeights Array of available font weights
+ * @param {string} newFontWeightValue   New font weight value
+ * @return {string} Nearest font weight
+ */
+
+function findNearestFontWeight(availableFontWeights, newFontWeightValue) {
+  if (!newFontWeightValue || typeof newFontWeightValue !== 'string') {
+    return '';
+  }
+  if (!availableFontWeights || availableFontWeights.length === 0) {
+    return newFontWeightValue;
+  }
+  const nearestFontWeight = availableFontWeights?.reduce((nearest, {
+    value: fw
+  }) => {
+    const currentDiff = Math.abs(parseInt(fw) - parseInt(newFontWeightValue));
+    const nearestDiff = Math.abs(parseInt(nearest) - parseInt(newFontWeightValue));
+    return currentDiff < nearestDiff ? fw : nearest;
+  }, availableFontWeights[0]?.value);
+  return nearestFontWeight;
+}
 //# sourceMappingURL=typography-utils.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_fluidUtils","require","getTypographyFontSizeValue","preset","settings","size","defaultSize","isFluidTypographyEnabled","typography","fluid","fluidTypographySettings","getFluidTypographyOptionsFromSettings","fluidFontSizeValue","getComputedFluidTypographyValue","minimumFontSize","min","maximumFontSize","max","fontSize","minimumFontSizeLimit","minFontSize","maximumViewportWidth","maxViewportWidth","minimumViewportWidth","minViewportWidth","typographySettings","fluidSettings","Object","keys","length","layoutSettings","layout","defaultMaxViewportWidth","getTypographyValueAndUnit","wideSize"],"sources":["@wordpress/block-editor/src/components/global-styles/typography-utils.js"],"sourcesContent":["/**\n * The fluid utilities must match the backend equivalent.\n * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php\n * ---------------------------------------------------------------\n */\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetComputedFluidTypographyValue,\n\tgetTypographyValueAndUnit,\n} from '../font-sizes/fluid-utils';\n\n/**\n * @typedef {Object} FluidPreset\n * @property {string|undefined}  max A maximum font size value.\n * @property {?string|undefined} min A minimum font size value.\n */\n\n/**\n * @typedef {Object} Preset\n * @property {?string|?number}               size  A default font size.\n * @property {string}                        name  A font size name, displayed in the UI.\n * @property {string}                        slug  A font size slug\n * @property {boolean|FluidPreset|undefined} fluid Specifies the minimum and maximum font size value of a fluid font size.\n */\n\n/**\n * @typedef {Object} TypographySettings\n * @property {?string} minViewportWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.\n * @property {?string} maxViewportWidth  Maximum size up to which type will have fluidity. Optional if size is specified.\n * @property {?number} scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.\n * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.\n * @property {?string} minFontSize       The smallest a calculated font size may be. Optional.\n */\n\n/**\n * Returns a font-size value based on a given font-size preset.\n * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.\n *\n * @param {Preset}                     preset\n * @param {Object}                     settings\n * @param {boolean|TypographySettings} settings.typography.fluid  Whether fluid typography is enabled, and, optionally, fluid font size options.\n * @param {Object?}                    settings.typography.layout Layout options.\n *\n * @return {string|*} A font-size value or the value of preset.size.\n */\nexport function getTypographyFontSizeValue( preset, settings ) {\n\tconst { size: defaultSize } = preset;\n\n\tif ( ! isFluidTypographyEnabled( settings?.typography ) ) {\n\t\treturn defaultSize;\n\t}\n\t/*\n\t * Checks whether a font size has explicitly bypassed fluid calculations.\n\t * Also catches falsy values and 0/'0'.\n\t * Fluid calculations cannot be performed on `0`.\n\t */\n\tif ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tlet fluidTypographySettings =\n\t\tgetFluidTypographyOptionsFromSettings( settings );\n\tfluidTypographySettings =\n\t\ttypeof fluidTypographySettings?.fluid === 'object'\n\t\t\t? fluidTypographySettings?.fluid\n\t\t\t: {};\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tminimumFontSize: preset?.fluid?.min,\n\t\tmaximumFontSize: preset?.fluid?.max,\n\t\tfontSize: defaultSize,\n\t\tminimumFontSizeLimit: fluidTypographySettings?.minFontSize,\n\t\tmaximumViewportWidth: fluidTypographySettings?.maxViewportWidth,\n\t\tminimumViewportWidth: fluidTypographySettings?.minViewportWidth,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n\nfunction isFluidTypographyEnabled( typographySettings ) {\n\tconst fluidSettings = typographySettings?.fluid;\n\treturn (\n\t\ttrue === fluidSettings ||\n\t\t( fluidSettings &&\n\t\t\ttypeof fluidSettings === 'object' &&\n\t\t\tObject.keys( fluidSettings ).length > 0 )\n\t);\n}\n\n/**\n * Returns fluid typography settings from theme.json setting object.\n *\n * @param {Object} settings            Theme.json settings\n * @param {Object} settings.typography Theme.json typography settings\n * @param {Object} settings.layout     Theme.json layout settings\n * @return {TypographySettings} Fluid typography settings\n */\nexport function getFluidTypographyOptionsFromSettings( settings ) {\n\tconst typographySettings = settings?.typography;\n\tconst layoutSettings = settings?.layout;\n\tconst defaultMaxViewportWidth = getTypographyValueAndUnit(\n\t\tlayoutSettings?.wideSize\n\t)\n\t\t? layoutSettings?.wideSize\n\t\t: null;\n\treturn isFluidTypographyEnabled( typographySettings ) &&\n\t\tdefaultMaxViewportWidth\n\t\t? {\n\t\t\t\tfluid: {\n\t\t\t\t\tmaxViewportWidth: defaultMaxViewportWidth,\n\t\t\t\t\t...typographySettings.fluid,\n\t\t\t\t},\n\t\t  }\n\t\t: {\n\t\t\t\tfluid: typographySettings?.fluid,\n\t\t  };\n}\n"],"mappings":";;;;;;;AASA,IAAAA,WAAA,GAAAC,OAAA;AATA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,0BAA0BA,CAAEC,MAAM,EAAEC,QAAQ,EAAG;EAC9D,MAAM;IAAEC,IAAI,EAAEC;EAAY,CAAC,GAAGH,MAAM;EAEpC,IAAK,CAAEI,wBAAwB,CAAEH,QAAQ,EAAEI,UAAW,CAAC,EAAG;IACzD,OAAOF,WAAW;EACnB;EACA;AACD;AACA;AACA;AACA;EACC,IAAK,CAAEA,WAAW,IAAI,GAAG,KAAKA,WAAW,IAAI,KAAK,KAAKH,MAAM,EAAEM,KAAK,EAAG;IACtE,OAAOH,WAAW;EACnB;EAEA,IAAII,uBAAuB,GAC1BC,qCAAqC,CAAEP,QAAS,CAAC;EAClDM,uBAAuB,GACtB,OAAOA,uBAAuB,EAAED,KAAK,KAAK,QAAQ,GAC/CC,uBAAuB,EAAED,KAAK,GAC9B,CAAC,CAAC;EAEN,MAAMG,kBAAkB,GAAG,IAAAC,2CAA+B,EAAE;IAC3DC,eAAe,EAAEX,MAAM,EAAEM,KAAK,EAAEM,GAAG;IACnCC,eAAe,EAAEb,MAAM,EAAEM,KAAK,EAAEQ,GAAG;IACnCC,QAAQ,EAAEZ,WAAW;IACrBa,oBAAoB,EAAET,uBAAuB,EAAEU,WAAW;IAC1DC,oBAAoB,EAAEX,uBAAuB,EAAEY,gBAAgB;IAC/DC,oBAAoB,EAAEb,uBAAuB,EAAEc;EAChD,CAAE,CAAC;EAEH,IAAK,CAAC,CAAEZ,kBAAkB,EAAG;IAC5B,OAAOA,kBAAkB;EAC1B;EAEA,OAAON,WAAW;AACnB;AAEA,SAASC,wBAAwBA,CAAEkB,kBAAkB,EAAG;EACvD,MAAMC,aAAa,GAAGD,kBAAkB,EAAEhB,KAAK;EAC/C,OACC,IAAI,KAAKiB,aAAa,IACpBA,aAAa,IACd,OAAOA,aAAa,KAAK,QAAQ,IACjCC,MAAM,CAACC,IAAI,CAAEF,aAAc,CAAC,CAACG,MAAM,GAAG,CAAG;AAE5C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASlB,qCAAqCA,CAAEP,QAAQ,EAAG;EACjE,MAAMqB,kBAAkB,GAAGrB,QAAQ,EAAEI,UAAU;EAC/C,MAAMsB,cAAc,GAAG1B,QAAQ,EAAE2B,MAAM;EACvC,MAAMC,uBAAuB,GAAG,IAAAC,qCAAyB,EACxDH,cAAc,EAAEI,QACjB,CAAC,GACEJ,cAAc,EAAEI,QAAQ,GACxB,IAAI;EACP,OAAO3B,wBAAwB,CAAEkB,kBAAmB,CAAC,IACpDO,uBAAuB,GACrB;IACAvB,KAAK,EAAE;MACNa,gBAAgB,EAAEU,uBAAuB;MACzC,GAAGP,kBAAkB,CAAChB;IACvB;EACA,CAAC,GACD;IACAA,KAAK,EAAEgB,kBAAkB,EAAEhB;EAC3B,CAAC;AACL","ignoreList":[]}
+{"version":3,"names":["_fluidUtils","require","getTypographyFontSizeValue","preset","settings","size","defaultSize","isFluidTypographyEnabled","typography","fluid","fluidTypographySettings","getFluidTypographyOptionsFromSettings","fluidFontSizeValue","getComputedFluidTypographyValue","minimumFontSize","min","maximumFontSize","max","fontSize","minimumFontSizeLimit","minFontSize","maximumViewportWidth","maxViewportWidth","minimumViewportWidth","minViewportWidth","typographySettings","fluidSettings","Object","keys","length","layoutSettings","layout","defaultMaxViewportWidth","getTypographyValueAndUnit","wideSize","getMergedFontFamiliesAndFontFamilyFaces","selectedFontFamily","_fontFamilies$find$fo","fontFamiliesFromSettings","fontFamilies","flatMap","key","_fontFamiliesFromSett","fontFamilyFaces","find","family","fontFamily","fontFace","findNearestFontWeight","availableFontWeights","newFontWeightValue","nearestFontWeight","reduce","nearest","value","fw","currentDiff","Math","abs","parseInt","nearestDiff"],"sources":["@wordpress/block-editor/src/components/global-styles/typography-utils.js"],"sourcesContent":["/**\n * The fluid utilities must match the backend equivalent.\n * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php\n * ---------------------------------------------------------------\n */\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetComputedFluidTypographyValue,\n\tgetTypographyValueAndUnit,\n} from '../font-sizes/fluid-utils';\n\n/**\n * @typedef {Object} FluidPreset\n * @property {string|undefined}  max A maximum font size value.\n * @property {?string|undefined} min A minimum font size value.\n */\n\n/**\n * @typedef {Object} Preset\n * @property {?string|?number}               size  A default font size.\n * @property {string}                        name  A font size name, displayed in the UI.\n * @property {string}                        slug  A font size slug\n * @property {boolean|FluidPreset|undefined} fluid Specifies the minimum and maximum font size value of a fluid font size.\n */\n\n/**\n * @typedef {Object} TypographySettings\n * @property {?string} minViewportWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.\n * @property {?string} maxViewportWidth  Maximum size up to which type will have fluidity. Optional if size is specified.\n * @property {?number} scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.\n * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.\n * @property {?string} minFontSize       The smallest a calculated font size may be. Optional.\n */\n\n/**\n * Returns a font-size value based on a given font-size preset.\n * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.\n *\n * @param {Preset}                     preset\n * @param {Object}                     settings\n * @param {boolean|TypographySettings} settings.typography.fluid  Whether fluid typography is enabled, and, optionally, fluid font size options.\n * @param {Object?}                    settings.typography.layout Layout options.\n *\n * @return {string|*} A font-size value or the value of preset.size.\n */\nexport function getTypographyFontSizeValue( preset, settings ) {\n\tconst { size: defaultSize } = preset;\n\n\tif ( ! isFluidTypographyEnabled( settings?.typography ) ) {\n\t\treturn defaultSize;\n\t}\n\t/*\n\t * Checks whether a font size has explicitly bypassed fluid calculations.\n\t * Also catches falsy values and 0/'0'.\n\t * Fluid calculations cannot be performed on `0`.\n\t */\n\tif ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tlet fluidTypographySettings =\n\t\tgetFluidTypographyOptionsFromSettings( settings );\n\tfluidTypographySettings =\n\t\ttypeof fluidTypographySettings?.fluid === 'object'\n\t\t\t? fluidTypographySettings?.fluid\n\t\t\t: {};\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tminimumFontSize: preset?.fluid?.min,\n\t\tmaximumFontSize: preset?.fluid?.max,\n\t\tfontSize: defaultSize,\n\t\tminimumFontSizeLimit: fluidTypographySettings?.minFontSize,\n\t\tmaximumViewportWidth: fluidTypographySettings?.maxViewportWidth,\n\t\tminimumViewportWidth: fluidTypographySettings?.minViewportWidth,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n\nfunction isFluidTypographyEnabled( typographySettings ) {\n\tconst fluidSettings = typographySettings?.fluid;\n\treturn (\n\t\ttrue === fluidSettings ||\n\t\t( fluidSettings &&\n\t\t\ttypeof fluidSettings === 'object' &&\n\t\t\tObject.keys( fluidSettings ).length > 0 )\n\t);\n}\n\n/**\n * Returns fluid typography settings from theme.json setting object.\n *\n * @param {Object} settings            Theme.json settings\n * @param {Object} settings.typography Theme.json typography settings\n * @param {Object} settings.layout     Theme.json layout settings\n * @return {TypographySettings} Fluid typography settings\n */\nexport function getFluidTypographyOptionsFromSettings( settings ) {\n\tconst typographySettings = settings?.typography;\n\tconst layoutSettings = settings?.layout;\n\tconst defaultMaxViewportWidth = getTypographyValueAndUnit(\n\t\tlayoutSettings?.wideSize\n\t)\n\t\t? layoutSettings?.wideSize\n\t\t: null;\n\treturn isFluidTypographyEnabled( typographySettings ) &&\n\t\tdefaultMaxViewportWidth\n\t\t? {\n\t\t\t\tfluid: {\n\t\t\t\t\tmaxViewportWidth: defaultMaxViewportWidth,\n\t\t\t\t\t...typographySettings.fluid,\n\t\t\t\t},\n\t\t  }\n\t\t: {\n\t\t\t\tfluid: typographySettings?.fluid,\n\t\t  };\n}\n\n/**\n * Returns an object of merged font families and the font faces from the selected font family\n * based on the theme.json settings object and the currently selected font family.\n *\n * @param {Object} settings           Theme.json settings\n * @param {string} selectedFontFamily Decoded font family string\n * @return {Object} Merged font families and font faces from the selected font family\n */\nexport function getMergedFontFamiliesAndFontFamilyFaces(\n\tsettings,\n\tselectedFontFamily\n) {\n\tconst fontFamiliesFromSettings = settings?.typography?.fontFamilies;\n\n\tconst fontFamilies = [ 'default', 'theme', 'custom' ].flatMap(\n\t\t( key ) => fontFamiliesFromSettings?.[ key ] ?? []\n\t);\n\n\tconst fontFamilyFaces =\n\t\tfontFamilies.find(\n\t\t\t( family ) => family.fontFamily === selectedFontFamily\n\t\t)?.fontFace ?? [];\n\n\treturn { fontFamilies, fontFamilyFaces };\n}\n\n/**\n * Returns the nearest font weight value from the available font weight list based on the new font weight.\n * The nearest font weight is the one with the smallest difference from the new font weight.\n *\n * @param {Array}  availableFontWeights Array of available font weights\n * @param {string} newFontWeightValue   New font weight value\n * @return {string} Nearest font weight\n */\n\nexport function findNearestFontWeight(\n\tavailableFontWeights,\n\tnewFontWeightValue\n) {\n\tif ( ! newFontWeightValue || typeof newFontWeightValue !== 'string' ) {\n\t\treturn '';\n\t}\n\n\tif ( ! availableFontWeights || availableFontWeights.length === 0 ) {\n\t\treturn newFontWeightValue;\n\t}\n\n\tconst nearestFontWeight = availableFontWeights?.reduce(\n\t\t( nearest, { value: fw } ) => {\n\t\t\tconst currentDiff = Math.abs(\n\t\t\t\tparseInt( fw ) - parseInt( newFontWeightValue )\n\t\t\t);\n\t\t\tconst nearestDiff = Math.abs(\n\t\t\t\tparseInt( nearest ) - parseInt( newFontWeightValue )\n\t\t\t);\n\t\t\treturn currentDiff < nearestDiff ? fw : nearest;\n\t\t},\n\t\tavailableFontWeights[ 0 ]?.value\n\t);\n\n\treturn nearestFontWeight;\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -24,6 +24,7 @@ var _context = require("./context");
 var _hooks = require("./hooks");
 var _utils2 = require("../duotone/utils");
 var _gap = require("../../hooks/gap");
+var _background = require("../../hooks/background");
 var _store = require("../../store");
 var _definitions = require("../../layouts/definitions");
 var _object = require("../../utils/object");
@@ -292,6 +293,20 @@ function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAl
     return declarations;
   }, []);
 
+  /*
+   * Set background defaults.
+   * Applies to all background styles except the top-level site background.
+   */
+  if (!isRoot && !!blockStyles.background) {
+    blockStyles = {
+      ...blockStyles,
+      background: {
+        ...blockStyles.background,
+        ...(0, _background.setBackgroundStyleDefaults)(blockStyles.background)
+      }
+    };
+  }
+
   // The goal is to move everything to server side generated engine styles
   // This is temporary as we absorb more and more styles into the engine.
   const extraRules = (0, _styleEngine.getCSSRules)(blockStyles);
@@ -482,7 +497,7 @@ const getNodesWithStyles = (tree, blockSelectors) => {
         if (variation?.css) {
           variations[variationName].css = variation.css;
         }
-        const variationSelector = blockSelectors[blockName].styleVariationSelectors?.[variationName];
+        const variationSelector = blockSelectors[blockName]?.styleVariationSelectors?.[variationName];
 
         // Process the variation's inner element styles.
         // This comes before the inner block styles so the
@@ -500,9 +515,9 @@ const getNodesWithStyles = (tree, blockSelectors) => {
         // Process the variations inner block type styles.
         Object.entries((_variation$blocks = variation?.blocks) !== null && _variation$blocks !== void 0 ? _variation$blocks : {}).forEach(([variationBlockName, variationBlockStyles]) => {
           var _variationBlockStyles;
-          const variationBlockSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName].selector);
-          const variationDuotoneSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName].duotoneSelector);
-          const variationFeatureSelectors = (0, _utils.scopeFeatureSelectors)(variationSelector, blockSelectors[variationBlockName].featureSelectors);
+          const variationBlockSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName]?.selector);
+          const variationDuotoneSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName]?.duotoneSelector);
+          const variationFeatureSelectors = (0, _utils.scopeFeatureSelectors)(variationSelector, blockSelectors[variationBlockName]?.featureSelectors);
           const variationBlockStyleNodes = pickStyleKeys(variationBlockStyles);
           if (variationBlockStyles?.css) {
             variationBlockStyleNodes.css = variationBlockStyles.css;
@@ -511,8 +526,8 @@ const getNodesWithStyles = (tree, blockSelectors) => {
             selector: variationBlockSelector,
             duotoneSelector: variationDuotoneSelector,
             featureSelectors: variationFeatureSelectors,
-            fallbackGapValue: blockSelectors[variationBlockName].fallbackGapValue,
-            hasLayoutSupport: blockSelectors[variationBlockName].hasLayoutSupport,
+            fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue,
+            hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
             styles: variationBlockStyleNodes
           });
 
@@ -630,6 +645,7 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
     marginReset: true,
     presets: true,
     rootPadding: true,
+    variationStyles: false,
     ...styleOptions
   };
   const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
@@ -667,8 +683,8 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
       ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;
 				`;
     }
     ruleset += '}';
@@ -727,7 +743,7 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
       if (styles?.css) {
         ruleset += processCSSNesting(styles.css, `:root :where(${selector})`);
       }
-      if (styleVariationSelectors) {
+      if (options.variationStyles && styleVariationSelectors) {
         Object.entries(styleVariationSelectors).forEach(([styleVariationName, styleVariationSelector]) => {
           const styleVariations = styles?.variations?.[styleVariationName];
           if (styleVariations) {