Rename cover image to cover; Add video in 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-image/editor.scss → packages/block-library/src/cover/editor.scss

@@ -1,4 +1,5 @@
-.wp-block-cover-image {
+.wp-block-cover-image,
+.wp-block-cover {
 	.editor-rich-text__tinymce[data-is-empty="true"]::before {
 		position: inherit;
 	}

packages/block-library/src/cover-image/index.js → 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-image';
+export const name = 'core/cover';
 
-const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
+const IMAGE_BACKGROUND_TYPE = 'image';
+const VIDEO_BACKGROUND_TYPE = 'video';
 
 export const settings = {
-	title: __( 'Cover Image' ),
+	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>,
 
@@ -81,21 +87,34 @@ export const settings = {
 				type: 'block',
 				blocks: [ 'core/heading' ],
 				transform: ( { content } ) => (
-					createBlock( 'core/cover-image', { title: content } )
+					createBlock( 'core/cover', { title: content } )
 				),
 			},
 			{
 				type: 'block',
 				blocks: [ 'core/image' ],
 				transform: ( { caption, url, align, id } ) => (
-					createBlock( 'core/cover-image', {
+					createBlock( 'core/cover', {
 						title: caption,
 						url,
 						align,
 						id,
 					} )
 				),
 			},
+			{
+				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,57 @@ 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;
 				}
-				setAttributes( { url: media.url, id: media.id } );
+				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;
+				}
+				setAttributes( {
+					url: media.url,
+					id: media.id,
+					backgroundType: mediaType,
+				} );
 			};
 			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,13 +250,13 @@ export const settings = {
 								/>
 								<Toolbar>
 									<MediaUpload
-										onSelect={ onSelectImage }
+										onSelect={ onSelectMedia }
 										allowedTypes={ ALLOWED_MEDIA_TYPES }
 										value={ id }
 										render={ ( { open } ) => (
 											<IconButton
 												className="components-toolbar__control"
-												label={ __( 'Edit image' ) }
+												label={ __( 'Edit media' ) }
 												icon="edit"
 												onClick={ open }
 											/>
@@ -195,12 +268,14 @@ export const settings = {
 					</BlockControls>
 					{ !! url && (
 						<InspectorControls>
-							<PanelBody title={ __( 'Cover Image Settings' ) }>
-								<ToggleControl
-									label={ __( 'Fixed Background' ) }
-									checked={ hasParallax }
-									onChange={ toggleParallax }
-								/>
+							<PanelBody title={ __( 'Cover Settings' ) }>
+								{ IMAGE_BACKGROUND_TYPE === backgroundType && (
+									<ToggleControl
+										label={ __( 'Fixed Background' ) }
+										checked={ hasParallax }
+										onChange={ toggleParallax }
+									/>
+								) }
 								<PanelColorSettings
 									title={ __( 'Overlay' ) }
 									initialOpen={ true }
@@ -235,7 +310,7 @@ export const settings = {
 						onChange={ setTitle }
 						inlineToolbar
 					/>
-				) : __( 'Cover Image' );
+				) : __( 'Cover' );
 
 				return (
 					<Fragment>
@@ -245,10 +320,11 @@ export const settings = {
 							className={ className }
 							labels={ {
 								title: label,
-								name: __( 'an image' ),
+								/* 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,10 +341,19 @@ 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"
-								className="wp-block-cover-image-text"
+								className="wp-block-cover-text"
 								placeholder={ __( 'Write title…' ) }
 								value={ title }
 								onChange={ setTitle }
@@ -282,9 +367,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,14 +400,58 @@ 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-image-text" value={ title } />
+					<RichText.Content tagName="p" className="wp-block-cover-text" value={ title } />
 				) }
 			</div>
 		);
 	},
 
 	deprecated: [ {
+		attributes: {
+			...blockAttributes,
+		},
+
+		supports: {
+			className: false,
+		},
+
+		save( { attributes } ) {
+			const { url, title, hasParallax, dimRatio, align, contentAlign, overlayColor, customOverlayColor } = attributes;
+			const overlayColorClass = getColorClassName( 'background-color', overlayColor );
+			const style = backgroundImageStyles( url );
+			if ( ! overlayColorClass ) {
+				style.backgroundColor = customOverlayColor;
+			}
+
+			const classes = classnames(
+				'wp-block-cover-image',
+				dimRatioToClass( dimRatio ),
+				overlayColorClass,
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+					[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
+				},
+				align ? `align${ align }` : null,
+			);
+
+			return (
+				<div className={ classes } style={ style }>
+					{ ! RichText.isEmpty( title ) && (
+						<RichText.Content tagName="p" className="wp-block-cover-image-text" value={ title } />
+					) }
+				</div>
+			);
+		},
+	}, {
 		attributes: {
 			...blockAttributes,
 			title: {

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

@@ -1,4 +1,5 @@
-.wp-block-cover-image {
+.wp-block-cover-image,
+.wp-block-cover {
 	position: relative;
 	background-color: $black;
 	background-size: cover;
@@ -14,7 +15,8 @@
 		justify-content: flex-start;
 
 		h2,
-		.wp-block-cover-image-text {
+		.wp-block-cover-image-text,
+		.wp-block-cover-text {
 			margin-left: 0;
 			text-align: left;
 		}
@@ -24,14 +26,16 @@
 		justify-content: flex-end;
 
 		h2,
-		.wp-block-cover-image-text {
+		.wp-block-cover-image-text,
+		.wp-block-cover-text {
 			margin-right: 0;
 			text-align: right;
 		}
 	}
 
 	h2,
-	.wp-block-cover-image-text {
+	.wp-block-cover-image-text,
+	.wp-block-cover-text {
 		color: $white;
 		font-size: 2em;
 		line-height: 1.25;
@@ -62,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 {
@@ -83,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;
+}