@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.FontSizeEdit = FontSizeEdit;
exports.useIsFontSizeDisabled = useIsFontSizeDisabled;
exports.FONT_SIZE_SUPPORT_KEY = void 0;

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 _fontSizes = require("../components/font-sizes");

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

var _useEditorFeature = _interopRequireDefault(require("../components/use-editor-feature"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const FONT_SIZE_SUPPORT_KEY = '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, _blocks.hasBlockSupport)(blockType, '__experimentalSkipFontSizeSerialization')) {
    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) {
  var _style$typography, _style$typography2;

  const {
    attributes: {
      fontSize,
      style
    },
    setAttributes
  } = props;
  const isDisabled = useIsFontSizeDisabled(props);
  const fontSizes = (0, _useEditorFeature.default)('typography.fontSizes');

  const onChange = value => {
    const fontSizeSlug = (0, _fontSizes.getFontSizeObjectByValue)(fontSizes, value).slug;
    setAttributes({
      style: (0, _utils.cleanEmptyObject)({ ...style,
        typography: { ...(style === null || style === void 0 ? void 0 : style.typography),
          fontSize: fontSizeSlug ? undefined : value
        }
      }),
      fontSize: fontSizeSlug
    });
  };

  if (isDisabled) {
    return null;
  }

  const fontSizeObject = (0, _fontSizes.getFontSize)(fontSizes, fontSize, style === null || style === void 0 ? void 0 : (_style$typography = style.typography) === null || _style$typography === void 0 ? void 0 : _style$typography.fontSize);
  const fontSizeValue = (fontSizeObject === null || fontSizeObject === void 0 ? void 0 : fontSizeObject.size) || (style === null || style === void 0 ? void 0 : (_style$typography2 = style.typography) === null || _style$typography2 === void 0 ? void 0 : _style$typography2.fontSize) || fontSize;
  return (0, _element.createElement)(_fontSizes.FontSizePicker, {
    onChange: onChange,
    value: fontSizeValue
  });
}
/**
 * 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, _useEditorFeature.default)('typography.fontSizes');
  const hasFontSizes = !!(fontSizes !== null && fontSizes !== void 0 && 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 => {
  var _style$typography3, _style$typography4;

  const fontSizes = (0, _useEditorFeature.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, _blocks.hasBlockSupport)(blockName, '__experimentalSkipFontSizeSerialization') || !fontSize || style !== null && style !== void 0 && (_style$typography3 = style.typography) !== null && _style$typography3 !== void 0 && _style$typography3.fontSize) {
    return (0, _element.createElement)(BlockListBlock, props);
  }

  const fontSizeValue = (0, _fontSizes.getFontSize)(fontSizes, fontSize, style === null || style === void 0 ? void 0 : (_style$typography4 = style.typography) === null || _style$typography4 === void 0 ? void 0 : _style$typography4.fontSize).size;
  const newProps = { ...props,
    wrapperProps: { ...wrapperProps,
      style: {
        fontSize: fontSizeValue,
        ...(wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style)
      }
    }
  };
  return (0, _element.createElement)(BlockListBlock, newProps);
}, 'withFontSizeInlineStyles');
(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);
//# sourceMappingURL=font-size.js.map