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

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getInlineStyles = getInlineStyles;
exports.omitKeysNotToSerialize = omitKeysNotToSerialize;
exports.addSaveProps = addSaveProps;
exports.addEditProps = addEditProps;
exports.withBlockControls = void 0;

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

var _lodash = require("lodash");

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

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

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

var _border = require("./border");

var _color = require("./color");

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

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

var _spacing = require("./spacing");

var _useDisplayBlockControls = _interopRequireDefault(require("../components/use-display-block-controls"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const styleSupportKeys = [..._typography.TYPOGRAPHY_SUPPORT_KEYS, _border.BORDER_SUPPORT_KEY, _color.COLOR_SUPPORT_KEY, _spacing.SPACING_SUPPORT_KEY];

const hasStyleSupport = blockType => styleSupportKeys.some(key => (0, _blocks.hasBlockSupport)(blockType, key));

const VARIABLE_REFERENCE_PREFIX = 'var:';
const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';

function compileStyleValue(uncompiledValue) {
  if ((0, _lodash.startsWith)(uncompiledValue, VARIABLE_REFERENCE_PREFIX)) {
    const variable = uncompiledValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
    return `var(--wp--${variable})`;
  }

  return uncompiledValue;
}
/**
 * Returns the inline styles to add depending on the style object
 *
 * @param  {Object} styles Styles configuration
 * @return {Object}        Flattened CSS variables declaration
 */


function getInlineStyles(styles = {}) {
  const output = {};
  Object.keys(_blocks.__EXPERIMENTAL_STYLE_PROPERTY).forEach(propKey => {
    const path = _blocks.__EXPERIMENTAL_STYLE_PROPERTY[propKey].value;
    const subPaths = _blocks.__EXPERIMENTAL_STYLE_PROPERTY[propKey].properties;

    if ((0, _lodash.has)(styles, path)) {
      if (!!subPaths) {
        subPaths.forEach(suffix => {
          output[propKey + (0, _lodash.capitalize)(suffix)] = compileStyleValue((0, _lodash.get)(styles, [...path, suffix]));
        });
      } else {
        output[propKey] = compileStyleValue((0, _lodash.get)(styles, path));
      }
    }
  });
  return output;
}
/**
 * Filters registered block settings, extending attributes to include `style` attribute.
 *
 * @param  {Object} settings Original block settings
 * @return {Object}          Filtered block settings
 */


function addAttribute(settings) {
  if (!hasStyleSupport(settings)) {
    return settings;
  } // allow blocks to specify their own attribute definition with default values if needed.


  if (!settings.attributes.style) {
    Object.assign(settings.attributes, {
      style: {
        type: 'object'
      }
    });
  }

  return settings;
}
/**
 * Filters a style object returning only the keys
 * that are serializable for a given block.
 *
 * @param {Object} style Input style object to filter.
 * @param {Object} blockSupports Info about block supports.
 * @return {Object} Filtered style.
 */


function omitKeysNotToSerialize(style, blockSupports) {
  return (0, _lodash.omitBy)(style, (value, key) => {
    var _blockSupports$key;

    return !!((_blockSupports$key = blockSupports[key]) !== null && _blockSupports$key !== void 0 && _blockSupports$key.__experimentalSkipSerialization);
  });
}
/**
 * Override props assigned to save component to inject the CSS variables definition.
 *
 * @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 (!hasStyleSupport(blockType)) {
    return props;
  }

  const {
    style
  } = attributes;
  let filteredStyle = omitKeysNotToSerialize(style, {
    border: (0, _blocks.getBlockSupport)(blockType, _border.BORDER_SUPPORT_KEY),
    [_color.COLOR_SUPPORT_KEY]: (0, _blocks.getBlockSupport)(blockType, _color.COLOR_SUPPORT_KEY)
  });

  if ((0, _blocks.getBlockSupport)(blockType, '__experimentalSkipFontSizeSerialization')) {
    filteredStyle = (0, _lodash.omit)(filteredStyle, [['typography', _fontSize.FONT_SIZE_SUPPORT_KEY]]);
  }

  props.style = { ...getInlineStyles(filteredStyle),
    ...props.style
  };
  return props;
}
/**
 * Filters registered block settings to extend the block edit wrapper
 * to apply the desired styles and classnames properly.
 *
 * @param  {Object} settings Original block settings
 * @return {Object}          Filtered block settings
 */


function addEditProps(settings) {
  if (!hasStyleSupport(settings)) {
    return settings;
  }

  const existingGetEditWrapperProps = settings.getEditWrapperProps;

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

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

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

  return settings;
}
/**
 * Override the default edit UI to include new inspector controls for
 * all the custom styles configs.
 *
 * @param  {Function} BlockEdit Original component
 * @return {Function}           Wrapped component
 */


const withBlockControls = (0, _compose.createHigherOrderComponent)(BlockEdit => props => {
  const shouldDisplayControls = (0, _useDisplayBlockControls.default)();
  return (0, _element.createElement)(_element.Fragment, null, shouldDisplayControls && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_typography.TypographyPanel, props), (0, _element.createElement)(_border.BorderPanel, props), (0, _element.createElement)(_color.ColorEdit, props), (0, _element.createElement)(_spacing.SpacingPanel, props)), (0, _element.createElement)(BlockEdit, props));
}, 'withToolbarControls');
exports.withBlockControls = withBlockControls;
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/style/addAttribute', addAttribute);
(0, _hooks.addFilter)('blocks.getSaveContent.extraProps', 'core/style/addSaveProps', addSaveProps);
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/style/addEditProps', addEditProps);
(0, _hooks.addFilter)('editor.BlockEdit', 'core/style/with-block-controls', withBlockControls);
//# sourceMappingURL=style.js.map