@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.addEditProps = addEditProps;
exports.addSaveProps = addSaveProps;
exports.getInlineStyles = getInlineStyles;
exports.omitStyle = omitStyle;
exports.withBlockControls = void 0;

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

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

var _classnames = _interopRequireDefault(require("classnames"));

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

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

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

var _styleEngine = require("@wordpress/style-engine");

var _blockList = _interopRequireDefault(require("../components/block-list"));

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

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

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

var _dimensions = require("./dimensions");

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

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

var _blockEditingMode = require("../components/block-editing-mode");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

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

const hasStyleSupport = blockType => styleSupportKeys.some(key => (0, _blocks.hasBlockSupport)(blockType, key));
/**
 * 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 = {}; // The goal is to move everything to server side generated engine styles
  // This is temporary as we absorb more and more styles into the engine.

  (0, _styleEngine.getCSSRules)(styles).forEach(rule => {
    output[rule.key] = rule.value;
  });
  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;
}
/**
 * A dictionary of paths to flag skipping block support serialization as the key,
 * with values providing the style paths to be omitted from serialization.
 *
 * @constant
 * @type {Record<string, string[]>}
 */


const skipSerializationPathsEdit = {
  [`${_border.BORDER_SUPPORT_KEY}.__experimentalSkipSerialization`]: ['border'],
  [`${_color.COLOR_SUPPORT_KEY}.__experimentalSkipSerialization`]: [_color.COLOR_SUPPORT_KEY],
  [`${_typography.TYPOGRAPHY_SUPPORT_KEY}.__experimentalSkipSerialization`]: [_typography.TYPOGRAPHY_SUPPORT_KEY],
  [`${_dimensions.DIMENSIONS_SUPPORT_KEY}.__experimentalSkipSerialization`]: [_dimensions.DIMENSIONS_SUPPORT_KEY],
  [`${_dimensions.SPACING_SUPPORT_KEY}.__experimentalSkipSerialization`]: [_dimensions.SPACING_SUPPORT_KEY]
};
/**
 * A dictionary of paths to flag skipping block support serialization as the key,
 * with values providing the style paths to be omitted from serialization.
 *
 * Extends the Edit skip paths to enable skipping additional paths in just
 * the Save component. This allows a block support to be serialized within the
 * editor, while using an alternate approach, such as server-side rendering, when
 * the support is saved.
 *
 * @constant
 * @type {Record<string, string[]>}
 */

const skipSerializationPathsSave = { ...skipSerializationPathsEdit,
  [`${_dimensions.SPACING_SUPPORT_KEY}`]: ['spacing.blockGap']
};
/**
 * A dictionary used to normalize feature names between support flags, style
 * object properties and __experimentSkipSerialization configuration arrays.
 *
 * This allows not having to provide a migration for a support flag and possible
 * backwards compatibility bridges, while still achieving consistency between
 * the support flag and the skip serialization array.
 *
 * @constant
 * @type {Record<string, string>}
 */

const renamedFeatures = {
  gradients: 'gradient'
};
/**
 * A utility function used to remove one or more paths from a style object.
 * Works in a way similar to Lodash's `omit()`. See unit tests and examples below.
 *
 * It supports a single string path:
 *
 * ```
 * omitStyle( { color: 'red' }, 'color' ); // {}
 * ```
 *
 * or an array of paths:
 *
 * ```
 * omitStyle( { color: 'red', background: '#fff' }, [ 'color', 'background' ] ); // {}
 * ```
 *
 * It also allows you to specify paths at multiple levels in a string.
 *
 * ```
 * omitStyle( { typography: { textDecoration: 'underline' } }, 'typography.textDecoration' ); // {}
 * ```
 *
 * You can remove multiple paths at the same time:
 *
 * ```
 * omitStyle(
 * 		{
 * 			typography: {
 * 				textDecoration: 'underline',
 * 				textTransform: 'uppercase',
 * 			}
 *		},
 *		[
 * 			'typography.textDecoration',
 * 			'typography.textTransform',
 *		]
 * );
 * // {}
 * ```
 *
 * You can also specify nested paths as arrays:
 *
 * ```
 * omitStyle(
 * 		{
 * 			typography: {
 * 				textDecoration: 'underline',
 * 				textTransform: 'uppercase',
 * 			}
 *		},
 *		[
 * 			[ 'typography', 'textDecoration' ],
 * 			[ 'typography', 'textTransform' ],
 *		]
 * );
 * // {}
 * ```
 *
 * With regards to nesting of styles, infinite depth is supported:
 *
 * ```
 * omitStyle(
 * 		{
 * 			border: {
 * 				radius: {
 * 					topLeft: '10px',
 * 					topRight: '0.5rem',
 * 				}
 * 			}
 *		},
 *		[
 * 			[ 'border', 'radius', 'topRight' ],
 *		]
 * );
 * // { border: { radius: { topLeft: '10px' } } }
 * ```
 *
 * The third argument, `preserveReference`, defines how to treat the input style object.
 * It is mostly necessary to properly handle mutation when recursively handling the style object.
 * Defaulting to `false`, this will always create a new object, avoiding to mutate `style`.
 * However, when recursing, we change that value to `true` in order to work with a single copy
 * of the original style object.
 *
 * @see https://lodash.com/docs/4.17.15#omit
 *
 * @param {Object}       style             Styles object.
 * @param {Array|string} paths             Paths to remove.
 * @param {boolean}      preserveReference True to mutate the `style` object, false otherwise.
 * @return {Object}      Styles object with the specified paths removed.
 */

