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

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TYPOGRAPHY_SUPPORT_KEYS = exports.TYPOGRAPHY_SUPPORT_KEY = void 0;
exports.TypographyPanel = TypographyPanel;
exports.hasTypographySupport = void 0;

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

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

var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));

var _typographyPanel = _interopRequireWildcard(require("../components/global-styles/typography-panel"));

var _lineHeight = require("./line-height");

var _fontFamily = require("./font-family");

var _fontSize = require("./font-size");

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function omit(object, keys) {
  return Object.fromEntries(Object.entries(object).filter(([key]) => !keys.includes(key)));
}

const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
const TYPOGRAPHY_SUPPORT_KEY = 'typography';
exports.TYPOGRAPHY_SUPPORT_KEY = TYPOGRAPHY_SUPPORT_KEY;
const TYPOGRAPHY_SUPPORT_KEYS = [_lineHeight.LINE_HEIGHT_SUPPORT_KEY, _fontSize.FONT_SIZE_SUPPORT_KEY, FONT_STYLE_SUPPORT_KEY, FONT_WEIGHT_SUPPORT_KEY, _fontFamily.FONT_FAMILY_SUPPORT_KEY, TEXT_COLUMNS_SUPPORT_KEY, TEXT_DECORATION_SUPPORT_KEY, TEXT_TRANSFORM_SUPPORT_KEY, LETTER_SPACING_SUPPORT_KEY];
exports.TYPOGRAPHY_SUPPORT_KEYS = TYPOGRAPHY_SUPPORT_KEYS;

function styleToAttributes(style) {
  const updatedStyle = { ...omit(style, ['fontFamily'])
  };
  const fontSizeValue = style?.typography?.fontSize;
  const fontFamilyValue = style?.typography?.fontFamily;
  const fontSizeSlug = fontSizeValue?.startsWith('var:preset|font-size|') ? fontSizeValue.substring('var:preset|font-size|'.length) : undefined;
  const fontFamilySlug = fontFamilyValue?.startsWith('var:preset|font-family|') ? fontFamilyValue.substring('var:preset|font-family|'.length) : undefined;
  updatedStyle.typography = { ...omit(updatedStyle.typography, ['fontFamily']),
    fontSize: fontSizeSlug ? undefined : fontSizeValue
  };
  return {
    style: (0, _utils.cleanEmptyObject)(updatedStyle),
    fontFamily: fontFamilySlug,
    fontSize: fontSizeSlug
  };
}

function attributesToStyle(attributes) {
  return { ...attributes.style,
    typography: { ...attributes.style?.typography,
      fontFamily: attributes.fontFamily ? 'var:preset|font-family|' + attributes.fontFamily : undefined,
      fontSize: attributes.fontSize ? 'var:preset|font-size|' + attributes.fontSize : attributes.style?.typography?.fontSize
    }
  };
}

function TypographyInspectorControl({
  children,
  resetAllFilter
}) {
  const attributesResetAllFilter = (0, _element.useCallback)(attributes => {
    const existingStyle = attributesToStyle(attributes);
    const updatedStyle = resetAllFilter(existingStyle);
    return { ...attributes,
      ...styleToAttributes(updatedStyle)
    };
  }, [resetAllFilter]);
  return (0, _element.createElement)(_inspectorControls.default, {
    group: "typography",
    resetAllFilter: attributesResetAllFilter
  }, children);
}

function TypographyPanel({
  clientId,
  name,
  attributes,
  setAttributes,
  __unstableParentLayout
}) {
  const settings = (0, _utils.useBlockSettings)(name, __unstableParentLayout);
  const isEnabled = (0, _typographyPanel.useHasTypographyPanel)(settings);
  const value = (0, _element.useMemo)(() => {
    return attributesToStyle({
      style: attributes.style,
      fontFamily: attributes.fontFamily,
      fontSize: attributes.fontSize
    });
  }, [attributes.style, attributes.fontSize, attributes.fontFamily]);

  const onChange = newStyle => {
    setAttributes(styleToAttributes(newStyle));
  };

  if (!isEnabled) {
    return null;
  }

  const defaultControls = (0, _blocks.getBlockSupport)(name, [TYPOGRAPHY_SUPPORT_KEY, '__experimentalDefaultControls']);
  return (0, _element.createElement)(_typographyPanel.default, {
    as: TypographyInspectorControl,
    panelId: clientId,
    settings: settings,
    value: value,
    onChange: onChange,
    defaultControls: defaultControls
  });
}

const hasTypographySupport = blockName => {
  return TYPOGRAPHY_SUPPORT_KEYS.some(key => (0, _blocks.hasBlockSupport)(blockName, key));
};

exports.hasTypographySupport = hasTypographySupport;
//# sourceMappingURL=typography.js.map