@wordpress/block-library
Version:
Block library for the WordPress editor.
66 lines (65 loc) • 2.71 kB
JavaScript
// packages/block-library/src/gallery/gap-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";
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 GalleryGapCustomProperties({ style, clientId }) {
const selector = `#block-${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 gap = getGalleryGapCustomPropertyStyle(selector, blockGap);
Object.entries(getResponsiveMediaQueries(viewportSettings)).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;
}
gap += `${mediaQuery}{${getGalleryGapCustomPropertyStyle(
selector,
viewportBlockGap
)}}`;
}
);
useStyleOverride({ css: gap });
return null;
}
export {
GalleryGapCustomProperties as default
};
//# sourceMappingURL=gap-styles.mjs.map