@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.useIsFontSizeDisabled = useIsFontSizeDisabled;

var _element = require("@wordpress/element");

var _hooks = require("@wordpress/hooks");

var _blocks = require("@wordpress/blocks");

var _tokenList = _interopRequireDefault(require("@wordpress/token-list"));

var _compose = require("@wordpress/compose");

var _data = require("@wordpress/data");

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

var _typography = require("./typography");

var _utils = require("./utils");

var _useSetting = _interopRequireDefault(require("../components/use-setting"));

var _store = require("../store");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const 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.
 */

exports.FONT_SIZE_SUPPORT_KEY = FONT_SIZE_SUPPORT_KEY;

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} blockType  Block type.
 * @param {Object} attributes Block attributes.
 *
 * @return {Object} Filtered props applied to save element.
 */


function addSaveProps(props, blockType, attributes) {
  if (!(0, _blocks.hasBlockSupport)(blockType, FONT_SIZE_SUPPORT_KEY)) {
    return props;
  }

  if ((0, _utils.shouldSkipSerialization)(blockType, _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;
}
/**
 * Filters registered block settings to expand the block edit wrapper
 * by applying the desired styles and classnames.
 *
 * @param {Object} settings Original block settings.
 *
 * @return {Object} Filtered block settings.
 */


function addEditProps(settings) {
  if (!(0, _blocks.hasBlockSupport)(settings, FONT_SIZE_SUPPORT_KEY)) {
    return settings;
  }

  const existingGetEditWrapperProps = settings.getEditWrapperProps;

  settings.getEditWrapperProps = attributes => {
    let props = {};

    if (existingGetEditWrapperProps) {
      props = existingGetEditWrapperProps(attributes);
    }

    return addSaveProps(props, settings, attributes);
  };

  return settings;
}
/**
 * Inspector control panel containing the font size related configuration
 *
 * @param {Object} props
 *
 * @return {WPElement} Font size edit element.
 */


function FontSizeEdit(props) {
  const {
    attributes: {
      fontSize,
      style
    },
    setAttributes
  } = props;
  const fontSizes = (0, _useSetting.default)('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 (0, _element.createElement)(_fontSizes.FontSizePicker, {
    onChange: onChange,
    value: fontSizeValue,
    withReset: false,
    withSlider: true,
    size: "__unstable-large",
    __nextHasNoMarginBottom: true
  });
}
/**
 * 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, _useSetting.default)('typography.fontSizes');
  const hasFontSizes = !!fontSizes?.length;
  return !(0, _blocks.hasBlockSupport)(blockName, FONT_SIZE_SUPPORT_KEY) || !hasFontSizes;
}
/**
 * Add inline styles for font sizes.
 * Ideally, this is not needed and themes load the font-size classes on the
 * editor.
 *
 * @param {Function} BlockListBlock Original component.
 *
 * @return {Function} Wrapped component.
 */


const withFontSizeInlineStyles = (0, _compose.createHigherOrderComponent)(BlockListBlock => props => {
  const fontSizes = (0, _useSetting.default)('typography.fontSizes');
  const {
    name: blockName,
    attributes: {
      fontSize,
      style
    },
    wrapperProps
  } = props; // Only add inline styles if the block supports font sizes,
  // doesn't skip serialization of font sizes,
  // doesn't already have an inline font size,
  // and does have a class to extract the font size from.

  if (!(0, _blocks.hasBlockSupport)(blockName, FONT_SIZE_SUPPORT_KEY) || (0, _utils.shouldSkipSerialization)(blockName, _typography.TYPOGRAPHY_SUPPORT_KEY, 'fontSize') || !fontSize || style?.typography?.fontSize) {
    return (0, _element.createElement)(BlockListBlock, props);
  }

  const fontSizeValue = (0, _fontSizes.getFontSize)(fontSizes, fontSize, style?.typography?.fontSize).size;
  const newProps = { ...props,
    wrapperProps: { ...wrapperProps,
      style: {
        fontSize: fontSizeValue,
        ...wrapperProps?.style
      }
    }
  };
  return (0, _element.createElement)(BlockListBlock, newProps);
}, 'withFontSizeInlineStyles');
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);
}
/**
 * Allow custom font sizes to appear fluid when fluid typography is enabled at
 * the theme level.
 *
 * Adds a custom getEditWrapperProps() callback to all block types that support
 * font sizes. Then, if fluid typography is enabled, this callback will swap any
 * custom font size in style.fontSize with a fluid font size (i.e. one that uses
 * clamp()).
 *
 * It's important that this hook runs after 'core/style/addEditProps' sets
 * style.fontSize as otherwise fontSize will be overwritten.
 *
 * @param {Object} blockType Block settings object.
 */


function addEditPropsForFluidCustomFontSizes(blockType) {
  if (!(0, _blocks.hasBlockSupport)(blockType, FONT_SIZE_SUPPORT_KEY) || (0, _utils.shouldSkipSerialization)(blockType, _typography.TYPOGRAPHY_SUPPORT_KEY, 'fontSize')) {
    return blockType;
  }

  const existingGetEditWrapperProps = blockType.getEditWrapperProps;

  blockType.getEditWrapperProps = attributes => {
    const wrapperProps = existingGetEditWrapperProps ? existingGetEditWrapperProps(attributes) : {};
    const fontSize = wrapperProps?.style?.fontSize; // TODO: This sucks! We should be using useSetting( 'typography.fluid' )
    // or even useSelect( blockEditorStore ). We can't do either here
    // because getEditWrapperProps is a plain JavaScript function called by
    // BlockListBlock and not a React component rendered within
    // BlockListContext.Provider. If we set fontSize using editor.
    // BlockListBlock instead of using getEditWrapperProps then the value is
    // clobbered when the core/style/addEditProps filter runs.

    const fluidTypographyConfig = (0, _data.select)(_store.store).getSettings().__experimentalFeatures?.typography?.fluid;
    const fluidTypographySettings = typeof fluidTypographyConfig === 'object' ? fluidTypographyConfig : {};
    const newFontSize = fontSize && !!fluidTypographyConfig ? (0, _fontSizes.getComputedFluidTypographyValue)({
      fontSize,
      minimumFontSizeLimit: fluidTypographySettings?.minFontSize
    }) : null;

    if (newFontSize === null) {
      return wrapperProps;
    }

    return { ...wrapperProps,
      style: { ...wrapperProps?.style,
        fontSize: newFontSize
      }
    };
  };

  return blockType;
}

(0, _hooks.addFilter)('blocks.registerBlockType', 'core/font/addAttribute', addAttributes);
(0, _hooks.addFilter)('blocks.getSaveContent.extraProps', 'core/font/addSaveProps', addSaveProps);
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/font/addEditProps', addEditProps);
(0, _hooks.addFilter)('editor.BlockListBlock', 'core/font-size/with-font-size-inline-styles', withFontSizeInlineStyles);
(0, _hooks.addFilter)('blocks.switchToBlockType.transformedBlock', 'core/font-size/addTransforms', addTransforms);
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/font-size/addEditPropsForFluidCustomFontSizes', addEditPropsForFluidCustomFontSizes, // Run after 'core/style/addEditProps' so that the style object has already
// been translated into inline CSS.
11);
//# sourceMappingURL=font-size.js.map