Block audit: Video

[sarahmonster]

Block audit

Note: We'll be doing these audits in waves and editing this as we work through the blocks, so this text will be updated and fleshed out as we progress. See the full picture here.

Overview

Name: Video
Description: Embed a video file and a simple video player.
Category: Common blocks
CSS class: wp-block-video in frontend or editor
Can be converted to: file

States

Empty:

Selected:

Unselected:

Placeholder:

Error:

Primary (toolbar) settings

Align: left, centre, right, edit
For captions: bold, italic, strikethrough, link

Secondary (sidebar) settings

Audio Settings: Autoplay, Loop, Preload
Advanced: Additional CSS Class

Frontend appearance

Gutenberg starter theme:

Atomic Blocks

twentyseventeen:

twentyten:

Documentation

No devdocs in https://github.com/WordPress/gutenberg/tree/master/core-blocks/image

Suggestion for user-facing docs:

Performance on mobile

Accessibility

Bugs/errors

Individual issues will be opened for these soon

• Same float issues as image block. (Left- or right-aligning block-level elements leads to unexpected behaviour #8293)

• Converting a formatted caption to a file creates some weird JS [object Object]-y-ness. (Converting from an audio block with a formatted caption to a file block results in an incorrect file link #7626)

Suggestions

Individual issues will be opened for these soon

• Error states could be improved across the board. (Video block: consolidate error styling #8408)

• The placeholder state should indicate that it's a video file—otherwise, it can just look like an image.

• Empty state could be improved from a consistency standpoint. (Improve consistency of empty states for media blocks #8409)

[Soean]

1. The supported formats depends on the browser (see https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility),
2. The error state is also made by the browser. We can check if the browser supports the video format and show a custom error. Modernizr example
3. YouTube/Video should convert to an embed block, see Video Block doesn't work when inserting YouTube URL #6824

[sarahmonster]

Lovely, thanks for the additional context @Soean! I was thinking that error message looked a lot like Firefox's... definitely felt out of place here. If we could add custom error message to be consistent across all browsers, I think that'd definitely be an improved user experience. (And if we could pull the allowed video formats as well, that'd be ✨ )

[paaljoachim]

(I am hoping it is ok that I add the following to this issue.)

Here is how Advanced Gutenberg plugin shows video settings:

[sarahmonster]

All issues here have been filed as individual issues, so I'm going to go ahead and close out this tracking bug. Feel free to comment on if I missed anything, or open new issues as needed! 💪