@wordpress/block-editor/build-module/hooks/font-appearance.js

Generic block editor.

import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { hasBlockSupport } from '@wordpress/blocks';
/**
 * Internal dependencies
 */

import FontAppearanceControl from '../components/font-appearance-control';
import useEditorFeature from '../components/use-editor-feature';
import { cleanEmptyObject } from './utils';
/**
 * Key within block settings' support array indicating support for font style.
 */

export const FONT_STYLE_SUPPORT_KEY = '__experimentalFontStyle';
/**
 * Key within block settings' support array indicating support for font weight.
 */

export const FONT_WEIGHT_SUPPORT_KEY = '__experimentalFontWeight';
/**
 * Inspector control panel containing the font appearance options.
 *
 * @param  {Object} props Block properties.
 * @return {WPElement}    Font appearance edit element.
 */

export function FontAppearanceEdit(props) {
  var _style$typography, _style$typography2;

  const {
    attributes: {
      style
    },
    setAttributes
  } = props;
  const hasFontStyles = !useIsFontStyleDisabled(props);
  const hasFontWeights = !useIsFontWeightDisabled(props);

  if (!hasFontStyles && !hasFontWeights) {
    return null;
  }

  const onChange = newStyles => {
    setAttributes({
      style: cleanEmptyObject({ ...style,
        typography: { ...(style === null || style === void 0 ? void 0 : style.typography),
          fontStyle: newStyles.fontStyle,
          fontWeight: newStyles.fontWeight
        }
      })
    });
  };

  const fontStyle = style === null || style === void 0 ? void 0 : (_style$typography = style.typography) === null || _style$typography === void 0 ? void 0 : _style$typography.fontStyle;
  const fontWeight = style === null || style === void 0 ? void 0 : (_style$typography2 = style.typography) === null || _style$typography2 === void 0 ? void 0 : _style$typography2.fontWeight;
  return createElement(FontAppearanceControl, {
    onChange: onChange,
    hasFontStyles: hasFontStyles,
    hasFontWeights: hasFontWeights,
    value: {
      fontStyle,
      fontWeight
    }
  });
}
/**
 * Checks if font style support has been disabled either by not opting in for
 * support or by failing to provide preset styles.
 *
 * @param  {Object} props      Block properties.
 * @param  {string} props.name Name for the block type.
 * @return {boolean}           Whether font style support has been disabled.
 */

export function useIsFontStyleDisabled({
  name: blockName
} = {}) {
  const styleSupport = hasBlockSupport(blockName, FONT_STYLE_SUPPORT_KEY);
  const hasFontStyles = useEditorFeature('typography.customFontStyle');
  return !styleSupport || !hasFontStyles;
}
/**
 * Checks if font weight support has been disabled either by not opting in for
 * support or by failing to provide preset weights.
 *
 * @param  {Object} props      Block properties.
 * @param  {string} props.name Name for the block type.
 * @return {boolean}           Whether font weight support has been disabled.
 */

export function useIsFontWeightDisabled({
  name: blockName
} = {}) {
  const weightSupport = hasBlockSupport(blockName, FONT_WEIGHT_SUPPORT_KEY);
  const hasFontWeights = useEditorFeature('typography.customFontWeight');
  return !weightSupport || !hasFontWeights;
}
/**
 * Checks if font appearance support has been disabled.
 *
 * @param  {Object} props      Block properties.
 * @return {boolean}           Whether font appearance support has been disabled.
 */

export function useIsFontAppearanceDisabled(props) {
  const stylesDisabled = useIsFontStyleDisabled(props);
  const weightsDisabled = useIsFontWeightDisabled(props);
  return stylesDisabled && weightsDisabled;
}
//# sourceMappingURL=font-appearance.js.map