UNPKG

@wordpress/block-library

Version:
8 lines (7 loc) 7.91 kB
{ "version": 3, "sources": ["../../src/cover/save.js"], "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseInnerBlocksProps,\n\tgetColorClassName,\n\t__experimentalGetGradientClass,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport {\n\tIMAGE_BACKGROUND_TYPE,\n\tVIDEO_BACKGROUND_TYPE,\n\tEMBED_VIDEO_BACKGROUND_TYPE,\n\tdimRatioToClass,\n\tisContentPositionCenter,\n\tgetPositionClassName,\n\tmediaPosition,\n} from './shared';\n\nexport default function save( { attributes } ) {\n\tconst {\n\t\tbackgroundType,\n\t\tgradient,\n\t\tcontentPosition,\n\t\tcustomGradient,\n\t\tcustomOverlayColor,\n\t\tdimRatio,\n\t\tfocalPoint,\n\t\tuseFeaturedImage,\n\t\thasParallax,\n\t\tisDark,\n\t\tisRepeated,\n\t\toverlayColor,\n\t\turl,\n\t\talt,\n\t\tid,\n\t\tminHeight: minHeightProp,\n\t\tminHeightUnit,\n\t\ttagName: Tag,\n\t\tsizeSlug,\n\t\tposter,\n\t} = attributes;\n\tconst overlayColorClass = getColorClassName(\n\t\t'background-color',\n\t\toverlayColor\n\t);\n\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\tconst minHeight =\n\t\tminHeightProp && minHeightUnit\n\t\t\t? `${ minHeightProp }${ minHeightUnit }`\n\t\t\t: minHeightProp;\n\n\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\tconst isEmbedVideoBackground =\n\t\tEMBED_VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\tconst isImgElement = ! ( hasParallax || isRepeated );\n\n\tconst style = {\n\t\tminHeight: minHeight || undefined,\n\t};\n\n\tconst bgStyle = {\n\t\tbackgroundColor: ! overlayColorClass ? customOverlayColor : undefined,\n\t\tbackground: customGradient ? customGradient : undefined,\n\t};\n\n\tconst objectPosition =\n\t\t// prettier-ignore\n\t\tfocalPoint && isImgElement\n\t\t\t ? mediaPosition(focalPoint)\n\t\t\t : undefined;\n\n\tconst backgroundImage = url ? `url(${ url })` : undefined;\n\n\tconst backgroundPosition = mediaPosition( focalPoint );\n\n\tconst classes = clsx(\n\t\t{\n\t\t\t'is-light': ! isDark,\n\t\t\t'has-parallax': hasParallax,\n\t\t\t'is-repeated': isRepeated,\n\t\t\t'has-custom-content-position':\n\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t},\n\t\tgetPositionClassName( contentPosition )\n\t);\n\n\tconst imgClasses = clsx(\n\t\t'wp-block-cover__image-background',\n\t\tid ? `wp-image-${ id }` : null,\n\t\t{\n\t\t\t[ `size-${ sizeSlug }` ]: sizeSlug,\n\t\t\t'has-parallax': hasParallax,\n\t\t\t'is-repeated': isRepeated,\n\t\t}\n\t);\n\n\tconst gradientValue = gradient || customGradient;\n\n\treturn (\n\t\t<Tag { ...useBlockProps.save( { className: classes, style } ) }>\n\t\t\t{ ! useFeaturedImage &&\n\t\t\t\tisImageBackground &&\n\t\t\t\turl &&\n\t\t\t\t( isImgElement ? (\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName={ imgClasses }\n\t\t\t\t\t\talt={ alt }\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\tstyle={ { objectPosition } }\n\t\t\t\t\t\tdata-object-fit=\"cover\"\n\t\t\t\t\t\tdata-object-position={ objectPosition }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\trole={ alt ? 'img' : undefined }\n\t\t\t\t\t\taria-label={ alt ? alt : undefined }\n\t\t\t\t\t\tclassName={ imgClasses }\n\t\t\t\t\t\tstyle={ { backgroundPosition, backgroundImage } }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ isVideoBackground && url && (\n\t\t\t\t<video\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'wp-block-cover__video-background',\n\t\t\t\t\t\t'intrinsic-ignore'\n\t\t\t\t\t) }\n\t\t\t\t\tautoPlay\n\t\t\t\t\tmuted\n\t\t\t\t\tloop\n\t\t\t\t\tplaysInline\n\t\t\t\t\tsrc={ url }\n\t\t\t\t\tposter={ poster }\n\t\t\t\t\tstyle={ { objectPosition } }\n\t\t\t\t\tdata-object-fit=\"cover\"\n\t\t\t\t\tdata-object-position={ objectPosition }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isEmbedVideoBackground && url && (\n\t\t\t\t<figure\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'wp-block-cover__video-background',\n\t\t\t\t\t\t'wp-block-cover__embed-background',\n\t\t\t\t\t\t'wp-block-embed'\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"wp-block-embed__wrapper\">{ url }</div>\n\t\t\t\t</figure>\n\t\t\t) }\n\n\t\t\t{ /* The `wp-block-cover__background` needs to be immediately before\n\t\t\tthe `wp-block-cover__inner-container`, so the exclusion CSS selector\n\t\t\t`.wp-block-cover__background + .wp-block-cover__inner-container`\n\t\t\tworks properly. If it needs to be changed in the future, the\n\t\t\tselector for the backward compatibility for v14 deprecation also\n\t\t\tneeds change. */ }\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'wp-block-cover__background',\n\t\t\t\t\toverlayColorClass,\n\t\t\t\t\tdimRatioToClass( dimRatio ),\n\t\t\t\t\t{\n\t\t\t\t\t\t'has-background-dim': dimRatio !== undefined,\n\t\t\t\t\t\t// For backwards compatibility. Former versions of the Cover Block applied\n\t\t\t\t\t\t// `.wp-block-cover__gradient-background` in the presence of\n\t\t\t\t\t\t// media, a gradient and a dim.\n\t\t\t\t\t\t'wp-block-cover__gradient-background':\n\t\t\t\t\t\t\turl && gradientValue && dimRatio !== 0,\n\t\t\t\t\t\t'has-background-gradient': gradientValue,\n\t\t\t\t\t\t[ gradientClass ]: gradientClass,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tstyle={ bgStyle }\n\t\t\t/>\n\n\t\t\t<div\n\t\t\t\t{ ...useInnerBlocksProps.save( {\n\t\t\t\t\tclassName: 'wp-block-cover__inner-container',\n\t\t\t\t} ) }\n\t\t\t/>\n\t\t</Tag>\n\t);\n}\n"], "mappings": "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", "names": [] }