@wordpress/block-library 8.4.0 → 8.6.0

package/src/cover/block.json

@@ -88,14 +88,17 @@
 		"spacing": {
 			"padding": true,
 			"margin": [ "top", "bottom" ],
+			"blockGap": true,
 			"__experimentalDefaultControls": {
-				"padding": true
+				"padding": true,
+				"blockGap": true
 			}
 		},
 		"color": {
 			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
-			"text": false,
-			"background": false
+			"text": true,
+			"background": false,
+			"__experimentalSkipSerialization": [ "gradients" ]
 		},
 		"typography": {
 			"fontSize": true,
@@ -109,6 +112,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalLayout": {
+			"allowJustification": false
 		}
 	},
 	"editorStyle": "wp-block-cover-editor",

package/src/cover/edit/inspector-controls.js

@@ -171,12 +171,14 @@ export default function CoverInspectorControls( {
 						{ isImageBackground && (
 							<>
 								<ToggleControl
+									__nextHasNoMarginBottom
 									label={ __( 'Fixed background' ) }
 									checked={ hasParallax }
 									onChange={ toggleParallax }
 								/>
 
 								<ToggleControl
+									__nextHasNoMarginBottom
 									label={ __( 'Repeated background' ) }
 									checked={ isRepeated }
 									onChange={ toggleIsRepeated }

package/src/cover/index.js

@@ -13,6 +13,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -48,6 +49,7 @@ export const settings = {
 	save,
 	edit,
 	deprecated,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/cover/index.php

@@ -56,12 +56,10 @@ function render_block_core_cover( $attributes, $content ) {
 			$styles .= $height;
 		}
 
-		$content = preg_replace(
-			'/class=\".*?\"/',
-			'${0} style="' . $styles . '"',
-			$content,
-			1
-		);
+		$processor = new WP_HTML_Tag_Processor( $content );
+		$processor->next_tag();
+		$processor->set_attribute( 'style', $styles );
+		$content = $processor->get_updated_html();
 	}
 
 	return $content;

package/src/cover/style.scss

@@ -106,17 +106,11 @@
 	.wp-block-cover__inner-container {
 		width: 100%;
 		z-index: z-index(".wp-block-cover__inner-container");
-		color: $white;
+		color: inherit;
 		// Reset the fixed LTR direction at the root of the block in RTL languages.
 		/*rtl:raw: direction: rtl; */
 	}
 
-	&.is-light {
-		.wp-block-cover__inner-container {
-			color: $black;
-		}
-	}
-
 	p,
 	h1,
 	h2,
@@ -285,3 +279,18 @@ section.wp-block-cover-image > h2,
 	padding: 0.44em;
 	text-align: center;
 }
+
+// If Cover block's text color has not been set adjust default color
+// based on if overlay is light or not. The following styles leverage
+// `:where` to allow for generic global styles that have a low specificity to
+// still take precedence.
+
+:where(.wp-block-cover:not(.has-text-color)),
+:where(.wp-block-cover-image:not(.has-text-color)) {
+	color: $white;
+}
+
+:where(.wp-block-cover.is-light:not(.has-text-color)),
+:where(.wp-block-cover-image.is-light:not(.has-text-color)) {
+	color: $black;
+}

package/src/cover/test/__snapshots__/edit.native.js.snap

@@ -1,97 +1,97 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
-"<!-- wp:cover {\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings sets a color for the overlay background when the placeholder is visible 1`] = `
-"<!-- wp:cover {\\"overlayColor\\":\\"vivid-red\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-vivid-red-background-color has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"overlayColor":"vivid-red"} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-vivid-red-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"gradient":"light-green-cyan-to-vivid-green-cyan","isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings toggles between solid colors and gradients 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"gradient":"light-green-cyan-to-vivid-green-cyan","isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings changes the height value between units 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":50,\\"minHeightUnit\\":\\"px\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:50px\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><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:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":50,"minHeightUnit":"px","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:50px"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><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 -->"
 `;
 
 exports[`minimum height settings changes the height value to 20(vw) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":20,\\"minHeightUnit\\":\\"vw\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:20vw\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><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:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":20,"minHeightUnit":"vw","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:20vw"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><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 -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Pixels (px) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":50,\\"minHeightUnit\\":\\"px\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:50px\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><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:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":50,"minHeightUnit":"px","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:50px"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><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 -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to parent font size (em) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"em\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1em\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><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:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"em","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1em"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><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 -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to root font size (rem) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"rem\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1rem\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><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:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"rem","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1rem"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><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 -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport height (vh) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"vh\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1vh\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><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:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"vh","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1vh"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><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 -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport width (vw) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"vw\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1vw\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><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:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":1,"minHeightUnit":"vw","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1vw"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><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 -->"
 `;
 
 exports[`when an image is attached updates background opacity 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":15,\\"overlayColor\\":\\"foreground\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim-20 has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><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:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":15,"overlayColor":"foreground","isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><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 -->"
 `;

package/src/cover/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cover block transformations with Image to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Cover block transformations with Image to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Cover block transformations with Image to Image block 1`] = `
+"<!-- wp:image {"id":890,"style":{"color":{}}} -->
+<figure class="wp-block-image"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Cover block transformations with Image to Media & Text block 1`] = `
+"<!-- wp:media-text {"mediaId":890,"mediaType":"image","backgroundColor":"luminous-vivid-orange"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->"
+`;
+
+exports[`Cover block transformations with Video to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Cover block transformations with Video to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Cover block transformations with Video to Media & Text block 1`] = `
+"<!-- wp:media-text {"mediaId":891,"mediaType":"video","backgroundColor":"luminous-vivid-orange"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->"
+`;
+
+exports[`Cover block transformations with Video to Video block 1`] = `
+"<!-- wp:video {"id":891} -->
+<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure>
+<!-- /wp:video -->"
+`;

