diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 5d458b11910f5b..4b22ca96090ddf 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -29,7 +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-image__inner-container": 0, // InnerBlocks area inside cover image block + ".wp-block-cover-image__inner-container": 1, // InnerBlocks area inside cover image block + ".wp-block-cover-image__video-background": 0, // Video background inside cover image block // Side UI active buttons ".editor-block-mover__control": 1, diff --git a/packages/block-library/src/cover-image/index.js b/packages/block-library/src/cover-image/index.js index d1c6826c5339a8..123c36d606a07e 100644 --- a/packages/block-library/src/cover-image/index.js +++ b/packages/block-library/src/cover-image/index.js @@ -59,6 +59,10 @@ const blockAttributes = { customOverlayColor: { type: 'string', }, + backgroundType: { + type: 'string', + default: 'image', + }, }; export const name = 'core/cover-image'; @@ -71,7 +75,9 @@ const INNER_BLOCKS_TEMPLATE = [ } ], ]; const INNER_BLOCKS_ALLOWED_BLOCKS = [ 'core/button', 'core/heading', 'core/paragraph' ]; -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' ), @@ -127,20 +133,48 @@ export const settings = { withNotices, ] )( ( { attributes, setAttributes, className, noticeOperations, noticeUI, overlayColor, setOverlayColor } ) => { - const { url, align, id, hasParallax, dimRatio } = attributes; + const { + align, + backgroundType, + dimRatio, + hasParallax, + id, + url, + } = attributes; const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); const onSelectImage = ( 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 style = { - ...backgroundImageStyles( url ), + ...( backgroundType === IMAGE_BACKGROUND_TYPE ? backgroundImageStyles( url ) : {} ), backgroundColor: overlayColor.color, }; @@ -181,11 +215,11 @@ export const settings = { { !! url && ( - + /> ) } + { VIDEO_BACKGROUND_TYPE === backgroundType && url && ( +