@wordpress/block-library 9.40.2-next.v.202602241322.0 → 9.40.2

package/build-style/style-rtl.css

@@ -2605,7 +2605,17 @@ ul {
     transform: rotate(90deg);
   }
 }
-.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
+@media (hover: hover) {
+  .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
+    visibility: visible;
+    overflow: visible;
+    opacity: 1;
+    width: auto;
+    height: auto;
+    min-width: 200px;
+  }
+}
+.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
 .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
   visibility: visible;
   overflow: visible;
@@ -2925,6 +2935,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
   display: block;
 }
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
+  left: auto;
+  right: 0;
+}
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
     display: block;
@@ -3066,7 +3080,7 @@ html.has-modal-open {
   align-items: center;
   justify-content: center;
   gap: 0.5em;
-  padding: 0.5em;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
@@ -3076,8 +3090,8 @@ html.has-modal-open {
   outline-offset: 2px;
 }
 .wp-block-navigation-overlay-close svg {
-  width: 1.5em;
-  height: 1.5em;
+  width: 24px;
+  height: 24px;
   fill: currentColor;
   display: block;
   flex-shrink: 0;
@@ -4580,7 +4594,8 @@ ul.wp-block-rss.is-grid li {
   appearance: none;
   -webkit-appearance: none;
   margin: 0;
-  padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
+  padding-block: var(--tab-padding-block, var(--wp--preset--spacing--20, 0.5em));
+  padding-inline: var(--tab-padding-inline, var(--wp--preset--spacing--30, 1em));
   font-size: inherit;
   font-family: inherit;
   font-weight: inherit;
@@ -4589,12 +4604,20 @@ ul.wp-block-rss.is-grid li {
   text-transform: inherit;
   text-align: inherit;
 }
+.wp-block-tabs-menu-item:focus {
+  outline: none;
+}
 .wp-block-tabs-menu-item:focus-visible {
+  outline: 2px solid var(--tab-border-color-active, #000);
   outline-offset: 2px;
 }
+.wp-block-tabs-menu-item:hover {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
+}
 .wp-block-tabs-menu-item[aria-selected=true], .wp-block-tabs-menu-item.is-active {
-  background-color: #000;
-  color: #fff;
+  background-color: var(--custom-tab-active-color, #000) !important;
+  color: var(--custom-tab-active-text-color, #fff) !important;
 }
 
 .wp-block-term-count {

package/build-style/style.css

@@ -2635,7 +2635,17 @@ ul {
     transform: rotate(-90deg);
   }
 }
-.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
+@media (hover: hover) {
+  .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
+    visibility: visible;
+    overflow: visible;
+    opacity: 1;
+    width: auto;
+    height: auto;
+    min-width: 200px;
+  }
+}
+.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
 .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
   visibility: visible;
   overflow: visible;
@@ -2955,6 +2965,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
   display: block;
 }
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
+  right: auto;
+  left: 0;
+}
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
     display: block;
@@ -3096,7 +3110,7 @@ html.has-modal-open {
   align-items: center;
   justify-content: center;
   gap: 0.5em;
-  padding: 0.5em;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
@@ -3106,8 +3120,8 @@ html.has-modal-open {
   outline-offset: 2px;
 }
 .wp-block-navigation-overlay-close svg {
-  width: 1.5em;
-  height: 1.5em;
+  width: 24px;
+  height: 24px;
   fill: currentColor;
   display: block;
   flex-shrink: 0;
@@ -4613,7 +4627,8 @@ ul.wp-block-rss.is-grid li {
   appearance: none;
   -webkit-appearance: none;
   margin: 0;
-  padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
+  padding-block: var(--tab-padding-block, var(--wp--preset--spacing--20, 0.5em));
+  padding-inline: var(--tab-padding-inline, var(--wp--preset--spacing--30, 1em));
   font-size: inherit;
   font-family: inherit;
   font-weight: inherit;
@@ -4622,12 +4637,20 @@ ul.wp-block-rss.is-grid li {
   text-transform: inherit;
   text-align: inherit;
 }
+.wp-block-tabs-menu-item:focus {
+  outline: none;
+}
 .wp-block-tabs-menu-item:focus-visible {
+  outline: 2px solid var(--tab-border-color-active, #000);
   outline-offset: 2px;
 }
+.wp-block-tabs-menu-item:hover {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
+}
 .wp-block-tabs-menu-item[aria-selected=true], .wp-block-tabs-menu-item.is-active {
-  background-color: #000;
-  color: #fff;
+  background-color: var(--custom-tab-active-color, #000) !important;
+  color: var(--custom-tab-active-text-color, #fff) !important;
 }
 
 .wp-block-term-count {

package/build-style/tabs-menu-item/editor-rtl.css

@@ -1,4 +1,5 @@
 .wp-block-tabs-menu-item.is-selected {
+  outline: 2px solid var(--wp-admin-theme-color, #007cba);
   outline-offset: 2px;
 }
 
@@ -8,4 +9,8 @@
 }
 .block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item) .wp-block-tabs-menu-item {
   flex-basis: 100% !important;
+}
+.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item):hover > .wp-block-tabs-menu-item {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
 }

package/build-style/tabs-menu-item/editor.css

@@ -1,4 +1,5 @@
 .wp-block-tabs-menu-item.is-selected {
+  outline: 2px solid var(--wp-admin-theme-color, #007cba);
   outline-offset: 2px;
 }
 
@@ -8,4 +9,8 @@
 }
 .block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item) .wp-block-tabs-menu-item {
   flex-basis: 100% !important;
+}
+.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item):hover > .wp-block-tabs-menu-item {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
 }

package/build-style/tabs-menu-item/style-rtl.css

@@ -12,7 +12,8 @@
   appearance: none;
   -webkit-appearance: none;
   margin: 0;
-  padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
+  padding-block: var(--tab-padding-block, var(--wp--preset--spacing--20, 0.5em));
+  padding-inline: var(--tab-padding-inline, var(--wp--preset--spacing--30, 1em));
   font-size: inherit;
   font-family: inherit;
   font-weight: inherit;
@@ -21,10 +22,18 @@
   text-transform: inherit;
   text-align: inherit;
 }
+.wp-block-tabs-menu-item:focus {
+  outline: none;
+}
 .wp-block-tabs-menu-item:focus-visible {
+  outline: 2px solid var(--tab-border-color-active, #000);
   outline-offset: 2px;
 }
+.wp-block-tabs-menu-item:hover {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
+}
 .wp-block-tabs-menu-item[aria-selected=true], .wp-block-tabs-menu-item.is-active {
-  background-color: #000;
-  color: #fff;
+  background-color: var(--custom-tab-active-color, #000) !important;
+  color: var(--custom-tab-active-text-color, #fff) !important;
 }

package/build-style/tabs-menu-item/style.css

@@ -12,7 +12,8 @@
   appearance: none;
   -webkit-appearance: none;
   margin: 0;
-  padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
+  padding-block: var(--tab-padding-block, var(--wp--preset--spacing--20, 0.5em));
+  padding-inline: var(--tab-padding-inline, var(--wp--preset--spacing--30, 1em));
   font-size: inherit;
   font-family: inherit;
   font-weight: inherit;
@@ -21,10 +22,18 @@
   text-transform: inherit;
   text-align: inherit;
 }
+.wp-block-tabs-menu-item:focus {
+  outline: none;
+}
 .wp-block-tabs-menu-item:focus-visible {
+  outline: 2px solid var(--tab-border-color-active, #000);
   outline-offset: 2px;
 }
+.wp-block-tabs-menu-item:hover {
+  background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+  color: var(--custom-tab-hover-text-color, #000) !important;
+}
 .wp-block-tabs-menu-item[aria-selected=true], .wp-block-tabs-menu-item.is-active {
-  background-color: #000;
-  color: #fff;
+  background-color: var(--custom-tab-active-color, #000) !important;
+  color: var(--custom-tab-active-text-color, #fff) !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.40.2-next.v.202602241322.0+bce7cff88",
+	"version": "9.40.2",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -94,42 +94,42 @@
 		"build-module/*/init.mjs"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/api-fetch": "^7.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/autop": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/base-styles": "^6.16.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/blob": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/block-editor": "^15.13.2-next.v.202602241322.0+bce7cff88",
-		"@wordpress/blocks": "^15.13.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/components": "^32.3.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/compose": "^7.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/core-data": "^7.40.2-next.v.202602241322.0+bce7cff88",
-		"@wordpress/data": "^10.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/date": "^5.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/deprecated": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/dom": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/element": "^6.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/escape-html": "^3.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/hooks": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/html-entities": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/i18n": "^6.13.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/icons": "^11.7.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/interactivity": "^6.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/interactivity-router": "^2.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/keyboard-shortcuts": "^5.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/keycodes": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/latex-to-mathml": "^1.8.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/notices": "^5.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/patterns": "^2.40.2-next.v.202602241322.0+bce7cff88",
-		"@wordpress/primitives": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/private-apis": "^1.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/reusable-blocks": "^5.40.2-next.v.202602241322.0+bce7cff88",
-		"@wordpress/rich-text": "^7.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/server-side-render": "^6.16.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/upload-media": "^0.25.2-next.v.202602241322.0+bce7cff88",
-		"@wordpress/url": "^4.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/viewport": "^6.40.1-next.v.202602241322.0+bce7cff88",
-		"@wordpress/wordcount": "^4.40.1-next.v.202602241322.0+bce7cff88",
+		"@wordpress/a11y": "^4.40.1",
+		"@wordpress/api-fetch": "^7.40.1",
+		"@wordpress/autop": "^4.40.1",
+		"@wordpress/base-styles": "^6.16.1",
+		"@wordpress/blob": "^4.40.1",
+		"@wordpress/block-editor": "^15.13.2",
+		"@wordpress/blocks": "^15.13.1",
+		"@wordpress/components": "^32.2.1",
+		"@wordpress/compose": "^7.40.1",
+		"@wordpress/core-data": "^7.40.2",
+		"@wordpress/data": "^10.40.1",
+		"@wordpress/date": "^5.40.1",
+		"@wordpress/deprecated": "^4.40.1",
+		"@wordpress/dom": "^4.40.1",
+		"@wordpress/element": "^6.40.1",
+		"@wordpress/escape-html": "^3.40.1",
+		"@wordpress/hooks": "^4.40.1",
+		"@wordpress/html-entities": "^4.40.1",
+		"@wordpress/i18n": "^6.13.1",
+		"@wordpress/icons": "^11.7.1",
+		"@wordpress/interactivity": "^6.40.1",
+		"@wordpress/interactivity-router": "^2.40.1",
+		"@wordpress/keyboard-shortcuts": "^5.40.1",
+		"@wordpress/keycodes": "^4.40.1",
+		"@wordpress/latex-to-mathml": "^1.8.1",
+		"@wordpress/notices": "^5.40.1",
+		"@wordpress/patterns": "^2.40.2",
+		"@wordpress/primitives": "^4.40.1",
+		"@wordpress/private-apis": "^1.40.1",
+		"@wordpress/reusable-blocks": "^5.40.2",
+		"@wordpress/rich-text": "^7.40.1",
+		"@wordpress/server-side-render": "^6.16.1",
+		"@wordpress/upload-media": "^0.25.2",
+		"@wordpress/url": "^4.40.1",
+		"@wordpress/viewport": "^6.40.1",
+		"@wordpress/wordcount": "^4.40.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -150,5 +150,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "943dde7f0b600ce238726c36284bc9f70ce0ffa4"
+	"gitHead": "adb6623c9f32490cfc73c7ac7f122578c1f10c65"
 }

package/src/accordion-item/index.php

@@ -6,13 +6,12 @@
  * @package WordPress
  * @since 6.9.0
  *
- * @param array $attributes The block attributes.
- * @param string $content The block content.
- *
+ * @param array{ openByDefault: bool } $attributes The block attributes.
+ * @param string                        $content   The block content.
  * @return string Returns the updated markup.
  */
-function block_core_accordion_item_render( $attributes, $content ) {
-	if ( ! $content ) {
+function block_core_accordion_item_render( array $attributes, string $content ): string {
+	if ( '' === $content ) {
 		return $content;
 	}
 
@@ -56,6 +55,19 @@ function block_core_accordion_item_render( $attributes, $content ) {
 		}
 	}
 
+	/*
+	 * If an Accordion Item is collapsed by default, ensure any contained IMG has fetchpriority=low to deprioritize it
+	 * from contending with resources in the critical rendering path. In contrast, remove the loading attribute to
+	 * prevent the image from not being available when the item is expanded.
+	 */
+	if ( ! $attributes['openByDefault'] ) {
+		$processor = new WP_HTML_Tag_Processor( $content );
+		while ( $processor->next_tag( 'IMG' ) ) {
+			$processor->set_attribute( 'fetchpriority', 'low' );
+		}
+		$content = $processor->get_updated_html();
+	}
+
 	return $content;
 }
 

package/src/comment-reply-link/edit.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -20,7 +20,10 @@ function Edit( props ) {
 					href="#comment-reply-pseudo-link"
 					onClick={ ( event ) => event.preventDefault() }
 				>
-					{ __( 'Reply' ) }
+					{
+						/* translators: Comment reply button text. */
+						_x( 'Reply', 'verb' )
+					}
 				</a>
 			</div>
 		</>

package/src/comments/edit/placeholder.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
 import { createInterpolateElement } from '@wordpress/element';
@@ -109,7 +109,10 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 									'Reply to A WordPress Commenter'
 								) }
 							>
-								{ __( 'Reply' ) }
+								{
+									/* translators: Comment reply button text. */
+									_x( 'Reply', 'verb' )
+								}
 							</a>
 						</div>
 					</article>

package/src/cover/edit/index.js

@@ -7,8 +7,13 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useEffect, useMemo, useRef } from '@wordpress/element';
-import { Placeholder, Spinner } from '@wordpress/components';
+import {
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from '@wordpress/element';
+import { Placeholder, SandBox, Spinner } from '@wordpress/components';
 import { compose, useResizeObserver } from '@wordpress/compose';
 import {
 	withColors,
@@ -49,7 +54,7 @@ import {
 	DEFAULT_OVERLAY_COLOR,
 } from './color-utils';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
-import { getIframeSrc, getBackgroundVideoSrc } from '../embed-video-utils';
+import { getBackgroundEmbedHtml } from '../embed-video-utils';
 
 function getInnerBlocksTemplate( attributes ) {
 	return [
@@ -121,6 +126,14 @@ function CoverEdit( {
 
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
+
+	// Ref to access latest values after async operations (e.g. getMediaColor),
+	// avoiding stale values that could overwrite concurrent remote changes.
+	const propsRef = useRef( { attributes, overlayColor } );
+	useLayoutEffect( () => {
+		propsRef.current = { attributes, overlayColor };
+	} );
+
 	const { media } = useSelect(
 		( select ) => {
 			return {
@@ -155,26 +168,37 @@ function CoverEdit( {
 
 			const averageBackgroundColor = await getMediaColor( mediaUrl );
 
-			let newOverlayColor = overlayColor.color;
-			if ( ! isUserOverlayColor ) {
+			// Read latest values after await to avoid stale closures.
+			const { attributes: currentAttrs, overlayColor: currentOverlay } =
+				propsRef.current;
+
+			let newOverlayColor = currentOverlay.color;
+			if ( ! currentAttrs.isUserOverlayColor ) {
 				newOverlayColor = averageBackgroundColor;
 				__unstableMarkNextChangeAsNotPersistent();
 				setOverlayColor( newOverlayColor );
 			}
 
 			const newIsDark = compositeIsDark(
-				dimRatio,
+				currentAttrs.dimRatio,
 				newOverlayColor,
 				averageBackgroundColor
 			);
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( {
 				isDark: newIsDark,
-				isUserOverlayColor: isUserOverlayColor || false,
+				isUserOverlayColor: currentAttrs.isUserOverlayColor || false,
 			} );
 		} )();
 		// Update the block only when the featured image changes.
-	}, [ mediaUrl ] );
+		// The other dependencies are stable references (dispatch actions / setters).
+	}, [
+		mediaUrl,
+		__unstableMarkNextChangeAsNotPersistent,
+		setAttributes,
+		setOverlayColor,
+		useFeaturedImage,
+	] );
 
 	// instead of destructuring the attributes
 	// we define the url and background type
@@ -201,8 +225,12 @@ function CoverEdit( {
 			isImage ? newMedia?.url : undefined
 		);
 
-		let newOverlayColor = overlayColor.color;
-		if ( ! isUserOverlayColor ) {
+		// Read latest values to avoid stale closures.
+		const { attributes: currentAttrs, overlayColor: currentOverlay } =
+			propsRef.current;
+
+		let newOverlayColor = currentOverlay.color;
+		if ( ! currentAttrs.isUserOverlayColor ) {
 			newOverlayColor = averageBackgroundColor;
 			setOverlayColor( newOverlayColor );
 
@@ -214,7 +242,9 @@ function CoverEdit( {
 		// to avoid resetting to 50 if it has been explicitly set to 100.
 		// See issue #52835 for context.
 		const newDimRatio =
-			originalUrl === undefined && dimRatio === 100 ? 50 : dimRatio;
+			currentAttrs.url === undefined && currentAttrs.dimRatio === 100
+				? 50
+				: currentAttrs.dimRatio;
 
 		const newIsDark = compositeIsDark(
 			newDimRatio,
@@ -256,7 +286,7 @@ function CoverEdit( {
 			useFeaturedImage: undefined,
 			dimRatio: newDimRatio,
 			isDark: newIsDark,
-			isUserOverlayColor: isUserOverlayColor || false,
+			isUserOverlayColor: currentAttrs.isUserOverlayColor || false,
 		} );
 	};
 
@@ -290,8 +320,12 @@ function CoverEdit( {
 
 	const onSetOverlayColor = async ( newOverlayColor ) => {
 		const averageBackgroundColor = await getMediaColor( url );
+
+		// Read latest dimRatio after await to avoid stale closure.
+		const { attributes: currentAttrs } = propsRef.current;
+
 		const newIsDark = compositeIsDark(
-			dimRatio,
+			currentAttrs.dimRatio,
 			newOverlayColor,
 			averageBackgroundColor
 		);
@@ -309,9 +343,13 @@ function CoverEdit( {
 
 	const onUpdateDimRatio = async ( newDimRatio ) => {
 		const averageBackgroundColor = await getMediaColor( url );
+
+		// Read latest overlayColor after await to avoid stale closure.
+		const { overlayColor: currentOverlay } = propsRef.current;
+
 		const newIsDark = compositeIsDark(
 			newDimRatio,
-			overlayColor.color,
+			currentOverlay.color,
 			averageBackgroundColor
 		);
 
@@ -365,23 +403,15 @@ function CoverEdit( {
 		[ url, backgroundType ]
 	);
 
-	// Compute embedSrc on-the-fly from embed preview for editor display
-	const embedSrc = useMemo( () => {
+	// Compute embed HTML for editor display via SandBox
+	const embedHtml = useMemo( () => {
 		if (
 			backgroundType !== EMBED_VIDEO_BACKGROUND_TYPE ||
 			! embedPreview?.html
 		) {
 			return null;
 		}
-
-		// Extract iframe src from embed HTML
-		const iframeSrc = getIframeSrc( embedPreview.html );
-		if ( ! iframeSrc ) {
-			return null;
-		}
-
-		// Modify the src to add background video parameters (provider auto-detected)
-		return getBackgroundVideoSrc( iframeSrc );
+		return getBackgroundEmbedHtml( embedPreview.html );
 	}, [ embedPreview, backgroundType ] );
 
 	const isUploadingMedia = isTemporaryMedia( id, url );
@@ -477,11 +507,15 @@ function CoverEdit( {
 			? await getMediaColor( mediaUrl )
 			: DEFAULT_BACKGROUND_COLOR;
 
-		const newOverlayColor = ! isUserOverlayColor
+		// Read latest values after await to avoid stale closures.
+		const { attributes: currentAttrs, overlayColor: currentOverlay } =
+			propsRef.current;
+
+		const newOverlayColor = ! currentAttrs.isUserOverlayColor
 			? averageBackgroundColor
-			: overlayColor.color;
+			: currentOverlay.color;
 
-		if ( ! isUserOverlayColor ) {
+		if ( ! currentAttrs.isUserOverlayColor ) {
 			if ( newUseFeaturedImage ) {
 				setOverlayColor( newOverlayColor );
 			} else {
@@ -492,7 +526,8 @@ function CoverEdit( {
 			__unstableMarkNextChangeAsNotPersistent();
 		}
 
-		const newDimRatio = dimRatio === 100 ? 50 : dimRatio;
+		const newDimRatio =
+			currentAttrs.dimRatio === 100 ? 50 : currentAttrs.dimRatio;
 		const newIsDark = compositeIsDark(
 			newDimRatio,
 			newOverlayColor,
@@ -668,21 +703,23 @@ function CoverEdit( {
 						style={ mediaStyle }
 					/>
 				) }
-				{ isEmbedVideoBackground && embedSrc && (
+				{ isEmbedVideoBackground && embedHtml && (
 					<div
 						ref={ mediaElement }
 						className="wp-block-cover__video-background wp-block-cover__embed-background"
 						style={ mediaStyle }
 					>
-						<iframe
-							src={ embedSrc }
+						<SandBox
+							allowSameOrigin
+							html={ embedHtml }
 							title="Background video"
-							frameBorder="0"
-							allow="autoplay; fullscreen"
+							styles={ [
+								'iframe{position:fixed;top:0;left:0;width:100%;height:100%;}',
+							] }
 						/>
 					</div>
 				) }
-				{ isEmbedVideoBackground && ! embedSrc && isFetchingEmbed && (
+				{ isEmbedVideoBackground && ! embedHtml && isFetchingEmbed && (
 					<Spinner />
 				) }