-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rename cover image to cover; Add video in cover block; #10659
Conversation
053c0a9
to
097b582
Compare
mediaType = VIDEO_BACKGROUND_TYPE; | ||
} | ||
} else { // for media selections originated from existing files in the media library. | ||
mediaType = media.type; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What other types are there coming from the library, and why should we trust that media.type
is valid for this block? Shouldn't we screen for IMAGE
and VIDEO
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We set as the allowed media type for the media library video and image so another type being passed would probably be an indicator of a bug in another place. But to be on safe side I added a check that makes sure the type is image or video.
@@ -245,10 +318,10 @@ export const settings = { | |||
className={ className } | |||
labels={ { | |||
title: label, | |||
name: __( 'an image' ), | |||
name: __( 'an image or a video' ), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should have a translators:
note reading something like
translators: Fragment of the sentence: "Drag %s, upload a new one or select a file from your library."
Aside: the way we interpolate these sentence fragments in MediaPlaceholder is pretty bad i18n.
"displayAsDropdown": false, | ||
"showHierarchy": false | ||
"showHierarchy": false, | ||
"showPostCounts": false |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why this hunk? :)
if ( 'core/cover-image' === name ) { | ||
name = 'core/cover'; | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As discussed in DM, we'll need a proper way of dealing with this soon, but I'm not convinced it should become a public interface anytime soon.
097b582
to
96673cb
Compare
Hi @mcsf I think all the feedback provided was applied. |
4e03fbd
to
0b18d80
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left some code comments, looks good overall, I'm going to give it a try now.
@@ -58,16 +58,22 @@ const blockAttributes = { | |||
customOverlayColor: { | |||
type: 'string', | |||
}, | |||
backgroundType: { | |||
type: 'string', | |||
default: 'image', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we use the constant here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes we should 👍
// 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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's weird that the object shape is different between the MediaLibrary
component and the file upload. We should probably normalize one of them. (I think we should use the REST API shape in all cases for now).
This can be done in a separate PR to avoid blocking this though and it has other consequences potentially.
} | ||
mediaType = media.type; | ||
} | ||
if ( mediaType ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this really necessary? I feel at this point, we'd always have a mediaType right?
onChange={ toggleParallax } | ||
/> | ||
<PanelBody title={ __( 'Cover Settings' ) }> | ||
{ IMAGE_BACKGROUND_TYPE === backgroundType && ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be great if we could support this for videos at some point.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feel free to address the minor comments and merge.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great and I can see people loving this, thanks!
Is there a way to embed a Youtube video into the Cover block? From https://make.wordpress.org/test/2018/10/19/call-for-testing-gutenberg-4-1-pre-release First of all I expected to embed a youtube video here. |
…gutenberg#10659, but posts created with the former cover-image block will still use the wp-block-cover-image css class related to #702
… "cover". See WordPress/gutenberg#10659, but posts created with the former cover-image block will still use the wp-block-cover-image css class. fixes #1601
## 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.
Description
Implements the video background functionality for cover referred in https://make.wordpress.org/core/2018/09/26/an-update-on-gutenberg-tasks/.
Replaces: #10639
This PR 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.
Screenshot