function omitStyle(style, paths, preserveReference = false) {
  if (!style) {
    return style;
  }

  let newStyle = style;

  if (!preserveReference) {
    newStyle = JSON.parse(JSON.stringify(style));
  }

  if (!Array.isArray(paths)) {
    paths = [paths];
  }

  paths.forEach(path => {
    if (!Array.isArray(path)) {
      path = path.split('.');
    }

    if (path.length > 1) {
      const [firstSubpath, ...restPath] = path;
      omitStyle(newStyle[firstSubpath], [restPath], true);
    } else if (path.length === 1) {
      delete newStyle[path[0]];
    }
  });
  return newStyle;
}
/**
 * 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.
 * @param {?Record<string, string[]>} skipPaths  An object of keys and paths to skip serialization.
 *
 * @return {Object} Filtered props applied to save element.
 */


function addSaveProps(props, blockType, attributes, skipPaths = skipSerializationPathsSave) {
  if (!hasStyleSupport(blockType)) {
    return props;
  }

  let {
    style
  } = attributes;
  Object.entries(skipPaths).forEach(([indicator, path]) => {
    const skipSerialization = (0, _blocks.getBlockSupport)(blockType, indicator);

    if (skipSerialization === true) {
      style = omitStyle(style, path);
    }

    if (Array.isArray(skipSerialization)) {
      skipSerialization.forEach(featureName => {
        const feature = renamedFeatures[featureName] || featureName;
        style = omitStyle(style, [[...path, feature]]);
      });
    }
  });
  props.style = { ...getInlineStyles(style),
    ...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, skipSerializationPathsEdit);
  };

  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)();
  const blockEditingMode = (0, _blockEditingMode.useBlockEditingMode)();
  return (0, _element.createElement)(_element.Fragment, null, shouldDisplayControls && blockEditingMode === 'default' && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_color.ColorEdit, props), (0, _element.createElement)(_typography.TypographyPanel, props), (0, _element.createElement)(_border.BorderPanel, props), (0, _element.createElement)(_dimensions.DimensionsPanel, props)), (0, _element.createElement)(BlockEdit, props));
}, 'withToolbarControls');
/**
 * Override the default block element to include elements styles.
 *
 * @param {Function} BlockListBlock Original component
 * @return {Function}                Wrapped component
 */

exports.withBlockControls = withBlockControls;
const withElementsStyles = (0, _compose.createHigherOrderComponent)(BlockListBlock => props => {
  const blockElementsContainerIdentifier = `wp-elements-${(0, _compose.useInstanceId)(BlockListBlock)}`;
  const skipLinkColorSerialization = (0, _utils.shouldSkipSerialization)(props.name, _color.COLOR_SUPPORT_KEY, 'link');
  const styles = (0, _element.useMemo)(() => {
    // The .editor-styles-wrapper selector is required on elements styles. As it is
    // added to all other editor styles, not providing it causes reset and global
    // styles to override element styles because of higher specificity.
    const elements = [{
      styles: !skipLinkColorSerialization ? props.attributes.style?.elements?.link : undefined,
      selector: `.editor-styles-wrapper .${blockElementsContainerIdentifier} ${_blocks.__EXPERIMENTAL_ELEMENTS.link}`
    }, {
      styles: !skipLinkColorSerialization ? props.attributes.style?.elements?.link?.[':hover'] : undefined,
      selector: `.editor-styles-wrapper .${blockElementsContainerIdentifier} ${_blocks.__EXPERIMENTAL_ELEMENTS.link}:hover`
    }];
    const elementCssRules = [];

    for (const {
      styles: elementStyles,
      selector
    } of elements) {
      if (elementStyles) {
        const cssRule = (0, _styleEngine.compileCSS)(elementStyles, {
          selector
        });
        elementCssRules.push(cssRule);
      }
    }

    return elementCssRules.length > 0 ? elementCssRules.join('') : undefined;
  }, [props.attributes.style?.elements, blockElementsContainerIdentifier, skipLinkColorSerialization]);
  const element = (0, _element.useContext)(_blockList.default.__unstableElementContext);
  return (0, _element.createElement)(_element.Fragment, null, styles && element && (0, _element.createPortal)((0, _element.createElement)("style", {
    dangerouslySetInnerHTML: {
      __html: styles
    }
  }), element), (0, _element.createElement)(BlockListBlock, (0, _extends2.default)({}, props, {
    className: props.attributes.style?.elements ? (0, _classnames.default)(props.className, blockElementsContainerIdentifier) : props.className
  })));
}, 'withElementsStyles');
(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);
(0, _hooks.addFilter)('editor.BlockListBlock', 'core/editor/with-elements-styles', withElementsStyles);
//# sourceMappingURL=style.js.map