@wordpress/components/build/mobile/global-styles-context/utils.native.js

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BLOCK_STYLE_ATTRIBUTES = void 0;
exports.getBlockColors = getBlockColors;
exports.getBlockPaddings = getBlockPaddings;
exports.getBlockTypography = getBlockTypography;
exports.getColorsAndGradients = getColorsAndGradients;
exports.getGlobalStyles = getGlobalStyles;
exports.getMappedValues = getMappedValues;
exports.parseStylesVariables = parseStylesVariables;
exports.useMobileGlobalStylesColors = useMobileGlobalStylesColors;

var _changeCase = require("change-case");

var _reactNative = require("react-native");

var _blockEditor = require("@wordpress/block-editor");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
const BLOCK_STYLE_ATTRIBUTES = ['textColor', 'backgroundColor', 'style', 'color', 'fontSize']; // Mapping style properties name to native.

exports.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
  textColor: 'color',
  text: 'color',
  background: 'backgroundColor',
  link: 'linkColor',
  placeholder: 'placeholderColor'
};
const PADDING = 12; // $solid-border-space

const UNKNOWN_VALUE = 'undefined';
const DEFAULT_FONT_SIZE = 16;

function getBlockPaddings(mergedStyle, wrapperPropsStyle, blockStyleAttributes, blockColors) {
  const blockPaddings = {};

  if (!mergedStyle.padding && (wrapperPropsStyle !== null && wrapperPropsStyle !== void 0 && wrapperPropsStyle.backgroundColor || blockStyleAttributes !== null && blockStyleAttributes !== void 0 && blockStyleAttributes.backgroundColor || blockColors !== null && blockColors !== void 0 && blockColors.backgroundColor)) {
    blockPaddings.padding = PADDING;
    return blockPaddings;
  } // Prevent adding extra paddings to inner blocks without background colors.


  if (mergedStyle !== null && mergedStyle !== void 0 && mergedStyle.padding && !(wrapperPropsStyle !== null && wrapperPropsStyle !== void 0 && wrapperPropsStyle.backgroundColor) && !(blockStyleAttributes !== null && blockStyleAttributes !== void 0 && blockStyleAttributes.backgroundColor) && !(blockColors !== null && blockColors !== void 0 && blockColors.backgroundColor)) {
    blockPaddings.padding = undefined;
  }

  return blockPaddings;
}

