Block audit: File

[sarahmonster]

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: File
Description: Add a link to a file that visitors can download.
Category: Common blocks
CSS class: wp-block-file in frontend and editor
Can be converted to: contextual depending on file type: file, image, video, audio

States

Empty:

Selected:

Unselected:

Placeholder:

Primary (toolbar) settings

Align: left, centre, right, edit

Secondary (sidebar) settings

Text Link Settings: Link To, Open in New Window
Download Button Settings: Show Download Button
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)

• Centre-aligned block isn't centre-aligned in the editor. (Centre-aligning the file block doesn't centre-align anything #8296)

• <br> is output to the frontend, breaking posts. (File block: Outputs an unencoded line break on frontend #8402)

Suggestions

Individual issues will be opened for these soon

• The Show Download Button toggle has some additional context: The download button is shown. that doesn't really add any additional context at all. Let's nix it. (File Block: Consider removing the toggle control help text under the "Show Download Button" toggle. #13429)

• Link To options are Media File and Attachment Page. I think these are understood by users who've a strong mental model of WordPress, but they aren't initially clear. It could be worth revisiting the wording (here and elsewhere) to better explain what these mean. (File block: improve wording of "link to" options #8389)

• Wide and full widths feel like rather odd choices here. (@kjellr: Agreed, but I suggest we leave as is for now, since themes may find a use for this.)

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

[uamv]

This appears to be a bug, though I've not tested with a clean install. When I add a custom class to the file block, the Download button loses styling on the back end. The front-end styling still appears properly.

[kjellr]

Closing this issue, as all bugs/enhancements have been raised as separate issues. 👍