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

Block library for the WordPress editor.

{
  "version": 3,
  "sources": ["../../src/gallery/gallery-styles.js"],
  "sourcesContent": ["import {\n\t__experimentalGetGapCSSValue as getGapCSSValue,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\tuseStyleOverride,\n\tuseSettings,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';\nimport { unlock } from '../lock-unlock';\nimport { getGalleryResponsiveCSS } from './responsive-styles';\n\nconst { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );\nconst { globalStylesDataKey } = unlock( blockEditorPrivateApis );\nconst GALLERY_BLOCK_NAME = 'core/gallery';\n\n// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default\n// gap on the gallery.\nconst FALLBACK_VALUE = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;\n\nfunction getGalleryGapCustomPropertyStyle( selector, blockGap ) {\n\tlet column = FALLBACK_VALUE;\n\tif ( blockGap ) {\n\t\tcolumn =\n\t\t\ttypeof blockGap === 'string'\n\t\t\t\t? getGapCSSValue( blockGap ) || FALLBACK_VALUE\n\t\t\t\t: getGapCSSValue( blockGap?.left ) || FALLBACK_VALUE;\n\t}\n\n\t// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.\n\treturn `${ selector } {\n\t\t--wp--style--unstable-gallery-gap: ${ column === '0' ? '0px' : column }\n\t}`;\n}\n\nfunction getBlockGapValue( style ) {\n\tif ( ! Object.hasOwn( style?.spacing || {}, 'blockGap' ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn style.spacing.blockGap;\n}\n\n/**\n * Renders the Gallery's instance styles: the gap custom property the Flex\n * layout's column widths are calculated from, and the Gallery's responsive\n * viewport CSS.\n *\n * @param {Object}  props\n * @param {Object}  props.style        Gallery block style attribute.\n * @param {string}  props.clientId     Gallery block client ID.\n * @param {boolean} props.isFlexLayout Whether the Gallery uses the Flex layout.\n */\nexport default function GalleryStyles( { style, clientId, isFlexLayout } ) {\n\tconst selector = `.wp-block-gallery-${ clientId }`;\n\tconst [ viewportSettings ] = useSettings( 'viewport' );\n\tconst globalStyles = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings()?.[ globalStylesDataKey ],\n\t\t[]\n\t);\n\tconst responsiveMediaQueries =\n\t\tgetResponsiveMediaQueries( viewportSettings );\n\tlet css = '';\n\n\t// The gap custom property only drives the Flex layout's column width\n\t// calculations, so it is not emitted for the other Gallery layouts.\n\tif ( isFlexLayout ) {\n\t\tconst globalGalleryStyles =\n\t\t\tglobalStyles?.blocks?.[ GALLERY_BLOCK_NAME ] || {};\n\t\tconst styleBlockGap = getBlockGapValue( style );\n\t\tconst globalGalleryBlockGap =\n\t\t\tglobalGalleryStyles?.spacing?.blockGap ?? FALLBACK_VALUE;\n\t\t// Prefer the block's own gap value, then Gallery global styles. Missing\n\t\t// values fall back to the Gallery blockGap default.\n\t\tconst blockGap =\n\t\t\tstyleBlockGap === undefined ? globalGalleryBlockGap : styleBlockGap;\n\t\tcss += getGalleryGapCustomPropertyStyle( selector, blockGap );\n\n\t\tObject.entries( responsiveMediaQueries ).forEach(\n\t\t\t( [ viewport, mediaQuery ] ) => {\n\t\t\t\tconst styleViewportBlockGap = getBlockGapValue(\n\t\t\t\t\tstyle?.[ viewport ]\n\t\t\t\t);\n\t\t\t\t// Viewport-specific block values win. Gallery global viewport values\n\t\t\t\t// only apply when the block has no base gap, so they do not override an instance value.\n\t\t\t\tconst globalViewportBlockGap =\n\t\t\t\t\tstyleBlockGap === undefined\n\t\t\t\t\t\t? globalGalleryStyles?.[ viewport ]?.spacing?.blockGap\n\t\t\t\t\t\t: undefined;\n\t\t\t\tconst viewportBlockGap =\n\t\t\t\t\tstyleViewportBlockGap === undefined\n\t\t\t\t\t\t? globalViewportBlockGap\n\t\t\t\t\t\t: styleViewportBlockGap;\n\t\t\t\tif (\n\t\t\t\t\tviewportBlockGap === undefined ||\n\t\t\t\t\tviewportBlockGap === null\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tcss += `${ mediaQuery }{${ getGalleryGapCustomPropertyStyle(\n\t\t\t\t\tselector,\n\t\t\t\t\tviewportBlockGap\n\t\t\t\t) }}`;\n\t\t\t}\n\t\t);\n\t}\n\n\t// The column and crop rules are scoped to the Flex layout, so they are\n\t// inert in the other layouts and this can run for every Gallery.\n\tcss += getGalleryResponsiveCSS( selector, style, responsiveMediaQueries );\n\n\tuseStyleOverride( { css } );\n\n\treturn null;\n}\n"],
  "mappings": ";AAAA;AAAA,EACC,gCAAgC;AAAA,EAChC,eAAe;AAAA,EACf,SAAS;AAAA,EACT;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB;AAC1B,SAAS,eAAe,qCAAqC;AAC7D,SAAS,cAAc;AACvB,SAAS,+BAA+B;AAExC,IAAM,EAAE,0BAA0B,IAAI,OAAQ,6BAA8B;AAC5E,IAAM,EAAE,oBAAoB,IAAI,OAAQ,sBAAuB;AAC/D,IAAM,qBAAqB;AAI3B,IAAM,iBAAiB;AAEvB,SAAS,iCAAkC,UAAU,UAAW;AAC/D,MAAI,SAAS;AACb,MAAK,UAAW;AACf,aACC,OAAO,aAAa,WACjB,eAAgB,QAAS,KAAK,iBAC9B,eAAgB,UAAU,IAAK,KAAK;AAAA,EACzC;AAGA,SAAO,GAAI,QAAS;AAAA,uCACmB,WAAW,MAAM,QAAQ,MAAO;AAAA;AAExE;AAEA,SAAS,iBAAkB,OAAQ;AAClC,MAAK,CAAE,OAAO,OAAQ,OAAO,WAAW,CAAC,GAAG,UAAW,GAAI;AAC1D,WAAO;AAAA,EACR;AAEA,SAAO,MAAM,QAAQ;AACtB;AAYe,SAAR,cAAgC,EAAE,OAAO,UAAU,aAAa,GAAI;AAC1E,QAAM,WAAW,qBAAsB,QAAS;AAChD,QAAM,CAAE,gBAAiB,IAAI,YAAa,UAAW;AACrD,QAAM,eAAe;AAAA,IACpB,CAAE,WACD,OAAQ,gBAAiB,EAAE,YAAY,IAAK,mBAAoB;AAAA,IACjE,CAAC;AAAA,EACF;AACA,QAAM,yBACL,0BAA2B,gBAAiB;AAC7C,MAAI,MAAM;AAIV,MAAK,cAAe;AACnB,UAAM,sBACL,cAAc,SAAU,kBAAmB,KAAK,CAAC;AAClD,UAAM,gBAAgB,iBAAkB,KAAM;AAC9C,UAAM,wBACL,qBAAqB,SAAS,YAAY;AAG3C,UAAM,WACL,kBAAkB,SAAY,wBAAwB;AACvD,WAAO,iCAAkC,UAAU,QAAS;AAE5D,WAAO,QAAS,sBAAuB,EAAE;AAAA,MACxC,CAAE,CAAE,UAAU,UAAW,MAAO;AAC/B,cAAM,wBAAwB;AAAA,UAC7B,QAAS,QAAS;AAAA,QACnB;AAGA,cAAM,yBACL,kBAAkB,SACf,sBAAuB,QAAS,GAAG,SAAS,WAC5C;AACJ,cAAM,mBACL,0BAA0B,SACvB,yBACA;AACJ,YACC,qBAAqB,UACrB,qBAAqB,MACpB;AACD;AAAA,QACD;AAEA,eAAO,GAAI,UAAW,IAAK;AAAA,UAC1B;AAAA,UACA;AAAA,QACD,CAAE;AAAA,MACH;AAAA,IACD;AAAA,EACD;AAIA,SAAO,wBAAyB,UAAU,OAAO,sBAAuB;AAExE,mBAAkB,EAAE,IAAI,CAAE;AAE1B,SAAO;AACR;",
  "names": []
}