diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index b9cd8c4032e0aa..bcb054a4ea41bb 100644 --- a/assets/stylesheets/_z-index.scss +++ b/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, diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index 5cf1a9b938f0c0..9b0e5bc0b6afd4 100644 --- a/packages/block-library/src/cover/index.js +++ b/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: , @@ -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,13 +169,49 @@ 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 } ); @@ -146,7 +219,11 @@ export const settings = { 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 = { /> ( @@ -196,11 +273,13 @@ export const settings = { { !! url && ( - + { IMAGE_BACKGROUND_TYPE === backgroundType && ( + + ) } + { VIDEO_BACKGROUND_TYPE === backgroundType && ( +