function getBlockColors(blockStyleAttributes, defaultColors, blockName, baseGlobalStyles) {
  var _blockStyleAttributes, _baseGlobalStyles$blo, _baseGlobalStyles$sty, _baseGlobalStyles$sty2;

  const blockStyles = {};
  const customBlockStyles = (blockStyleAttributes === null || blockStyleAttributes === void 0 ? void 0 : (_blockStyleAttributes = blockStyleAttributes.style) === null || _blockStyleAttributes === void 0 ? void 0 : _blockStyleAttributes.color) || {};
  const blockGlobalStyles = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$blo = baseGlobalStyles.blocks) === null || _baseGlobalStyles$blo === void 0 ? void 0 : _baseGlobalStyles$blo[blockName]; // Global styles colors.

  if (blockGlobalStyles !== null && blockGlobalStyles !== void 0 && blockGlobalStyles.color) {
    Object.entries(blockGlobalStyles.color).forEach(_ref => {
      let [key, value] = _ref;
      const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[key];

      if (styleKey && value !== UNKNOWN_VALUE) {
        var _customBlockStyles$ke;

        const color = (_customBlockStyles$ke = customBlockStyles[key]) !== null && _customBlockStyles$ke !== void 0 ? _customBlockStyles$ke : value;
        blockStyles[styleKey] = color;
      }
    });
  } else if (baseGlobalStyles !== null && baseGlobalStyles !== void 0 && (_baseGlobalStyles$sty = baseGlobalStyles.styles) !== null && _baseGlobalStyles$sty !== void 0 && (_baseGlobalStyles$sty2 = _baseGlobalStyles$sty.color) !== null && _baseGlobalStyles$sty2 !== void 0 && _baseGlobalStyles$sty2.text) {
    var _baseGlobalStyles$sty3, _baseGlobalStyles$sty4;

    blockStyles[BLOCK_STYLE_ATTRIBUTES_MAPPING.text] = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$sty3 = baseGlobalStyles.styles) === null || _baseGlobalStyles$sty3 === void 0 ? void 0 : (_baseGlobalStyles$sty4 = _baseGlobalStyles$sty3.color) === null || _baseGlobalStyles$sty4 === void 0 ? void 0 : _baseGlobalStyles$sty4.text;
  } // Global styles elements.


  if (blockGlobalStyles !== null && blockGlobalStyles !== void 0 && blockGlobalStyles.elements) {
    var _blockGlobalStyles$el, _blockGlobalStyles$el2, _blockGlobalStyles$el3;

    const linkColor = (_blockGlobalStyles$el = blockGlobalStyles.elements) === null || _blockGlobalStyles$el === void 0 ? void 0 : (_blockGlobalStyles$el2 = _blockGlobalStyles$el.link) === null || _blockGlobalStyles$el2 === void 0 ? void 0 : (_blockGlobalStyles$el3 = _blockGlobalStyles$el2.color) === null || _blockGlobalStyles$el3 === void 0 ? void 0 : _blockGlobalStyles$el3.text;
    const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING.link;

    if (styleKey && linkColor && linkColor !== UNKNOWN_VALUE) {
      blockStyles[styleKey] = linkColor;
    }
  } // Custom colors.


  Object.entries(blockStyleAttributes).forEach(_ref2 => {
    var _value$startsWith;

    let [key, value] = _ref2;
    const isCustomColor = value === null || value === void 0 ? void 0 : (_value$startsWith = value.startsWith) === null || _value$startsWith === void 0 ? void 0 : _value$startsWith.call(value, '#');
    let styleKey = key;

    if (BLOCK_STYLE_ATTRIBUTES_MAPPING[styleKey]) {
      styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[styleKey];
    }

    if (!isCustomColor) {
      const mappedColor = Object.values(defaultColors !== null && defaultColors !== void 0 ? defaultColors : {}).find(_ref3 => {
        let {
          slug
        } = _ref3;
        return slug === value;
      });

      if (mappedColor) {
        blockStyles[styleKey] = mappedColor.color;
      }
    } else {
      blockStyles[styleKey] = value;
    }
  }); // Color placeholder.

  if (blockStyles !== null && blockStyles !== void 0 && blockStyles.color) {
    blockStyles[BLOCK_STYLE_ATTRIBUTES_MAPPING.placeholder] = blockStyles.color;
  }

  return blockStyles;
}

