Hyphen automatically gets added on 'title' tag of image

[anupviews]

When I upload an image that has no hyphen (eg. round clock.jpg), it automatically adds hyphen in the title tag and appears as: round-clock. This had happened with previous version of WordPress and was fixed, but Gutenberg has this bug.

Please fix this.

[chrisvanpatten]

@anupviews do you happen to know if there was a Core Trac ticket about this issue? I was under the impression that WordPress always normalised image filenames, but perhaps I'm wrong :)

[chrisvanpatten]

Oh, do you mean in generating the "title" attribute of the image?

A screenshot would be helpful here as well, if you have one!

[WPprodigy]

I uploaded an image (image name.png) to a Gutenberg image block. Here is the frontend output (no title attribute):

<figure class="wp-block-image">
<img src="https://wpdev.test/wp-content/uploads/2018/08/image-name.png" 
  alt="" class="wp-image-73" 
  srcset="https://wpdev.test/wp-content/uploads/2018/08/image-name.png 1200w, https://wpdev.test/wp-content/uploads/2018/08/image-name-300x205.png 300w, https://wpdev.test/wp-content/uploads/2018/08/image-name-768x525.png 768w, https://wpdev.test/wp-content/uploads/2018/08/image-name-1024x700.png 1024w" 
  sizes="(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px">
</figure>

When clicking on the pencil icon in the block for the image though, I do see the hyphenated title:

So a GB uploaded image is auto-hyphenating the image title, but it does not use the title attribute, which has been brought up here: #7504

---

I then uploaded a new image through just the media library in WP. This time, the image title was not auto-hyphenated

---

I believe the relevant trac ticket can be found here: https://core.trac.wordpress.org/ticket/37989

I've not done much digging, but this might be a core rest api issue rather than GB specific.

[WPprodigy]

Ah yea, so the title is getting assigned while the image is being uploaded via the rest api here: https://github.com/WordPress/WordPress/blob/aab929b8d619bde14495a97cdc1eb7bdf1f1d487/wp-includes/rest-api/endpoints/class-wp-rest-attachments-controller.php#L143

Possible Solutions:

1. See if the REST API should be handling this differently, and patch there (see media_handle_upload in core).
2. Pass along the image title in Gutenberg when first uploading the image. Which I believe would be here: https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/utils/media-upload/media-upload.js#L158.
3. Both one and two? ¯\(ツ)/¯

data.append( 'title', file.name.replace( /\.[^/.]+$/, '' ) );
should do the trick for the second option.

[anupviews]

@chrisvanpatten I uploaded an image (file name without hyphen), and the editor adds title tag as follows:

It automatically adds hyphenated title. I reported this issue with previously, but I don't remember which version had it.

And as @WPprodigy pointed out, it does not add title tag in frontend output even though I added something using the 'title' filed of the image:

Edit: Found the trac ticket here: https://core.trac.wordpress.org/ticket/38090

[WPprodigy]

Opened up a wp core issue as well, linking for reference: https://core.trac.wordpress.org/ticket/44789

[nicopujol]

Having this issue of hyphens in image file name and titles. Was there a fix or did it get reverted?

WordPress 5.1.1 with Gutenberg plugin 5.4.0

[WPprodigy]

I vaguely remember the issue, but fairly sure your SS is expected behavior. The image name had hyphens on it when uploaded, so they will also be there in the title by default.

[nicopujol]

The Gutenberg editor is adding the hypens to the file name. When uploading images from a recipe plugin, for example, the issue does not occur.