@wordpress/block-library 9.43.0 → 9.44.0

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 );
 }
 
 /**
@@ -189,7 +191,7 @@ export function getBackgroundVideoSrc( src ) {
 		}
 
 		return url.toString();
-	} catch ( error ) {
+	} catch {
 		// If URL parsing fails, return original src
 		return src;
 	}

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/embed/test/index.native.js

@@ -28,9 +28,10 @@ import { requestPreview } from '@wordpress/react-native-bridge';
 /**
  * Internal dependencies
  */
+import { WebView } from 'react-native-webview';
+
 import * as paragraph from '../../paragraph';
 import * as embed from '..';
-import { WebView } from 'react-native-webview';
 
 // Override modal mock to prevent unmounting it when is not visible.
 // This is required to be able to trigger onClose and onDismiss events when
@@ -1114,7 +1115,7 @@ describe( 'Embed block', () => {
 			try {
 				mediaSettingsPanel =
 					await screen.findByText( 'Media settings' );
-			} catch ( e ) {
+			} catch {
 				// NOOP.
 			}
 

package/src/file/utils/index.js

@@ -54,7 +54,7 @@ const createActiveXObject = ( type ) => {
 	let ax;
 	try {
 		ax = new window.ActiveXObject( type );
-	} catch ( e ) {
+	} catch {
 		ax = undefined;
 	}
 	return ax;

package/src/form/view.js

@@ -47,7 +47,7 @@ document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) {
 			} else {
 				redirectNotification( 'error' );
 			}
-		} catch ( error ) {
+		} catch {
 			redirectNotification( 'error' );
 		}
 	} );

package/src/icon/edit.js

@@ -78,9 +78,7 @@ export function Edit( { attributes, setAttributes } ) {
 					? getEntityRecord( 'root', 'icon', icon )
 					: null,
 				allIcons: isInserterOpen
-					? getEntityRecords( 'root', 'icon', {
-							per_page: -1,
-					  } )
+					? getEntityRecords( 'root', 'icon' )
 					: undefined,
 			};
 		},

package/src/image/image.js

