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 Image block captions are not synced with media library #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.

[afercia]

It's an SEO relevant attribute for an image

The title tag is definitely used by businesses for SEO purposes, following the advice of Yoast, Search Engine Land, and countless other SEO companies.

Not sure this is entirely true, and in most of the cases the title attribute is abused. Actually, Yoast discourages its usage. Maybe @jdevalk can shed some more light on this. See also this recent post:

Image SEO alt tag and title tag optimization
16 January 2019
https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/

most of the time it doesn’t make sense to add it. They are only available to mouse (or other pointing devices) users and the only one case where the title attribute is required for accessibility is on <iframe> and tags.

If the information conveyed by the title attribute is relevant, consider making it available somewhere else, in plain text and if it’s not relevant, consider removing the title attribute entirely.

Instead, the alt attribute should always be considered as the actual content.

A different issue is the attachment title as used in WordPress in the media library. It totally makes sense it should be meaningful and easily searchable.

However, when creating content, the alt attribute should be prioritized to educate users that's the very important bit of information conveyed by images.

[reneedobbs]

@afercia That must be an updated post from Yoast because it is definitely not the information/instructions given before. In fact, around the first of this month (February) I had an email conversation with a Yoast representative and asked them to revise their image SEO post because Gutenberg block editor no longer supports the title attribute. (My request was for them to update to show how to manually add it in Gutenberg).
The Yoast post before had instructions on how to add the title tag for added SEO benefits. <- And that advise is what businesses are following.

[afercia]

That must be an updated post from Yoast

@reneedobbs sure, the Yoast post has been updated. That's why I've specified the post date: 16 January 2019. That's the new recommendation from Yoast 🙂

I believe the previous wording was:

It can be useful but in most cases, leaving it out shouldn’t be too much of an issue.

Businesses should probably consider to follow the new recommendation.

As per the technical details, it's also important to consider that the attachment title and the title attribute are two very different things in WordPress, see my comment on the PR.

[rosswintle]

Just want to chip in here, as I've been mentioned.

The issue I was raising in #8291 was not to do with the HTML "title" attribute, but rather to do with the workflow of uploading images to the media library and giving them a title and description that is saved to the image in the media library.

This is still not fixed. And I still believe that people should be encouraged to set titles on uploaded images rather than end up with a bunch of images called things like "img0145" and "DSC002864" and "Screenshot 2019-02-24 at 08:34:29".

Thanks

[FinnJackson]

Please restore 'Image Title Attribute' which has been lost in the Gutenberg editor

[1000cj]

I just started using the image block to the right on some posts prior to even checking if there was a discussion. Then I decided to see if what I was putting in the Alt block on the right within Gutenberg was showing up. I posted an image. I put the credits in the Alt box. I expected to see the credits show when I moused over the image in the published post. The credits do not show even though there is a place to put them within Gutenberg itself. I am attaching 2 images, one from where I put the information in the Alt box, and then one with my mouse over the published post to show that nothing is showing visibly. Actually, I realized I can't do the second image because I can't put my mouse two places at the same time, but it is not showing, otherwise I wouldn't take the time to find this thread and post here. I hope this gets fixed so I can give proper attributions.

[1000cj]

Here is the post link, so you can see the Alt Image attributes do not show. http://kingofkingsjesus.xyz/mateo-21-1-16/ Sorry for posting a link, but it is the only way I can indicate the problem.

[afercia]

The alt attribute is not meant to be shown visually. It's an alernative to the image and only displayed visually when the image isn't loaded (whether the image file path is broken or for any other reason).

Also, I'm sorry but the alt attribute is not meant for credits. Did you read the usage recommendation by clicking on the "Describe the purpose of the image" link?

[1000cj]

Thank you for clarifying that.

…

On Mon, Apr 6, 2020 at 2:06 AM Andrea Fercia ***@***.***> wrote: The alt attribute is not meant to be shown visually. It's an *alernative* to the image and only displayed visually when the image isn't loaded (whether the image file path is broken or for any other reason). Also, I'm sorry but the alt attribute is not meant for credits. Did you read the usage recommendation by clicking on the "Describe the purpose of the image" link? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#11054 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APB2PH6DX4MGZHFIUSWUHKDRLF5NVANCNFSM4F7ICXRQ> .

[vigilantspb]

The problem is ALT text in medialibrary and ALT in the post is two different text, not connected at all. Old version used title and alt from media library as I remember.

This is very bad because you cant search in medialibrary if you use gutenberg for filling alts and you don't see your alt on published page (alt is EMPTY) if you dragged an dropped your image to editor and changed alt in medialibrary afterwords.

If you delete image and insert it again from media library it's ok, updated alt is here. BUT!!! This is very inconvenient!
So.. One option is filling alt in two different places, second - have it OR in post OR in ML, but not together.

I like the idea of new editor, but it has toooo many problems

[jonathansoltero]

Pretty annoying having to set the ALT text in the post too instead of using the one the media already has.

[vigilantspb]

Pretty annoying having to set the ALT text in the post too instead of using the one the media already has.

I found one workaround, MLA plugin + Fixit example plugin, it can add alts from ML directly to the post code (get them from post and put in ML too), not that good but working solution :-/