Improve discoverability of link URL in Image widget.

[stefanimhoff]

Hi,
I want to use the new Image-Widget from WordPress 4.8. I define a Link on the Image, but after safing every spacial character like .:/?# are striped from the URL.

The a href is also not inserted in the DOM around the Image nor Title.

Do you need further information?

Best Regards,

Stefan

[westonruter]

@stefanimhoff what tis the full value you are supplying in the URL field? Note that it expects an actual URL, so beginning with http:// or https://. It uses esc_url_raw() to sanitize the URL.

[stefanimhoff]

@westonruter One excample is ​http://www.ecocamping.net/

[westonruter]

@stefanimhoff I think you may be entering the URL in the incorrect field. See image-url-field.png​.

[stefanimhoff]

Ohh, sorry. Seems to be a typical layer 8 Problem...

Thank yoe very much!

Best Regards, Stefan

[timmydcrawford]

@stefanimhoff we are exploring some approaches to make the linking of images in the widget a bit more discoverable. If you have time I would love to have some feedback on the following designs being considered:

​https://cloudup.com/cTX3XurZQBJ

The code to implement the third option is here if you are interested in testing it out: ​https://github.com/xwp/wordpress-develop/pull/243

[westonruter]

We can use this ticket for improving the usability.

[stefanimhoff]

It is a great idea improving the usability.

@timmydcrawford I personally prefer the fourth solution, because most time I want to set more options (Relationships and open in a new window...). I don't know, if I would use third proposal very often, because of the additional options...

In the end linking Images will be standard-stuff: Web is meant to be linked ;)

[westonruter]

​https://github.com/xwp/wordpress-develop/pull/243

[westonruter]

@timmydcrawford please add commit once you've confirmed 41274.0.diff​.

[westonruter]

Δ ​https://github.com/xwp/wordpress-develop/pull/243/commits/0cb1dae

[timmydcrawford]

41274.1.diff applies cleanly for me and tests out well. I think this is ready to land.

[westonruter]

In 41252:

Widgets: Expose link URL input field in Image widget to avoid having to open media modal to discover.

Props timmydcrawford, westonruter.
See #39993.
Fixes #41274.

[westonruter]

In 42140:

Widgets: Style the Image Widget's link field as invalid when a bad URL is supplied.

Fixes issue where user may supply an invalid URL and be unable to save the widget on the Widgets admin screen without being told why.

Amends [41252].
See #41274.
Fixes #42488.

[westonruter]

In 42141:

Widgets: Style the Image Widget's link field as invalid when a bad URL is supplied.

Fixes issue where user may supply an invalid URL and be unable to save the widget on the Widgets admin screen without being told why.

Amends [41252].
See #41274.
Fixes #42488 for 4.9.

[westonruter]

In 42533:

Widgets: Allow relative/partial URLs in Image Widget's link field.

Props audrasjb.
Amends [41252].
See #41274.
Fixes #42740.

[westonruter]

In 42534:

Widgets: Allow relative/partial URLs in Image Widget's link field.

Props audrasjb.
Amends [41252].
See #41274.
Fixes #42740 for 4.9 branch.