function getBlockTypography(blockStyleAttributes, fontSizes, blockName, baseGlobalStyles) {
  var _blockStyleAttributes2, _baseGlobalStyles$blo2;

  const typographyStyles = {};
  const customBlockStyles = (blockStyleAttributes === null || blockStyleAttributes === void 0 ? void 0 : (_blockStyleAttributes2 = blockStyleAttributes.style) === null || _blockStyleAttributes2 === void 0 ? void 0 : _blockStyleAttributes2.typography) || {};
  const blockGlobalStyles = baseGlobalStyles === null || baseGlobalStyles === void 0 ? void 0 : (_baseGlobalStyles$blo2 = baseGlobalStyles.blocks) === null || _baseGlobalStyles$blo2 === void 0 ? void 0 : _baseGlobalStyles$blo2[blockName];
  const parsedFontSizes = Object.values(fontSizes !== null && fontSizes !== void 0 ? fontSizes : {}); // Global styles.

  if (blockGlobalStyles !== null && blockGlobalStyles !== void 0 && blockGlobalStyles.typography) {
    var _blockGlobalStyles$ty, _blockGlobalStyles$ty2;

    const fontSize = blockGlobalStyles === null || blockGlobalStyles === void 0 ? void 0 : (_blockGlobalStyles$ty = blockGlobalStyles.typography) === null || _blockGlobalStyles$ty === void 0 ? void 0 : _blockGlobalStyles$ty.fontSize;
    const lineHeight = blockGlobalStyles === null || blockGlobalStyles === void 0 ? void 0 : (_blockGlobalStyles$ty2 = blockGlobalStyles.typography) === null || _blockGlobalStyles$ty2 === void 0 ? void 0 : _blockGlobalStyles$ty2.lineHeight;

    if (fontSize) {
      if (parseInt(fontSize, 10)) {
        typographyStyles.fontSize = fontSize;
      } else {
        const mappedFontSize = parsedFontSizes.find(_ref4 => {
          let {
            slug
          } = _ref4;
          return slug === fontSize;
        });

        if (mappedFontSize) {
          typographyStyles.fontSize = mappedFontSize === null || mappedFontSize === void 0 ? void 0 : mappedFontSize.size;
        }
      }
    }

    if (lineHeight) {
      typographyStyles.lineHeight = lineHeight;
    }
  }

  if (blockStyleAttributes !== null && blockStyleAttributes !== void 0 && blockStyleAttributes.fontSize && baseGlobalStyles) {
    const mappedFontSize = parsedFontSizes.find(_ref5 => {
      let {
        slug
      } = _ref5;
      return slug === (blockStyleAttributes === null || blockStyleAttributes === void 0 ? void 0 : blockStyleAttributes.fontSize);
    });

    if (mappedFontSize) {
      typographyStyles.fontSize = mappedFontSize === null || mappedFontSize === void 0 ? void 0 : mappedFontSize.size;
    }
  } // Custom styles.


  if (customBlockStyles !== null && customBlockStyles !== void 0 && customBlockStyles.fontSize) {
    typographyStyles.fontSize = customBlockStyles === null || customBlockStyles === void 0 ? void 0 : customBlockStyles.fontSize;
  }

  if (customBlockStyles !== null && customBlockStyles !== void 0 && customBlockStyles.lineHeight) {
    typographyStyles.lineHeight = customBlockStyles === null || customBlockStyles === void 0 ? void 0 : customBlockStyles.lineHeight;
  }

  return typographyStyles;
}
/**
 * Return a value from a certain path of the object.
 * Path is specified as an array of properties, like: [ 'parent', 'child' ].
 *
 * @param {Object} object Input object.
 * @param {Array}  path   Path to the object property.
 * @return {*} Value of the object property at the specified path.
 */


const getValueFromObjectPath = (object, path) => {
  let value = object;
  path.forEach(fieldName => {
    var _value;

    value = (_value = value) === null || _value === void 0 ? void 0 : _value[fieldName];
  });
  return value;
};

function parseStylesVariables(styles, mappedValues, customValues) {
  let stylesBase = styles;
  const variables = ['preset', 'custom', 'var', 'fontSize'];

  if (!stylesBase) {
    return styles;
  }

  variables.forEach(variable => {
    // Examples
    // var(--wp--preset--color--gray)
    // var(--wp--custom--body--typography--font-family)
    // var:preset|color|custom-color-2
    const regex = new RegExp(`var\\(--wp--${variable}--(.*?)\\)`, 'g');
    const varRegex = /\"var:preset\|color\|(.*?)\"/gm;
    const fontSizeRegex = /"fontSize":"(.*?)"/gm;

    if (variable === 'preset') {
      stylesBase = stylesBase.replace(regex, (_$1, $2) => {
        const path = $2.split('--');
        const mappedPresetValue = mappedValues[path[0]];

        if (mappedPresetValue && mappedPresetValue.slug) {
          var _mappedPresetValue$va;

          const matchedValue = Object.values((_mappedPresetValue$va = mappedPresetValue.values) !== null && _mappedPresetValue$va !== void 0 ? _mappedPresetValue$va : {}).find(_ref6 => {
            let {
              slug
            } = _ref6;
            return slug === path[1];
          });
          return matchedValue === null || matchedValue === void 0 ? void 0 : matchedValue[mappedPresetValue.slug];
        }

        return UNKNOWN_VALUE;
      });
    }

    if (variable === 'custom') {
      const customValuesData = customValues !== null && customValues !== void 0 ? customValues : JSON.parse(stylesBase);
      stylesBase = stylesBase.replace(regex, (_$1, $2) => {
        const path = $2.split('--');

        if (path.reduce((prev, curr) => prev && prev[curr], customValuesData)) {
          return getValueFromObjectPath(customValuesData, path);
        } // Check for camelcase properties.


        return getValueFromObjectPath(customValuesData, [...path.slice(0, path.length - 1), (0, _changeCase.camelCase)(path[path.length - 1])]);
      });
    }

    if (variable === 'var') {
      stylesBase = stylesBase.replace(varRegex, (_$1, $2) => {
        if (mappedValues !== null && mappedValues !== void 0 && mappedValues.color) {
          var _mappedValues$color, _mappedValues$color$v;

          const matchedValue = (_mappedValues$color = mappedValues.color) === null || _mappedValues$color === void 0 ? void 0 : (_mappedValues$color$v = _mappedValues$color.values) === null || _mappedValues$color$v === void 0 ? void 0 : _mappedValues$color$v.find(_ref7 => {
            let {
              slug
            } = _ref7;
            return slug === $2;
          });
          return `"${matchedValue === null || matchedValue === void 0 ? void 0 : matchedValue.color}"`;
        }

        return UNKNOWN_VALUE;
      });
    }

    if (variable === 'fontSize') {
      const {
        width,
        height
      } = _reactNative.Dimensions.get('window');

      stylesBase = stylesBase.replace(fontSizeRegex, (_$1, $2) => {
        const parsedFontSize = (0, _blockEditor.getPxFromCssUnit)($2, {
          width,
          height,
          fontSize: DEFAULT_FONT_SIZE
        }) || `${DEFAULT_FONT_SIZE}px`;
        return `"fontSize":"${parsedFontSize}"`;
      });
    }
  });
  return JSON.parse(stylesBase);
}

