@wordpress/block-library 8.19.3 → 8.20.0

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

@@ -149,7 +149,7 @@ export default function CoverInspectorControls( {
 			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
 		),
 		main: __(
-			'The <main> element should be used for the primary content of your document only. '
+			'The <main> element should be used for the primary content of your document only.'
 		),
 		section: __(
 			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."

package/src/cover/edit.native.js

@@ -207,8 +207,15 @@ const Cover = ( {
 
 	const onSelectMedia = ( media ) => {
 		setDidUploadFail( false );
-		const onSelect = attributesFromMedia( setAttributes, dimRatio );
-		onSelect( media );
+
+		const mediaAttributes = attributesFromMedia( media );
+		setAttributes( {
+			...mediaAttributes,
+			focalPoint: undefined,
+			useFeaturedImage: undefined,
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+			isDark: undefined,
+		} );
 	};
 
 	const onMediaPressed = () => {

package/src/cover/shared.js

@@ -1,14 +1,7 @@
-/**
- * External dependencies
- */
-import { FastAverageColor } from 'fast-average-color';
-import { colord } from 'colord';
-
 /**
  * WordPress dependencies
  */
 import { getBlobTypeByURL, isBlobURL } from '@wordpress/blob';
-import { applyFilters } from '@wordpress/hooks';
 
 const POSITION_CLASSNAMES = {
 	'top left': 'is-position-top-left',
@@ -41,50 +34,47 @@ export function dimRatioToClass( ratio ) {
 		: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
 }
 
-export function attributesFromMedia( setAttributes, dimRatio ) {
-	return ( media, isDark ) => {
-		if ( ! media || ! media.url ) {
-			setAttributes( { url: undefined, id: undefined, isDark } );
-			return;
-		}
+export function attributesFromMedia( media ) {
+	if ( ! media || ! media.url ) {
+		return {
+			url: undefined,
+			id: undefined,
+		};
+	}
 
-		if ( isBlobURL( media.url ) ) {
-			media.type = getBlobTypeByURL( media.url );
-		}
+	if ( isBlobURL( media.url ) ) {
+		media.type = getBlobTypeByURL( media.url );
+	}
 
-		let mediaType;
-		// For media selections originated from a file upload.
-		if ( media.media_type ) {
-			if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
-				mediaType = IMAGE_BACKGROUND_TYPE;
-			} else {
-				// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
-				// Videos contain the media type of 'file' in the object returned from the rest api.
-				mediaType = VIDEO_BACKGROUND_TYPE;
-			}
+	let mediaType;
+	// For media selections originated from a file upload.
+	if ( media.media_type ) {
+		if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
+			mediaType = IMAGE_BACKGROUND_TYPE;
 		} else {
-			// For media selections originated from existing files in the media library.
-			if (
-				media.type !== IMAGE_BACKGROUND_TYPE &&
-				media.type !== VIDEO_BACKGROUND_TYPE
-			) {
-				return;
-			}
-			mediaType = media.type;
+			// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
+			// Videos contain the media type of 'file' in the object returned from the rest api.
+			mediaType = VIDEO_BACKGROUND_TYPE;
 		}
+	} else {
+		// For media selections originated from existing files in the media library.
+		if (
+			media.type !== IMAGE_BACKGROUND_TYPE &&
+			media.type !== VIDEO_BACKGROUND_TYPE
+		) {
+			return;
+		}
+		mediaType = media.type;
+	}
 
-		setAttributes( {
-			isDark,
-			dimRatio: dimRatio === 100 ? 50 : dimRatio,
-			url: media.url,
-			id: media.id,
-			alt: media?.alt,
-			backgroundType: mediaType,
-			focalPoint: undefined,
-			...( mediaType === VIDEO_BACKGROUND_TYPE
-				? { hasParallax: undefined }
-				: {} ),
-		} );
+	return {
+		url: media.url,
+		id: media.id,
+		alt: media?.alt,
+		backgroundType: mediaType,
+		...( mediaType === VIDEO_BACKGROUND_TYPE
+			? { hasParallax: undefined }
+			: {} ),
 	};
 }
 
@@ -117,86 +107,3 @@ export function getPositionClassName( contentPosition ) {
 
 	return POSITION_CLASSNAMES[ contentPosition ];
 }
-
-/**
- * Performs a Porter Duff composite source over operation on two rgba colors.
- *
- * @see https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover
- *
- * @param {import('colord').RgbaColor} source Source color.
- * @param {import('colord').RgbaColor} dest   Destination color.
- * @return {import('colord').RgbaColor} Composite color.
- */
-function compositeSourceOver( source, dest ) {
-	return {
-		r: source.r * source.a + dest.r * dest.a * ( 1 - source.a ),
-		g: source.g * source.a + dest.g * dest.a * ( 1 - source.a ),
-		b: source.b * source.a + dest.b * dest.a * ( 1 - source.a ),
-		a: source.a + dest.a * ( 1 - source.a ),
-	};
-}
-
-function retrieveFastAverageColor() {
-	if ( ! retrieveFastAverageColor.fastAverageColor ) {
-		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
-	}
-	return retrieveFastAverageColor.fastAverageColor;
-}
-
-/**
- * This method evaluates if the cover block's background is dark or not and this boolean
- * can then be applied to the relevant attribute to help ensure that text is visible by default.
- * This needs to be recalculated in all of the following Cover block scenarios:
- * - When an overlay image is added, changed or removed
- * - When the featured image is selected as the overlay image, or removed from the overlay
- * - When the overlay color is changed
- * - When the overlay color is removed
- * - When the dimRatio is changed
- *
- * See the comments below for more details about which aspects take priority when
- * calculating the relative darkness of the Cover.
- *
- * @param {string} url
- * @param {number} dimRatio
- * @param {string} overlayColor
- * @return {Promise<boolean>} True if cover should be considered to be dark.
- */
-export async function getCoverIsDark( url, dimRatio = 50, overlayColor ) {
-	const overlay = colord( overlayColor )
-		.alpha( dimRatio / 100 )
-		.toRgb();
-
-	if ( url ) {
-		try {
-			const imgCrossOrigin = applyFilters(
-				'media.crossOrigin',
-				undefined,
-				url
-			);
-			const {
-				value: [ r, g, b, a ],
-			} = await retrieveFastAverageColor().getColorAsync( url, {
-				// Previously the default color was white, but that changed
-				// in v6.0.0 so it has to be manually set now.
-				defaultColor: [ 255, 255, 255, 255 ],
-				// Errors that come up don't reject the promise, so error
-				// logging has to be silenced with this option.
-				silent: process.env.NODE_ENV === 'production',
-				crossOrigin: imgCrossOrigin,
-			} );
-			// FAC uses 0-255 for alpha, but colord expects 0-1.
-			const media = { r, g, b, a: a / 255 };
-			const composite = compositeSourceOver( overlay, media );
-			return colord( composite ).isDark();
-		} catch ( error ) {
-			// If there's an error, just assume the image is dark.
-			return true;
-		}
-	}
-
-	// Assume a white background because it isn't easy to get the actual
-	// parent background color.
-	const background = { r: 255, g: 255, b: 255, a: 1 };
-	const composite = compositeSourceOver( overlay, background );
-	return colord( composite ).isDark();
-}

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

@@ -1,7 +1,7 @@
 // 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} -->
+"<!-- wp:cover {"isUserOverlayColor":true,"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>
@@ -17,7 +17,7 @@ exports[`color settings sets a color for the overlay background when the placeho
 `;
 
 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} -->
+"<!-- wp:cover {"isUserOverlayColor":true,"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>
@@ -33,7 +33,7 @@ exports[`color settings toggles between solid colors and gradients 1`] = `
 `;
 
 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} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"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>
@@ -41,7 +41,7 @@ exports[`minimum height settings changes the height value between units 1`] = `
 `;
 
 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} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"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>
@@ -49,7 +49,7 @@ exports[`minimum height settings changes the height value to 20(vw) 1`] = `
 `;
 
 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} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"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>
@@ -57,7 +57,7 @@ exports[`minimum height settings disables the decrease button when reaching the
 `;
 
 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} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"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>
@@ -65,7 +65,7 @@ exports[`minimum height settings disables the decrease button when reaching the
 `;
 
 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} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"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>
@@ -73,7 +73,7 @@ exports[`minimum height settings disables the decrease button when reaching the
 `;
 
 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} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"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>
@@ -81,7 +81,7 @@ exports[`minimum height settings disables the decrease button when reaching the
 `;
 
 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} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"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>
@@ -89,9 +89,17 @@ exports[`minimum height settings disables the decrease button when reaching the
 `;
 
 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} -->
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":15,"overlayColor":"foreground","isUserOverlayColor":true,"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 -->"
 `;
+
+exports[`when no media is attached and overlay color is set adds image 1`] = `
+"<!-- wp:cover {"url":"https://test.files.wordpress.com/local-image-1.mp4","id":2000,"dimRatio":50,"overlayColor":"cyan-bluish-gray","isUserOverlayColor":true} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-2000" src="https://test.files.wordpress.com/local-image-1.mp4" data-object-fit="cover"/><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 -->"
+`;

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

@@ -3,7 +3,7 @@
 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-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"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>
@@ -14,7 +14,7 @@ exports[`Cover block transformations with Image to Columns block 1`] = `
 
 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-group"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"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>
@@ -39,7 +39,7 @@ exports[`Cover block transformations with Image to Media & Text block 1`] = `
 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-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"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>
@@ -50,7 +50,7 @@ exports[`Cover block transformations with Video to Columns block 1`] = `
 
 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-group"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"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>

package/src/cover/test/edit.js

@@ -260,7 +260,7 @@ describe( 'Cover block', () => {
 				} )
 			);
 			expect(
-				within( screen.queryByLabelText( 'Block: Cover' ) ).queryByRole(
+				within( screen.getByLabelText( 'Block: Cover' ) ).queryByRole(
 					'img'
 				)
 			).not.toBeInTheDocument();

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

@@ -11,6 +11,8 @@ import {
 	within,
 	getBlock,
 	openBlockSettings,
+	setupMediaPicker,
+	setupPicker,
 } from 'test/helpers';
 
 /**
@@ -68,6 +70,13 @@ const COLOR_GRAY = '#abb8c3';
 const GRADIENT_GREEN =
 	'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)';
 
+const MEDIA_OPTIONS = [
+	'Choose from device',
+	'Take a Photo',
+	'Take a Video',
+	'WordPress Media Library',
+];
+
 // Simplified tree to render Cover edit within slot.
 const CoverEdit = ( props ) => (
 	<SlotFillProvider>
@@ -127,6 +136,35 @@ describe( 'when no media is attached', () => {
 	} );
 } );
 
+describe( 'when no media is attached and overlay color is set', () => {
+	it( 'adds image', async () => {
+		const media = {
+			type: 'image',
+			id: 2000,
+			url: 'https://test.files.wordpress.com/local-image-1.mp4',
+		};
+		const { mediaPickerCallback } = setupMediaPicker();
+		const screen = await initializeEditor( {
+			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+		} );
+		const { getByText } = screen;
+		const { selectOption } = setupPicker( screen, MEDIA_OPTIONS );
+
+		// Get block
+		const coverBlock = await getBlock( screen, 'Cover' );
+		fireEvent.press( coverBlock );
+
+		// Open block settings
+		await openBlockSettings( screen );
+
+		fireEvent.press( getByText( 'Add image or video' ) );
+		selectOption( 'WordPress Media Library' );
+		await mediaPickerCallback( media );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
+
 describe( 'when an image is attached', () => {
 	it( 'edits the image', async () => {
 		const screen = render(

package/src/embed/edit.js

@@ -29,6 +29,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
+import { getAuthority } from '@wordpress/url';
 
 const EmbedEdit = ( props ) => {
 	const {
@@ -137,6 +138,20 @@ const EmbedEdit = ( props ) => {
 		setAttributes( { url: newURL } );
 	}, [ preview?.html, attributesUrl, cannotEmbed, fetching ] );
 
+	// Try a different provider in case the embed url is not supported.
+	useEffect( () => {
+		if ( ! cannotEmbed || fetching || ! url ) {
+			return;
+		}
+
+		// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
+		if ( getAuthority( url ) === 'x.com' ) {
+			const newURL = new URL( url );
+			newURL.host = 'twitter.com';
+			setAttributes( { url: newURL.toString() } );
+		}
+	}, [ url, cannotEmbed, fetching, setAttributes ] );
+
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {

package/src/embed/edit.native.js

@@ -33,6 +33,7 @@ import {
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
+import { getAuthority } from '@wordpress/url';
 
 // The inline preview feature will be released progressible, for this reason
 // the embed will only be considered previewable for the following providers list.
@@ -160,6 +161,20 @@ const EmbedEdit = ( props ) => {
 		setAttributes( { url: newURL } );
 	}, [ preview?.html, url, cannotEmbed, fetching ] );
 
+	// Try a different provider in case the embed url is not supported.
+	useEffect( () => {
+		if ( ! cannotEmbed || fetching || ! url ) {
+			return;
+		}
+
+		// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
+		if ( getAuthority( url ) === 'x.com' ) {
+			const newURL = new URL( url );
+			newURL.host = 'twitter.com';
+			setAttributes( { url: newURL.toString() } );
+		}
+	}, [ url, cannotEmbed, fetching, setAttributes ] );
+
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {

package/src/embed/test/index.native.js

@@ -138,7 +138,12 @@ const mockEmbedResponses = ( mockedResponses ) => {
 
 async function mockOtherResponses( { path } ) {
 	if ( path.startsWith( '/wp/v2/themes' ) ) {
-		return [ { theme_supports: { 'responsive-embeds': true } } ];
+		return [
+			{
+				stylesheet: 'test-theme',
+				theme_supports: { 'responsive-embeds': true },
+			},
+		];
 	}
 
 	if ( path.startsWith( '/wp/v2/block-patterns/patterns' ) ) {

package/src/embed/wp-embed-preview.js

@@ -4,7 +4,7 @@
 import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
 import { useRef, useEffect, useMemo } from '@wordpress/element';
 
-/** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
+/** @typedef {import('react').SyntheticEvent} SyntheticEvent */
 
 const attributeMap = {
 	class: 'className',

package/src/footnotes/block.json

@@ -4,7 +4,7 @@
 	"name": "core/footnotes",
 	"title": "Footnotes",
 	"category": "text",
-	"description": "",
+	"description": "Display footnotes added to the page.",
 	"keywords": [ "references" ],
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],

package/src/html/edit.js

@@ -8,7 +8,13 @@ import {
 	PlainText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { ToolbarButton, Disabled, ToolbarGroup } from '@wordpress/components';
+import {
+	ToolbarButton,
+	Disabled,
+	ToolbarGroup,
+	VisuallyHidden,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,6 +25,8 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
 	const isDisabled = useContext( Disabled.Context );
 
+	const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );
+
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -27,8 +35,13 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 		setIsPreview( false );
 	}
 
+	const blockProps = useBlockProps( {
+		className: 'block-library-html__edit',
+		'aria-describedby': isPreview ? instanceId : undefined,
+	} );
+
 	return (
-		<div { ...useBlockProps( { className: 'block-library-html__edit' } ) }>
+		<div { ...blockProps }>
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -48,10 +61,17 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 				</ToolbarGroup>
 			</BlockControls>
 			{ isPreview || isDisabled ? (
-				<Preview
-					content={ attributes.content }
-					isSelected={ isSelected }
-				/>
+				<>
+					<Preview
+						content={ attributes.content }
+						isSelected={ isSelected }
+					/>
+					<VisuallyHidden id={ instanceId }>
+						{ __(
+							'HTML preview is not yet fully accessible. Please switch screen reader to virtualized mode to navigate the below iFrame.'
+						) }
+					</VisuallyHidden>
+				</>
 			) : (
 				<PlainText
 					value={ attributes.content }

package/src/html/preview.js

@@ -8,6 +8,7 @@ import {
 } from '@wordpress/block-editor';
 import { SandBox } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 // Default styles used to unset some of the styles
 // that might be inherited from the editor style.
@@ -32,7 +33,12 @@ export default function HTMLEditPreview( { content, isSelected } ) {
 
 	return (
 		<>
-			<SandBox html={ content } styles={ styles } />
+			<SandBox
+				html={ content }
+				styles={ styles }
+				title={ __( 'Custom HTML Preview' ) }
+				tabIndex={ -1 }
+			/>
 			{ /*
 				An overlay is added when the block is not selected in order to register click events.
 				Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it

package/src/image/image.js

@@ -375,7 +375,7 @@ export default function Image( {
 		!! lightbox || lightboxSetting?.allowEditing === true;
 
 	const lightboxChecked =
-		lightbox?.enabled || ( ! lightbox && lightboxSetting?.enabled );
+		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
 
 	const dimensionsControl = (
 		<DimensionsTool

package/src/loginout/block.json

@@ -19,6 +19,14 @@
 	},
 	"supports": {
 		"className": true,
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,