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

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

@@ -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;

package/src/icon/index.php

@@ -10,7 +10,9 @@
  *
  * @since 7.0.0
  *
- * @param array $attributes The block attributes.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The block instance.
  *
  * @return string Returns the Icon.
  */

package/src/image/image.js

@@ -1241,21 +1241,20 @@ export default function Image( {
 		} );
 	};
 
-	const featuredImageControl = (
-		<BlockSettingsMenuControls>
-			{ ( { selectedClientIds } ) =>
-				selectedClientIds.length === 1 &&
-				! isDescendentOfQueryLoop &&
-				postId &&
-				id &&
-				clientId === selectedClientIds[ 0 ] && (
-					<MenuItem onClick={ setPostFeatureImage }>
-						{ __( 'Set as featured image' ) }
-					</MenuItem>
-				)
-			}
-		</BlockSettingsMenuControls>
-	);
+	const featuredImageControl =
+		! isDescendentOfQueryLoop && postId && id ? (
+			<BlockSettingsMenuControls>
+				{ ( { canEdit, selectedClientIds } ) =>
+					canEdit &&
+					selectedClientIds.length === 1 &&
+					clientId === selectedClientIds[ 0 ] && (
+						<MenuItem onClick={ setPostFeatureImage }>
+							{ __( 'Set as featured image' ) }
+						</MenuItem>
+					)
+				}
+			</BlockSettingsMenuControls>
+		) : null;
 
 	return (
 		<>

package/src/image/index.php

@@ -205,8 +205,8 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
 		array(
 			'defaultAriaLabel' => __( 'Enlarged image' ),
 			'closeButtonText'  => esc_html__( 'Close' ),
-			'prevButtonText'   => esc_html__( 'Previous' ),
-			'nextButtonText'   => esc_html__( 'Next' ),
+			'prevButtonText'   => esc_html_x( 'Previous', 'previous image in lightbox' ),
+			'nextButtonText'   => esc_html_x( 'Next', 'next image in lightbox' ),
 		)
 	);
 
@@ -218,7 +218,9 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
 		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
-		$img_srcset       = wp_get_attachment_image_srcset( $block['attrs']['id'] );
+		$has_dimensions   = ( $img_metadata['width'] ?? '' ) && ( $img_metadata['height'] ?? '' );
+		$srcset_size      = $has_dimensions ? array( $img_metadata['width'], $img_metadata['height'] ) : 'large';
+		$img_srcset       = wp_get_attachment_image_srcset( $block['attrs']['id'], $srcset_size );
 		$img_width        = $img_metadata['width'] ?? 'none';
 		$img_height       = $img_metadata['height'] ?? 'none';
 	}
@@ -321,8 +323,8 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
 function block_core_image_print_lightbox_overlay() {
 	$dialog_label      = esc_attr__( 'Enlarged images' );
 	$close_button_text = esc_attr__( 'Close' );
-	$prev_button_text  = esc_attr__( 'Previous' );
-	$next_button_text  = esc_attr__( 'Next' );
+	$prev_button_text  = esc_attr_x( 'Previous', 'previous image in lightbox' );
+	$next_button_text  = esc_attr_x( 'Next', 'next image in lightbox' );
 	$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg>';
 	$prev_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" aria-hidden="true" focusable="false"><path d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z"></path></svg>';
 	$next_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" aria-hidden="true" focusable="false"><path d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"></path></svg>';

package/src/latest-comments/deprecated.js

@@ -23,6 +23,39 @@ const v1 = {
 			default: true,
 		},
 	},
+	supports: {
+		align: true,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		html: false,
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
 	isEligible( attributes ) {
 		return attributes?.displayExcerpt === false;
 	},