Block audit: Image

[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: Image
Description: They’re worth 1,000 words! Insert a single image.
Category: Common blocks
CSS class: wp-block-image in editor and in frontend (on figure element)
Can be converted to: gallery, file

States

Empty:

Selected:

Before a caption:

With a caption:

Unselected:

Placeholder:

Primary (toolbar) settings

Align: left, centre, right, edit
Over caption: bold, italic, strikethrough, link

Secondary (sidebar) settings

Image Settings: Textual Alternative, Image Size, Image Dimensions
Link Settings: Link To, Link URL
Advanced: Additional CSS Class

Frontend appearance

Gutenberg starter theme:

Atomic Blocks

twentyseventeen:

twentyten:

Bugs/errors

Individual issues will be opened for these soon

• Switching the alignment causes float issues. Sometimes the toolbar (or parts of the toolbar) disappear altogether. Sometimes it'll then appear to be stuck nested inside the previous block. (Left- or right-aligning block-level elements leads to unexpected behaviour #8293)

• Converting to a file block can give a title of [object Object]. (Converting from an audio block with a formatted caption to a file block results in an incorrect file link #7626)

• Breaks out of the content area in some themes and may require frontend styling. (Image and video blocks break out of the content column on the Twenty Ten theme.  #8334)

• Secondary settings don't appear on smaller devices. ("Image Settings" for the Image block disappears on smaller screens.  #8056)

• Caption placeholder lacks sufficient contrast. (Captions "placeholders" color contrast too low #5838)

Suggestions

Individual issues will be opened for these soon

• "Textual alternative" has got to go. (Replace "Textual Alternative" label with "Alternative Text" #8063)

• It could also use better descriptive text, so people understand better what it's for. (Image block: clarify what alternative text is used for #8391)

• Simplifying the various different options for image sizing would be 💯. (Image block: consolidate + simplify size controls #8397)

• Should be convertible to a cover image. (Add ability to transform between Image and Cover Image blocks #6475)

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

• Include ability to edit image title. (Image block: allow for editing image title #11054)

[ZebulanStanphill]

Just in general, floated blocks are the most confusing and broken-feeling things in Gutenberg. There is a lot of stuff that needs to be fixed here.

Regarding sizing options, see #7636 and #7638. Resizing should be easier for keyboard users than it is now. The drag handles are not usable by keyboard users.

what's the difference between "image dimensions" and "image size"?

The Image Size is the source file, selected from one of the automatically-generated image files of various sizes that WordPress creates when you upload a file. It used to be called Source Type (or something like that). I think the current name of the option is confusing.

[postphotos]

Hi @sarahmonster! I would strongly recommend a limited use of the word "caption" as it relates to media. I outlined why this is important in a Trac ticket here. It mostly has to do with consistency in how we approach all content with subtitles.

An alternate option that could work would be Write a description.... Let me know if this needs a new issue ticket!

[bph]

We noticed a few support tickets where people would like to set a title for the image they uploaded via the image block. The sidebar doesn't have all the fields, they see in the current editor. The work around is right now, to save the draft, get out of the editing process, go to the media library look for the newly uploaded image and fill in the title. But even if that is done, the front end doesn't display the image title. It's an SEO relevant attribute for an image, if ranking their image in search result pages is important to the site owner

[rosswintle]

+1 for @bph's title issue. Auto-generated media titles are derived from the file name, and no-one wants a media library full of things called "IMG0756" or "Screenshot 2018-09-04 10:20:30" because you can't then find anything in the media library.

I have to work really hard to get my clients to add titles so that when they search for images they can find media that they've added in the past easily.

I'd really like Gutenberg to put some emphasis on giving images titles as well as captions and alt-texts. The classic editor at least made this possible.

Please make editing the title possible, as a minimum, and emphasise it if you can.

Thanks

[sarahmonster]

@postphotos I totally see your argument here, and I'm of two minds. I love consistency, but we also use "description" elsewhere, and a caption isn't necessarily the same as a description. The ALT text for the image should definitely be a description, but the caption tends to be more editorial, and I'd be concerned that using description as a prompt here might encourage misuse of these inputs.

It sounds like something you've put a lot of thought into, so it might be worth opening an issue to have a bit more discussion! :)

[sarahmonster]

@bph @rosswintle I've filed #11054 for the title issue.

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! 💪