From c3501c7bb70093495d9977cf37c3ef71112e9a38 Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 18 Oct 2018 15:07:50 +0100 Subject: [PATCH] Rename cover image to cover; Add video in cover block; (#10659) ## Description This commit renames cover image block into cover and adds video support o cover. The approach used to rename the block is the same used for the move of core/text to core/paragraph. A change in api/parser.js. This approach may be seen as a temporary solution until a final approach to this use case exists, and we feel comfortable in exposing an API for this. Transformations were updated, and a video transform was added. ## How has this been tested? Verify the cover block still works as expected, containing the same functionality the existed in the cover image. Verify it is possible to set video as background in the cover block. --- assets/stylesheets/_z-index.scss | 2 + .../src/{cover-image => cover}/editor.scss | 3 +- .../src/{cover-image => cover}/index.js | 193 +++++++++++++++--- .../src/{cover-image => cover}/style.scss | 24 ++- .../test/__snapshots__/index.js.snap | 10 +- .../src/{cover-image => cover}/test/index.js | 2 +- packages/block-library/src/editor.scss | 2 +- packages/block-library/src/index.js | 4 +- packages/block-library/src/style.scss | 2 +- packages/blocks/src/api/parser.js | 5 + post-content.php | 6 +- .../fixtures/core__cover-image.html | 5 - .../fixtures/core__cover-image.json | 16 -- .../fixtures/core__cover-image.parsed.json | 17 -- .../core__cover-image.serialized.html | 3 - .../full-content/fixtures/core__cover.html | 5 + .../full-content/fixtures/core__cover.json | 17 ++ .../fixtures/core__cover.parsed.json | 17 ++ .../fixtures/core__cover.serialized.html | 3 + .../fixtures/core__cover__video-overlay.html | 6 + .../fixtures/core__cover__video-overlay.json | 18 ++ .../core__cover__video-overlay.parsed.json | 19 ++ ...core__cover__video-overlay.serialized.html | 3 + .../fixtures/core__cover__video.html | 6 + .../fixtures/core__cover__video.json | 17 ++ .../fixtures/core__cover__video.parsed.json | 18 ++ .../core__cover__video.serialized.html | 3 + 27 files changed, 341 insertions(+), 85 deletions(-) rename packages/block-library/src/{cover-image => cover}/editor.scss (93%) rename packages/block-library/src/{cover-image => cover}/index.js (61%) rename packages/block-library/src/{cover-image => cover}/style.scss (71%) rename packages/block-library/src/{cover-image => cover}/test/__snapshots__/index.js.snap (92%) rename packages/block-library/src/{cover-image => cover}/test/index.js (87%) delete mode 100644 test/integration/full-content/fixtures/core__cover-image.html delete mode 100644 test/integration/full-content/fixtures/core__cover-image.json delete mode 100644 test/integration/full-content/fixtures/core__cover-image.parsed.json delete mode 100644 test/integration/full-content/fixtures/core__cover-image.serialized.html create mode 100644 test/integration/full-content/fixtures/core__cover.html create mode 100644 test/integration/full-content/fixtures/core__cover.json create mode 100644 test/integration/full-content/fixtures/core__cover.parsed.json create mode 100644 test/integration/full-content/fixtures/core__cover.serialized.html create mode 100644 test/integration/full-content/fixtures/core__cover__video-overlay.html create mode 100644 test/integration/full-content/fixtures/core__cover__video-overlay.json create mode 100644 test/integration/full-content/fixtures/core__cover__video-overlay.parsed.json create mode 100644 test/integration/full-content/fixtures/core__cover__video-overlay.serialized.html create mode 100644 test/integration/full-content/fixtures/core__cover__video.html create mode 100644 test/integration/full-content/fixtures/core__cover__video.json create mode 100644 test/integration/full-content/fixtures/core__cover__video.parsed.json create mode 100644 test/integration/full-content/fixtures/core__cover__video.serialized.html 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-image/editor.scss b/packages/block-library/src/cover/editor.scss similarity index 93% rename from packages/block-library/src/cover-image/editor.scss rename to packages/block-library/src/cover/editor.scss index bc55badc130be9..e69a8080342b1e 100644 --- a/packages/block-library/src/cover-image/editor.scss +++ b/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; } diff --git a/packages/block-library/src/cover-image/index.js b/packages/block-library/src/cover/index.js similarity index 61% rename from packages/block-library/src/cover-image/index.js rename to packages/block-library/src/cover/index.js index 2d06ec21122839..9d9ef6f0f1c5e6 100644 --- a/packages/block-library/src/cover-image/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-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: , @@ -81,14 +87,14 @@ 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, @@ -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,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 = { /> ( @@ -195,12 +268,14 @@ export const settings = { { !! url && ( - - + + { IMAGE_BACKGROUND_TYPE === backgroundType && ( + + ) } - ) : __( 'Cover Image' ); + ) : __( 'Cover' ); return ( @@ -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 && ( +