@wordpress/block-editor/build/hooks/use-typography-props.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getTypographyClassesAndStyles = getTypographyClassesAndStyles;

var _lodash = require("lodash");

var _classnames = _interopRequireDefault(require("classnames"));

var _style = require("./style");

var _fontSizes = require("../components/font-sizes");

var _fluidUtils = require("../components/font-sizes/fluid-utils");

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

/*
 * This utility is intended to assist where the serialization of the typography
 * block support is being skipped for a block but the typography related CSS
 * styles still need to be generated so they can be applied to inner elements.
 */

/**
 * Provides the CSS class names and inline styles for a block's typography support
 * attributes.
 *
 * @param {Object}         attributes Block attributes.
 * @param {Object|boolean} settings   Merged theme.json settings
 *
 * @return {Object} Typography block support derived CSS classes & styles.
 */
function getTypographyClassesAndStyles(attributes, settings) {
  let typographyStyles = attributes?.style?.typography || {};
  const fluidTypographySettings = settings?.typography?.fluid;

  if (!!fluidTypographySettings && (true === fluidTypographySettings || Object.keys(fluidTypographySettings).length !== 0)) {
    const newFontSize = (0, _fluidUtils.getComputedFluidTypographyValue)({
      fontSize: attributes?.style?.typography?.fontSize,
      minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
      maximumViewPortWidth: settings?.layout?.wideSize
    }) || attributes?.style?.typography?.fontSize;
    typographyStyles = { ...typographyStyles,
      fontSize: newFontSize
    };
  }

  const style = (0, _style.getInlineStyles)({
    typography: typographyStyles
  });
  const fontFamilyClassName = !!attributes?.fontFamily ? `has-${(0, _lodash.kebabCase)(attributes.fontFamily)}-font-family` : '';
  const className = (0, _classnames.default)(fontFamilyClassName, (0, _fontSizes.getFontSizeClass)(attributes?.fontSize));
  return {
    className,
    style
  };
}
//# sourceMappingURL=use-typography-props.js.map