@wordpress/block-library/build/gallery/gap-styles.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = GapStyles;

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

var _blockEditor = require("@wordpress/block-editor");

/**
 * WordPress dependencies
 */
function GapStyles(_ref) {
  let {
    blockGap,
    clientId
  } = _ref;
  const styleElement = (0, _element.useContext)(_blockEditor.BlockList.__unstableElementContext); // --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
  // gap on the gallery.

  const fallbackValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
  let gapValue = fallbackValue;
  let column = fallbackValue;
  let row; // Check for the possibility of split block gap values. See: https://github.com/WordPress/gutenberg/pull/37736

  if (!!blockGap) {
    row = typeof blockGap === 'string' ? (0, _blockEditor.__experimentalGetGapCSSValue)(blockGap) : (0, _blockEditor.__experimentalGetGapCSSValue)(blockGap === null || blockGap === void 0 ? void 0 : blockGap.top) || fallbackValue;
    column = typeof blockGap === 'string' ? (0, _blockEditor.__experimentalGetGapCSSValue)(blockGap) : (0, _blockEditor.__experimentalGetGapCSSValue)(blockGap === null || blockGap === void 0 ? void 0 : blockGap.left) || fallbackValue;
    gapValue = row === column ? row : `${row} ${column}`;
  } // The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.


  const gap = `#block-${clientId} {
		--wp--style--unstable-gallery-gap: ${column === '0' ? '0px' : column};
		gap: ${gapValue}
	}`;

  const GapStyle = () => {
    return (0, _element.createElement)("style", null, gap);
  };

  return gap && styleElement ? (0, _element.createPortal)((0, _element.createElement)(GapStyle, null), styleElement) : null;
}
//# sourceMappingURL=gap-styles.js.map