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

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 />
 				) }
 

package/src/cover/embed-video-utils.js

@@ -74,18 +74,20 @@ function findVideoEmbedProvider( url ) {
 }
 
 /**
- * Extracts iframe src from embed HTML.
+ * Modifies embed HTML to use background video parameters.
  *
- * @param {string} html The embed HTML.
- * @return {string|null} The iframe src URL or null if not found.
+ * @param {string} html The original embed HTML.
+ * @return {string|null} The modified embed HTML, or null if not possible.
  */
-export function getIframeSrc( html ) {
-	if ( ! html ) {
+export function getBackgroundEmbedHtml( html ) {
+	const srcMatch = html?.match( /src=["']([^"']+)["']/ );
+	if ( ! srcMatch ) {
 		return null;
 	}
 
-	const srcMatch = html.match( /src=["']([^"']+)["']/ );
-	return srcMatch ? srcMatch[ 1 ] : null;
+	const iframeSrc = srcMatch[ 1 ];
+	const backgroundSrc = getBackgroundVideoSrc( iframeSrc );
+	return html.replace( iframeSrc, backgroundSrc );
 }
 
 /**

package/src/cover/index.php

@@ -39,13 +39,13 @@ function render_block_core_cover( $attributes, $content ) {
 				$lower_src = strtolower( $iframe_src );
 				$provider  = null;
 
-				if ( str_contains( $lower_src, 'youtube.com' ) || str_contains( $lower_src, 'youtu.be' ) ) {
+				if ( strpos( $lower_src, 'youtube.com' ) !== false || strpos( $lower_src, 'youtu.be' ) !== false ) {
 					$provider = 'youtube';
-				} elseif ( str_contains( $lower_src, 'vimeo.com' ) ) {
+				} elseif ( strpos( $lower_src, 'vimeo.com' ) !== false ) {
 					$provider = 'vimeo';
-				} elseif ( str_contains( $lower_src, 'videopress.com' ) ) {
+				} elseif ( strpos( $lower_src, 'videopress.com' ) !== false ) {
 					$provider = 'videopress';
-				} elseif ( str_contains( $lower_src, 'wordpress.tv' ) ) {
+				} elseif ( strpos( $lower_src, 'wordpress.tv' ) !== false ) {
 					$provider = 'wordpress-tv';
 				}
 
@@ -66,6 +66,14 @@ function render_block_core_cover( $attributes, $content ) {
 						$query_params['controls']       = '0';
 						$query_params['modestbranding'] = '1';
 						$query_params['playsinline']    = '1';
+
+						// For loop to work, we need the playlist parameter.
+						$path          = $parsed_url['path'] ?? '';
+						$path_segments = explode( '/', $path );
+						$video_id      = end( $path_segments );
+						if ( $video_id ) {
+								$query_params['playlist'] = $video_id;
+						}
 					} elseif ( 'vimeo' === $provider ) {
 						$query_params['autoplay']    = '1';
 						$query_params['muted']       = '1';

package/src/details/index.php

@@ -0,0 +1,47 @@
+<?php
+/**
+ * Server-side rendering of the `core/details` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Sets fetchpriority="low" on all IMG tags within the collapsed Details block.
+ *
+ * Images in a collapsed Details block are hidden until the block is expanded, so they should
+ * not compete with any resources in the critical rendering path, such as the LCP element image.
+ *
+ * @since 7.0.0
+ *
+ * @param string $block_content The block content.
+ * @param array  $block         The full block, including name and attributes.
+ * @return string Modified HTML with fetchpriority="low" on all IMG tags when the showContent attribute is false.
+ */
+function block_core_details_set_img_fetchpriority_low( $block_content, array $block ): string {
+	if ( ! is_string( $block_content ) ) {
+		return '';
+	}
+
+	// If the Details block is open by default, short-circuit to let core add fetchpriority=high if appropriate.
+	if ( $block['attrs']['showContent'] ?? false ) {
+		return $block_content;
+	}
+
+	$tags = new WP_HTML_Tag_Processor( $block_content );
+	while ( $tags->next_tag( 'IMG' ) ) {
+		$tags->set_attribute( 'fetchpriority', 'low' );
+	}
+	return $tags->get_updated_html();
+}
+
+add_filter( 'render_block_core/details', 'block_core_details_set_img_fetchpriority_low', 10, 2 );
+
+/**
+ * Registers the `core/details` block on server.
+ *
+ * @since 7.0.0
+ */
+function register_block_core_details() {
+	register_block_type_from_metadata( __DIR__ . '/details' );
+}
+add_action( 'init', 'register_block_core_details' );

package/src/embed/embed-preview.js

@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { getPhotoHtml } from './util';
-
 /**
  * External dependencies
  */
@@ -17,6 +12,11 @@ import { BlockIcon } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import { getAuthority } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { getPhotoHtml } from './util';
+
 /**
  * Internal dependencies
  */
@@ -75,6 +75,7 @@ export default function EmbedPreview( {
 		) : (
 			<div className="wp-block-embed__wrapper">
 				<SandBox
+					allowSameOrigin
 					html={ html }
 					scripts={ scripts }
 					title={ iframeTitle }

package/src/html/block.json

@@ -21,7 +21,8 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
-		"customCSS": false
+		"customCSS": false,
+		"visibility": false
 	},
 	"editorStyle": "wp-block-html-editor"
 }

package/src/html/editor.scss

@@ -14,7 +14,14 @@
 
 // Modal styles
 .block-library-html__modal {
-	height: 100%;
+
+	// On medium and large screens, the modal component sets a max-height.
+	// We want the modal to be as tall as possible also when the content is short.
+	@include break-small() {
+		&:not(.is-full-screen) {
+			height: 9999rem;
+		}
+	}
 
 	.components-modal__children-container {
 		height: 100%;
@@ -22,12 +29,11 @@
 }
 
 .block-library-html__modal-tabs {
-	overflow-y: auto;
+	flex: 1;
 }
 
 .block-library-html__modal-content {
 	flex: 1;
-	min-height: 0;
 }
 
 .block-library-html__modal-tab {
@@ -71,7 +77,11 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: $grid-unit-20;
-	flex: 1;
 	min-height: 0;
+	overflow-y: auto;
+	flex: 1;
+
+	iframe {
+		height: 100%;
+	}
 }

package/src/html/modal.js

@@ -10,11 +10,12 @@ import {
 	Flex,
 	Notice,
 	privateApis as componentsPrivateApis,
+	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
-	__experimentalGrid as Grid,
 } from '@wordpress/components';
 import { PlainText, store as blockEditorStore } from '@wordpress/block-editor';
 import { fullscreen, square } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -36,10 +37,10 @@ export default function HTMLEditModal( {
 	const [ editedHtml, setEditedHtml ] = useState( html );
 	const [ editedCss, setEditedCss ] = useState( css );
 	const [ editedJs, setEditedJs ] = useState( js );
-	const [ isDirty, setIsDirty ] = useState( false );
-	const [ showUnsavedWarning, setShowUnsavedWarning ] = useState( false );
 	const [ isFullscreen, setIsFullscreen ] = useState( false );
 
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+
 	// Check if user has permission to save scripts and get editor styles
 	const { canUserUseUnfilteredHTML } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
@@ -57,18 +58,6 @@ export default function HTMLEditModal( {
 		return null;
 	}
 
-	const handleHtmlChange = ( value ) => {
-		setEditedHtml( value );
-		setIsDirty( true );
-	};
-	const handleCssChange = ( value ) => {
-		setEditedCss( value );
-		setIsDirty( true );
-	};
-	const handleJsChange = ( value ) => {
-		setEditedJs( value );
-		setIsDirty( true );
-	};
 	const handleUpdate = () => {
 		// For users without unfiltered_html capability, strip CSS and JS content
 		// to prevent kses from leaving broken content
@@ -79,25 +68,6 @@ export default function HTMLEditModal( {
 				js: canUserUseUnfilteredHTML ? editedJs : '',
 			} ),
 		} );
-		setIsDirty( false );
-	};
-	const handleCancel = () => {
-		setIsDirty( false );
-		onRequestClose();
-	};
-	const handleRequestClose = () => {
-		if ( isDirty ) {
-			setShowUnsavedWarning( true );
-		} else {
-			onRequestClose();
-		}
-	};
-	const handleDiscardChanges = () => {
-		setShowUnsavedWarning( false );
-		onRequestClose();
-	};
-	const handleContinueEditing = () => {
-		setShowUnsavedWarning( false );
 	};
 	const handleUpdateAndClose = () => {
 		handleUpdate();
@@ -111,22 +81,16 @@ export default function HTMLEditModal( {
 		<>
 			<Modal
 				title={ __( 'Edit HTML' ) }
-				onRequestClose={ handleRequestClose }
+				onRequestClose={ onRequestClose }
 				className="block-library-html__modal"
 				size="large"
 				isDismissible={ false }
-				shouldCloseOnClickOutside={ ! isDirty }
-				shouldCloseOnEsc={ ! isDirty }
+				shouldCloseOnClickOutside={ false }
 				isFullScreen={ isFullscreen }
 				__experimentalHideHeader
 			>
 				<Tabs orientation="horizontal" defaultTabId="html">
-					<Grid
-						columns={ 1 }
-						templateRows="auto 1fr auto"
-						gap={ 4 }
-						style={ { height: '100%' } }
-					>
+					<VStack expanded>
 						<HStack
 							justify="space-between"
 							className="block-library-html__modal-header"
@@ -144,15 +108,21 @@ export default function HTMLEditModal( {
 									) }
 								</Tabs.TabList>
 							</div>
-							<div>
-								<Button
-									__next40pxDefaultSize
-									icon={ isFullscreen ? square : fullscreen }
-									label={ __( 'Enable/disable fullscreen' ) }
-									onClick={ toggleFullscreen }
-									variant="tertiary"
-								/>
-							</div>
+							{ ! isMobileViewport && (
+								<div>
+									<Button
+										__next40pxDefaultSize
+										icon={
+											isFullscreen ? square : fullscreen
+										}
+										label={ __(
+											'Enable/disable fullscreen'
+										) }
+										onClick={ toggleFullscreen }
+										variant="tertiary"
+									/>
+								</div>
+							) }
 						</HStack>
 						{ hasRestrictedContent && (
 							<Notice
@@ -165,11 +135,11 @@ export default function HTMLEditModal( {
 								) }
 							</Notice>
 						) }
-						<HStack
-							alignment="stretch"
-							justify="flex-start"
-							spacing={ 4 }
+						<Flex
+							direction={ isMobileViewport ? 'column' : 'row' }
 							className="block-library-html__modal-tabs"
+							align="stretch"
+							gap={ 8 }
 						>
 							<div className="block-library-html__modal-content">
 								<Tabs.TabPanel
@@ -179,7 +149,7 @@ export default function HTMLEditModal( {
 								>
 									<PlainText
 										value={ editedHtml }
-										onChange={ handleHtmlChange }
+										onChange={ setEditedHtml }
 										placeholder={ __( 'Write HTML…' ) }
 										aria-label={ __( 'HTML' ) }
 										className="block-library-html__modal-editor"
@@ -193,7 +163,7 @@ export default function HTMLEditModal( {
 									>
 										<PlainText
 											value={ editedCss }
-											onChange={ handleCssChange }
+											onChange={ setEditedCss }
 											placeholder={ __( 'Write CSS…' ) }
 											aria-label={ __( 'CSS' ) }
 											className="block-library-html__modal-editor"
@@ -208,7 +178,7 @@ export default function HTMLEditModal( {
 									>
 										<PlainText
 											value={ editedJs }
-											onChange={ handleJsChange }
+											onChange={ setEditedJs }
 											placeholder={ __(
 												'Write JavaScript…'
 											) }
@@ -227,7 +197,7 @@ export default function HTMLEditModal( {
 									} ) }
 								/>
 							</div>
-						</HStack>
+						</Flex>
 						<HStack
 							alignment="center"
 							justify="flex-end"
@@ -237,7 +207,7 @@ export default function HTMLEditModal( {
 							<Button
 								__next40pxDefaultSize
 								variant="tertiary"
-								onClick={ handleCancel }
+								onClick={ onRequestClose }
 							>
 								{ __( 'Cancel' ) }
 							</Button>
@@ -249,46 +219,9 @@ export default function HTMLEditModal( {
 								{ __( 'Update' ) }
 							</Button>
 						</HStack>
-					</Grid>
+					</VStack>
 				</Tabs>
 			</Modal>
-
-			{ showUnsavedWarning && (
-				<Modal
-					title={ __( 'Unsaved changes' ) }
-					onRequestClose={ handleContinueEditing }
-					size="medium"
-				>
-					<p>
-						{ __(
-							'You have unsaved changes. What would you like to do?'
-						) }
-					</p>
-					<Flex direction="row" justify="flex-end" gap={ 2 }>
-						<Button
-							__next40pxDefaultSize
-							variant="secondary"
-							onClick={ handleDiscardChanges }
-						>
-							{ __( 'Discard unsaved changes' ) }
-						</Button>
-						<Button
-							__next40pxDefaultSize
-							variant="secondary"
-							onClick={ handleContinueEditing }
-						>
-							{ __( 'Continue editing' ) }
-						</Button>
-						<Button
-							__next40pxDefaultSize
-							variant="primary"
-							onClick={ handleUpdateAndClose }
-						>
-							{ __( 'Update and close' ) }
-						</Button>
-					</Flex>
-				</Modal>
-			) }
 		</>
 	);
 }

package/src/icon/block.json

@@ -59,19 +59,10 @@
 		}
 	},
 	"selectors": {
-		"root": ".wp-block-icon",
-		"color": {
-			"root": ".wp-block-icon svg"
-		},
-		"border": {
-			"root": ".wp-block-icon svg"
-		},
+		"root": ".wp-block-icon svg",
+		"css": ".wp-block-icon",
 		"spacing": {
-			"padding": ".wp-block-icon svg"
-		},
-		"dimensions": {
-			"root": ".wp-block-icon svg",
-			"width": ".wp-block-icon svg"
+			"margin": ".wp-block-icon"
 		}
 	},
 	"style": "wp-block-icon",

package/src/icon/editor.scss

@@ -1,6 +1,11 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
 
+.wp-block[data-align="center"] > .wp-block-icon {
+	display: flex;
+	justify-content: center;
+}
+
 // Style for the icon library modal.
 .wp-block-icon__inserter {
 	padding: 0 $grid-unit-30;