Fix Media & Text “crop image to fill” to work with linked media

[stokesman]

Issues

Using a Media & Text block with both linked media and the ”Crop image to fill entire column” results in a styling failure. The img element is not hidden as intended (to allow the “crop” to be of the background image).

Editor:	Frontend:

Variations of the breakage can be seen in the following issues: #21399; https://core.trac.wordpress.org/ticket/49890

Additionally, I noticed that if the media is switched to a video while the ”Crop image to fill entire column” option is on then the Focal Point Picker is left in the UI which is possibly confusing as it has no effect on video media.

A screen recording to demonstrate leftover focal point picker

Changes

To address the issues

• Change the selector for the img element to be descendent instead of child combinator.
• Add a ruleset for the a to make the link cover the media area since the image is hidden.
• Omit the ”Focal Point Picker” when the media is not an image

Tangential changes

• Remove the use of figure in the selectors for the media element

How has this been tested?

1. Insert a Media & Text block
2. Add an image
3. Add a link
4. Verify ”Crop image to fill entire column” setting works as intended (frontend)
5. Remove the link
6. Repeat step No.4
7. Change the media to a video
8. Verify that the Focal Point Picker is omitted from the UI

Types of changes

Bug fix: #21399

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[stokesman]

As best I can tell this has been an issue since #18139 was merged. It added support for linking media and it was overlooked that the added a element required some style adjustments (for the case where option “crop image to fill entire column” is enabled).

As they were involved there I'm asking if @draganescu, @mapk or @jorgefilipecosta may review this. Thank you 🙇

[draganescu]

Howdy @stokesman and thanks for fixing this. Tested in every way I could think and it works swell!