Gutenberg: Image block: allow for editing image title

[sarahmonster]

In #8291, there's some discussion around adding the ability to edit the image title directly in the editor. As it currently stands, in order to edit the image title, one needs to break their flow in order to loop over to the media library, then return back to the post.

From @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

and @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.

Sidebar settings for the image block already have a lot going on, so I'm wary about adding more noise here, but it sounds like this would be really useful to add in here—perhaps above the "alt text" section as a single-line input?

Vaguely related: #9350

[brentswisher]

I have added this to #11070 but in testing it I found a few issues I think might warrant further discussion, specifically:

1. This attribute (like the alt) is defaulted from the media library, but does not overwrite it when changed in the editor. Based on #7193 this is the desired behavior, so adding title as an attribute won't satisfy @rosswintle's desire for more searchable images in a site's media.
2. Since the default title is set to the file name, I am concerned that adding it here will result in a lot more titles being saved into the page's content with the default (ie: IMG_2323), given that the official HTML 5 spec has the following warning, I don't think that is a good thing :
   > Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification

Probably a little atypical to submit a pull request as I say I don't think it's a good idea, but I thought it might give somewhere to start. @sarahmonster if you know who the relevant people to tag for these questions are, that would be much appreciated. 😄

[bph]

Each block has an advanced options space where the title could reside.
Seems we have some contradictory goals at work. Those who care about title care about for getting the images not only found in their own library but also by Search Engines Images search features. This is quite an edge case. In the other side the title is hardly used properly and gets in the way of overall accessibility for site visitors and is better not used (unless I am misreading stuff here) so not displaying it in the block's sidebar directly but tuck it away in the advanced section might do the trick...

[bmeacham]

I too have encountered this issue. I added an image, and it showed up fine in the visual editor. I switched to the code editor and added a title attribute. When I switched back to visual editor it said "This block contains unexpected or invalid content." If I select Resolve, it offers to remove the title attribute. If I select Convert to HTML, the visual editor removes the image and displays the html instead. In either case, the image displays properly in Preview mode. That's OK, but it would be nice to see the image without the warning in the visual editor. Please add support for the title attribute in an element.

Putting the entry for the title attribute in the sidebar in the advanced section would be fine for my use case.

[KokkieH]

I switched to the code editor and added a title attribute. When I switched back to visual editor it said "This block contains unexpected or invalid content."

This might not be the right issue for this, but it feels related - I'm able to replicate this behaviour when making any changes to the image block in HTML view, including adding additional classes in the class attribute, or adding an id attribute to the block.

[reneedobbs]

The title tag is definitely used by businesses for SEO purposes, following the advice of Yoast, Search Engine Land, and countless other SEO companies.
The title tag is also the field Pinterest uses for the pin description when someone pins an image from a website when the data-pin-description tag is not there. Pinterest is one of the top traffic referrals for many businesses. That's another reason businesses use it - the alt-text is for describing the image and the title is for promoting it.
Note: The data-pin-description tag is also one not supported by the current Image block - gives the invalid content message.

[KokkieH]

Another request for a title and description field in the WordPress.com forums.

[MyCancerChic]

I would like to add to this issue with another request for an update. With the image alt attributes missing this is impacting the Yoast SEO and Pinterest, which is the major form of traffic for my blog MyCancerChic.com. When you go to a post now and try to pin the images, The text previously input into image alt attribute is missing. This is an issue when others save photos, pin to Pinterest or search for images. Is there a timeline for this being resolved?

[MyCancerChic]

See screenshots below. The "Embryo Transfer" Pin shows the alt attributes, the second pulls the title since alt attribute is not available.