@wordpress/edit-site 4.10.0 → 4.12.1-next.d6164808d3.0

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

@@ -0,0 +1,204 @@
+/**
+ * The fluid utilities must match the backend equivalent.
+ * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
+ * ---------------------------------------------------------------
+ */
+
+/**
+ * Returns a font-size value based on a given font-size preset.
+ * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
+ *
+ * @param {Object}           preset
+ * @param {string}           preset.size              A default font size.
+ * @param {string}           preset.name              A font size name, displayed in the UI.
+ * @param {string}           preset.slug              A font size slug.
+ * @param {Object}           preset.fluid
+ * @param {string|undefined} preset.fluid.max         A maximum font size value.
+ * @param {string|undefined} preset.fluid.min         A minimum font size value.
+ * @param {Object}           typographySettings
+ * @param {boolean}          typographySettings.fluid Whether fluid typography is enabled.
+ *
+ * @return {string} An font-size value
+ */
+export function getTypographyFontSizeValue(preset, typographySettings) {
+  const {
+    size: defaultSize
+  } = preset;
+
+  if (true !== (typographySettings === null || typographySettings === void 0 ? void 0 : typographySettings.fluid)) {
+    return defaultSize;
+  } // Defaults.
+
+
+  const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
+  const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
+  const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
+  const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
+  const DEFAULT_SCALE_FACTOR = 1; // Font sizes.
+  // A font size has explicitly bypassed fluid calculations.
+
+  if (false === (preset === null || preset === void 0 ? void 0 : preset.fluid)) {
+    return defaultSize;
+  }
+
+  const fluidFontSizeSettings = (preset === null || preset === void 0 ? void 0 : preset.fluid) || {}; // Try to grab explicit min and max fluid font sizes.
+
+  let minimumFontSizeRaw = fluidFontSizeSettings === null || fluidFontSizeSettings === void 0 ? void 0 : fluidFontSizeSettings.min;
+  let maximumFontSizeRaw = fluidFontSizeSettings === null || fluidFontSizeSettings === void 0 ? void 0 : fluidFontSizeSettings.max;
+  const preferredSize = getTypographyValueAndUnit(defaultSize); // Protect against unsupported units.
+
+  if (!(preferredSize !== null && preferredSize !== void 0 && preferredSize.unit)) {
+    return defaultSize;
+  } // If no fluid min or max font sizes are available, create some using min/max font size factors.
+
+
+  if (!minimumFontSizeRaw) {
+    minimumFontSizeRaw = preferredSize.value * DEFAULT_MINIMUM_FONT_SIZE_FACTOR + preferredSize.unit;
+  }
+
+  if (!maximumFontSizeRaw) {
+    maximumFontSizeRaw = preferredSize.value * DEFAULT_MAXIMUM_FONT_SIZE_FACTOR + preferredSize.unit;
+  }
+
+  const fluidFontSizeValue = getComputedFluidTypographyValue({
+    maximumViewPortWidth: DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+    minimumViewPortWidth: DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+    maximumFontSize: maximumFontSizeRaw,
+    minimumFontSize: minimumFontSizeRaw,
+    scaleFactor: DEFAULT_SCALE_FACTOR
+  });
+
+  if (!!fluidFontSizeValue) {
+    return fluidFontSizeValue;
+  }
+
+  return defaultSize;
+}
+/**
+ * Internal implementation of clamp() based on available min/max viewport width, and min/max font sizes.
+ *
+ * @param {Object} args
+ * @param {string} args.maximumViewPortWidth Maximum size up to which type will have fluidity.
+ * @param {string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity.
+ * @param {string} args.maximumFontSize      Maximum font size for any clamp() calculation.
+ * @param {string} args.minimumFontSize      Minimum font size for any clamp() calculation.
+ * @param {number} args.scaleFactor          A scale factor to determine how fast a font scales within boundaries.
+ *
+ * @return {string|null} A font-size value using clamp().
+ */
+
+export function getComputedFluidTypographyValue(_ref) {
+  let {
+    maximumViewPortWidth,
+    minimumViewPortWidth,
+    maximumFontSize,
+    minimumFontSize,
+    scaleFactor
+  } = _ref;
+  // Grab the minimum font size and normalize it in order to use the value for calculations.
+  const minimumFontSizeParsed = getTypographyValueAndUnit(minimumFontSize); // We get a 'preferred' unit to keep units consistent when calculating,
+  // otherwise the result will not be accurate.
+
+  const fontSizeUnit = (minimumFontSizeParsed === null || minimumFontSizeParsed === void 0 ? void 0 : minimumFontSizeParsed.unit) || 'rem'; // Grab the maximum font size and normalize it in order to use the value for calculations.
+
+  const maximumFontSizeParsed = getTypographyValueAndUnit(maximumFontSize, {
+    coerceTo: fontSizeUnit
+  }); // Protect against unsupported units.
+
+  if (!minimumFontSizeParsed || !maximumFontSizeParsed) {
+    return null;
+  } // Use rem for accessible fluid target font scaling.
+
+
+  const minimumFontSizeRem = getTypographyValueAndUnit(minimumFontSize, {
+    coerceTo: 'rem'
+  }); // Viewport widths defined for fluid typography. Normalize units
+
+  const maximumViewPortWidthParsed = getTypographyValueAndUnit(maximumViewPortWidth, {
+    coerceTo: fontSizeUnit
+  });
+  const minumumViewPortWidthParsed = getTypographyValueAndUnit(minimumViewPortWidth, {
+    coerceTo: fontSizeUnit
+  }); // Protect against unsupported units.
+
+  if (!maximumViewPortWidthParsed || !minumumViewPortWidthParsed || !minimumFontSizeRem) {
+    return null;
+  } // Build CSS rule.
+  // Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
+
+
+  const minViewPortWidthOffsetValue = roundToPrecision(minumumViewPortWidthParsed.value / 100, 3);
+  const viewPortWidthOffset = minViewPortWidthOffsetValue + fontSizeUnit;
+  let linearFactor = 100 * ((maximumFontSizeParsed.value - minimumFontSizeParsed.value) / (maximumViewPortWidthParsed.value - minumumViewPortWidthParsed.value));
+  linearFactor = roundToPrecision(linearFactor, 3) || 1;
+  const linearFactorScaled = linearFactor * scaleFactor;
+  const fluidTargetFontSize = `${minimumFontSizeRem.value}${minimumFontSizeRem.unit} + ((1vw - ${viewPortWidthOffset}) * ${linearFactorScaled})`;
+  return `clamp(${minimumFontSize}, ${fluidTargetFontSize}, ${maximumFontSize})`;
+}
+/**
+ *
+ * @param {string}           rawValue Raw size value from theme.json.
+ * @param {Object|undefined} options  Calculation options.
+ *
+ * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.
+ */
+
+export function getTypographyValueAndUnit(rawValue) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (!rawValue) {
+    return null;
+  }
+
+  const {
+    coerceTo,
+    rootSizeValue,
+    acceptableUnits
+  } = {
+    coerceTo: '',
+    // Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+    rootSizeValue: 16,
+    acceptableUnits: ['rem', 'px', 'em'],
+    ...options
+  };
+  const acceptableUnitsGroup = acceptableUnits === null || acceptableUnits === void 0 ? void 0 : acceptableUnits.join('|');
+  const regexUnits = new RegExp(`^(\\d*\\.?\\d+)(${acceptableUnitsGroup}){1,1}$`);
+  const matches = rawValue.match(regexUnits); // We need a number value and a unit.
+
+  if (!matches || matches.length < 3) {
+    return null;
+  }
+
+  let [, value, unit] = matches;
+  let returnValue = parseFloat(value);
+
+  if ('px' === coerceTo && ('em' === unit || 'rem' === unit)) {
+    returnValue = returnValue * rootSizeValue;
+    unit = coerceTo;
+  }
+
+  if ('px' === unit && ('em' === coerceTo || 'rem' === coerceTo)) {
+    returnValue = returnValue / rootSizeValue;
+    unit = coerceTo;
+  }
+
+  return {
+    value: returnValue,
+    unit
+  };
+}
+/**
+ * Returns a value rounded to defined precision.
+ * Returns `undefined` if the value is not a valid finite number.
+ *
+ * @param {number} value  Raw value.
+ * @param {number} digits The number of digits to appear after the decimal point
+ *
+ * @return {number|undefined} Value rounded to standard precision.
+ */
+
+export function roundToPrecision(value) {
+  let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  return Number.isFinite(value) ? parseFloat(value.toFixed(digits)) : undefined;
+}
+//# sourceMappingURL=typography-utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-utils.js"],"names":["getTypographyFontSizeValue","preset","typographySettings","size","defaultSize","fluid","DEFAULT_MAXIMUM_VIEWPORT_WIDTH","DEFAULT_MINIMUM_VIEWPORT_WIDTH","DEFAULT_MINIMUM_FONT_SIZE_FACTOR","DEFAULT_MAXIMUM_FONT_SIZE_FACTOR","DEFAULT_SCALE_FACTOR","fluidFontSizeSettings","minimumFontSizeRaw","min","maximumFontSizeRaw","max","preferredSize","getTypographyValueAndUnit","unit","value","fluidFontSizeValue","getComputedFluidTypographyValue","maximumViewPortWidth","minimumViewPortWidth","maximumFontSize","minimumFontSize","scaleFactor","minimumFontSizeParsed","fontSizeUnit","maximumFontSizeParsed","coerceTo","minimumFontSizeRem","maximumViewPortWidthParsed","minumumViewPortWidthParsed","minViewPortWidthOffsetValue","roundToPrecision","viewPortWidthOffset","linearFactor","linearFactorScaled","fluidTargetFontSize","rawValue","options","rootSizeValue","acceptableUnits","acceptableUnitsGroup","join","regexUnits","RegExp","matches","match","length","returnValue","parseFloat","digits","Number","isFinite","toFixed","undefined"],"mappings":"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","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 * 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 {Object}           preset\n * @param {string}           preset.size              A default font size.\n * @param {string}           preset.name              A font size name, displayed in the UI.\n * @param {string}           preset.slug              A font size slug.\n * @param {Object}           preset.fluid\n * @param {string|undefined} preset.fluid.max         A maximum font size value.\n * @param {string|undefined} preset.fluid.min         A minimum font size value.\n * @param {Object}           typographySettings\n * @param {boolean}          typographySettings.fluid Whether fluid typography is enabled.\n *\n * @return {string} An font-size value\n */\nexport function getTypographyFontSizeValue( preset, typographySettings ) {\n\tconst { size: defaultSize } = preset;\n\n\tif ( true !== typographySettings?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\t// Defaults.\n\tconst DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';\n\tconst DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';\n\tconst DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;\n\tconst DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;\n\tconst DEFAULT_SCALE_FACTOR = 1;\n\n\t// Font sizes.\n\t// A font size has explicitly bypassed fluid calculations.\n\tif ( false === preset?.fluid ) {\n\t\treturn defaultSize;\n\t}\n\n\tconst fluidFontSizeSettings = preset?.fluid || {};\n\n\t// Try to grab explicit min and max fluid font sizes.\n\tlet minimumFontSizeRaw = fluidFontSizeSettings?.min;\n\tlet maximumFontSizeRaw = fluidFontSizeSettings?.max;\n\tconst preferredSize = getTypographyValueAndUnit( defaultSize );\n\n\t// Protect against unsupported units.\n\tif ( ! preferredSize?.unit ) {\n\t\treturn defaultSize;\n\t}\n\n\t// If no fluid min or max font sizes are available, create some using min/max font size factors.\n\tif ( ! minimumFontSizeRaw ) {\n\t\tminimumFontSizeRaw =\n\t\t\tpreferredSize.value * DEFAULT_MINIMUM_FONT_SIZE_FACTOR +\n\t\t\tpreferredSize.unit;\n\t}\n\n\tif ( ! maximumFontSizeRaw ) {\n\t\tmaximumFontSizeRaw =\n\t\t\tpreferredSize.value * DEFAULT_MAXIMUM_FONT_SIZE_FACTOR +\n\t\t\tpreferredSize.unit;\n\t}\n\n\tconst fluidFontSizeValue = getComputedFluidTypographyValue( {\n\t\tmaximumViewPortWidth: DEFAULT_MAXIMUM_VIEWPORT_WIDTH,\n\t\tminimumViewPortWidth: DEFAULT_MINIMUM_VIEWPORT_WIDTH,\n\t\tmaximumFontSize: maximumFontSizeRaw,\n\t\tminimumFontSize: minimumFontSizeRaw,\n\t\tscaleFactor: DEFAULT_SCALE_FACTOR,\n\t} );\n\n\tif ( !! fluidFontSizeValue ) {\n\t\treturn fluidFontSizeValue;\n\t}\n\n\treturn defaultSize;\n}\n\n/**\n * Internal implementation of clamp() based on available min/max viewport width, and min/max font sizes.\n *\n * @param {Object} args\n * @param {string} args.maximumViewPortWidth Maximum size up to which type will have fluidity.\n * @param {string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity.\n * @param {string} args.maximumFontSize      Maximum font size for any clamp() calculation.\n * @param {string} args.minimumFontSize      Minimum font size for any clamp() calculation.\n * @param {number} args.scaleFactor          A scale factor to determine how fast a font scales within boundaries.\n *\n * @return {string|null} A font-size value using clamp().\n */\nexport function getComputedFluidTypographyValue( {\n\tmaximumViewPortWidth,\n\tminimumViewPortWidth,\n\tmaximumFontSize,\n\tminimumFontSize,\n\tscaleFactor,\n} ) {\n\t// Grab the minimum font size and normalize it in order to use the value for calculations.\n\tconst minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );\n\n\t// We get a 'preferred' unit to keep units consistent when calculating,\n\t// otherwise the result will not be accurate.\n\tconst fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';\n\n\t// Grab the maximum font size and normalize it in order to use the value for calculations.\n\tconst maximumFontSizeParsed = getTypographyValueAndUnit( maximumFontSize, {\n\t\tcoerceTo: fontSizeUnit,\n\t} );\n\n\t// Protect against unsupported units.\n\tif ( ! minimumFontSizeParsed || ! maximumFontSizeParsed ) {\n\t\treturn null;\n\t}\n\n\t// Use rem for accessible fluid target font scaling.\n\tconst minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {\n\t\tcoerceTo: 'rem',\n\t} );\n\n\t// Viewport widths defined for fluid typography. Normalize units\n\tconst maximumViewPortWidthParsed = getTypographyValueAndUnit(\n\t\tmaximumViewPortWidth,\n\t\t{ coerceTo: fontSizeUnit }\n\t);\n\tconst minumumViewPortWidthParsed = getTypographyValueAndUnit(\n\t\tminimumViewPortWidth,\n\t\t{ coerceTo: fontSizeUnit }\n\t);\n\n\t// Protect against unsupported units.\n\tif (\n\t\t! maximumViewPortWidthParsed ||\n\t\t! minumumViewPortWidthParsed ||\n\t\t! minimumFontSizeRem\n\t) {\n\t\treturn null;\n\t}\n\n\t// Build CSS rule.\n\t// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.\n\tconst minViewPortWidthOffsetValue = roundToPrecision(\n\t\tminumumViewPortWidthParsed.value / 100,\n\t\t3\n\t);\n\n\tconst viewPortWidthOffset = minViewPortWidthOffsetValue + fontSizeUnit;\n\tlet linearFactor =\n\t\t100 *\n\t\t( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /\n\t\t\t( maximumViewPortWidthParsed.value -\n\t\t\t\tminumumViewPortWidthParsed.value ) );\n\tlinearFactor = roundToPrecision( linearFactor, 3 ) || 1;\n\tconst linearFactorScaled = linearFactor * scaleFactor;\n\tconst fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;\n\n\treturn `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;\n}\n\n/**\n *\n * @param {string}           rawValue Raw size value from theme.json.\n * @param {Object|undefined} options  Calculation options.\n *\n * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.\n */\nexport function getTypographyValueAndUnit( rawValue, options = {} ) {\n\tif ( ! rawValue ) {\n\t\treturn null;\n\t}\n\n\tconst { coerceTo, rootSizeValue, acceptableUnits } = {\n\t\tcoerceTo: '',\n\t\t// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( \"html\" ) ).fontSize`.\n\t\trootSizeValue: 16,\n\t\tacceptableUnits: [ 'rem', 'px', 'em' ],\n\t\t...options,\n\t};\n\n\tconst acceptableUnitsGroup = acceptableUnits?.join( '|' );\n\tconst regexUnits = new RegExp(\n\t\t`^(\\\\d*\\\\.?\\\\d+)(${ acceptableUnitsGroup }){1,1}$`\n\t);\n\n\tconst matches = rawValue.match( regexUnits );\n\n\t// We need a number value and a unit.\n\tif ( ! matches || matches.length < 3 ) {\n\t\treturn null;\n\t}\n\n\tlet [ , value, unit ] = matches;\n\n\tlet returnValue = parseFloat( value );\n\n\tif ( 'px' === coerceTo && ( 'em' === unit || 'rem' === unit ) ) {\n\t\treturnValue = returnValue * rootSizeValue;\n\t\tunit = coerceTo;\n\t}\n\n\tif ( 'px' === unit && ( 'em' === coerceTo || 'rem' === coerceTo ) ) {\n\t\treturnValue = returnValue / rootSizeValue;\n\t\tunit = coerceTo;\n\t}\n\n\treturn {\n\t\tvalue: returnValue,\n\t\tunit,\n\t};\n}\n\n/**\n * Returns a value rounded to defined precision.\n * Returns `undefined` if the value is not a valid finite number.\n *\n * @param {number} value  Raw value.\n * @param {number} digits The number of digits to appear after the decimal point\n *\n * @return {number|undefined} Value rounded to standard precision.\n */\nexport function roundToPrecision( value, digits = 3 ) {\n\treturn Number.isFinite( value )\n\t\t? parseFloat( value.toFixed( digits ) )\n\t\t: undefined;\n}\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 ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
@@ -53,6 +54,11 @@ function ContextScreens(_ref2) {
   }, createElement(ScreenTypographyElement, {
     name: name,
     element: "link"
+  })), createElement(GlobalStylesNavigationScreen, {
+    path: parentMenu + '/typography/heading'
+  }, createElement(ScreenTypographyElement, {
+    name: name,
+    element: "heading"
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/typography/button'
   }, createElement(ScreenTypographyElement, {
@@ -78,6 +84,10 @@ function ContextScreens(_ref2) {
     path: parentMenu + '/colors/link'
   }, createElement(ScreenLinkColor, {
     name: name
+  })), createElement(GlobalStylesNavigationScreen, {
+    path: parentMenu + '/colors/heading'
+  }, createElement(ScreenHeadingColor, {
+    name: name
   })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/button'
   }, createElement(ScreenButtonColor, {

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","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"]}
+{"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","ScreenHeadingColor","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 ScreenHeadingColor from './screen-heading-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/heading' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"heading\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/typography/button' }\n\t\t\t>\n\t\t\t\t<ScreenTypographyElement name={ name } element=\"button\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>\n\t\t\t\t<ScreenColors name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/background' }\n\t\t\t>\n\t\t\t\t<ScreenBackgroundColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>\n\t\t\t\t<ScreenTextColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>\n\t\t\t\t<ScreenLinkColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/heading' }\n\t\t\t>\n\t\t\t\t<ScreenHeadingColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/button' }\n\t\t\t>\n\t\t\t\t<ScreenButtonColor name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ parentMenu + '/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"]}