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

Block library for the WordPress editor.

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

/**
 * WordPress dependencies
 */
import { BlockList, __experimentalGetGapCSSValue as getGapCSSValue } from '@wordpress/block-editor';
import { useContext, createPortal } from '@wordpress/element';
export default function GapStyles(_ref) {
  let {
    blockGap,
    clientId
  } = _ref;
  const styleElement = useContext(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' ? getGapCSSValue(blockGap) : getGapCSSValue(blockGap === null || blockGap === void 0 ? void 0 : blockGap.top) || fallbackValue;
    column = typeof blockGap === 'string' ? getGapCSSValue(blockGap) : getGapCSSValue(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 createElement("style", null, gap);
  };

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