@wordpress/block-library 9.35.1-next.dc3f6d3c1.0 → 9.36.1-next.8b30e05b0.0

package/src/cover/edit/index.js

@@ -32,6 +32,7 @@ import {
 	attributesFromMedia,
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
+	EMBED_VIDEO_BACKGROUND_TYPE,
 	dimRatioToClass,
 	isContentPositionCenter,
 	getPositionClassName,
@@ -48,6 +49,7 @@ import {
 	DEFAULT_OVERLAY_COLOR,
 } from './color-utils';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
+import { getIframeSrc, getBackgroundVideoSrc } from '../embed-video-utils';
 
 function getInnerBlocksTemplate( attributes ) {
 	return [
@@ -319,10 +321,71 @@ function CoverEdit( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
+	const onSelectEmbedUrl = ( embedUrl ) => {
+		// Only set a new dimRatio if there was no previous media selected
+		// to avoid resetting to 50 if it has been explicitly set to 100.
+		const newDimRatio =
+			originalUrl === undefined && dimRatio === 100 ? 50 : dimRatio;
+
+		// Set initial attributes with URL
+		setAttributes( {
+			url: embedUrl,
+			backgroundType: EMBED_VIDEO_BACKGROUND_TYPE,
+			dimRatio: newDimRatio,
+			id: undefined,
+			focalPoint: undefined,
+			hasParallax: undefined,
+			isRepeated: undefined,
+			useFeaturedImage: undefined,
+		} );
+	};
+
+	// Fetch embed preview for embed videos
+	const { embedPreview, isFetchingEmbed } = useSelect(
+		( select ) => {
+			if ( backgroundType !== EMBED_VIDEO_BACKGROUND_TYPE || ! url ) {
+				return {
+					embedPreview: undefined,
+					isFetchingEmbed: false,
+				};
+			}
+
+			const { getEmbedPreview, isRequestingEmbedPreview } =
+				select( coreStore );
+
+			return {
+				embedPreview: getEmbedPreview( url ),
+				isFetchingEmbed: isRequestingEmbedPreview( url ),
+			};
+		},
+		[ url, backgroundType ]
+	);
+
+	// Compute embedSrc on-the-fly from embed preview for editor display
+	const embedSrc = 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 );
+	}, [ embedPreview, backgroundType ] );
+
 	const isUploadingMedia = isTemporaryMedia( id, url );
 
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+	const isEmbedVideoBackground =
+		EMBED_VIDEO_BACKGROUND_TYPE === backgroundType;
 
 	const blockEditingMode = useBlockEditingMode();
 	const hasNonContentControls = blockEditingMode === 'default';
@@ -449,6 +512,7 @@ function CoverEdit( {
 			attributes={ attributes }
 			setAttributes={ setAttributes }
 			onSelectMedia={ onSelectMedia }
+			onSelectEmbedUrl={ onSelectEmbedUrl }
 			currentSettings={ currentSettings }
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			onClearMedia={ onClearMedia }
@@ -600,6 +664,23 @@ function CoverEdit( {
 						style={ mediaStyle }
 					/>
 				) }
+				{ isEmbedVideoBackground && embedSrc && (
+					<div
+						ref={ mediaElement }
+						className="wp-block-cover__video-background wp-block-cover__embed-background"
+						style={ mediaStyle }
+					>
+						<iframe
+							src={ embedSrc }
+							title="Background video"
+							frameBorder="0"
+							allow="autoplay; fullscreen"
+						/>
+					</div>
+				) }
+				{ isEmbedVideoBackground && ! embedSrc && isFetchingEmbed && (
+					<Spinner />
+				) }
 
 				{ showOverlay && (
 					<span

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

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockVariations } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { matchesPatterns } from '../embed/util';
+
+const DEFAULT_EMBED_BLOCK = 'core/embed';
+
+// List of supported video providers for cover block backgrounds
+const VIDEO_PROVIDERS = [
+	'youtube',
+	'vimeo',
+	'videopress',
+	'animoto',
+	'tiktok',
+	'wordpress-tv',
+];
+
+/**
+ * Checks if a URL is a valid video embed URL from supported providers.
+ *
+ * @param {string} url The URL to validate.
+ * @return {boolean} True if the URL matches a supported video provider pattern.
+ */
+export function isValidVideoEmbedUrl( url ) {
+	if ( ! url ) {
+		return false;
+	}
+
+	const embedBlock = findVideoEmbedProvider( url );
+	return embedBlock !== null;
+}
+
+/**
+ * Finds the embed provider for a given URL if it's a supported video provider.
+ *
+ * @param {string} url The URL to check.
+ * @return {string|null} The provider name slug (e.g., 'youtube') or null if not found.
+ */
+export function getVideoEmbedProvider( url ) {
+	const embedBlock = findVideoEmbedProvider( url );
+	return embedBlock ? embedBlock.name : null;
+}
+
+/**
+ * Finds a matching video embed block variation for the given URL.
+ *
+ * @param {string} url The URL to match against provider patterns.
+ * @return {Object|null} The matching block variation or null if not found.
+ */
+function findVideoEmbedProvider( url ) {
+	const embedVariations = getBlockVariations( DEFAULT_EMBED_BLOCK );
+
+	if ( ! embedVariations ) {
+		return null;
+	}
+
+	const matchingVariation = embedVariations.find( ( { patterns } ) =>
+		matchesPatterns( url, patterns )
+	);
+
+	if (
+		! matchingVariation ||
+		! VIDEO_PROVIDERS.includes( matchingVariation.name )
+	) {
+		return null;
+	}
+
+	return matchingVariation;
+}
+
+/**
+ * Extracts iframe src from embed HTML.
+ *
+ * @param {string} html The embed HTML.
+ * @return {string|null} The iframe src URL or null if not found.
+ */
+export function getIframeSrc( html ) {
+	if ( ! html ) {
+		return null;
+	}
+
+	const srcMatch = html.match( /src=["']([^"']+)["']/ );
+	return srcMatch ? srcMatch[ 1 ] : null;
+}
+
+/**
+ * Detects the video provider from an iframe src URL.
+ *
+ * @param {string} src The iframe src URL.
+ * @return {string|null} The provider name slug or null if not recognized.
+ */
+export function detectProviderFromSrc( src ) {
+	if ( ! src ) {
+		return null;
+	}
+
+	const lowerSrc = src.toLowerCase();
+
+	if (
+		lowerSrc.includes( 'youtube.com' ) ||
+		lowerSrc.includes( 'youtu.be' )
+	) {
+		return 'youtube';
+	}
+	if ( lowerSrc.includes( 'vimeo.com' ) ) {
+		return 'vimeo';
+	}
+	if ( lowerSrc.includes( 'videopress.com' ) ) {
+		return 'videopress';
+	}
+	if ( lowerSrc.includes( 'animoto.com' ) ) {
+		return 'animoto';
+	}
+	if ( lowerSrc.includes( 'tiktok.com' ) ) {
+		return 'tiktok';
+	}
+	if ( lowerSrc.includes( 'wordpress.tv' ) ) {
+		return 'wordpress-tv';
+	}
+
+	return null;
+}
+
+/**
+ * Modifies an iframe src URL to add background video parameters.
+ * Automatically detects the provider from the URL.
+ *
+ * @param {string} src The iframe src URL.
+ * @return {string} The modified URL.
+ */
+export function getBackgroundVideoSrc( src ) {
+	if ( ! src ) {
+		return src;
+	}
+
+	try {
+		const url = new URL( src );
+
+		// Detect provider from the iframe src URL
+		const provider = detectProviderFromSrc( src );
+
+		// Add provider-specific parameters for background video behavior
+		switch ( provider ) {
+			case 'youtube':
+				// YouTube parameters for background video
+				url.searchParams.set( 'autoplay', '1' );
+				url.searchParams.set( 'mute', '1' );
+				url.searchParams.set( 'loop', '1' );
+				url.searchParams.set( 'controls', '0' );
+				url.searchParams.set( 'showinfo', '0' );
+				url.searchParams.set( 'modestbranding', '1' );
+				url.searchParams.set( 'playsinline', '1' );
+				url.searchParams.set( 'rel', '0' );
+				// For loop to work, we need the playlist parameter
+				const videoId = url.pathname.split( '/' ).pop();
+				if ( videoId ) {
+					url.searchParams.set( 'playlist', videoId );
+				}
+				break;
+
+			case 'vimeo':
+				// Vimeo parameters for background video
+				url.searchParams.set( 'autoplay', '1' );
+				url.searchParams.set( 'muted', '1' );
+				url.searchParams.set( 'loop', '1' );
+				url.searchParams.set( 'background', '1' );
+				url.searchParams.set( 'controls', '0' );
+				break;
+
+			case 'videopress':
+			case 'wordpress-tv':
+				// VideoPress parameters
+				url.searchParams.set( 'autoplay', '1' );
+				url.searchParams.set( 'loop', '1' );
+				url.searchParams.set( 'muted', '1' );
+				break;
+
+			default:
+				// Generic parameters that might work for other providers
+				url.searchParams.set( 'autoplay', '1' );
+				url.searchParams.set( 'muted', '1' );
+				url.searchParams.set( 'loop', '1' );
+				break;
+		}
+
+		return url.toString();
+	} catch ( error ) {
+		// If URL parsing fails, return original src
+		return src;
+	}
+}

package/src/cover/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { cover as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -14,6 +15,9 @@ import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
 import variations from './variations';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -53,15 +57,15 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'background',
 			label: __( 'Background' ),
-			type: 'Media',
-			shownByDefault: true,
+			type: 'media',
 			mapping: {
 				type: 'backgroundType',
 				id: 'id',
-				src: 'url',
+				url: 'url',
 				alt: 'alt',
 				featuredImage: 'useFeaturedImage',
 			},
@@ -73,6 +77,9 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
 			},
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'content' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/cover/index.php

@@ -16,6 +16,112 @@
  * @return string Returns the cover block markup, if useFeaturedImage is true.
  */
 function render_block_core_cover( $attributes, $content ) {
+	// Handle embed video background.
+	if (
+		isset( $attributes['backgroundType'] ) &&
+		'embed-video' === $attributes['backgroundType'] &&
+		isset( $attributes['url'] ) &&
+		! empty( $attributes['url'] ) &&
+		is_string( $attributes['url'] )
+	) {
+		$url = $attributes['url'];
+
+		// Use WordPress's native oEmbed processing (includes caching).
+		$oembed_html = wp_oembed_get( $url );
+
+		if ( $oembed_html ) {
+			// Extract iframe src from the oEmbed HTML.
+			preg_match( '/src=["\']([^"\']+)["\']/', $oembed_html, $src_matches );
+			if ( ! empty( $src_matches[1] ) ) {
+				$iframe_src = $src_matches[1];
+
+				// Detect provider from iframe src URL.
+				$lower_src = strtolower( $iframe_src );
+				$provider  = null;
+
+				if ( strpos( $lower_src, 'youtube.com' ) !== false || strpos( $lower_src, 'youtu.be' ) !== false ) {
+					$provider = 'youtube';
+				} elseif ( strpos( $lower_src, 'vimeo.com' ) !== false ) {
+					$provider = 'vimeo';
+				} elseif ( strpos( $lower_src, 'videopress.com' ) !== false ) {
+					$provider = 'videopress';
+				} elseif ( strpos( $lower_src, 'wordpress.tv' ) !== false ) {
+					$provider = 'wordpress-tv';
+				}
+
+				// Modify iframe src to add background video parameters based on provider.
+				$parsed_url = wp_parse_url( $iframe_src );
+				if ( $parsed_url && isset( $parsed_url['host'] ) ) {
+					// Parse existing query parameters.
+					$query_params = array();
+					if ( isset( $parsed_url['query'] ) ) {
+						parse_str( $parsed_url['query'], $query_params );
+					}
+
+					// Add background video parameters based on provider.
+					if ( 'youtube' === $provider ) {
+						$query_params['autoplay']       = '1';
+						$query_params['mute']           = '1';
+						$query_params['loop']           = '1';
+						$query_params['controls']       = '0';
+						$query_params['modestbranding'] = '1';
+						$query_params['playsinline']    = '1';
+					} elseif ( 'vimeo' === $provider ) {
+						$query_params['autoplay']    = '1';
+						$query_params['muted']       = '1';
+						$query_params['loop']        = '1';
+						$query_params['background']  = '1';
+						$query_params['controls']    = '0';
+						$query_params['transparent'] = '0';
+					} elseif ( 'videopress' === $provider || 'wordpress-tv' === $provider ) {
+						$query_params['autoplay'] = '1';
+						$query_params['loop']     = '1';
+						$query_params['muted']    = '1';
+					}
+
+					// Rebuild the URL with new parameters.
+					$iframe_src = $parsed_url['scheme'] . '://' . $parsed_url['host'];
+					if ( isset( $parsed_url['path'] ) ) {
+						$iframe_src .= $parsed_url['path'];
+					}
+					if ( ! empty( $query_params ) ) {
+						$iframe_src .= '?' . http_build_query( $query_params );
+					}
+				}
+
+				// Build the iframe HTML that will replace the figure.
+				$iframe_html = sprintf(
+					'<div class="wp-block-cover__video-background wp-block-cover__embed-background"><iframe src="%s" title="Background video" frameborder="0" allow="autoplay; fullscreen"></iframe></div>',
+					esc_url( $iframe_src )
+				);
+
+				// Use the HTML API to find and replace the figure.wp-block-embed element.
+				$processor = new WP_HTML_Tag_Processor( $content );
+
+				if ( $processor->next_tag(
+					array(
+						'tag_name'   => 'FIGURE',
+						'class_name' => 'wp-block-embed',
+					)
+				) ) {
+					// Use regex with PREG_OFFSET_CAPTURE to find the position of the figure element.
+					// This follows the same pattern used for featured image insertion below.
+					$figure_pattern = '/<figure\s+[^>]*\bwp-block-embed\b[^>]*>.*?<\/figure>/is';
+					if ( 1 === preg_match( $figure_pattern, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
+						$figure_start  = $matches[0][1];
+						$figure_length = strlen( $matches[0][0] );
+						$figure_end    = $figure_start + $figure_length;
+
+						// Replace the figure element with the iframe HTML.
+						$content = substr( $content, 0, $figure_start ) . $iframe_html . substr( $content, $figure_end );
+					}
+				}
+			}
+		}
+
+		return $content;
+	}
+
 	if ( 'image' !== $attributes['backgroundType'] || false === $attributes['useFeaturedImage'] ) {
 		return $content;
 	}

package/src/cover/save.js

@@ -19,6 +19,7 @@ import {
 import {
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
+	EMBED_VIDEO_BACKGROUND_TYPE,
 	dimRatioToClass,
 	isContentPositionCenter,
 	getPositionClassName,
@@ -60,6 +61,8 @@ export default function save( { attributes } ) {
 
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+	const isEmbedVideoBackground =
+		EMBED_VIDEO_BACKGROUND_TYPE === backgroundType;
 
 	const isImgElement = ! ( hasParallax || isRepeated );
 
@@ -144,6 +147,17 @@ export default function save( { attributes } ) {
 					data-object-position={ objectPosition }
 				/>
 			) }
+			{ isEmbedVideoBackground && url && (
+				<figure
+					className={ clsx(
+						'wp-block-cover__video-background',
+						'wp-block-cover__embed-background',
+						'wp-block-embed'
+					) }
+				>
+					<div className="wp-block-embed__wrapper">{ url }</div>
+				</figure>
+			) }
 
 			{ /* The `wp-block-cover__background` needs to be immediately before
 			the `wp-block-cover__inner-container`, so the exclusion CSS selector

package/src/cover/shared.js

@@ -18,6 +18,7 @@ const POSITION_CLASSNAMES = {
 
 export const IMAGE_BACKGROUND_TYPE = 'image';
 export const VIDEO_BACKGROUND_TYPE = 'video';
+export const EMBED_VIDEO_BACKGROUND_TYPE = 'embed-video';
 export const COVER_MIN_HEIGHT = 50;
 export const COVER_MAX_HEIGHT = 1000;
 export const COVER_DEFAULT_HEIGHT = 300;

package/src/cover/style.scss

@@ -182,6 +182,49 @@
 		border: none;
 		box-shadow: none;
 	}
+
+	.wp-block-cover__embed-background {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: 0;
+		padding: 0;
+		width: 100%;
+		height: 100%;
+		max-width: none;
+		max-height: none;
+		outline: none;
+		border: none;
+		box-shadow: none;
+		pointer-events: none; // Prevent interaction with the iframe
+
+		.wp-block-embed__wrapper {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			margin: 0;
+			padding: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		iframe,
+		.wp-block-embed__wrapper iframe {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			width: 100vw;
+			height: 100vh;
+			min-width: 100%;
+			min-height: 100%;
+			transform: translate(-50%, -50%);
+			pointer-events: none; // Prevent interaction with the iframe
+		}
+	}
 }
 
 .wp-block-cover-image,
@@ -308,6 +351,10 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not(
 		z-index: z-index(".wp-block-cover__video-background");
 	}
 
+	.wp-block-cover__embed-background {
+		z-index: z-index(".wp-block-cover__video-background");
+	}
+
 	.wp-block-cover__image-background {
 		z-index: z-index(".wp-block-cover__image-background");
 	}

package/src/details/index.js

@@ -3,6 +3,7 @@
  */
 import { details as icon } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -12,6 +13,9 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 export { metadata, name };
@@ -62,16 +66,16 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'summary',
 			label: __( 'Summary' ),
-			type: 'RichText',
-			shownByDefault: true,
-			mapping: {
-				value: 'summary',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'summary' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/file/index.js

@@ -3,6 +3,7 @@
  */
 import { _x, __ } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -13,6 +14,9 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -33,14 +37,14 @@ export const settings = {
 };
 
 if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+	settings[ fieldsKey ] = [
 		{
+			id: 'file',
 			label: __( 'File' ),
-			type: 'Media',
-			shownByDefault: true,
+			type: 'media',
 			mapping: {
 				id: 'id',
-				src: 'href',
+				url: 'href',
 			},
 			args: {
 				allowedTypes: [],
@@ -48,22 +52,19 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
 			},
 		},
 		{
+			id: 'fileName',
 			label: __( 'Filename' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'fileName',
-			},
+			type: 'richtext',
 		},
 		{
+			id: 'downloadButtonText',
 			label: __( 'Button Text' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'downloadButtonText',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'file' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/freeform/block.json

@@ -19,7 +19,7 @@
 		"lock": false,
 		"reusable": false,
 		"renaming": false,
-		"blockVisibility": false
+		"visibility": false
 	},
 	"editorStyle": "wp-block-freeform-editor"
 }