From 151e5ef9421e0ef8b017c66311a055251f269867 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 26 May 2023 08:41:42 +0200
Subject: [PATCH 1/9] Cover: Add aria-label to fixed and repeated backgrounds

---
 packages/block-library/src/cover/block.json   |  3 --
 .../block-library/src/cover/edit/index.js     |  3 +-
 .../src/cover/edit/inspector-controls.js      | 44 ++++++++-----------
 packages/block-library/src/cover/save.js      |  3 +-
 4 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index f7e117add40658..fe20083239f3d1 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -19,9 +19,6 @@
 		},
 		"alt": {
 			"type": "string",
-			"source": "attribute",
-			"selector": "img",
-			"attribute": "alt",
 			"default": ""
 		},
 		"hasParallax": {
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index cbb8ac4e4891b1..c0c324dd6dcaa5 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -380,7 +380,8 @@ function CoverEdit( {
 					) : (
 						<div
 							ref={ mediaElement }
-							role="img"
+							role={ alt ? 'img' : undefined }
+							aria-label={ alt ? alt : undefined }
 							className={ classnames(
 								classes,
 								'wp-block-cover__image-background'
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index d5a692350993fd..0f97584f14853e 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -110,7 +110,6 @@ export default function CoverInspectorControls( {
 		isImageBackground,
 		mediaElement,
 		url,
-		isImgElement,
 		overlayColor,
 	} = currentSettings;
 
@@ -200,32 +199,27 @@ export default function CoverInspectorControls( {
 								}
 							/>
 						) }
-						{ ! useFeaturedImage &&
-							url &&
-							isImageBackground &&
-							isImgElement && (
-								<TextareaControl
-									__nextHasNoMarginBottom
-									label={ __( 'Alternative text' ) }
-									value={ alt }
-									onChange={ ( newAlt ) =>
-										setAttributes( { alt: newAlt } )
-									}
-									help={
-										<>
-											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
-												{ __(
-													'Describe the purpose of the image.'
-												) }
-											</ExternalLink>
-											<br />
+						{ ! useFeaturedImage && url && (
+							<TextareaControl
+								__nextHasNoMarginBottom
+								label={ __( 'Alternative text' ) }
+								value={ alt }
+								onChange={ ( newAlt ) =>
+									setAttributes( { alt: newAlt } )
+								}
+								help={
+									<>
+										<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
 											{ __(
-												'Leave empty if decorative.'
+												'Describe the purpose of the image.'
 											) }
-										</>
-									}
-								/>
-							) }
+										</ExternalLink>
+										<br />
+										{ __( 'Leave empty if decorative.' ) }
+									</>
+								}
+							/>
+						) }
 						<PanelRow>
 							<Button
 								variant="secondary"
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index b0fce23b448d56..680e92a5f9177b 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -138,7 +138,8 @@ export default function save( { attributes } ) {
 					/>
 				) : (
 					<div
-						role="img"
+						role={ alt ? 'img' : undefined }
+						aria-label={ alt ? alt : undefined }
 						className={ imgClasses }
 						style={ { backgroundPosition, backgroundImage } }
 					/>

From 169a47af7f55f30b9bcf066c6bb7a2295f0f4cd8 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 26 May 2023 11:49:47 +0200
Subject: [PATCH 2/9] Update deprecated.js

---
 .../block-library/src/cover/deprecated.js     | 273 +++++++++++++++++-
 1 file changed, 272 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
index 7212af5c5cdc91..39ff810fc85394 100644
--- a/packages/block-library/src/cover/deprecated.js
+++ b/packages/block-library/src/cover/deprecated.js
@@ -182,6 +182,277 @@ const v7toV10BlockSupports = {
 	},
 };
 
+// Deprecation for blocks that does not have the aria-label when the image backround is fixed or repeated.
+const v12 = {
+	attributes: {
+		url: {
+			type: 'string',
+		},
+		useFeaturedImage: {
+			type: 'boolean',
+			default: false,
+		},
+		id: {
+			type: 'number',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		hasParallax: {
+			type: 'boolean',
+			default: false,
+		},
+		isRepeated: {
+			type: 'boolean',
+			default: false,
+		},
+		dimRatio: {
+			type: 'number',
+			default: 100,
+		},
+		overlayColor: {
+			type: 'string',
+		},
+		customOverlayColor: {
+			type: 'string',
+		},
+		backgroundType: {
+			type: 'string',
+			default: 'image',
+		},
+		focalPoint: {
+			type: 'object',
+		},
+		minHeight: {
+			type: 'number',
+		},
+		minHeightUnit: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		customGradient: {
+			type: 'string',
+		},
+		contentPosition: {
+			type: 'string',
+		},
+		isDark: {
+			type: 'boolean',
+			default: true,
+		},
+		allowedBlocks: {
+			type: 'array',
+		},
+		templateLock: {
+			type: [ 'string', 'boolean' ],
+			enum: [ 'all', 'insert', 'contentOnly', false ],
+		},
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		html: false,
+		spacing: {
+			padding: true,
+			margin: [ 'top', 'bottom' ],
+			blockGap: true,
+			__experimentalDefaultControls: {
+				padding: true,
+				blockGap: true,
+			},
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		color: {
+			__experimentalDuotone:
+				'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+			text: true,
+			background: false,
+			__experimentalSkipSerialization: [ 'gradients' ],
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		__experimentalLayout: {
+			allowJustification: false,
+		},
+	},
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+			tagName: Tag,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight =
+			minHeightProp && minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+					  ? mediaPosition(focalPoint)
+					  : undefined;
+
+		const backgroundImage = url ? `url(${ url })` : undefined;
+
+		const backgroundPosition = mediaPosition( focalPoint );
+
+		const classes = classnames(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = classnames(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ ! useFeaturedImage &&
+					isImageBackground &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role="img"
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ classnames(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</Tag>
+		);
+	},
+};
+
 // Deprecation for blocks that does not have a HTML tag option.
 const v11 = {
 	attributes: v8ToV10BlockAttributes,
@@ -1447,4 +1718,4 @@ const v1 = {
 	},
 };
 
-export default [ v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

From 99ccc06a0ea0ddf0b9f2852ab738b04784d7cf33 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 26 May 2023 12:21:53 +0200
Subject: [PATCH 3/9] Update duotone and fixed background fixture

---
 .../blocks/core__cover__duotone-fixed-background.html         | 2 +-
 .../blocks/core__cover__duotone-fixed-background.parsed.json  | 4 ++--
 .../core__cover__duotone-fixed-background.serialized.html     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.html b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.html
index 019385914ed580..8c77b25cf33fc5 100644
--- a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.html
+++ b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"https://w.wiki/59So","id":612,"hasParallax":true,"isRepeated":true,"dimRatio":10,"isDark":false,"style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} -->
-<div class="wp-block-cover is-light has-parallax is-repeated"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light has-parallax is-repeated"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
     <p class="has-text-align-center has-large-font-size"></p>
     <!-- /wp:paragraph --></div></div>
     <!-- /wp:cover -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.parsed.json b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.parsed.json
index 814565d144f08d..22ae61f6258ef7 100644
--- a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.parsed.json
+++ b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.parsed.json
@@ -29,9 +29,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div role=\"img\" class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\"></div></div>\n    ",
+		"innerHTML": "\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\"></div></div>\n    ",
 		"innerContent": [
-			"\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div role=\"img\" class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\">",
+			"\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\">",
 			null,
 			"</div></div>\n    "
 		]
diff --git a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.serialized.html b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.serialized.html
index 3af9171f1fa60c..e52c3e993dd109 100644
--- a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"https://w.wiki/59So","id":612,"hasParallax":true,"isRepeated":true,"dimRatio":10,"isDark":false,"style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} -->
-<div class="wp-block-cover is-light has-parallax is-repeated"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light has-parallax is-repeated"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->

From 74f3fe0d6b3839e84847edf16ba282b190f587ac Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Fri, 26 May 2023 12:30:10 +0200
Subject: [PATCH 4/9] Add a new fixture for a cover block with fixed background
 and alternative text as aria-label.

---
 .../core__cover__alt-fixed-background.html    |  5 +++
 .../core__cover__alt-fixed-background.json    | 35 ++++++++++++++++++
 ...e__cover__alt-fixed-background.parsed.json | 37 +++++++++++++++++++
 ...over__alt-fixed-background.serialized.html |  5 +++
 4 files changed, 82 insertions(+)
 create mode 100644 test/integration/fixtures/blocks/core__cover__alt-fixed-background.html
 create mode 100644 test/integration/fixtures/blocks/core__cover__alt-fixed-background.json
 create mode 100644 test/integration/fixtures/blocks/core__cover__alt-fixed-background.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__cover__alt-fixed-background.serialized.html

diff --git a/test/integration/fixtures/blocks/core__cover__alt-fixed-background.html b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.html
new file mode 100644
index 00000000000000..7c8aaa5a7ccbc6
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.html
@@ -0,0 +1,5 @@
+<!-- wp:cover {"url":"https://w.wiki/59So","id":612,"alt":"Custom alt text","hasParallax":true,"dimRatio":50,"isDark":false,"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover is-light has-parallax"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div role="img" aria-label="Custom alt text" class="wp-block-cover__image-background wp-image-612 has-parallax" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__cover__alt-fixed-background.json b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.json
new file mode 100644
index 00000000000000..d848174278dabe
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.json
@@ -0,0 +1,35 @@
+[
+	{
+		"name": "core/cover",
+		"isValid": true,
+		"attributes": {
+			"url": "https://w.wiki/59So",
+			"useFeaturedImage": false,
+			"id": 612,
+			"alt": "Custom alt text",
+			"hasParallax": true,
+			"isRepeated": false,
+			"dimRatio": 50,
+			"backgroundType": "image",
+			"isDark": false,
+			"tagName": "div",
+			"layout": {
+				"type": "constrained"
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"align": "center",
+					"content": "",
+					"dropCap": false,
+					"placeholder": "Write title…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__cover__alt-fixed-background.parsed.json b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.parsed.json
new file mode 100644
index 00000000000000..9de6f5b24fe0d0
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.parsed.json
@@ -0,0 +1,37 @@
+[
+	{
+		"blockName": "core/cover",
+		"attrs": {
+			"url": "https://w.wiki/59So",
+			"id": 612,
+			"alt": "Custom alt text",
+			"hasParallax": true,
+			"dimRatio": 50,
+			"isDark": false,
+			"layout": {
+				"type": "constrained"
+			}
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"align": "center",
+					"placeholder": "Write title…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n<p class=\"has-text-align-center has-large-font-size\"></p>\n",
+				"innerContent": [
+					"\n<p class=\"has-text-align-center has-large-font-size\"></p>\n"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-cover is-light has-parallax\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"></span><div role=\"img\" aria-label=\"Custom alt text\" class=\"wp-block-cover__image-background wp-image-612 has-parallax\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\"></div></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-cover is-light has-parallax\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"></span><div role=\"img\" aria-label=\"Custom alt text\" class=\"wp-block-cover__image-background wp-image-612 has-parallax\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\">",
+			null,
+			"</div></div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__cover__alt-fixed-background.serialized.html b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.serialized.html
new file mode 100644
index 00000000000000..438eba81614c4a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:cover {"url":"https://w.wiki/59So","id":612,"alt":"Custom alt text","hasParallax":true,"dimRatio":50,"isDark":false,"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover is-light has-parallax"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div role="img" aria-label="Custom alt text" class="wp-block-cover__image-background wp-image-612 has-parallax" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->

From db83e19b9ef2948ed32207c9b5904476b30c2810 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Mon, 29 May 2023 05:45:37 +0200
Subject: [PATCH 5/9] Update packages/block-library/src/cover/deprecated.js

---
 packages/block-library/src/cover/deprecated.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
index 39ff810fc85394..c35164585f90ff 100644
--- a/packages/block-library/src/cover/deprecated.js
+++ b/packages/block-library/src/cover/deprecated.js
@@ -182,7 +182,7 @@ const v7toV10BlockSupports = {
 	},
 };
 
-// Deprecation for blocks that does not have the aria-label when the image backround is fixed or repeated.
+// Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.
 const v12 = {
 	attributes: {
 		url: {

From c00fad6ed65a5a4e79d88438b07147aa5e29ee90 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Mon, 29 May 2023 06:10:36 +0200
Subject: [PATCH 6/9] Oops: Hide the alt text field for video cover blocks

---
 packages/block-library/src/cover/edit/inspector-controls.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index 0f97584f14853e..6c4fd8506ab68d 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -199,7 +199,7 @@ export default function CoverInspectorControls( {
 								}
 							/>
 						) }
-						{ ! useFeaturedImage && url && (
+						{ ! useFeaturedImage && url && ! isVideoBackground && (
 							<TextareaControl
 								__nextHasNoMarginBottom
 								label={ __( 'Alternative text' ) }

From 59eaff8252ecb949142a3d3a9492e102cc39df4e Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 26 Sep 2023 06:00:14 +0200
Subject: [PATCH 7/9] Try to fix merge conflicts

---
 packages/block-library/src/cover/deprecated.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
index ed5177433a177c..b74d869e5dbc7f 100644
--- a/packages/block-library/src/cover/deprecated.js
+++ b/packages/block-library/src/cover/deprecated.js
@@ -183,7 +183,7 @@ const v7toV10BlockSupports = {
 };
 
 // Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.
-const v12 = {
+const v13 = {
 	attributes: {
 		url: {
 			type: 'string',
@@ -1720,4 +1720,4 @@ const v1 = {
 	},
 };
 
-export default [ v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];

From f2e44d953b1367384fda656ff0ea9191e6ce93d9 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 26 Sep 2023 06:13:53 +0200
Subject: [PATCH 8/9] Try to fix merge conflicts

---
 .../block-library/src/cover/deprecated.js     | 246 +++++++++++++++++-
 1 file changed, 235 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
index b74d869e5dbc7f..7e049bd26f56c4 100644
--- a/packages/block-library/src/cover/deprecated.js
+++ b/packages/block-library/src/cover/deprecated.js
@@ -97,7 +97,7 @@ const blockAttributes = {
 	},
 };
 
-const v8ToV10BlockAttributes = {
+const v8ToV11BlockAttributes = {
 	url: {
 		type: 'string',
 	},
@@ -164,7 +164,19 @@ const v8ToV10BlockAttributes = {
 	},
 };
 
-const v7toV10BlockSupports = {
+const v12BlockAttributes = {
+	...v8ToV11BlockAttributes,
+	useFeaturedImage: {
+		type: 'boolean',
+		default: false,
+	},
+	tagName: {
+		type: 'string',
+		default: 'div',
+	},
+};
+
+const v7toV11BlockSupports = {
 	anchor: true,
 	align: true,
 	html: false,
@@ -182,6 +194,56 @@ const v7toV10BlockSupports = {
 	},
 };
 
+const v12BlockSupports = {
+	...v7toV11BlockSupports,
+	spacing: {
+		padding: true,
+		margin: [ 'top', 'bottom' ],
+		blockGap: true,
+		__experimentalDefaultControls: {
+			padding: true,
+			blockGap: true,
+		},
+	},
+	__experimentalBorder: {
+		color: true,
+		radius: true,
+		style: true,
+		width: true,
+		__experimentalDefaultControls: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+	},
+	color: {
+		__experimentalDuotone:
+			'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+		heading: true,
+		text: true,
+		background: false,
+		__experimentalSkipSerialization: [ 'gradients' ],
+		enableContrastChecker: false,
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		__experimentalFontFamily: true,
+		__experimentalFontWeight: true,
+		__experimentalFontStyle: true,
+		__experimentalTextTransform: true,
+		__experimentalTextDecoration: true,
+		__experimentalLetterSpacing: true,
+		__experimentalDefaultControls: {
+			fontSize: true,
+		},
+	},
+	layout: {
+		allowJustification: false,
+	},
+};
+
 // Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.
 const v13 = {
 	attributes: {
@@ -453,10 +515,172 @@ const v13 = {
 	},
 };
 
+// Deprecation for blocks to prevent auto overlay color from overriding previously set values.
+const v12 = {
+	attributes: v12BlockAttributes,
+	supports: v12BlockSupports,
+	isEligible( attributes ) {
+		return (
+			attributes.customOverlayColor !== undefined ||
+			attributes.overlayColor !== undefined
+		);
+	},
+	migrate( attributes ) {
+		return {
+			...attributes,
+			isUserOverlayColor: true,
+		};
+	},
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+			tagName: Tag,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight =
+			minHeightProp && minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+			  ? mediaPosition(focalPoint)
+			  : undefined;
+
+		const backgroundImage = url ? `url(${ url })` : undefined;
+
+		const backgroundPosition = mediaPosition( focalPoint );
+
+		const classes = classnames(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = classnames(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ ! useFeaturedImage &&
+					isImageBackground &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role="img"
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ classnames(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</Tag>
+		);
+	},
+};
+
 // Deprecation for blocks that does not have a HTML tag option.
 const v11 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -605,8 +829,8 @@ const v11 = {
 
 // Deprecation for blocks that renders fixed background as backgroud from the main block container.
 const v10 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -742,8 +966,8 @@ const v10 = {
 
 // Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
 const v9 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -874,8 +1098,8 @@ const v9 = {
 
 // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
 const v8 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -1029,7 +1253,7 @@ const v7 = {
 			default: '',
 		},
 	},
-	supports: v7toV10BlockSupports,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,

From e1f9bf5d9e04ba632316c3a9436ac24495a9f68e Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 26 Sep 2023 07:26:34 +0200
Subject: [PATCH 9/9] Use constants for attributes and supports

---
 .../block-library/src/cover/deprecated.js     | 125 +-----------------
 1 file changed, 2 insertions(+), 123 deletions(-)

diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
index 7e049bd26f56c4..e2e773cace1426 100644
--- a/packages/block-library/src/cover/deprecated.js
+++ b/packages/block-library/src/cover/deprecated.js
@@ -246,129 +246,8 @@ const v12BlockSupports = {
 
 // Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.
 const v13 = {
-	attributes: {
-		url: {
-			type: 'string',
-		},
-		useFeaturedImage: {
-			type: 'boolean',
-			default: false,
-		},
-		id: {
-			type: 'number',
-		},
-		alt: {
-			type: 'string',
-			source: 'attribute',
-			selector: 'img',
-			attribute: 'alt',
-			default: '',
-		},
-		hasParallax: {
-			type: 'boolean',
-			default: false,
-		},
-		isRepeated: {
-			type: 'boolean',
-			default: false,
-		},
-		dimRatio: {
-			type: 'number',
-			default: 100,
-		},
-		overlayColor: {
-			type: 'string',
-		},
-		customOverlayColor: {
-			type: 'string',
-		},
-		backgroundType: {
-			type: 'string',
-			default: 'image',
-		},
-		focalPoint: {
-			type: 'object',
-		},
-		minHeight: {
-			type: 'number',
-		},
-		minHeightUnit: {
-			type: 'string',
-		},
-		gradient: {
-			type: 'string',
-		},
-		customGradient: {
-			type: 'string',
-		},
-		contentPosition: {
-			type: 'string',
-		},
-		isDark: {
-			type: 'boolean',
-			default: true,
-		},
-		allowedBlocks: {
-			type: 'array',
-		},
-		templateLock: {
-			type: [ 'string', 'boolean' ],
-			enum: [ 'all', 'insert', 'contentOnly', false ],
-		},
-		tagName: {
-			type: 'string',
-			default: 'div',
-		},
-	},
-	supports: {
-		anchor: true,
-		align: true,
-		html: false,
-		spacing: {
-			padding: true,
-			margin: [ 'top', 'bottom' ],
-			blockGap: true,
-			__experimentalDefaultControls: {
-				padding: true,
-				blockGap: true,
-			},
-		},
-		__experimentalBorder: {
-			color: true,
-			radius: true,
-			style: true,
-			width: true,
-			__experimentalDefaultControls: {
-				color: true,
-				radius: true,
-				style: true,
-				width: true,
-			},
-		},
-		color: {
-			__experimentalDuotone:
-				'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
-			text: true,
-			background: false,
-			__experimentalSkipSerialization: [ 'gradients' ],
-		},
-		typography: {
-			fontSize: true,
-			lineHeight: true,
-			__experimentalFontFamily: true,
-			__experimentalFontWeight: true,
-			__experimentalFontStyle: true,
-			__experimentalTextTransform: true,
-			__experimentalTextDecoration: true,
-			__experimentalLetterSpacing: true,
-			__experimentalDefaultControls: {
-				fontSize: true,
-			},
-		},
-		__experimentalLayout: {
-			allowJustification: false,
-		},
-	},
+	attributes: v12BlockAttributes,
+	supports: v12BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,