Rename cover image to cover; Add video in cover block; #10659

jorgefilipecosta · 2018-10-16T18:25:12Z

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

mcsf · 2018-10-17T11:13:45Z

packages/block-library/src/cover/index.js

+						mediaType = VIDEO_BACKGROUND_TYPE;
+					}
+				} else { // for media selections originated from existing files in the media library.
+					mediaType = media.type;


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?

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.

mcsf · 2018-10-17T11:18:48Z

packages/block-library/src/cover/index.js

@@ -245,10 +318,10 @@ export const settings = {
 							className={ className }
 							labels={ {
 								title: label,
-								name: __( 'an image' ),
+								name: __( 'an image or a video' ),


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.

mcsf · 2018-10-17T11:26:00Z

test/integration/full-content/fixtures/core__categories.json

            "displayAsDropdown": false,
-            "showHierarchy": false
+            "showHierarchy": false,
+            "showPostCounts": false


Why this hunk? :)

mcsf · 2018-10-17T11:27:12Z

packages/blocks/src/api/parser.js

+	if ( 'core/cover-image' === name ) {
+		name = 'core/cover';
+	}
+


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.

jorgefilipecosta · 2018-10-17T14:10:29Z

Hi @mcsf I think all the feedback provided was applied.

youknowriad

Left some code comments, looks good overall, I'm going to give it a try now.

youknowriad · 2018-10-18T12:45:39Z

packages/block-library/src/cover/index.js

@@ -58,16 +58,22 @@ const blockAttributes = {
 	customOverlayColor: {
 		type: 'string',
 	},
+	backgroundType: {
+		type: 'string',
+		default: 'image',


Should we use the constant here?

yes we should 👍

youknowriad · 2018-10-18T12:48:07Z

packages/block-library/src/cover/index.js

+						// 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.


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.

youknowriad · 2018-10-18T12:48:52Z

packages/block-library/src/cover/index.js

+					}
+					mediaType = media.type;
+				}
+				if ( mediaType ) {


Is this really necessary? I feel at this point, we'd always have a mediaType right?

youknowriad · 2018-10-18T12:56:31Z

packages/block-library/src/cover/index.js

-									onChange={ toggleParallax }
-								/>
+							<PanelBody title={ __( 'Cover Settings' ) }>
+								{ IMAGE_BACKGROUND_TYPE === backgroundType && (


It would be great if we could support this for videos at some point.

youknowriad

Feel free to address the minor comments and merge.

karmatosed

Looks great and I can see people loving this, thanks!

paaljoachim · 2018-10-22T15:40:13Z

Is there a way to embed a Youtube video into the Cover block?
Or does it just work for ones own hosted videos for the moment?

From https://make.wordpress.org/test/2018/10/19/call-for-testing-gutenberg-4-1-pre-release
2.Add a video background using the Cover block. Try different browsers. (10659)
Here I expected to find the Cover block in the layout Elements, but noticed it in the Common Blocks (Common blocks is a word that really does not say much) As Layout Elements word would actually be most of the blocks used.

First of all I expected to embed a youtube video here.
I first uploaded one video but it was very slow to upload. It seemed like it did not work I then uploaded another video that used a few seconds before it came into place. There was no spinner telling me that it was working. Right now I am seeing the first video uploaded. There is no sound. It would be good with the option to have audio on or off. Clicking the pencil icon I see the media library but not the videos I uploaded. Opening another tab and refreshing the page I see that the videos are in the media library.

…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.

…gutenberg#10659, but posts created with the former cover-image block will still use the wp-block-cover-image css class related to #702

jorgefilipecosta added the [Type] Enhancement A suggestion for improvement. label Oct 16, 2018

jorgefilipecosta force-pushed the update/video-in-cover-block branch from 053c0a9 to 097b582 Compare October 16, 2018 20:04

jorgefilipecosta added this to the 4.1 - UI freeze milestone Oct 16, 2018

jorgefilipecosta requested review from a team and mcsf October 16, 2018 20:41

mcsf reviewed Oct 17, 2018

View reviewed changes

jorgefilipecosta force-pushed the update/video-in-cover-block branch from 097b582 to 96673cb Compare October 17, 2018 13:30

jorgefilipecosta mentioned this pull request Oct 17, 2018

[Try] Add youtube support in cover block #10708

Closed

jorgefilipecosta added 3 commits October 18, 2018 10:01

Rename cover image into cover block.

0b9488e

Add video to cover block.

35c0ba3

Add new test fixtures.

0b18d80

jorgefilipecosta force-pushed the update/video-in-cover-block branch from 4e03fbd to 0b18d80 Compare October 18, 2018 09:02

youknowriad reviewed Oct 18, 2018

View reviewed changes

youknowriad approved these changes Oct 18, 2018

View reviewed changes

Remove unused logic.

994fbd3

jorgefilipecosta requested a review from karmatosed October 18, 2018 13:25

karmatosed approved these changes Oct 18, 2018

View reviewed changes

jorgefilipecosta merged commit c3501c7 into master Oct 18, 2018

jorgefilipecosta deleted the update/video-in-cover-block branch October 18, 2018 14:07

Soean mentioned this pull request Oct 22, 2018

Refinement and consistency for block descriptions #10919

Closed

This was referenced Oct 25, 2018

Update Cover Image block styles to use the new Cover block name WordPress/twentynineteen#293

Closed

Update cover image block name WordPress/twentynineteen#294

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rename cover image to cover; Add video in cover block; #10659

Rename cover image to cover; Add video in cover block; #10659

jorgefilipecosta commented Oct 16, 2018 •

edited

Loading

mcsf Oct 17, 2018

jorgefilipecosta Oct 17, 2018

mcsf Oct 17, 2018

mcsf Oct 17, 2018

mcsf Oct 17, 2018

jorgefilipecosta commented Oct 17, 2018

youknowriad left a comment

youknowriad Oct 18, 2018

jorgefilipecosta Oct 18, 2018

youknowriad Oct 18, 2018

youknowriad Oct 18, 2018

youknowriad Oct 18, 2018

youknowriad left a comment

karmatosed left a comment

paaljoachim commented Oct 22, 2018 •

edited

Loading

Rename cover image to cover; Add video in cover block; #10659

Rename cover image to cover; Add video in cover block; #10659

Conversation

jorgefilipecosta commented Oct 16, 2018 • edited Loading

Description

How has this been tested?

Screenshot

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta commented Oct 17, 2018

youknowriad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

karmatosed left a comment

Choose a reason for hiding this comment

paaljoachim commented Oct 22, 2018 • edited Loading

jorgefilipecosta commented Oct 16, 2018 •

edited

Loading

paaljoachim commented Oct 22, 2018 •

edited

Loading