@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 _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
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 _textAlign = require("./text-align");
var _utils = require("./utils");
var _store = require("../store");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * 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 WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
const TYPOGRAPHY_SUPPORT_KEY = exports.TYPOGRAPHY_SUPPORT_KEY = 'typography';
const TYPOGRAPHY_SUPPORT_KEYS = exports.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, _textAlign.TEXT_ALIGN_SUPPORT_KEY, TEXT_COLUMNS_SUPPORT_KEY, TEXT_DECORATION_SUPPORT_KEY, WRITING_MODE_SUPPORT_KEY, TEXT_TRANSFORM_SUPPORT_KEY, LETTER_SPACING_SUPPORT_KEY];
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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default, {
    group: "typography",
    resetAllFilter: attributesResetAllFilter,
    children: children
  });
}
function TypographyPanel({
  clientId,
  name,
  setAttributes,
  settings
}) {
  function selector(select) {
    const {
      style,
      fontFamily,
      fontSize
    } = select(_store.store).getBlockAttributes(clientId) || {};
    return {
      style,
      fontFamily,
      fontSize
    };
  }
  const {
    style,
    fontFamily,
    fontSize
  } = (0, _data.useSelect)(selector, [clientId]);
  const isEnabled = (0, _typographyPanel.useHasTypographyPanel)(settings);
  const value = (0, _element.useMemo)(() => attributesToStyle({
    style,
    fontFamily,
    fontSize
  }), [style, fontSize, fontFamily]);
  const onChange = newStyle => {
    setAttributes(styleToAttributes(newStyle));
  };
  if (!isEnabled) {
    return null;
  }
  const defaultControls = (0, _blocks.getBlockSupport)(name, [TYPOGRAPHY_SUPPORT_KEY, '__experimentalDefaultControls']);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_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