@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 7.25 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/gallery/responsive-styles.js"],
"sourcesContent": ["import { MAX_COLUMNS } from './constants';\n\nfunction isObject( value ) {\n\treturn !! value && typeof value === 'object' && ! Array.isArray( value );\n}\n\nexport function isValidGalleryColumns( value ) {\n\treturn Number.isInteger( value ) && value >= 1 && value <= MAX_COLUMNS;\n}\n\n/**\n * Returns Gallery styles for a viewport.\n *\n * @param {Object} style Gallery block style attribute.\n * @param {string} viewport Viewport state.\n * @return {Object} Gallery viewport styles, or an empty object when unavailable.\n */\nexport function getViewportGalleryStyle( style, viewport ) {\n\tif ( ! isObject( style ) || ! isObject( style[ viewport ] ) ) {\n\t\treturn {};\n\t}\n\n\treturn style[ viewport ];\n}\n\nfunction cleanObject( value ) {\n\tif ( ! isObject( value ) ) {\n\t\treturn value;\n\t}\n\n\tconst entries = Object.entries( value ).filter(\n\t\t( [ , entryValue ] ) => entryValue !== undefined\n\t);\n\treturn entries.length ? Object.fromEntries( entries ) : undefined;\n}\n\n/**\n * Updates Gallery layout settings for a viewport without changing base values.\n *\n * @param {Object} options Options.\n * @param {Object} options.style Gallery block style attribute.\n * @param {string} options.viewport Selected viewport state.\n * @param {Object} options.baseSettings Gallery base layout settings.\n * @param {Object} options.settings Gallery layout settings to update.\n * @return {Object|undefined} Updated Gallery style attribute.\n */\nexport function getUpdatedGalleryStyle( {\n\tstyle,\n\tviewport,\n\tbaseSettings,\n\tsettings,\n} ) {\n\tconst currentStyle = isObject( style ) ? style : {};\n\tconst nextViewportStyle = {\n\t\t...getViewportGalleryStyle( currentStyle, viewport ),\n\t};\n\n\tObject.entries( settings ).forEach( ( [ key, value ] ) => {\n\t\tif ( value === undefined || value === baseSettings[ key ] ) {\n\t\t\tdelete nextViewportStyle[ key ];\n\t\t} else {\n\t\t\tnextViewportStyle[ key ] = value;\n\t\t}\n\t} );\n\n\tconst cleanedViewportStyle = cleanObject( nextViewportStyle );\n\tconst nextStyle = { ...currentStyle };\n\tif ( cleanedViewportStyle ) {\n\t\tnextStyle[ viewport ] = cleanedViewportStyle;\n\t} else {\n\t\tdelete nextStyle[ viewport ];\n\t}\n\n\treturn cleanObject( nextStyle );\n}\n\nfunction getGallerySelector( selector ) {\n\treturn `${ selector }.wp-block-gallery.has-nested-images:where(.is-layout-flex)`;\n}\n\nfunction getImageSelector( selector ) {\n\treturn `${ getGallerySelector(\n\t\tselector\n\t) } figure.wp-block-image:not(#individual-image)`;\n}\n\nfunction getColumnsCSS( selector, columns ) {\n\t// Match the fallback used by the Gallery's existing column-width CSS and\n\t// server-rendered responsive styles when the gap custom property is unavailable.\n\tconst width =\n\t\tcolumns === 1\n\t\t\t? '100%'\n\t\t\t: `calc((100% - (var(--wp--style--unstable-gallery-gap, 16px) * ${\n\t\t\t\t\tcolumns - 1\n\t\t\t })) / ${ columns })`;\n\n\treturn `${ getImageSelector( selector ) }{width:${ width } !important;}`;\n}\n\nfunction getImageCropCSS( selector, imageCrop ) {\n\tconst imageSelector = getImageSelector( selector );\n\tconst wrapperSelector = `${ imageSelector } > div:not(.components-drop-zone)`;\n\tconst linkSelector = `${ imageSelector } > a`;\n\tconst mediaSelector = `${ imageSelector } a,${ imageSelector } img`;\n\n\tif ( imageCrop ) {\n\t\treturn `${ imageSelector }{align-self:inherit !important;margin-bottom:0 !important;}${ wrapperSelector },${ linkSelector }{display:flex !important;}${ mediaSelector }{width:100% !important;flex:1 0 0% !important;height:100% !important;object-fit:cover !important;}`;\n\t}\n\n\treturn `${ imageSelector }{align-self:auto !important;margin-top:0 !important;margin-bottom:auto !important;}${ wrapperSelector }{display:block !important;}${ linkSelector }{display:inline-block !important;}${ mediaSelector }{width:auto !important;flex:0 1 auto !important;height:auto !important;object-fit:fill !important;}`;\n}\n\n/**\n * Generates Gallery-specific responsive Flex CSS.\n *\n * @param {string} selector Gallery block selector.\n * @param {Object} style Gallery block style attribute.\n * @param {Object} mediaQueries Map of viewport keys to media queries.\n * @return {string} Responsive Gallery CSS.\n */\nexport function getGalleryResponsiveFlexCSS( selector, style, mediaQueries ) {\n\tif ( ! isObject( mediaQueries ) ) {\n\t\treturn '';\n\t}\n\n\treturn Object.entries( mediaQueries )\n\t\t.map( ( [ viewport, mediaQuery ] ) => {\n\t\t\tif ( typeof mediaQuery !== 'string' ) {\n\t\t\t\treturn '';\n\t\t\t}\n\n\t\t\tconst viewportStyle = getViewportGalleryStyle( style, viewport );\n\t\t\tlet css = '';\n\n\t\t\tif ( isValidGalleryColumns( viewportStyle.columns ) ) {\n\t\t\t\tcss += getColumnsCSS( selector, viewportStyle.columns );\n\t\t\t}\n\n\t\t\tif ( typeof viewportStyle.imageCrop === 'boolean' ) {\n\t\t\t\tcss += getImageCropCSS( selector, viewportStyle.imageCrop );\n\t\t\t}\n\n\t\t\treturn css ? `${ mediaQuery }{${ css }}` : '';\n\t\t} )\n\t\t.join( '' );\n}\n"],
"mappings": "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",
"names": []
}