function getMappedValues(features, palette) {
  var _typography$fontSizes, _typography$fontSizes2;

  const typography = features === null || features === void 0 ? void 0 : features.typography;
  const colors = [...((palette === null || palette === void 0 ? void 0 : palette.theme) || []), ...((palette === null || palette === void 0 ? void 0 : palette.custom) || []), ...((palette === null || palette === void 0 ? void 0 : palette.default) || [])];
  const fontSizes = { ...(typography === null || typography === void 0 ? void 0 : (_typography$fontSizes = typography.fontSizes) === null || _typography$fontSizes === void 0 ? void 0 : _typography$fontSizes.theme),
    ...(typography === null || typography === void 0 ? void 0 : (_typography$fontSizes2 = typography.fontSizes) === null || _typography$fontSizes2 === void 0 ? void 0 : _typography$fontSizes2.custom)
  };
  const mappedValues = {
    color: {
      values: colors,
      slug: 'color'
    },
    'font-size': {
      values: fontSizes,
      slug: 'size'
    }
  };
  return mappedValues;
}
/**
 * Returns the normalized fontSizes to include the sizePx value for each of the different sizes.
 *
 * @param {Object} fontSizes found in global styles.
 * @return {Object} normalized sizes.
 */


function normalizeFontSizes(fontSizes) {
  // Adds normalized PX values for each of the different keys.
  if (!fontSizes) {
    return fontSizes;
  }

  const normalizedFontSizes = {};

  const dimensions = _reactNative.Dimensions.get('window');

  ['default', 'theme', 'custom'].forEach(key => {
    if (fontSizes[key]) {
      var _fontSizes$key;

      normalizedFontSizes[key] = (_fontSizes$key = fontSizes[key]) === null || _fontSizes$key === void 0 ? void 0 : _fontSizes$key.map(fontSizeObject => {
        fontSizeObject.sizePx = (0, _blockEditor.getPxFromCssUnit)(fontSizeObject.size, {
          width: dimensions.width,
          height: dimensions.height,
          fontSize: DEFAULT_FONT_SIZE
        });
        return fontSizeObject;
      });
    }
  });
  return normalizedFontSizes;
}

function useMobileGlobalStylesColors() {
  var _colorGradientSetting;

  let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'colors';
  const colorGradientSettings = (0, _blockEditor.useMultipleOriginColorsAndGradients)();
  const availableThemeColors = colorGradientSettings === null || colorGradientSettings === void 0 ? void 0 : (_colorGradientSetting = colorGradientSettings[type]) === null || _colorGradientSetting === void 0 ? void 0 : _colorGradientSetting.reduce((colors, origin) => colors.concat(origin === null || origin === void 0 ? void 0 : origin[type]), []); // Default editor colors/gradients if it's not a block-based theme.

  const colorPalette = type === 'colors' ? 'color.palette' : 'color.gradients';
  const editorDefaultPalette = (0, _blockEditor.useSetting)(colorPalette);
  return availableThemeColors.length >= 1 ? availableThemeColors : editorDefaultPalette;
}

