Replace image URLs with media library picker everywhere

[hedgefield]

There are several locations in the plugin where we ask you to supply a URL in order to add an image. We want to replace those with the standard choose from media library button.

Locations this affects:

• Search Appearance > General > Company logo
• Config wizard step 4
• Social > FB, Twitter, Pinterest default

Please let me know if I forgot any.

Design is coming.

For reference, how WP/Gutenberg does it:

How the WP media library does it:

[hedgefield]

One that I forgot to mention are the social previews in the metabox, but those already have a button that opens the Media Library. And for the social settings pages we have a pending redesign (https://github.com/Yoast/wordpress-seo/issues/10708), which will take care of things there too.

So what's left is the Search Appearance setting and the config wizard:

Placing just a button would not have offered a way to preview what the image looks like, so I used the same pattern as our social preview editors. Clicking inside the square would open the media library, and so would the button. The dotted line makes it clearer that it's a placeholder zone. Can we do drag&drop here?

The size of the zone in this mockup is 400x240. I don't think we should go any bigger.

When an image is selected, the upload button is replaced by a replace + delete button. This mirrors how the Gutenberg featured image component works.

The button styles differ between the settings pages and the wizard, I've left that alone for now, but we have taken that into account in the config wizard redesign.

Also note that the Knowledge Graph inputs are now aligned below the headings, instead of next to them, which makes them consistent with the layout of the other settings in the paper.

cc @jdevalk @omarreiss @moorscode

[hedgefield]

@afercia informed me that the decision within WordPress is to use the style of Gutenberg, without any additional buttons aside from the drop zone, so I've updated the mockup to match.

[afercia]

To clarify, the "drop zone" should be a styled button 🙂 Example from Gutenberg:

[hedgefield]

If I may propose one small tweak, to change the border and text color for this thing to #073CBA. I find the blue really makes it more clear it is an interactive element, especially when shown in close proximity to other buttons-styled-as-links in the Gutenberg context. It passes AAA WCAG with a 7.9:1 in comparison with the #F1F1F1 background color.

[afercia]

Just to confirm the pattern with the "grey area" being a button (with no additional "upload" button) is being used more and more in core, see https://core.trac.wordpress.org/ticket/43151 (will be in 5.2)

[hedgefield]

Made two definitive mockups to show both states, and how the alert could be included.

[luckickken]

@hedgefield let's not call this definitive yet. Not, until a product owner approves this on our design repo.