Add video to cover block.

assets/stylesheets/_z-index.scss

@@ -29,6 +29,8 @@ $z-layers: (
 	".edit-post-header": 30,
 	".block-library-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
 	".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
+	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
+	".wp-block-cover__video-background": 0, // Video background inside cover block.
 
 	// Side UI active buttons
 	".editor-block-mover__control": 1,

packages/block-library/src/cover/index.js

@@ -58,16 +58,22 @@ const blockAttributes = {
 	customOverlayColor: {
 		type: 'string',
 	},
+	backgroundType: {
+		type: 'string',
+		default: 'image',
+	},
 };
 
 export const name = 'core/cover';
 
-const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
+export const IMAGE_BACKGROUND_TYPE = 'image';
+export const VIDEO_BACKGROUND_TYPE = 'video';
 
 export const settings = {
 	title: __( 'Cover' ),
 
-	description: __( 'Add a full-width image, and layer text over it — great for headers.' ),
+	description: __( 'Add a full-width image or video, and layer text over it — great for headers.' ),
 
 	icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" /><path d="M0 0h24v24H0z" fill="none" /></svg>,
 
@@ -96,6 +102,19 @@ export const settings = {
 					} )
 				),
 			},
+			{
+				type: 'block',
+				blocks: [ 'core/video' ],
+				transform: ( { caption, src, align, id } ) => (
+					createBlock( 'core/cover', {
+						title: caption,
+						url: src,
+						align,
+						id,
+						backgroundType: VIDEO_BACKGROUND_TYPE,
+					} )
+				),
+			},
 		],
 		to: [
 			{
@@ -108,6 +127,9 @@ export const settings = {
 			{
 				type: 'block',
 				blocks: [ 'core/image' ],
+				isMatch: ( { backgroundType, url } ) => {
+					return ! url || backgroundType === IMAGE_BACKGROUND_TYPE;
+				},
 				transform: ( { title, url, align, id } ) => (
 					createBlock( 'core/image', {
 						caption: title,
@@ -117,6 +139,21 @@ export const settings = {
 					} )
 				),
 			},
+			{
+				type: 'block',
+				blocks: [ 'core/video' ],
+				isMatch: ( { backgroundType, url } ) => {
+					return ! url || backgroundType === VIDEO_BACKGROUND_TYPE;
+				},
+				transform: ( { title, url, align, id } ) => (
+					createBlock( 'core/video', {
+						caption: title,
+						src: url,
+						id,
+						align,
+					} )
+				),
+			},
 		],
 	},
 
@@ -132,21 +169,61 @@ export const settings = {
 		withNotices,
 	] )(
 		( { attributes, setAttributes, isSelected, className, noticeOperations, noticeUI, overlayColor, setOverlayColor } ) => {
-			const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
+			const {
+				align,
+				backgroundType,
+				contentAlign,
+				dimRatio,
+				hasParallax,
+				id,
+				title,
+				url,
+			} = attributes;
 			const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
-			const onSelectImage = ( media ) => {
+			const onSelectMedia = ( media ) => {
 				if ( ! media || ! media.url ) {
 					setAttributes( { url: undefined, id: undefined } );
 					return;
 				}
+				let mediaType;
+				// for media selections originated from a file upload.
+				if ( media.media_type ) {
+					if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
+						mediaType = IMAGE_BACKGROUND_TYPE;
+					} else {
+						// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
+						// Videos contain the media type of 'file' in the object returned from the rest api.
+						mediaType = VIDEO_BACKGROUND_TYPE;
+					}
+				} else { // for media selections originated from existing files in the media library.
+					if (
+						media.type !== IMAGE_BACKGROUND_TYPE &&
+						media.type !== VIDEO_BACKGROUND_TYPE
+					) {
+						return;
+					}
+					mediaType = media.type;
+				}
+				if ( mediaType ) {
+					setAttributes( {
+						url: media.url,
+						id: media.id,
+						backgroundType: mediaType,
+					} );
+					return;
+				}
 				setAttributes( { url: media.url, id: media.id } );
 			};
 			const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
 			const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
 			const setTitle = ( newTitle ) => setAttributes( { title: newTitle } );
 
 			const style = {
-				...backgroundImageStyles( url ),
+				...(
+					backgroundType === IMAGE_BACKGROUND_TYPE ?
+						backgroundImageStyles( url ) :
+						{}
+				),
 				backgroundColor: overlayColor.color,
 			};
 
@@ -177,7 +254,7 @@ export const settings = {
 								/>
 								<Toolbar>
 									<MediaUpload
-										onSelect={ onSelectImage }
+										onSelect={ onSelectMedia }
 										allowedTypes={ ALLOWED_MEDIA_TYPES }
 										value={ id }
 										render={ ( { open } ) => (
@@ -196,11 +273,13 @@ export const settings = {
 					{ !! url && (
 						<InspectorControls>
 							<PanelBody title={ __( 'Cover Settings' ) }>
-								<ToggleControl
-									label={ __( 'Fixed Background' ) }
-									checked={ hasParallax }
-									onChange={ toggleParallax }
-								/>
+								{ IMAGE_BACKGROUND_TYPE === backgroundType && (
+									<ToggleControl
+										label={ __( 'Fixed Background' ) }
+										checked={ hasParallax }
+										onChange={ toggleParallax }
+									/>
+								) }
 								<PanelColorSettings
 									title={ __( 'Overlay' ) }
 									initialOpen={ true }
@@ -245,10 +324,11 @@ export const settings = {
 							className={ className }
 							labels={ {
 								title: label,
+								/* translators: Fragment of the sentence: "Drag %s, upload a new one or select a file from your library." */
 								name: __( 'an image or a video' ),
 							} }
-							onSelect={ onSelectImage }
-							accept="image/*"
+							onSelect={ onSelectMedia }
+							accept="image/*,video/*"
 							allowedTypes={ ALLOWED_MEDIA_TYPES }
 							notices={ noticeUI }
 							onError={ noticeOperations.createErrorNotice }
@@ -265,6 +345,15 @@ export const settings = {
 						style={ style }
 						className={ classes }
 					>
+						{ VIDEO_BACKGROUND_TYPE === backgroundType && (
+							<video
+								className="wp-block-cover__video-background"
+								autoPlay
+								muted
+								loop
+								src={ url }
+							/>
+						) }
 						{ ( ! RichText.isEmpty( title ) || isSelected ) && (
 							<RichText
 								tagName="p"
@@ -282,9 +371,21 @@ export const settings = {
 	),
 
 	save( { attributes, className } ) {
-		const { url, title, hasParallax, dimRatio, align, contentAlign, overlayColor, customOverlayColor } = attributes;
+		const {
+			align,
+			backgroundType,
+			contentAlign,
+			customOverlayColor,
+			dimRatio,
+			hasParallax,
+			overlayColor,
+			title,
+			url,
+		} = attributes;
 		const overlayColorClass = getColorClassName( 'background-color', overlayColor );
-		const style = backgroundImageStyles( url );
+		const style = backgroundType === IMAGE_BACKGROUND_TYPE ?
+			backgroundImageStyles( url ) :
+			{};
 		if ( ! overlayColorClass ) {
 			style.backgroundColor = customOverlayColor;
 		}
@@ -303,6 +404,13 @@ export const settings = {
 
 		return (
 			<div className={ classes } style={ style }>
+				{ VIDEO_BACKGROUND_TYPE === backgroundType && url && ( <video
+					className="wp-block-cover__video-background"
+					autoPlay
+					muted
+					loop
+					src={ url }
+				/> ) }
 				{ ! RichText.isEmpty( title ) && (
 					<RichText.Content tagName="p" className="wp-block-cover-text" value={ title } />
 				) }

packages/block-library/src/cover/style.scss

@@ -66,6 +66,7 @@
 		right: 0;
 		background-color: inherit;
 		opacity: 0.5;
+		z-index: z-index(".wp-block-cover.has-background-dim::before");
 	}
 
 	@for $i from 1 through 10 {
@@ -87,3 +88,14 @@
 		width: 100%;
 	}
 }
+
+.wp-block-cover__video-background {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translateX(-50%) translateY(-50%);
+	width: 100%;
+	height: 100%;
+	z-index: z-index(".wp-block-cover__video-background");
+	object-fit: fill;
+}

packages/block-library/src/cover/test/__snapshots__/index.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`core/cover-image block edit matches snapshot 1`] = `
+exports[`core/cover block edit matches snapshot 1`] = `
 <div
-  class="components-placeholder editor-media-placeholder wp-block-cover-image"
+  class="components-placeholder editor-media-placeholder wp-block-cover"
 >
   <div
     class="components-placeholder__label"
@@ -21,12 +21,12 @@ exports[`core/cover-image block edit matches snapshot 1`] = `
         d="M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z"
       />
     </svg>
-    Cover Image
+    Cover
   </div>
   <div
     class="components-placeholder__instructions"
   >
-    Drag an image, upload a new one or select a file from your library.
+    Drag an image or a video, upload a new one or select a file from your library.
   </div>
   <div
     class="components-placeholder__fieldset"
@@ -82,7 +82,7 @@ exports[`core/cover-image block edit matches snapshot 1`] = `
         Upload
       </button>
       <input
-        accept="image/*"
+        accept="image/*,video/*"
         style="display:none"
         type="file"
       />

packages/block-library/src/cover/test/index.js

@@ -4,7 +4,7 @@
 import { name, settings } from '../';
 import { blockEditRender } from '../../test/helpers';
 
-describe( 'core/cover-image', () => {
+describe( 'core/cover', () => {
 	test( 'block edit matches snapshot', () => {
 		const wrapper = blockEditRender( name, settings );
 

post-content.php

@@ -1,6 +1,6 @@
-<!-- wp:cover-image {"url":"https://cldup.com/Fz-ASbo2s3.jpg","align":"wide"} -->
-<div class="wp-block-cover-image has-background-dim alignwide" style="background-image:url(https://cldup.com/Fz-ASbo2s3.jpg)"><p class="wp-block-cover-image-text"><?php _e( 'Of Mountains &amp; Printing Presses', 'gutenberg' ); ?></p></div>
-<!-- /wp:cover-image -->
+<!-- wp:cover {"url":"https://cldup.com/Fz-ASbo2s3.jpg","align":"wide"} -->
+<div class="wp-block-cover has-background-dim alignwide" style="background-image:url(https://cldup.com/Fz-ASbo2s3.jpg)"><p class="wp-block-cover-text"><?php _e( 'Of Mountains &amp; Printing Presses', 'gutenberg' ); ?></p></div>
+<!-- /wp:cover -->
 
 <!-- wp:paragraph -->
 <p><?php _e( 'The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of <em>pieces of content</em>—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you&#8217;ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.', 'gutenberg' ); ?></p>

test/integration/full-content/fixtures/core__cover.html

@@ -0,0 +1,5 @@
+<!-- wp:core/cover {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
+<div class="wp-block-cover has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
+    <p class="wp-block-cover-text">Guten Berg!</p>
+</div>
+<!-- /wp:core/cover -->

test/integration/full-content/fixtures/core__cover.json

@@ -0,0 +1,17 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/cover",
+        "isValid": true,
+        "attributes": {
+            "title": "Guten Berg!",
+            "url": "https://cldup.com/uuUqE_dXzy.jpg",
+            "contentAlign": "center",
+            "hasParallax": false,
+            "dimRatio": 40,
+            "backgroundType": "image"
+        },
+        "innerBlocks": [],
+        "originalContent": "<div class=\"wp-block-cover has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n    <p class=\"wp-block-cover-text\">Guten Berg!</p>\n</div>"
+    }
+]