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,55 @@ 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.
+ // video 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.
+ 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 +248,7 @@ export const settings = {
  />
  <Toolbar>
  <MediaUpload
- onSelect={ onSelectImage }
+ onSelect={ onSelectMedia }
  allowedTypes={ ALLOWED_MEDIA_TYPES }
  value={ id }
  render={ ( { open } ) => (
@@ -196,11 +267,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 }
@@ -247,8 +320,8 @@ export const settings = {
  title: label,
  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 +338,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 +364,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 +397,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__categories.json

@@ -4,9 +4,9 @@
  "name": "core/categories",
  "isValid": true,
  "attributes": {
- "showPostCounts": false,
  "displayAsDropdown": false,
- "showHierarchy": false
+ "showHierarchy": false,
+ "showPostCounts": false
  },
  "innerBlocks": [],
  "originalContent": ""

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>"
+ }
+]