package/src/cover/test/transforms.native.js

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Cover';
+const initialHtmlWithImage = `
+<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->`;
+const initialHtmlWithVideo = `
+<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransformsWithImage = [
+	'Image',
+	'Media & Text',
+	...tranformsWithInnerBlocks,
+];
+const blockTransformsWithVideo = [
+	'Video',
+	'Media & Text',
+	...tranformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	describe( 'with Image', () => {
+		test.each( blockTransformsWithImage )(
+			'to %s block',
+			async ( blockTransform ) => {
+				const screen = await initializeEditor( {
+					initialHtml: initialHtmlWithImage,
+				} );
+				const newBlock = await transformBlock(
+					screen,
+					block,
+					blockTransform,
+					{
+						isMediaBlock: true,
+						hasInnerBlocks:
+							tranformsWithInnerBlocks.includes( blockTransform ),
+					}
+				);
+				expect( newBlock ).toBeVisible();
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+
+		it( 'matches expected transformation options', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: initialHtmlWithImage,
+			} );
+			const transformOptions = await getBlockTransformOptions(
+				screen,
+				block
+			);
+			expect( transformOptions ).toHaveLength(
+				blockTransformsWithImage.length
+			);
+		} );
+	} );
+
+	describe( 'with Video', () => {
+		test.each( blockTransformsWithVideo )(
+			'to %s block',
+			async ( blockTransform ) => {
+				const screen = await initializeEditor( {
+					initialHtml: initialHtmlWithVideo,
+				} );
+				const newBlock = await transformBlock(
+					screen,
+					block,
+					blockTransform,
+					{
+						isMediaBlock: true,
+						hasInnerBlocks:
+							tranformsWithInnerBlocks.includes( blockTransform ),
+					}
+				);
+				expect( newBlock ).toBeVisible();
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+
+		it( 'matches expected transformation options', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: initialHtmlWithVideo,
+			} );
+			const transformOptions = await getBlockTransformOptions(
+				screen,
+				block
+			);
+			expect( transformOptions ).toHaveLength(
+				blockTransformsWithVideo.length
+			);
+		} );
+	} );
+} );

package/src/cover/variations.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { cover } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'cover',
+		title: __( 'Cover' ),
+		description: __(
+			'Add an image or video with a text overlay — great for headers.'
+		),
+		attributes: { layout: { type: 'constrained' } },
+		isDefault: true,
+		icon: cover,
+	},
+];
+
+export default variations;

package/src/embed/edit.js

@@ -4,6 +4,7 @@
 import {
 	createUpgradedEmbedBlock,
 	getClassNames,
+	removeAspectRatioClasses,
 	fallback,
 	getEmbedInfoByProvider,
 	getMergedAttributesWithPreview,
@@ -99,16 +100,14 @@ const EmbedEdit = ( props ) => {
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.
 	 *
-	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
 	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = ( ignorePreviousClassName = false ) =>
+	const getMergedAttributes = () =>
 		getMergedAttributesWithPreview(
 			attributes,
 			preview,
 			title,
-			responsive,
-			ignorePreviousClassName
+			responsive
 		);
 
 	const toggleResponsive = () => {
@@ -136,21 +135,20 @@ const EmbedEdit = ( props ) => {
 		setURL( newURL );
 		setIsEditingURL( false );
 		setAttributes( { url: newURL } );
-	}, [ preview?.html, attributesUrl ] );
+	}, [ preview?.html, attributesUrl, cannotEmbed, fetching ] );
 
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {
-			// When obtaining an incoming preview, we set the attributes derived from
-			// the preview data. In this case when getting the merged attributes,
-			// we ignore the previous classname because it might not match the expected
-			// classes by the new preview.
-			setAttributes( getMergedAttributes( true ) );
+			// When obtaining an incoming preview,
+			// we set the attributes derived from the preview data.
+			const mergedAttributes = getMergedAttributes();
+			setAttributes( mergedAttributes );
 
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(
 					props,
-					getMergedAttributes()
+					mergedAttributes
 				);
 
 				if ( upgradedBlock ) {
@@ -188,8 +186,14 @@ const EmbedEdit = ( props ) => {
 							event.preventDefault();
 						}
 
+						// If the embed URL was changed, we need to reset the aspect ratio class.
+						// To do this we have to remove the existing ratio class so it can be recalculated.
+						const blockClass = removeAspectRatioClasses(
+							attributes.className
+						);
+
 						setIsEditingURL( false );
-						setAttributes( { url } );
+						setAttributes( { url, className: blockClass } );
 					} }
 					value={ url }
 					cannotEmbed={ cannotEmbed }