UNPKG

@wordpress/block-library

Version:
4 lines 81.7 kB
{ "version": 3, "sources": ["../../src/cover/deprecated.js"], "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\nimport {\n\tRichText,\n\tgetColorClassName,\n\tInnerBlocks,\n\t__experimentalGetGradientClass,\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { compose } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tIMAGE_BACKGROUND_TYPE,\n\tVIDEO_BACKGROUND_TYPE,\n\tgetPositionClassName,\n\tisContentPositionCenter,\n\tdimRatioToClass,\n\tmediaPosition,\n} from './shared';\n\nfunction backgroundImageStyles( url ) {\n\treturn url ? { backgroundImage: `url(${ url })` } : {};\n}\n\n/**\n * Original function to determine the background opacity classname\n *\n * Used in deprecations: v1-7.\n *\n * @param {number} ratio ratio to use for opacity.\n * @return {string} background opacity class .\n */\nfunction dimRatioToClassV1( ratio ) {\n\treturn ratio === 0 || ratio === 50 || ! ratio\n\t\t? null\n\t\t: 'has-background-dim-' + 10 * Math.round( ratio / 10 );\n}\n\nfunction migrateDimRatio( attributes ) {\n\treturn {\n\t\t...attributes,\n\t\tdimRatio: ! attributes.url ? 100 : attributes.dimRatio,\n\t};\n}\n\nfunction migrateTag( attributes ) {\n\tif ( ! attributes.tagName ) {\n\t\tattributes = {\n\t\t\t...attributes,\n\t\t\ttagName: 'div',\n\t\t};\n\t}\n\treturn {\n\t\t...attributes,\n\t};\n}\n\nconst blockAttributes = {\n\turl: {\n\t\ttype: 'string',\n\t},\n\tid: {\n\t\ttype: 'number',\n\t},\n\thasParallax: {\n\t\ttype: 'boolean',\n\t\tdefault: false,\n\t},\n\tdimRatio: {\n\t\ttype: 'number',\n\t\tdefault: 50,\n\t},\n\toverlayColor: {\n\t\ttype: 'string',\n\t},\n\tcustomOverlayColor: {\n\t\ttype: 'string',\n\t},\n\tbackgroundType: {\n\t\ttype: 'string',\n\t\tdefault: 'image',\n\t},\n\tfocalPoint: {\n\t\ttype: 'object',\n\t},\n};\n\nconst v8ToV11BlockAttributes = {\n\turl: {\n\t\ttype: 'string',\n\t},\n\tid: {\n\t\ttype: 'number',\n\t},\n\talt: {\n\t\ttype: 'string',\n\t\tsource: 'attribute',\n\t\tselector: 'img',\n\t\tattribute: 'alt',\n\t\tdefault: '',\n\t},\n\thasParallax: {\n\t\ttype: 'boolean',\n\t\tdefault: false,\n\t},\n\tisRepeated: {\n\t\ttype: 'boolean',\n\t\tdefault: false,\n\t},\n\tdimRatio: {\n\t\ttype: 'number',\n\t\tdefault: 100,\n\t},\n\toverlayColor: {\n\t\ttype: 'string',\n\t},\n\tcustomOverlayColor: {\n\t\ttype: 'string',\n\t},\n\tbackgroundType: {\n\t\ttype: 'string',\n\t\tdefault: 'image',\n\t},\n\tfocalPoint: {\n\t\ttype: 'object',\n\t},\n\tminHeight: {\n\t\ttype: 'number',\n\t},\n\tminHeightUnit: {\n\t\ttype: 'string',\n\t},\n\tgradient: {\n\t\ttype: 'string',\n\t},\n\tcustomGradient: {\n\t\ttype: 'string',\n\t},\n\tcontentPosition: {\n\t\ttype: 'string',\n\t},\n\tisDark: {\n\t\ttype: 'boolean',\n\t\tdefault: true,\n\t},\n\tallowedBlocks: {\n\t\ttype: 'array',\n\t},\n\ttemplateLock: {\n\t\ttype: [ 'string', 'boolean' ],\n\t\tenum: [ 'all', 'insert', false ],\n\t},\n};\n\nconst v12toV13BlockAttributes = {\n\t...v8ToV11BlockAttributes,\n\tuseFeaturedImage: {\n\t\ttype: 'boolean',\n\t\tdefault: false,\n\t},\n\ttagName: {\n\t\ttype: 'string',\n\t\tdefault: 'div',\n\t},\n};\n\nconst v14BlockAttributes = {\n\t...v12toV13BlockAttributes,\n\tisUserOverlayColor: {\n\t\ttype: 'boolean',\n\t},\n\tsizeSlug: {\n\t\ttype: 'string',\n\t},\n\talt: {\n\t\ttype: 'string',\n\t\tdefault: '',\n\t},\n};\n\nconst v7toV11BlockSupports = {\n\tanchor: true,\n\talign: true,\n\thtml: false,\n\tspacing: {\n\t\tpadding: true,\n\t\t__experimentalDefaultControls: {\n\t\t\tpadding: true,\n\t\t},\n\t},\n\tcolor: {\n\t\t__experimentalDuotone:\n\t\t\t'> .wp-block-cover__image-background, > .wp-block-cover__video-background',\n\t\ttext: false,\n\t\tbackground: false,\n\t},\n};\n\nconst v12BlockSupports = {\n\t...v7toV11BlockSupports,\n\tspacing: {\n\t\tpadding: true,\n\t\tmargin: [ 'top', 'bottom' ],\n\t\tblockGap: true,\n\t\t__experimentalDefaultControls: {\n\t\t\tpadding: true,\n\t\t\tblockGap: true,\n\t\t},\n\t},\n\t__experimentalBorder: {\n\t\tcolor: true,\n\t\tradius: true,\n\t\tstyle: true,\n\t\twidth: true,\n\t\t__experimentalDefaultControls: {\n\t\t\tcolor: true,\n\t\t\tradius: true,\n\t\t\tstyle: true,\n\t\t\twidth: true,\n\t\t},\n\t},\n\tcolor: {\n\t\t__experimentalDuotone:\n\t\t\t'> .wp-block-cover__image-background, > .wp-block-cover__video-background',\n\t\theading: true,\n\t\ttext: true,\n\t\tbackground: false,\n\t\t__experimentalSkipSerialization: [ 'gradients' ],\n\t\tenableContrastChecker: false,\n\t},\n\ttypography: {\n\t\tfontSize: true,\n\t\tlineHeight: true,\n\t\t__experimentalFontFamily: true,\n\t\t__experimentalFontWeight: true,\n\t\t__experimentalFontStyle: true,\n\t\t__experimentalTextTransform: true,\n\t\t__experimentalTextDecoration: true,\n\t\t__experimentalLetterSpacing: true,\n\t\t__experimentalDefaultControls: {\n\t\t\tfontSize: true,\n\t\t},\n\t},\n\tlayout: {\n\t\tallowJustification: false,\n\t},\n};\n\nconst v14BlockSupports = {\n\t...v12BlockSupports,\n\tshadow: true,\n\tdimensions: {\n\t\taspectRatio: true,\n\t},\n\tinteractivity: {\n\t\tclientNavigation: true,\n\t},\n};\n\n// Deprecation for blocks that have z-index.\nconst v14 = {\n\tattributes: v14BlockAttributes,\n\tsupports: v14BlockSupports,\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcontentPosition,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\tuseFeaturedImage,\n\t\t\thasParallax,\n\t\t\tisDark,\n\t\t\tisRepeated,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\talt,\n\t\t\tid,\n\t\t\tminHeight: minHeightProp,\n\t\t\tminHeightUnit,\n\t\t\ttagName: Tag,\n\t\t\tsizeSlug,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\t\tconst minHeight =\n\t\t\tminHeightProp && minHeightUnit\n\t\t\t\t? `${ minHeightProp }${ minHeightUnit }`\n\t\t\t\t: minHeightProp;\n\n\t\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\t\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\t\tconst isImgElement = ! ( hasParallax || isRepeated );\n\n\t\tconst style = {\n\t\t\tminHeight: minHeight || undefined,\n\t\t};\n\n\t\tconst bgStyle = {\n\t\t\tbackgroundColor: ! overlayColorClass\n\t\t\t\t? customOverlayColor\n\t\t\t\t: undefined,\n\t\t\tbackground: customGradient ? customGradient : undefined,\n\t\t};\n\n\t\tconst objectPosition =\n\t\t\t// prettier-ignore\n\t\t\tfocalPoint && isImgElement\n\t\t\t\t ? mediaPosition(focalPoint)\n\t\t\t\t : undefined;\n\n\t\tconst backgroundImage = url ? `url(${ url })` : undefined;\n\n\t\tconst backgroundPosition = mediaPosition( focalPoint );\n\n\t\tconst classes = clsx(\n\t\t\t{\n\t\t\t\t'is-light': ! isDark,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t\t'has-custom-content-position':\n\t\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t\t},\n\t\t\tgetPositionClassName( contentPosition )\n\t\t);\n\n\t\tconst imgClasses = clsx(\n\t\t\t'wp-block-cover__image-background',\n\t\t\tid ? `wp-image-${ id }` : null,\n\t\t\t{\n\t\t\t\t[ `size-${ sizeSlug }` ]: sizeSlug,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t}\n\t\t);\n\n\t\tconst gradientValue = gradient || customGradient;\n\n\t\treturn (\n\t\t\t<Tag { ...useBlockProps.save( { className: classes, style } ) }>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'wp-block-cover__background',\n\t\t\t\t\t\toverlayColorClass,\n\t\t\t\t\t\tdimRatioToClass( dimRatio ),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-background-dim': dimRatio !== undefined,\n\t\t\t\t\t\t\t// For backwards compatibility. Former versions of the Cover Block applied\n\t\t\t\t\t\t\t// `.wp-block-cover__gradient-background` in the presence of\n\t\t\t\t\t\t\t// media, a gradient and a dim.\n\t\t\t\t\t\t\t'wp-block-cover__gradient-background':\n\t\t\t\t\t\t\t\turl && gradientValue && dimRatio !== 0,\n\t\t\t\t\t\t\t'has-background-gradient': gradientValue,\n\t\t\t\t\t\t\t[ gradientClass ]: gradientClass,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ bgStyle }\n\t\t\t\t/>\n\n\t\t\t\t{ ! useFeaturedImage &&\n\t\t\t\t\tisImageBackground &&\n\t\t\t\t\turl &&\n\t\t\t\t\t( isImgElement ? (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclassName={ imgClasses }\n\t\t\t\t\t\t\talt={ alt }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t\tstyle={ { objectPosition } }\n\t\t\t\t\t\t\tdata-object-fit=\"cover\"\n\t\t\t\t\t\t\tdata-object-position={ objectPosition }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole={ alt ? 'img' : undefined }\n\t\t\t\t\t\t\taria-label={ alt ? alt : undefined }\n\t\t\t\t\t\t\tclassName={ imgClasses }\n\t\t\t\t\t\t\tstyle={ { backgroundPosition, backgroundImage } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t{ isVideoBackground && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__video-background',\n\t\t\t\t\t\t\t'intrinsic-ignore'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tplaysInline\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<div\n\t\t\t\t\t{ ...useInnerBlocksProps.save( {\n\t\t\t\t\t\tclassName: 'wp-block-cover__inner-container',\n\t\t\t\t\t} ) }\n\t\t\t\t/>\n\t\t\t</Tag>\n\t\t);\n\t},\n};\n\n// Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.\nconst v13 = {\n\tattributes: v12toV13BlockAttributes,\n\tsupports: v12BlockSupports,\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcontentPosition,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\tuseFeaturedImage,\n\t\t\thasParallax,\n\t\t\tisDark,\n\t\t\tisRepeated,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\talt,\n\t\t\tid,\n\t\t\tminHeight: minHeightProp,\n\t\t\tminHeightUnit,\n\t\t\ttagName: Tag,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\t\tconst minHeight =\n\t\t\tminHeightProp && minHeightUnit\n\t\t\t\t? `${ minHeightProp }${ minHeightUnit }`\n\t\t\t\t: minHeightProp;\n\n\t\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\t\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\t\tconst isImgElement = ! ( hasParallax || isRepeated );\n\n\t\tconst style = {\n\t\t\tminHeight: minHeight || undefined,\n\t\t};\n\n\t\tconst bgStyle = {\n\t\t\tbackgroundColor: ! overlayColorClass\n\t\t\t\t? customOverlayColor\n\t\t\t\t: undefined,\n\t\t\tbackground: customGradient ? customGradient : undefined,\n\t\t};\n\n\t\tconst objectPosition =\n\t\t\t// prettier-ignore\n\t\t\tfocalPoint && isImgElement\n\t\t\t\t\t ? mediaPosition(focalPoint)\n\t\t\t\t\t : undefined;\n\n\t\tconst backgroundImage = url ? `url(${ url })` : undefined;\n\n\t\tconst backgroundPosition = mediaPosition( focalPoint );\n\n\t\tconst classes = clsx(\n\t\t\t{\n\t\t\t\t'is-light': ! isDark,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t\t'has-custom-content-position':\n\t\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t\t},\n\t\t\tgetPositionClassName( contentPosition )\n\t\t);\n\n\t\tconst imgClasses = clsx(\n\t\t\t'wp-block-cover__image-background',\n\t\t\tid ? `wp-image-${ id }` : null,\n\t\t\t{\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t}\n\t\t);\n\n\t\tconst gradientValue = gradient || customGradient;\n\n\t\treturn (\n\t\t\t<Tag { ...useBlockProps.save( { className: classes, style } ) }>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'wp-block-cover__background',\n\t\t\t\t\t\toverlayColorClass,\n\t\t\t\t\t\tdimRatioToClass( dimRatio ),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-background-dim': dimRatio !== undefined,\n\t\t\t\t\t\t\t// For backwards compatibility. Former versions of the Cover Block applied\n\t\t\t\t\t\t\t// `.wp-block-cover__gradient-background` in the presence of\n\t\t\t\t\t\t\t// media, a gradient and a dim.\n\t\t\t\t\t\t\t'wp-block-cover__gradient-background':\n\t\t\t\t\t\t\t\turl && gradientValue && dimRatio !== 0,\n\t\t\t\t\t\t\t'has-background-gradient': gradientValue,\n\t\t\t\t\t\t\t[ gradientClass ]: gradientClass,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ bgStyle }\n\t\t\t\t/>\n\n\t\t\t\t{ ! useFeaturedImage &&\n\t\t\t\t\tisImageBackground &&\n\t\t\t\t\turl &&\n\t\t\t\t\t( isImgElement ? (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclassName={ imgClasses }\n\t\t\t\t\t\t\talt={ alt }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t\tstyle={ { objectPosition } }\n\t\t\t\t\t\t\tdata-object-fit=\"cover\"\n\t\t\t\t\t\t\tdata-object-position={ objectPosition }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\tclassName={ imgClasses }\n\t\t\t\t\t\t\tstyle={ { backgroundPosition, backgroundImage } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t{ isVideoBackground && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__video-background',\n\t\t\t\t\t\t\t'intrinsic-ignore'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tplaysInline\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<div\n\t\t\t\t\t{ ...useInnerBlocksProps.save( {\n\t\t\t\t\t\tclassName: 'wp-block-cover__inner-container',\n\t\t\t\t\t} ) }\n\t\t\t\t/>\n\t\t\t</Tag>\n\t\t);\n\t},\n};\n\n// Deprecation for blocks to prevent auto overlay color from overriding previously set values.\nconst v12 = {\n\tattributes: v12toV13BlockAttributes,\n\tsupports: v12BlockSupports,\n\tisEligible( attributes ) {\n\t\treturn (\n\t\t\t( attributes.customOverlayColor !== undefined ||\n\t\t\t\tattributes.overlayColor !== undefined ) &&\n\t\t\tattributes.isUserOverlayColor === undefined\n\t\t);\n\t},\n\tmigrate( attributes ) {\n\t\treturn {\n\t\t\t...attributes,\n\t\t\tisUserOverlayColor: true,\n\t\t};\n\t},\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcontentPosition,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\tuseFeaturedImage,\n\t\t\thasParallax,\n\t\t\tisDark,\n\t\t\tisRepeated,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\talt,\n\t\t\tid,\n\t\t\tminHeight: minHeightProp,\n\t\t\tminHeightUnit,\n\t\t\ttagName: Tag,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\t\tconst minHeight =\n\t\t\tminHeightProp && minHeightUnit\n\t\t\t\t? `${ minHeightProp }${ minHeightUnit }`\n\t\t\t\t: minHeightProp;\n\n\t\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\t\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\t\tconst isImgElement = ! ( hasParallax || isRepeated );\n\n\t\tconst style = {\n\t\t\tminHeight: minHeight || undefined,\n\t\t};\n\n\t\tconst bgStyle = {\n\t\t\tbackgroundColor: ! overlayColorClass\n\t\t\t\t? customOverlayColor\n\t\t\t\t: undefined,\n\t\t\tbackground: customGradient ? customGradient : undefined,\n\t\t};\n\n\t\tconst objectPosition =\n\t\t\t// prettier-ignore\n\t\t\tfocalPoint && isImgElement\n\t\t\t ? mediaPosition(focalPoint)\n\t\t\t : undefined;\n\n\t\tconst backgroundImage = url ? `url(${ url })` : undefined;\n\n\t\tconst backgroundPosition = mediaPosition( focalPoint );\n\n\t\tconst classes = clsx(\n\t\t\t{\n\t\t\t\t'is-light': ! isDark,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t\t'has-custom-content-position':\n\t\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t\t},\n\t\t\tgetPositionClassName( contentPosition )\n\t\t);\n\n\t\tconst imgClasses = clsx(\n\t\t\t'wp-block-cover__image-background',\n\t\t\tid ? `wp-image-${ id }` : null,\n\t\t\t{\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t}\n\t\t);\n\n\t\tconst gradientValue = gradient || customGradient;\n\n\t\treturn (\n\t\t\t<Tag { ...useBlockProps.save( { className: classes, style } ) }>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'wp-block-cover__background',\n\t\t\t\t\t\toverlayColorClass,\n\t\t\t\t\t\tdimRatioToClass( dimRatio ),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-background-dim': dimRatio !== undefined,\n\t\t\t\t\t\t\t// For backwards compatibility. Former versions of the Cover Block applied\n\t\t\t\t\t\t\t// `.wp-block-cover__gradient-background` in the presence of\n\t\t\t\t\t\t\t// media, a gradient and a dim.\n\t\t\t\t\t\t\t'wp-block-cover__gradient-background':\n\t\t\t\t\t\t\t\turl && gradientValue && dimRatio !== 0,\n\t\t\t\t\t\t\t'has-background-gradient': gradientValue,\n\t\t\t\t\t\t\t[ gradientClass ]: gradientClass,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ bgStyle }\n\t\t\t\t/>\n\n\t\t\t\t{ ! useFeaturedImage &&\n\t\t\t\t\tisImageBackground &&\n\t\t\t\t\turl &&\n\t\t\t\t\t( isImgElement ? (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclassName={ imgClasses }\n\t\t\t\t\t\t\talt={ alt }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t\tstyle={ { objectPosition } }\n\t\t\t\t\t\t\tdata-object-fit=\"cover\"\n\t\t\t\t\t\t\tdata-object-position={ objectPosition }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\tclassName={ imgClasses }\n\t\t\t\t\t\t\tstyle={ { backgroundPosition, backgroundImage } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t{ isVideoBackground && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__video-background',\n\t\t\t\t\t\t\t'intrinsic-ignore'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tplaysInline\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<div\n\t\t\t\t\t{ ...useInnerBlocksProps.save( {\n\t\t\t\t\t\tclassName: 'wp-block-cover__inner-container',\n\t\t\t\t\t} ) }\n\t\t\t\t/>\n\t\t\t</Tag>\n\t\t);\n\t},\n};\n\n// Deprecation for blocks that does not have a HTML tag option.\nconst v11 = {\n\tattributes: v8ToV11BlockAttributes,\n\tsupports: v7toV11BlockSupports,\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcontentPosition,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\tuseFeaturedImage,\n\t\t\thasParallax,\n\t\t\tisDark,\n\t\t\tisRepeated,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\talt,\n\t\t\tid,\n\t\t\tminHeight: minHeightProp,\n\t\t\tminHeightUnit,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\t\tconst minHeight =\n\t\t\tminHeightProp && minHeightUnit\n\t\t\t\t? `${ minHeightProp }${ minHeightUnit }`\n\t\t\t\t: minHeightProp;\n\n\t\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\t\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\t\tconst isImgElement = ! ( hasParallax || isRepeated );\n\n\t\tconst style = {\n\t\t\tminHeight: minHeight || undefined,\n\t\t};\n\n\t\tconst bgStyle = {\n\t\t\tbackgroundColor: ! overlayColorClass\n\t\t\t\t? customOverlayColor\n\t\t\t\t: undefined,\n\t\t\tbackground: customGradient ? customGradient : undefined,\n\t\t};\n\n\t\tconst objectPosition =\n\t\t\t// prettier-ignore\n\t\t\tfocalPoint && isImgElement\n\t\t\t\t ? mediaPosition(focalPoint)\n\t\t\t\t : undefined;\n\n\t\tconst backgroundImage = url ? `url(${ url })` : undefined;\n\n\t\tconst backgroundPosition = mediaPosition( focalPoint );\n\n\t\tconst classes = clsx(\n\t\t\t{\n\t\t\t\t'is-light': ! isDark,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t\t'has-custom-content-position':\n\t\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t\t},\n\t\t\tgetPositionClassName( contentPosition )\n\t\t);\n\n\t\tconst imgClasses = clsx(\n\t\t\t'wp-block-cover__image-background',\n\t\t\tid ? `wp-image-${ id }` : null,\n\t\t\t{\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t}\n\t\t);\n\n\t\tconst gradientValue = gradient || customGradient;\n\n\t\treturn (\n\t\t\t<div { ...useBlockProps.save( { className: classes, style } ) }>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'wp-block-cover__background',\n\t\t\t\t\t\toverlayColorClass,\n\t\t\t\t\t\tdimRatioToClass( dimRatio ),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-background-dim': dimRatio !== undefined,\n\t\t\t\t\t\t\t// For backwards compatibility. Former versions of the Cover Block applied\n\t\t\t\t\t\t\t// `.wp-block-cover__gradient-background` in the presence of\n\t\t\t\t\t\t\t// media, a gradient and a dim.\n\t\t\t\t\t\t\t'wp-block-cover__gradient-background':\n\t\t\t\t\t\t\t\turl && gradientValue && dimRatio !== 0,\n\t\t\t\t\t\t\t'has-background-gradient': gradientValue,\n\t\t\t\t\t\t\t[ gradientClass ]: gradientClass,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ bgStyle }\n\t\t\t\t/>\n\n\t\t\t\t{ ! useFeaturedImage &&\n\t\t\t\t\tisImageBackground &&\n\t\t\t\t\turl &&\n\t\t\t\t\t( isImgElement ? (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclassName={ imgClasses }\n\t\t\t\t\t\t\talt={ alt }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t\tstyle={ { objectPosition } }\n\t\t\t\t\t\t\tdata-object-fit=\"cover\"\n\t\t\t\t\t\t\tdata-object-position={ objectPosition }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\tclassName={ imgClasses }\n\t\t\t\t\t\t\tstyle={ { backgroundPosition, backgroundImage } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t{ isVideoBackground && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__video-background',\n\t\t\t\t\t\t\t'intrinsic-ignore'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tplaysInline\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<div\n\t\t\t\t\t{ ...useInnerBlocksProps.save( {\n\t\t\t\t\t\tclassName: 'wp-block-cover__inner-container',\n\t\t\t\t\t} ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n\tmigrate: migrateTag,\n};\n\n// Deprecation for blocks that renders fixed background as background from the main block container.\nconst v10 = {\n\tattributes: v8ToV11BlockAttributes,\n\tsupports: v7toV11BlockSupports,\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcontentPosition,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\tuseFeaturedImage,\n\t\t\thasParallax,\n\t\t\tisDark,\n\t\t\tisRepeated,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\talt,\n\t\t\tid,\n\t\t\tminHeight: minHeightProp,\n\t\t\tminHeightUnit,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\t\tconst minHeight =\n\t\t\tminHeightProp && minHeightUnit\n\t\t\t\t? `${ minHeightProp }${ minHeightUnit }`\n\t\t\t\t: minHeightProp;\n\n\t\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\t\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\t\tconst isImgElement = ! ( hasParallax || isRepeated );\n\n\t\tconst style = {\n\t\t\t...( isImageBackground && ! isImgElement && ! useFeaturedImage\n\t\t\t\t? backgroundImageStyles( url )\n\t\t\t\t: {} ),\n\t\t\tminHeight: minHeight || undefined,\n\t\t};\n\n\t\tconst bgStyle = {\n\t\t\tbackgroundColor: ! overlayColorClass\n\t\t\t\t? customOverlayColor\n\t\t\t\t: undefined,\n\t\t\tbackground: customGradient ? customGradient : undefined,\n\t\t};\n\n\t\tconst objectPosition =\n\t\t\t// prettier-ignore\n\t\t\tfocalPoint && isImgElement\n\t\t\t\t ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`\n\t\t\t\t : undefined;\n\n\t\tconst classes = clsx(\n\t\t\t{\n\t\t\t\t'is-light': ! isDark,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t\t'has-custom-content-position':\n\t\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t\t},\n\t\t\tgetPositionClassName( contentPosition )\n\t\t);\n\n\t\tconst gradientValue = gradient || customGradient;\n\n\t\treturn (\n\t\t\t<div { ...useBlockProps.save( { className: classes, style } ) }>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'wp-block-cover__background',\n\t\t\t\t\t\toverlayColorClass,\n\t\t\t\t\t\tdimRatioToClass( dimRatio ),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-background-dim': dimRatio !== undefined,\n\t\t\t\t\t\t\t// For backwards compatibility. Former versions of the Cover Block applied\n\t\t\t\t\t\t\t// `.wp-block-cover__gradient-background` in the presence of\n\t\t\t\t\t\t\t// media, a gradient and a dim.\n\t\t\t\t\t\t\t'wp-block-cover__gradient-background':\n\t\t\t\t\t\t\t\turl && gradientValue && dimRatio !== 0,\n\t\t\t\t\t\t\t'has-background-gradient': gradientValue,\n\t\t\t\t\t\t\t[ gradientClass ]: gradientClass,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ bgStyle }\n\t\t\t\t/>\n\n\t\t\t\t{ ! useFeaturedImage &&\n\t\t\t\t\tisImageBackground &&\n\t\t\t\t\tisImgElement &&\n\t\t\t\t\turl && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'wp-block-cover__image-background',\n\t\t\t\t\t\t\t\tid ? `wp-image-${ id }` : null\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\talt={ alt }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t\tstyle={ { objectPosition } }\n\t\t\t\t\t\t\tdata-object-fit=\"cover\"\n\t\t\t\t\t\t\tdata-object-position={ objectPosition }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t{ isVideoBackground && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__video-background',\n\t\t\t\t\t\t\t'intrinsic-ignore'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tplaysInline\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<div\n\t\t\t\t\t{ ...useInnerBlocksProps.save( {\n\t\t\t\t\t\tclassName: 'wp-block-cover__inner-container',\n\t\t\t\t\t} ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n\tmigrate: migrateTag,\n};\n\n// Deprecation for blocks with `minHeightUnit` set but no `minHeight`.\nconst v9 = {\n\tattributes: v8ToV11BlockAttributes,\n\tsupports: v7toV11BlockSupports,\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcontentPosition,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\thasParallax,\n\t\t\tisDark,\n\t\t\tisRepeated,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\talt,\n\t\t\tid,\n\t\t\tminHeight: minHeightProp,\n\t\t\tminHeightUnit,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\t\tconst minHeight = minHeightUnit\n\t\t\t? `${ minHeightProp }${ minHeightUnit }`\n\t\t\t: minHeightProp;\n\n\t\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\t\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\t\tconst isImgElement = ! ( hasParallax || isRepeated );\n\n\t\tconst style = {\n\t\t\t...( isImageBackground && ! isImgElement\n\t\t\t\t? backgroundImageStyles( url )\n\t\t\t\t: {} ),\n\t\t\tminHeight: minHeight || undefined,\n\t\t};\n\n\t\tconst bgStyle = {\n\t\t\tbackgroundColor: ! overlayColorClass\n\t\t\t\t? customOverlayColor\n\t\t\t\t: undefined,\n\t\t\tbackground: customGradient ? customGradient : undefined,\n\t\t};\n\n\t\tconst objectPosition =\n\t\t\t// prettier-ignore\n\t\t\tfocalPoint && isImgElement\n\t\t\t\t ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`\n\t\t\t\t : undefined;\n\n\t\tconst classes = clsx(\n\t\t\t{\n\t\t\t\t'is-light': ! isDark,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t\t'has-custom-content-position':\n\t\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t\t},\n\t\t\tgetPositionClassName( contentPosition )\n\t\t);\n\n\t\tconst gradientValue = gradient || customGradient;\n\n\t\treturn (\n\t\t\t<div { ...useBlockProps.save( { className: classes, style } ) }>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'wp-block-cover__background',\n\t\t\t\t\t\toverlayColorClass,\n\t\t\t\t\t\tdimRatioToClass( dimRatio ),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-background-dim': dimRatio !== undefined,\n\t\t\t\t\t\t\t// For backwards compatibility. Former versions of the Cover Block applied\n\t\t\t\t\t\t\t// `.wp-block-cover__gradient-background` in the presence of\n\t\t\t\t\t\t\t// media, a gradient and a dim.\n\t\t\t\t\t\t\t'wp-block-cover__gradient-background':\n\t\t\t\t\t\t\t\turl && gradientValue && dimRatio !== 0,\n\t\t\t\t\t\t\t'has-background-gradient': gradientValue,\n\t\t\t\t\t\t\t[ gradientClass ]: gradientClass,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ bgStyle }\n\t\t\t\t/>\n\n\t\t\t\t{ isImageBackground && isImgElement && url && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__image-background',\n\t\t\t\t\t\t\tid ? `wp-image-${ id }` : null\n\t\t\t\t\t\t) }\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{ isVideoBackground && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__video-background',\n\t\t\t\t\t\t\t'intrinsic-ignore'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tplaysInline\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<div\n\t\t\t\t\t{ ...useInnerBlocksProps.save( {\n\t\t\t\t\t\tclassName: 'wp-block-cover__inner-container',\n\t\t\t\t\t} ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n\tmigrate: migrateTag,\n};\n\n// v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.\nconst v8 = {\n\tattributes: v8ToV11BlockAttributes,\n\tsupports: v7toV11BlockSupports,\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcontentPosition,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\thasParallax,\n\t\t\tisDark,\n\t\t\tisRepeated,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\talt,\n\t\t\tid,\n\t\t\tminHeight: minHeightProp,\n\t\t\tminHeightUnit,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\t\tconst minHeight = minHeightUnit\n\t\t\t? `${ minHeightProp }${ minHeightUnit }`\n\t\t\t: minHeightProp;\n\n\t\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\t\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\t\tconst isImgElement = ! ( hasParallax || isRepeated );\n\n\t\tconst style = {\n\t\t\t...( isImageBackground && ! isImgElement\n\t\t\t\t? backgroundImageStyles( url )\n\t\t\t\t: {} ),\n\t\t\tminHeight: minHeight || undefined,\n\t\t};\n\n\t\tconst bgStyle = {\n\t\t\tbackgroundColor: ! overlayColorClass\n\t\t\t\t? customOverlayColor\n\t\t\t\t: undefined,\n\t\t\tbackground: customGradient ? customGradient : undefined,\n\t\t};\n\n\t\tconst objectPosition =\n\t\t\t// prettier-ignore\n\t\t\tfocalPoint && isImgElement\n\t\t\t\t ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`\n\t\t\t\t : undefined;\n\n\t\tconst classes = clsx(\n\t\t\t{\n\t\t\t\t'is-light': ! isDark,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t\t'has-custom-content-position':\n\t\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t\t},\n\t\t\tgetPositionClassName( contentPosition )\n\t\t);\n\n\t\treturn (\n\t\t\t<div { ...useBlockProps.save( { className: classes, style } ) }>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\toverlayColorClass,\n\t\t\t\t\t\tdimRatioToClass( dimRatio ),\n\t\t\t\t\t\t'wp-block-cover__gradient-background',\n\t\t\t\t\t\tgradientClass,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-background-dim': dimRatio !== undefined,\n\t\t\t\t\t\t\t'has-background-gradient':\n\t\t\t\t\t\t\t\tgradient || customGradient,\n\t\t\t\t\t\t\t[ gradientClass ]: ! url && gradientClass,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ bgStyle }\n\t\t\t\t/>\n\n\t\t\t\t{ isImageBackground && isImgElement && url && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__image-background',\n\t\t\t\t\t\t\tid ? `wp-image-${ id }` : null\n\t\t\t\t\t\t) }\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{ isVideoBackground && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__video-background',\n\t\t\t\t\t\t\t'intrinsic-ignore'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tplaysInline\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<div\n\t\t\t\t\t{ ...useInnerBlocksProps.save( {\n\t\t\t\t\t\tclassName: 'wp-block-cover__inner-container',\n\t\t\t\t\t} ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n\tmigrate: migrateTag,\n};\n\nconst v7 = {\n\tattributes: {\n\t\t...blockAttributes,\n\t\tisRepeated: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t\tminHeight: {\n\t\t\ttype: 'number',\n\t\t},\n\t\tminHeightUnit: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tgradient: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tcustomGradient: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tcontentPosition: {\n\t\t\ttype: 'string',\n\t\t},\n\t\talt: {\n\t\t\ttype: 'string',\n\t\t\tsource: 'attribute',\n\t\t\tselector: 'img',\n\t\t\tattribute: 'alt',\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tsupports: v7toV11BlockSupports,\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcontentPosition,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\thasParallax,\n\t\t\tisRepeated,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\talt,\n\t\t\tid,\n\t\t\tminHeight: minHeightProp,\n\t\t\tminHeightUnit,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\t\tconst minHeight = minHeightUnit\n\t\t\t? `${ minHeightProp }${ minHeightUnit }`\n\t\t\t: minHeightProp;\n\n\t\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\t\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\t\tconst isImgElement = ! ( hasParallax || isRepeated );\n\n\t\tconst style = {\n\t\t\t...( isImageBackground && ! isImgElement\n\t\t\t\t? backgroundImageStyles( url )\n\t\t\t\t: {} ),\n\t\t\tbackgroundColor: ! overlayColorClass\n\t\t\t\t? customOverlayColor\n\t\t\t\t: undefined,\n\t\t\tbackground: customGradient && ! url ? customGradient : undefined,\n\t\t\tminHeight: minHeight || undefined,\n\t\t};\n\n\t\tconst objectPosition =\n\t\t\t// prettier-ignore\n\t\t\tfocalPoint && isImgElement\n\t\t\t\t\t? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`\n\t\t\t\t\t: undefined;\n\n\t\tconst classes = clsx(\n\t\t\tdimRatioToClassV1( dimRatio ),\n\t\t\toverlayColorClass,\n\t\t\t{\n\t\t\t\t'has-background-dim': dimRatio !== 0,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t\t'has-background-gradient': gradient || customGradient,\n\t\t\t\t[ gradientClass ]: ! url && gradientClass,\n\t\t\t\t'has-custom-content-position':\n\t\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t\t},\n\t\t\tgetPositionClassName( contentPosition )\n\t\t);\n\n\t\treturn (\n\t\t\t<div { ...useBlockProps.save( { className: classes, style } ) }>\n\t\t\t\t{ url && ( gradient || customGradient ) && dimRatio !== 0 && (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__gradient-background',\n\t\t\t\t\t\t\tgradientClass\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tcustomGradient\n\t\t\t\t\t\t\t\t? { background: customGradient }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ isImageBackground && isImgElement && url && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__image-background',\n\t\t\t\t\t\t\tid ? `wp-image-${ id }` : null\n\t\t\t\t\t\t) }\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{ isVideoBackground && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__video-background',\n\t\t\t\t\t\t\t'intrinsic-ignore'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tplaysInline\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<div className=\"wp-block-cover__inner-container\">\n\t\t\t\t\t<InnerBlocks.Content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n\tmigrate: compose( migrateDimRatio, migrateTag ),\n};\n\nconst v6 = {\n\tattributes: {\n\t\t...blockAttributes,\n\t\tisRepeated: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t\tminHeight: {\n\t\t\ttype: 'number',\n\t\t},\n\t\tminHeightUnit: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tgradient: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tcustomGradient: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tcontentPosition: {\n\t\t\ttype: 'string',\n\t\t},\n\t},\n\tsupports: {\n\t\talign: true,\n\t},\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcontentPosition,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\thasParallax,\n\t\t\tisRepeated,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\tminHeight: minHeightProp,\n\t\t\tminHeightUnit,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\t\tconst minHeight = minHeightUnit\n\t\t\t? `${ minHeightProp }${ minHeightUnit }`\n\t\t\t: minHeightProp;\n\n\t\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\t\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\t\tconst style = isImageBackground ? backgroundImageStyles( url ) : {};\n\t\tconst videoStyle = {};\n\n\t\tif ( ! overlayColorClass ) {\n\t\t\tstyle.backgroundColor = customOverlayColor;\n\t\t}\n\n\t\tif ( customGradient && ! url ) {\n\t\t\tstyle.background = customGradient;\n\t\t}\n\t\tstyle.minHeight = minHeight || undefined;\n\n\t\tlet positionValue;\n\n\t\tif ( focalPoint ) {\n\t\t\tpositionValue = `${ Math.round(\n\t\t\t\tfocalPoint.x * 100\n\t\t\t) }% ${ Math.round( focalPoint.y * 100 ) }%`;\n\n\t\t\tif ( isImageBackground && ! hasParallax ) {\n\t\t\t\tstyle.backgroundPosition = positionValue;\n\t\t\t}\n\n\t\t\tif ( isVideoBackground ) {\n\t\t\t\tvideoStyle.objectPosition = positionValue;\n\t\t\t}\n\t\t}\n\n\t\tconst classes = clsx(\n\t\t\tdimRatioToClassV1( dimRatio ),\n\t\t\toverlayColorClass,\n\t\t\t{\n\t\t\t\t'has-background-dim': dimRatio !== 0,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'is-repeated': isRepeated,\n\t\t\t\t'has-background-gradient': gradient || customGradient,\n\t\t\t\t[ gradientClass ]: ! url && gradientClass,\n\t\t\t\t'has-custom-content-position':\n\t\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t\t},\n\t\t\tgetPositionClassName( contentPosition )\n\t\t);\n\n\t\treturn (\n\t\t\t<div { ...useBlockProps.save( { className: classes, style } ) }>\n\t\t\t\t{ url && ( gradient || customGradient ) && dimRatio !== 0 && (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__gradient-background',\n\t\t\t\t\t\t\tgradientClass\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tcustomGradient\n\t\t\t\t\t\t\t\t? { background: customGradient }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ isVideoBackground && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName=\"wp-block-cover__video-background\"\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tplaysInline\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\tstyle={ videoStyle }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<div className=\"wp-block-cover__inner-container\">\n\t\t\t\t\t<InnerBlocks.Content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n\tmigrate: compose( migrateDimRatio, migrateTag ),\n};\n\nconst v5 = {\n\tattributes: {\n\t\t...blockAttributes,\n\t\tminHeight: {\n\t\t\ttype: 'number',\n\t\t},\n\t\tgradient: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tcustomGradient: {\n\t\t\ttype: 'string',\n\t\t},\n\t},\n\tsupports: {\n\t\talign: true,\n\t},\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\thasParallax,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\tminHeight,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\n\t\tconst style =\n\t\t\tbackgroundType === IMAGE_BACKGROUND_TYPE\n\t\t\t\t? backgroundImageStyles( url )\n\t\t\t\t: {};\n\t\tif ( ! overlayColorClass ) {\n\t\t\tstyle.backgroundColor = customOverlayColor;\n\t\t}\n\t\tif ( focalPoint && ! hasParallax ) {\n\t\t\tstyle.backgroundPosition = `${ Math.round(\n\t\t\t\tfocalPoint.x * 100\n\t\t\t) }% ${ Math.round( focalPoint.y * 100 ) }%`;\n\t\t}\n\t\tif ( customGradient && ! url ) {\n\t\t\tstyle.background = customGradient;\n\t\t}\n\t\tstyle.minHeight = minHeight || undefined;\n\n\t\tconst classes = clsx(\n\t\t\tdimRatioToClassV1( dimRatio ),\n\t\t\toverlayColorClass,\n\t\t\t{\n\t\t\t\t'has-background-dim': dimRatio !== 0,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'has-background-gradient': customGradient,\n\t\t\t\t[ gradientClass ]: ! url && gradientClass,\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<div className={ classes } style={ style }>\n\t\t\t\t{ url && ( gradient || customGradient ) && dimRatio !== 0 && (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__gradient-background',\n\t\t\t\t\t\t\tgradientClass\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tcustomGradient\n\t\t\t\t\t\t\t\t? { background: customGradient }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ VIDEO_BACKGROUND_TYPE === backgroundType && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName=\"wp-block-cover__video-background\"\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<div className=\"wp-block-cover__inner-container\">\n\t\t\t\t\t<InnerBlocks.Content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n\tmigrate: compose( migrateDimRatio, migrateTag ),\n};\n\nconst v4 = {\n\tattributes: {\n\t\t...blockAttributes,\n\t\tminHeight: {\n\t\t\ttype: 'number',\n\t\t},\n\t\tgradient: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tcustomGradient: {\n\t\t\ttype: 'string',\n\t\t},\n\t},\n\tsupports: {\n\t\talign: true,\n\t},\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tgradient,\n\t\t\tcustomGradient,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\thasParallax,\n\t\t\toverlayColor,\n\t\t\turl,\n\t\t\tminHeight,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst gradientClass = __experimentalGetGradientClass( gradient );\n\n\t\tconst style =\n\t\t\tbackgroundType === IMAGE_BACKGROUND_TYPE\n\t\t\t\t? backgroundImageStyles( url )\n\t\t\t\t: {};\n\t\tif ( ! overlayColorClass ) {\n\t\t\tstyle.backgroundColor = customOverlayColor;\n\t\t}\n\t\tif ( focalPoint && ! hasParallax ) {\n\t\t\tstyle.backgroundPosition = `${ focalPoint.x * 100 }% ${\n\t\t\t\tfocalPoint.y * 100\n\t\t\t}%`;\n\t\t}\n\t\tif ( customGradient && ! url ) {\n\t\t\tstyle.background = customGradient;\n\t\t}\n\t\tstyle.minHeight = minHeight || undefined;\n\n\t\tconst classes = clsx(\n\t\t\tdimRatioToClassV1( dimRatio ),\n\t\t\toverlayColorClass,\n\t\t\t{\n\t\t\t\t'has-background-dim': dimRatio !== 0,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t'has-background-gradient': customGradient,\n\t\t\t\t[ gradientClass ]: ! url && gradientClass,\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<div className={ classes } style={ style }>\n\t\t\t\t{ url && ( gradient || customGradient ) && dimRatio !== 0 && (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'wp-block-cover__gradient-background',\n\t\t\t\t\t\t\tgradientClass\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tcustomGradient\n\t\t\t\t\t\t\t\t? { background: customGradient }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ VIDEO_BACKGROUND_TYPE === backgroundType && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName=\"wp-block-cover__video-background\"\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<div className=\"wp-block-cover__inner-container\">\n\t\t\t\t\t<InnerBlocks.Content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n\tmigrate: compose( migrateDimRatio, migrateTag ),\n};\n\nconst v3 = {\n\tattributes: {\n\t\t...blockAttributes,\n\t\ttitle: {\n\t\t\ttype: 'string',\n\t\t\tsource: 'html',\n\t\t\tselector: 'p',\n\t\t},\n\t\tcontentAlign: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'center',\n\t\t},\n\t},\n\tsupports: {\n\t\talign: true,\n\t},\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tcontentAlign,\n\t\t\tcustomOverlayColor,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\thasParallax,\n\t\t\toverlayColor,\n\t\t\ttitle,\n\t\t\turl,\n\t\t} = attributes;\n\t\tconst overlayColorClass = getColorClassName(\n\t\t\t'background-color',\n\t\t\toverlayColor\n\t\t);\n\t\tconst style =\n\t\t\tbackgroundType === IMAGE_BACKGROUND_TYPE\n\t\t\t\t? backgroundImageStyles( url )\n\t\t\t\t: {};\n\t\tif ( ! overlayColorClass ) {\n\t\t\tstyle.backgroundColor = customOverlayColor;\n\t\t}\n\t\tif ( focalPoint && ! hasParallax ) {\n\t\t\tstyle.backgroundPosition = `${ focalPoint.x * 100 }% ${\n\t\t\t\tfocalPoint.y * 100\n\t\t\t}%`;\n\t\t}\n\n\t\tconst classes = clsx(\n\t\t\tdimRatioToClassV1( dimRatio ),\n\t\t\toverlayColorClass,\n\t\t\t{\n\t\t\t\t'has-background-dim': dimRatio !== 0,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t\t[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<div className={ classes } style={ style }>\n\t\t\t\t{ VIDEO_BACKGROUND_TYPE === backgroundType && url && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tclassName=\"wp-block-cover__video-background\"\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! RichText.isEmpty( title ) && (\n\t\t\t\t\t<RichText.Content\n\t\t\t\t\t\ttagName=\"p\"\n\t\t\t\t\t\tclassName=\"wp-block-cover-text\"\n\t\t\t\t\t\tvalue={ title }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t},\n\tmigrate( attributes ) {\n\t\tconst newAttribs = {\n\t\t\t...attributes,\n\t\t\tdimRatio: ! attributes.url ? 100 : attributes.dimRatio,\n\t\t\ttagName: ! attributes.tagName ? 'div' : attributes.tagName,\n\t\t};\n\n\t\tconst { title, contentAlign, ...restAttributes } = newAttribs;\n\n\t\treturn [\n\t\t\trestAttributes,\n\t\t\t[\n\t\t\t\tcreateBlock( 'core/paragraph', {\n\t\t\t\t\tcontent: attributes.title,\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\ttypography: {\n\t\t\t\t\t\t\ttextAlign: attributes.contentAlign,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tplaceholder: __( 'Write title\u2026' ),\n\t\t\t\t} ),\n\t\t\t],\n\t\t];\n\t},\n};\n\nconst v2 = {\n\tattributes: {\n\t\t...blockAttributes,\n\t\ttitle: {\n\t\t\ttype: 'string',\n\t\t\tsource: 'html',\n\t\t\tselector: 'p',\n\t\t},\n\t\tcontentAlign: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'center',\n\t\t},\n\t\talign: {\n\t\t\ttype: 'string',\n\t\t},\n\t},\n\tsupports: {\n\t\tclassName: false,\n\t},\n\tsave( { attributes } ) {\n\t\tconst {\n\t\t\turl,\n\t\t\ttitle,\n\t\t\thasParallax,\n\t\t\tdimRatio,\n\t\t\talign,\