@wordpress/block-library 9.42.0 → 9.43.1-next.v.202604091042.0

package/build-style/navigation/style.css

@@ -99,7 +99,6 @@
 .wp-block-navigation ul,
 .wp-block-navigation ul li {
   list-style: none;
-  padding: 0;
 }
 .wp-block-navigation .wp-block-navigation-item {
   background-color: inherit;
@@ -186,6 +185,10 @@
   --navigation-layout-justify: space-between;
 }
 
+:where(.wp-block-navigation) ul li {
+  padding: 0;
+}
+
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
   background-color: inherit;
   color: inherit;

package/build-style/style-rtl.css

@@ -427,7 +427,7 @@
   display: block;
   font-family: inherit;
   overflow-wrap: break-word;
-  white-space: pre-wrap;
+  white-space: break-spaces;
   direction: ltr;
   text-align: initial;
 }
@@ -2466,7 +2466,6 @@ ul {
 .wp-block-navigation ul,
 .wp-block-navigation ul li {
   list-style: none;
-  padding: 0;
 }
 .wp-block-navigation .wp-block-navigation-item {
   background-color: inherit;
@@ -2553,6 +2552,10 @@ ul {
   --navigation-layout-justify: space-between;
 }
 
+:where(.wp-block-navigation) ul li {
+  padding: 0;
+}
+
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
   background-color: inherit;
   color: inherit;

package/build-style/style.css

@@ -430,7 +430,7 @@
   display: block;
   font-family: inherit;
   overflow-wrap: break-word;
-  white-space: pre-wrap;
+  white-space: break-spaces;
   /*!rtl:begin:ignore*/
   direction: ltr;
   text-align: initial;
@@ -2496,7 +2496,6 @@ ul {
 .wp-block-navigation ul,
 .wp-block-navigation ul li {
   list-style: none;
-  padding: 0;
 }
 .wp-block-navigation .wp-block-navigation-item {
   background-color: inherit;
@@ -2583,6 +2582,10 @@ ul {
   --navigation-layout-justify: space-between;
 }
 
+:where(.wp-block-navigation) ul li {
+  padding: 0;
+}
+
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
   background-color: inherit;
   color: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.42.0",
+	"version": "9.43.1-next.v.202604091042.0+668146787",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -95,42 +95,42 @@
 	],
 	"dependencies": {
 		"@arraypress/waveform-player": "1.2.1",
-		"@wordpress/a11y": "^4.42.0",
-		"@wordpress/api-fetch": "^7.42.0",
-		"@wordpress/autop": "^4.42.0",
-		"@wordpress/base-styles": "^6.18.0",
-		"@wordpress/blob": "^4.42.0",
-		"@wordpress/block-editor": "^15.15.0",
-		"@wordpress/blocks": "^15.15.0",
-		"@wordpress/components": "^32.4.0",
-		"@wordpress/compose": "^7.42.0",
-		"@wordpress/core-data": "^7.42.0",
-		"@wordpress/data": "^10.42.0",
-		"@wordpress/date": "^5.42.0",
-		"@wordpress/deprecated": "^4.42.0",
-		"@wordpress/dom": "^4.42.0",
-		"@wordpress/element": "^6.42.0",
-		"@wordpress/escape-html": "^3.42.0",
-		"@wordpress/hooks": "^4.42.0",
-		"@wordpress/html-entities": "^4.42.0",
-		"@wordpress/i18n": "^6.15.0",
-		"@wordpress/icons": "^12.0.0",
-		"@wordpress/interactivity": "^6.42.0",
-		"@wordpress/interactivity-router": "^2.42.0",
-		"@wordpress/keyboard-shortcuts": "^5.42.0",
-		"@wordpress/keycodes": "^4.42.0",
-		"@wordpress/latex-to-mathml": "^1.10.0",
-		"@wordpress/notices": "^5.42.0",
-		"@wordpress/patterns": "^2.42.0",
-		"@wordpress/primitives": "^4.42.0",
-		"@wordpress/private-apis": "^1.42.0",
-		"@wordpress/reusable-blocks": "^5.42.0",
-		"@wordpress/rich-text": "^7.42.0",
-		"@wordpress/server-side-render": "^6.18.0",
-		"@wordpress/upload-media": "^0.27.0",
-		"@wordpress/url": "^4.42.0",
-		"@wordpress/viewport": "^6.42.0",
-		"@wordpress/wordcount": "^4.42.0",
+		"@wordpress/a11y": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/api-fetch": "^7.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/autop": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/base-styles": "^6.19.1-next.v.202604091042.0+668146787",
+		"@wordpress/blob": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/block-editor": "^15.16.1-next.v.202604091042.0+668146787",
+		"@wordpress/blocks": "^15.16.1-next.v.202604091042.0+668146787",
+		"@wordpress/components": "^32.5.2-next.v.202604091042.0+668146787",
+		"@wordpress/compose": "^7.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/core-data": "^7.43.2-next.v.202604091042.0+668146787",
+		"@wordpress/data": "^10.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/date": "^5.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/deprecated": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/dom": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/element": "^6.44.1-next.v.202604091042.0+668146787",
+		"@wordpress/escape-html": "^3.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/hooks": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/html-entities": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/i18n": "^6.17.1-next.v.202604091042.0+668146787",
+		"@wordpress/icons": "^12.1.1-next.v.202604091042.0+668146787",
+		"@wordpress/interactivity": "^6.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/interactivity-router": "^2.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/keyboard-shortcuts": "^5.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/keycodes": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/latex-to-mathml": "^1.11.1-next.v.202604091042.0+668146787",
+		"@wordpress/notices": "^5.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/patterns": "^2.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/primitives": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/private-apis": "^1.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/reusable-blocks": "^5.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/rich-text": "^7.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/server-side-render": "^6.19.1-next.v.202604091042.0+668146787",
+		"@wordpress/upload-media": "^0.28.1-next.v.202604091042.0+668146787",
+		"@wordpress/url": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/viewport": "^6.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/wordcount": "^4.43.1-next.v.202604091042.0+668146787",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -151,5 +151,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
+	"gitHead": "73606df74f1c38a084bfa5db97205259ef817593"
 }

package/src/code/edit.js

@@ -29,6 +29,7 @@ export default function CodeEdit( {
 				__unstableOnSplitAtDoubleLineEnd={ () =>
 					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}
+				style={ { whiteSpace: 'break-spaces' } }
 			/>
 		</pre>
 	);

package/src/code/style.scss

@@ -8,7 +8,7 @@
 		display: block;
 		font-family: inherit;
 		overflow-wrap: break-word;
-		white-space: pre-wrap;
+		white-space: break-spaces;
 		// Set direction and avoid inheriting alignment from a parent element.
 		/*!rtl:begin:ignore*/
 		direction: ltr;

package/src/cover/edit/color-utils.js

@@ -92,7 +92,7 @@ export const getMediaColor = memoize( async ( url ) => {
 			crossOrigin: imgCrossOrigin,
 		} );
 		return color.hex;
-	} catch ( error ) {
+	} catch {
 		// If there's an error return the fallback color.
 		return DEFAULT_BACKGROUND_COLOR;
 	}

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,22 +168,26 @@ 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.
@@ -201,8 +218,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 +235,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 +279,7 @@ function CoverEdit( {
 			useFeaturedImage: undefined,
 			dimRatio: newDimRatio,
 			isDark: newIsDark,
-			isUserOverlayColor: isUserOverlayColor || false,
+			isUserOverlayColor: currentAttrs.isUserOverlayColor || false,
 		} );
 	};
 
@@ -290,8 +313,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 +336,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 +396,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 +500,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 +519,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 +696,22 @@ 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
+							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 );
 }
 
 /**
@@ -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/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/form-input/edit.js

@@ -115,6 +115,20 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 						'Affects the "name" attribute of the input element, and is used as a name for the form submission results.'
 					) }
 				/>
+				{ 'hidden' === type && (
+					<TextControl
+						__next40pxDefaultSize
+						autoComplete="off"
+						label={ __( 'Value' ) }
+						value={ value }
+						onChange={ ( newVal ) =>
+							setAttributes( { value: newVal } )
+						}
+						help={ __(
+							'Sets the stored value for this hidden field.'
+						) }
+					/>
+				) }
 			</InspectorControls>
 		</>
 	);
@@ -133,23 +147,13 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 
 	if ( 'hidden' === type ) {
 		return (
-			<>
+			<div { ...blockProps }>
 				{ controls }
-				<input
-					type="hidden"
-					className={ clsx(
-						className,
-						'wp-block-form-input__input',
-						colorProps.className,
-						borderProps.className
-					) }
-					aria-label={ __( 'Value' ) }
-					value={ value }
-					onChange={ ( event ) =>
-						setAttributes( { value: event.target.value } )
-					}
+				<span
+					className="wp-block-form-input__label is-input-hidden"
+					data-message={ __( 'Hidden field' ) }
 				/>
-			</>
+			</div>
 		);
 	}
 

package/src/form-input/editor.scss

@@ -1,24 +1,24 @@
 .wp-block-form-input {
 	.is-input-hidden {
+		display: flex;
+		position: relative;
 		font-size: 0.85em;
 		opacity: 0.3;
 		border: 1px dashed;
 		padding: 0.5em;
 		box-sizing: border-box;
 		background: repeating-linear-gradient(45deg, transparent, transparent 5px, currentColor 5px, currentColor 6px);
+		justify-content: center;
+		align-items: center;
 
-		input[type="text"] {
-			background: transparent;
+		&::after {
+			content: attr(data-message);
 		}
 	}
 	&.is-selected {
 		.is-input-hidden {
 			opacity: 1;
 			background: none;
-
-			input[type="text"] {
-				background: unset;
-			}
 		}
 	}
 }

package/src/form-input/variations.js

@@ -70,6 +70,16 @@ const variations = [
 		scope: [ 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) => blockAttributes?.type === 'number',
 	},
+	{
+		name: 'hidden',
+		title: __( 'Hidden Input' ),
+		icon: 'visibility',
+		description: __( 'A hidden input field.' ),
+		attributes: { type: 'hidden' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'hidden',
+	},
 ];
 
 export default variations;

package/src/group/block.json

@@ -28,8 +28,10 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
-				"backgroundImage": true
+				"backgroundImage": true,
+				"gradient": true
 			}
 		},
 		"color": {