@wordpress/block-editor/build/hooks/font-size.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FONT_SIZE_SUPPORT_KEY = void 0;
exports.FontSizeEdit = FontSizeEdit;
exports.default = void 0;
exports.useIsFontSizeDisabled = useIsFontSizeDisabled;
var _hooks = require("@wordpress/hooks");
var _blocks = require("@wordpress/blocks");
var _tokenList = _interopRequireDefault(require("@wordpress/token-list"));
var _fontSizes = require("../components/font-sizes");
var _typography = require("./typography");
var _utils = require("./utils");
var _useSettings = require("../components/use-settings");
var _typographyUtils = require("../components/global-styles/typography-utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const FONT_SIZE_SUPPORT_KEY = exports.FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';

/**
 * Filters registered block settings, extending attributes to include
 * `fontSize` and `fontWeight` attributes.
 *
 * @param {Object} settings Original block settings.
 *
 * @return {Object} Filtered block settings.
 */
function addAttributes(settings) {
  if (!(0, _blocks.hasBlockSupport)(settings, FONT_SIZE_SUPPORT_KEY)) {
    return settings;
  }

  // Allow blocks to specify a default value if needed.
  if (!settings.attributes.fontSize) {
    Object.assign(settings.attributes, {
      fontSize: {
        type: 'string'
      }
    });
  }
  return settings;
}

/**
 * Override props assigned to save component to inject font size.
 *
 * @param {Object} props           Additional props applied to save element.
 * @param {Object} blockNameOrType Block type.
 * @param {Object} attributes      Block attributes.
 *
 * @return {Object} Filtered props applied to save element.
 */
function addSaveProps(props, blockNameOrType, attributes) {
  if (!(0, _blocks.hasBlockSupport)(blockNameOrType, FONT_SIZE_SUPPORT_KEY)) {
    return props;
  }
  if ((0, _utils.shouldSkipSerialization)(blockNameOrType, _typography.TYPOGRAPHY_SUPPORT_KEY, 'fontSize')) {
    return props;
  }

  // Use TokenList to dedupe classes.
  const classes = new _tokenList.default(props.className);
  classes.add((0, _fontSizes.getFontSizeClass)(attributes.fontSize));
  const newClassName = classes.value;
  props.className = newClassName ? newClassName : undefined;
  return props;
}

/**
 * Inspector control panel containing the font size related configuration
 *
 * @param {Object} props
 *
 * @return {Element} Font size edit element.
 */
function FontSizeEdit(props) {
  const {
    attributes: {
      fontSize,
      style
    },
    setAttributes
  } = props;
  const [fontSizes] = (0, _useSettings.useSettings)('typography.fontSizes');
  const onChange = value => {
    const fontSizeSlug = (0, _fontSizes.getFontSizeObjectByValue)(fontSizes, value).slug;
    setAttributes({
      style: (0, _utils.cleanEmptyObject)({
        ...style,
        typography: {
          ...style?.typography,
          fontSize: fontSizeSlug ? undefined : value
        }
      }),
      fontSize: fontSizeSlug
    });
  };
  const fontSizeObject = (0, _fontSizes.getFontSize)(fontSizes, fontSize, style?.typography?.fontSize);
  const fontSizeValue = fontSizeObject?.size || style?.typography?.fontSize || fontSize;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizes.FontSizePicker, {
    onChange: onChange,
    value: fontSizeValue,
    withReset: false,
    withSlider: true,
    size: "__unstable-large"
  });
}

/**
 * Custom hook that checks if font-size settings have been disabled.
 *
 * @param {string} name The name of the block.
 * @return {boolean} Whether setting is disabled.
 */
function useIsFontSizeDisabled({
  name: blockName
} = {}) {
  const [fontSizes] = (0, _useSettings.useSettings)('typography.fontSizes');
  const hasFontSizes = !!fontSizes?.length;
  return !(0, _blocks.hasBlockSupport)(blockName, FONT_SIZE_SUPPORT_KEY) || !hasFontSizes;
}
function useBlockProps({
  name,
  fontSize,
  style
}) {
  const [fontSizes, fluidTypographySettings, layoutSettings] = (0, _useSettings.useSettings)('typography.fontSizes', 'typography.fluid', 'layout');

  /*
   * Only add inline styles if the block supports font sizes,
   * doesn't skip serialization of font sizes,
   * and has either a custom font size or a preset font size.
   */
  if (!(0, _blocks.hasBlockSupport)(name, FONT_SIZE_SUPPORT_KEY) || (0, _utils.shouldSkipSerialization)(name, _typography.TYPOGRAPHY_SUPPORT_KEY, 'fontSize') || !fontSize && !style?.typography?.fontSize) {
    return;
  }
  let props;
  if (style?.typography?.fontSize) {
    props = {
      style: {
        fontSize: (0, _typographyUtils.getTypographyFontSizeValue)({
          size: style.typography.fontSize
        }, {
          typography: {
            fluid: fluidTypographySettings
          },
          layout: layoutSettings
        })
      }
    };
  }
  if (fontSize) {
    props = {
      style: {
        fontSize: (0, _fontSizes.getFontSize)(fontSizes, fontSize, style?.typography?.fontSize).size
      }
    };
  }
  if (!props) {
    return;
  }
  return addSaveProps(props, name, {
    fontSize
  });
}
var _default = exports.default = {
  useBlockProps,
  addSaveProps,
  attributeKeys: ['fontSize', 'style'],
  hasSupport(name) {
    return (0, _blocks.hasBlockSupport)(name, FONT_SIZE_SUPPORT_KEY);
  }
};
const MIGRATION_PATHS = {
  fontSize: [['fontSize'], ['style', 'typography', 'fontSize']]
};
function addTransforms(result, source, index, results) {
  const destinationBlockType = result.name;
  const activeSupports = {
    fontSize: (0, _blocks.hasBlockSupport)(destinationBlockType, FONT_SIZE_SUPPORT_KEY)
  };
  return (0, _utils.transformStyles)(activeSupports, MIGRATION_PATHS, result, source, index, results);
}
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/font/addAttribute', addAttributes);
(0, _hooks.addFilter)('blocks.switchToBlockType.transformedBlock', 'core/font-size/addTransforms', addTransforms);
//# sourceMappingURL=font-size.js.map