function getColorsAndGradients() {
  let defaultEditorColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  let defaultEditorGradients = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  let rawFeatures = arguments.length > 2 ? arguments[2] : undefined;
  const features = rawFeatures ? JSON.parse(rawFeatures) : {};
  return {
    __experimentalGlobalStylesBaseStyles: null,
    __experimentalFeatures: {
      color: { ...(!(features !== null && features !== void 0 && features.color) ? {
          text: true,
          background: true,
          palette: {
            default: defaultEditorColors
          },
          gradients: {
            default: defaultEditorGradients
          }
        } : features === null || features === void 0 ? void 0 : features.color),
        defaultPalette: (defaultEditorColors === null || defaultEditorColors === void 0 ? void 0 : defaultEditorColors.length) > 0,
        defaultGradients: (defaultEditorGradients === null || defaultEditorGradients === void 0 ? void 0 : defaultEditorGradients.length) > 0
      }
    }
  };
}

function getGlobalStyles(rawStyles, rawFeatures) {
  var _features$color, _features$color2, _features$typography, _features$color$text, _features$color3, _features$color$backg, _features$color4, _features$color$defau, _features$color5, _features$color$defau2, _features$color6, _features$custom;

  const features = rawFeatures ? JSON.parse(rawFeatures) : {};
  const mappedValues = getMappedValues(features, features === null || features === void 0 ? void 0 : (_features$color = features.color) === null || _features$color === void 0 ? void 0 : _features$color.palette);
  const colors = parseStylesVariables(JSON.stringify(features === null || features === void 0 ? void 0 : features.color), mappedValues);
  const gradients = parseStylesVariables(JSON.stringify(features === null || features === void 0 ? void 0 : (_features$color2 = features.color) === null || _features$color2 === void 0 ? void 0 : _features$color2.gradients), mappedValues);
  const customValues = parseStylesVariables(JSON.stringify(features === null || features === void 0 ? void 0 : features.custom), mappedValues);
  const globalStyles = parseStylesVariables(rawStyles, mappedValues, customValues);
  const fontSizes = normalizeFontSizes(features === null || features === void 0 ? void 0 : (_features$typography = features.typography) === null || _features$typography === void 0 ? void 0 : _features$typography.fontSizes);
  return {
    __experimentalFeatures: {
      color: {
        palette: colors === null || colors === void 0 ? void 0 : colors.palette,
        gradients,
        text: (_features$color$text = features === null || features === void 0 ? void 0 : (_features$color3 = features.color) === null || _features$color3 === void 0 ? void 0 : _features$color3.text) !== null && _features$color$text !== void 0 ? _features$color$text : true,
        background: (_features$color$backg = features === null || features === void 0 ? void 0 : (_features$color4 = features.color) === null || _features$color4 === void 0 ? void 0 : _features$color4.background) !== null && _features$color$backg !== void 0 ? _features$color$backg : true,
        defaultPalette: (_features$color$defau = features === null || features === void 0 ? void 0 : (_features$color5 = features.color) === null || _features$color5 === void 0 ? void 0 : _features$color5.defaultPalette) !== null && _features$color$defau !== void 0 ? _features$color$defau : true,
        defaultGradients: (_features$color$defau2 = features === null || features === void 0 ? void 0 : (_features$color6 = features.color) === null || _features$color6 === void 0 ? void 0 : _features$color6.defaultGradients) !== null && _features$color$defau2 !== void 0 ? _features$color$defau2 : true
      },
      typography: {
        fontSizes,
        customLineHeight: features === null || features === void 0 ? void 0 : (_features$custom = features.custom) === null || _features$custom === void 0 ? void 0 : _features$custom['line-height']
      },
      spacing: features === null || features === void 0 ? void 0 : features.spacing
    },
    __experimentalGlobalStylesBaseStyles: globalStyles
  };
}
//# sourceMappingURL=utils.native.js.map