@wordpress/block-library/build-module/gallery/flex-styles.mjs

Block library for the WordPress editor.

// packages/block-library/src/gallery/flex-styles.js
import {
  __experimentalGetGapCSSValue as getGapCSSValue,
  privateApis as blockEditorPrivateApis,
  store as blockEditorStore,
  useStyleOverride,
  useSettings
} from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import { privateApis as globalStylesEnginePrivateApis } from "@wordpress/global-styles-engine";
import { unlock } from "../lock-unlock.mjs";
import { getGalleryResponsiveFlexCSS } from "./responsive-styles.mjs";
var { getResponsiveMediaQueries } = unlock(globalStylesEnginePrivateApis);
var { globalStylesDataKey } = unlock(blockEditorPrivateApis);
var GALLERY_BLOCK_NAME = "core/gallery";
var FALLBACK_VALUE = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
function getGalleryGapCustomPropertyStyle(selector, blockGap) {
  let column = FALLBACK_VALUE;
  if (blockGap) {
    column = typeof blockGap === "string" ? getGapCSSValue(blockGap) || FALLBACK_VALUE : getGapCSSValue(blockGap?.left) || FALLBACK_VALUE;
  }
  return `${selector} {
		--wp--style--unstable-gallery-gap: ${column === "0" ? "0px" : column}
	}`;
}
function getBlockGapValue(style) {
  if (!Object.hasOwn(style?.spacing || {}, "blockGap")) {
    return void 0;
  }
  return style.spacing.blockGap;
}
function GalleryFlexStyles({ style, clientId }) {
  const selector = `.wp-block-gallery-${clientId}`;
  const [viewportSettings] = useSettings("viewport");
  const globalStyles = useSelect(
    (select) => select(blockEditorStore).getSettings()?.[globalStylesDataKey],
    []
  );
  const globalGalleryStyles = globalStyles?.blocks?.[GALLERY_BLOCK_NAME] || {};
  const styleBlockGap = getBlockGapValue(style);
  const globalGalleryBlockGap = globalGalleryStyles?.spacing?.blockGap ?? FALLBACK_VALUE;
  const blockGap = styleBlockGap === void 0 ? globalGalleryBlockGap : styleBlockGap;
  let css = getGalleryGapCustomPropertyStyle(selector, blockGap);
  const responsiveMediaQueries = getResponsiveMediaQueries(viewportSettings);
  Object.entries(responsiveMediaQueries).forEach(
    ([viewport, mediaQuery]) => {
      const styleViewportBlockGap = getBlockGapValue(
        style?.[viewport]
      );
      const globalViewportBlockGap = styleBlockGap === void 0 ? globalGalleryStyles?.[viewport]?.spacing?.blockGap : void 0;
      const viewportBlockGap = styleViewportBlockGap === void 0 ? globalViewportBlockGap : styleViewportBlockGap;
      if (viewportBlockGap === void 0 || viewportBlockGap === null) {
        return;
      }
      css += `${mediaQuery}{${getGalleryGapCustomPropertyStyle(
        selector,
        viewportBlockGap
      )}}`;
    }
  );
  css += getGalleryResponsiveFlexCSS(
    selector,
    style,
    responsiveMediaQueries
  );
  useStyleOverride({ css });
  return null;
}
export {
  GalleryFlexStyles as default
};
//# sourceMappingURL=flex-styles.mjs.map