Social media previews: display an alert if the image format is not allowed

[enricobattocchi]

The social media previews are correctly warning you to use the correct image format when selecting an image for FB or Twitter, but the image is displayed nonetheless. ~This happens also if you use an unsupported image format for the featured image, but in that case you don't get any alert so users might be confused. In alternative,~ we might keep displaying the image but turn on the alert even when the image is coming from outside (as a featured image or a content image)

[igorschoester]

I'm having doubts if this is the best UX to offer. It is a valid image and could potentially be frustrating to a user if the user can still select such image in the media library. And even then, it is a valid image according to the browser. Are we sure socials are stopping these image types?

That said, I tried to follow the Facebook path of this in the code, regarding the editor:

• Validation is being run inside the helper: https://github.com/Yoast/wordpress-seo/blob/e8404728bd7fd6021caa81f2f0333fdd3cdf61b7/packages/js/src/helpers/selectMedia.js#L98
• Which is ran on select of the Media library, when the user selects an image, tied together here: https://github.com/Yoast/wordpress-seo/blob/66ede28f334f0fa351bdfd70d50818d293923a3a/packages/js/src/containers/FacebookEditor.js#L89
  • Also note, Elementor uses a copy of this container
• For both Free & Premium, this ends up as onSelectImageClick in our social-metadata-forms package: https://github.com/Yoast/wordpress-seo/blob/1fe4259f0aba590c73146a4c5a38f02a371dcb1b/packages/social-metadata-forms/src/SocialMetadataPreviewForm.js#L237
• Which just passes it to the ImageSelect of our older components package, which ends up here: https://github.com/Yoast/wordpress-seo/blob/b5c259d9f2394419f0ca0485844c5a58129a88ce/packages/components/src/image-select/ImageSelect.js#L64

The warnings seem to also end up in the ImageSelect. Where we have some logic whether to display them or not: only if there is a selected image.

So actually, the user selects an image, but we disregard it. So we will need to invent a "trying to select" thing to make sure it does not end up in the form. This is not at all how we are currently dealing with this. Making this a very non-trivial change. Once this is tackled, X/Twitter would look the same. And then we have the settings, which I didn't look into yet.

[pls78]

• We decided to park this issue waiting for the decoupling of the hidden fields PR by @vraja-pro to be merged. That would make the refactoring of this part easier When we'll pick this up again:
• We should add more metadata here, meaning: file format, size, etc in order for the validation to happen.
• Let's stick with the proposed alternative of displaying the same alert we display when an image of an unsupported format is selected by the user
• More than one warning exist: we want to stick with the unsupported format one as it is the most important