@@ -313,7 +313,7 @@ export default function Image( {
 	const setRefs = useMergeRefs( [ setImageElement, setResizeObserved ] );
 	const { allowResize = true } = context;
 
-	const { image, canUserEdit } = useSelect(
+	const { image, canUserEdit, attachmentResolutionError } = useSelect(
 		( select ) => {
 			const imageRecord =
 				id && isSingleSelected
@@ -325,6 +325,23 @@ export default function Image( {
 					  )
 					: null;
 
+			// Check if the attachment resolution failed with a specific error.
+			// We use getResolutionError instead of hasFinishedResolution so we
+			// can distinguish 404 (attachment doesn't exist) from transient
+			// errors (500, 403, network) that shouldn't clear the id.
+			const resolutionError =
+				id && isSingleSelected
+					? select( coreStore ).getResolutionError(
+							'getEntityRecord',
+							[
+								'postType',
+								'attachment',
+								id,
+								{ context: 'view' },
+							]
+					  )
+					: null;
+
 			// Check edit permissions when the media editor experiment is enabled.
 			// Only check when imageRecord is available to avoid unnecessary API requests.
 			let canEdit = false;
@@ -339,11 +356,33 @@ export default function Image( {
 			return {
 				image: imageRecord,
 				canUserEdit: canEdit,
+				attachmentResolutionError: resolutionError,
 			};
 		},
 		[ id, isSingleSelected ]
 	);
 
+	// If the image has an id but the attachment doesn't exist on this site,
+	// clear the id so Gutenberg treats the image as external.
+	// This handles content copied between WordPress sites.
+	//
+	// Known limitation: if a different attachment with the same id happens to
+	// exist on the destination site, the lookup will succeed and the wrong
+	// local image will be used. URL matching could address this in a follow-up.
+	// See: https://github.com/WordPress/gutenberg/issues/74156
+	useEffect( () => {
+		if ( ! id || ! isSingleSelected ) {
+			return;
+		}
+		// Only clear for confirmed 404s. apiFetch throws the Response object
+		// for HTTP errors, so checking .status === 404 avoids incorrectly
+		// clearing the id on 403, 500, or network failures, which would
+		// cause data loss for valid local attachments.
+		if ( attachmentResolutionError?.status === 404 ) {
+			setAttributes( { id: undefined } );
+		}
+	}, [ id, isSingleSelected, attachmentResolutionError, setAttributes ] );
+
 	const {
 		canInsertCover,
 		imageEditing,
@@ -396,6 +435,9 @@ export default function Image( {
 		hasNonContentControls &&
 		! isWideAligned &&
 		isLargeViewport;
+	// An image is uploading if it has a temporary blob URL, or if it is
+	// being processed client-side (e.g. transcoded or generating sub-sizes).
+	const isUploading = !! temporaryURL || isSideloading;
 	const imageSizeOptions = imageSizes
 		.filter(
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
@@ -532,6 +574,7 @@ export default function Image( {
 		if ( ! mediaUpload ) {
 			return;
 		}
+		let notified = false;
 		mediaUpload( {
 			filesList: [ externalBlob ],
 			onFileChange( [ img ] ) {
@@ -541,10 +584,15 @@ export default function Image( {
 					return;
 				}
 
-				setExternalBlob();
-				createSuccessNotice( __( 'Image uploaded.' ), {
-					type: 'snackbar',
-				} );
+				// With client-side media processing, onFileChange fires
+				// for each generated sub-size. Only show the notice once.
+				if ( ! notified ) {
+					notified = true;
+					setExternalBlob();
+					createSuccessNotice( __( 'Image uploaded.' ), {
+						type: 'snackbar',
+					} );
+				}
 			},
 			allowedTypes: ALLOWED_MEDIA_TYPES,
 			onError( message ) {
@@ -885,9 +933,7 @@ export default function Image( {
 									onSelectURL={ onSelectURL }
 									onError={ onUploadError }
 									onReset={ () => onSelectImage( undefined ) }
-									isUploading={
-										!! temporaryURL || isSideloading
-									}
+									isUploading={ isUploading }
 									emptyLabel={ __( 'Add image' ) }
 								/>
 							</ToolsPanelItem>
@@ -1078,7 +1124,7 @@ export default function Image( {
 						...shadowProps.style,
 					} }
 				/>
-				{ ( temporaryURL || isSideloading ) && <Spinner /> }
+				{ isUploading && <Spinner /> }
 			</>
 		);
 
@@ -1110,6 +1156,7 @@ export default function Image( {
 		isResizable &&
 		isSingleSelected &&
 		! isEditingImage &&
+		! isUploading &&
 		! SIZED_LAYOUTS.includes( parentLayoutType )
 	) {
 		const numericRatio = aspectRatio && evalAspectRatio( aspectRatio );

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' ),
 		)
 	);
 
@@ -323,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/navigation-link/link-ui/index.js

@@ -124,13 +124,24 @@ function UnforwardedLinkUI( props, ref ) {
 			url,
 			opensInNewTab,
 			title: label && stripHTML( label ),
+			entityTitle: entityRecord?.title?.rendered || entityRecord?.name,
 			kind,
 			type,
 			id,
 			image,
 			badges,
 		} ),
-		[ label, opensInNewTab, url, kind, type, id, image, badges ]
+		[
+			label,
+			opensInNewTab,
+			url,
+			kind,
+			type,
+			id,
+			image,
+			badges,
+			entityRecord,
+		]
 	);
 
 	const handlePageCreated = ( pageLink ) => {

package/src/navigation-link/link-ui/page-creator.js

@@ -103,7 +103,7 @@ export function LinkUIPageCreator( {
 
 				onPageCreated( pageLink );
 			}
-		} catch ( error ) {
+		} catch {
 			// Show error notice
 			createErrorNotice(
 				__( 'Failed to create page. Please try again.' ),

package/src/navigation-link/shared/update-attributes.js

@@ -34,7 +34,7 @@ const shouldSeverEntityLink = ( originalUrl, newUrl ) => {
 					? window.location.origin
 					: 'https://wordpress.org' );
 			return new URL( url, base );
-		} catch ( error ) {
+		} catch {
 			// If URL construction still fails, it's likely an invalid URL
 			// and we should sever the entity link
 			return null;

package/src/navigation-link/shared/use-link-preview.js

@@ -101,7 +101,7 @@ export function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {
 			// Different host - this is an external link
 			isExternal = true;
 		}
-	} catch ( e ) {
+	} catch {
 		// URL parsing failed - treat as external (e.g. no homeUrl, or URL without protocol)
 		isExternal = true;
 	}

package/src/paragraph/use-enter.js

@@ -90,12 +90,12 @@ export function useOnEnter( props ) {
 			}
 
 			const defaultBlockName = getDefaultBlockName();
+			const wrapperBlockName = getBlockName( wrapperClientId );
+			const grandparentClientId = getBlockRootClientId( wrapperClientId );
 
 			if (
-				! canInsertBlockType(
-					defaultBlockName,
-					getBlockRootClientId( wrapperClientId )
-				)
+				! canInsertBlockType( defaultBlockName, grandparentClientId ) ||
+				! canInsertBlockType( wrapperBlockName, grandparentClientId )
 			) {
 				return;
 			}
@@ -119,7 +119,7 @@ export function useOnEnter( props ) {
 				insertBlock(
 					createBlock( defaultBlockName ),
 					blockIndex + 1,
-					getBlockRootClientId( wrapperClientId ),
+					grandparentClientId,
 					true
 				);
 			} );

package/src/pattern/edit.js

@@ -78,7 +78,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
 		if ( ! hasRecursionError && selectedPattern?.blocks ) {
 			try {
 				parsePatternDependencies( selectedPattern );
-			} catch ( error ) {
+			} catch {
 				setHasRecursionError( true );
 				return;
 			}

package/src/post-author-biography/style.scss

@@ -1,4 +1,5 @@
 .wp-block-post-author-biography {
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
+	white-space: pre-wrap;
 }

package/src/search/block.json

@@ -42,10 +42,6 @@
 		"query": {
 			"type": "object",
 			"default": {}
-		},
-		"isSearchFieldHidden": {
-			"type": "boolean",
-			"default": false
 		}
 	},
 	"supports": {
@@ -92,5 +88,9 @@
 		"html": false
 	},
 	"editorStyle": "wp-block-search-editor",
-	"style": "wp-block-search"
+	"style": "wp-block-search",
+	"selectors": {
+		"color": ".wp-block-search .wp-block-search__button, .wp-block-search.wp-block-search__no-button .wp-block-search__input",
+		"border": ".wp-block-search.wp-block-search__button-outside .wp-block-search__input, .wp-block-search.wp-block-search__button-outside .wp-block-search__button, .wp-block-search.wp-block-search__no-button .wp-block-search__input, .wp-block-search.wp-block-search__button-only .wp-block-search__input, .wp-block-search.wp-block-search__button-only .wp-block-search__button, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper"
+	}
 }

package/src/search/edit.js

@@ -70,7 +70,6 @@ export default function SearchEdit( {
 		buttonText,
 		buttonPosition,
 		buttonUseIcon,
-		isSearchFieldHidden,
 		style,
 	} = attributes;
 
@@ -139,6 +138,7 @@ export default function SearchEdit( {
 	const isButtonPositionOutside = 'button-outside' === buttonPosition;
 	const hasNoButton = 'no-button' === buttonPosition;
 	const hasOnlyButton = 'button-only' === buttonPosition;
+	const isSearchFieldHidden = hasOnlyButton && ! isSelected;
 	const searchFieldRef = useRef();
 	const buttonRef = useRef();
 
@@ -147,25 +147,6 @@ export default function SearchEdit( {
 		defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },
 	} );
 
-	useEffect( () => {
-		if ( hasOnlyButton && ! isSelected ) {
-			setAttributes( {
-				isSearchFieldHidden: true,
-			} );
-		}
-	}, [ hasOnlyButton, isSelected, setAttributes ] );
-
-	// Show the search field when width changes.
-	useEffect( () => {
-		if ( ! hasOnlyButton || ! isSelected ) {
-			return;
-		}
-
-		setAttributes( {
-			isSearchFieldHidden: false,
-		} );
-	}, [ hasOnlyButton, isSelected, setAttributes, width ] );
-
 	const getBlockClassNames = () => {
 		return clsx(
 			className,
@@ -183,7 +164,7 @@ export default function SearchEdit( {
 			buttonUseIcon && ! hasNoButton
 				? 'wp-block-search__icon-button'
 				: undefined,
-			hasOnlyButton && isSearchFieldHidden
+			isSearchFieldHidden
 				? 'wp-block-search__searchfield-hidden'
 				: undefined
 		);
@@ -223,10 +204,12 @@ export default function SearchEdit( {
 		// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.
 		const textFieldClasses = clsx(
 			'wp-block-search__input',
+			hasNoButton ? colorProps.className : undefined,
 			isButtonPositionInside ? undefined : borderProps.className,
 			typographyProps.className
 		);
 		const textFieldStyles = {
+			...( hasNoButton ? colorProps.style : {} ),
 			...( isButtonPositionInside
 				? {
 						borderRadius: borderProps.style?.borderRadius,
@@ -292,14 +275,6 @@ export default function SearchEdit( {
 				  }
 				: borderProps.style ),
 		};
-		const handleButtonClick = () => {
-			if ( hasOnlyButton ) {
-				setAttributes( {
-					isSearchFieldHidden: ! isSearchFieldHidden,
-				} );
-			}
-		};
-
 		return (
 			<>
 				{ buttonUseIcon && (
@@ -312,7 +287,6 @@ export default function SearchEdit( {
 								? stripHTML( buttonText )
 								: __( 'Search' )
 						}
-						onClick={ handleButtonClick }
 						ref={ buttonRef }
 					>
 						<Icon icon={ search } />
@@ -331,7 +305,6 @@ export default function SearchEdit( {
 						onChange={ ( html ) =>
 							setAttributes( { buttonText: html } )
 						}
-						onClick={ handleButtonClick }
 					/>
 				) }
 			</>
@@ -351,7 +324,6 @@ export default function SearchEdit( {
 							showLabel: true,
 							buttonUseIcon: false,
 							buttonPosition: 'button-outside',
-							isSearchFieldHidden: false,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -382,7 +354,6 @@ export default function SearchEdit( {
 						onDeselect={ () => {
 							setAttributes( {
 								buttonPosition: 'button-outside',
-								isSearchFieldHidden: false,
 							} );
 						} }
 						isShownByDefault
@@ -394,8 +365,6 @@ export default function SearchEdit( {
 							onChange={ ( value ) => {
 								setAttributes( {
 									buttonPosition: value,
-									isSearchFieldHidden:
-										value === 'button-only',
 								} );
 							} }
 							options={ buttonPositionControls }

package/src/search/index.php

@@ -69,6 +69,9 @@ function render_block_core_search( $attributes ) {
 	if ( ! empty( $typography_classes ) ) {
 		$input_classes[] = $typography_classes;
 	}
+	if ( ! $show_button && ! empty( $color_classes ) ) {
+		$input_classes[] = $color_classes;
+	}
 	if ( $input->next_tag() ) {
 		$input->add_class( implode( ' ', $input_classes ) );
 		$input->set_attribute( 'id', $input_id );
@@ -430,20 +433,37 @@ function styles_for_block_core_search( $attributes ) {
 		}
 	}
 
+	$use_input_for_colors = ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'];
+
 	// Add color styles.
 	$has_text_color = ! empty( $attributes['style']['color']['text'] );
 	if ( $has_text_color ) {
-		$button_styles[] = sprintf( 'color: %s;', $attributes['style']['color']['text'] );
+		$text_color_style = sprintf( 'color: %s;', $attributes['style']['color']['text'] );
+		if ( $use_input_for_colors ) {
+			$input_styles[] = $text_color_style;
+		} else {
+			$button_styles[] = $text_color_style;
+		}
 	}
 
 	$has_background_color = ! empty( $attributes['style']['color']['background'] );
 	if ( $has_background_color ) {
-		$button_styles[] = sprintf( 'background-color: %s;', $attributes['style']['color']['background'] );
+		$background_color_style = sprintf( 'background-color: %s;', $attributes['style']['color']['background'] );
+		if ( $use_input_for_colors ) {
+			$input_styles[] = $background_color_style;
+		} else {
+			$button_styles[] = $background_color_style;
+		}
 	}
 
 	$has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
 	if ( $has_custom_gradient ) {
-		$button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] );
+		$custom_gradient_style = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] );
+		if ( $use_input_for_colors ) {
+			$input_styles[] = $custom_gradient_style;
+		} else {
+			$button_styles[] = $custom_gradient_style;
+		}
 	}
 
 	// Get typography styles to be shared across inner elements.

package/src/separator/transforms.js

@@ -1,17 +1,31 @@
 /**
  * WordPress dependencies
  */
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import {
+	createBlock,
+	getBlockVariations,
+	getDefaultBlockName,
+} from '@wordpress/blocks';
 
 const transforms = {
 	from: [
 		{
 			type: 'input',
 			regExp: /^-{3,}$/,
-			transform: () => [
-				createBlock( 'core/separator' ),
-				createBlock( getDefaultBlockName() ),
-			],
+			transform: () => {
+				// Check for default variation to apply default variation attributes.
+				const defaultVariation = getBlockVariations(
+					'core/separator'
+				)?.find( ( variation ) => variation.isDefault );
+
+				return [
+					createBlock(
+						'core/separator',
+						defaultVariation?.attributes ?? {}
+					),
+					createBlock( getDefaultBlockName() ),
+				];
+			},
 		},
 		{
 			type: 'raw',

package/src/style.scss

@@ -79,7 +79,6 @@
 @use "./table/style.scss" as *;
 @use "./table-of-contents/style.scss" as *;
 @use "./tabs/style.scss" as *;
-@use "./tabs-menu/style.scss" as *;
 @use "./tabs-menu-item/style.scss" as *;
 @use "./term-count/style.scss" as *;
 @use "./term-description/style.scss" as *;