Media & Text Block: Add image fill option

[frontdevde]

Description

This PR aims to add an image fill option as an enhancement to the Media & Text block.

In the Media & Text block it would be nice to have the option to make the image fill the full height of its column. In addition to providing a new creative option, this would allow for a more consistent look of the block across different viewports.

The corresponding issue is #14226

Screenshots

Todo

• Copy review Let image fill the entire column

How has this been tested?

• Manually verify ability to set image fill option
• Manually verify ability to select focal point
• Manually test how image fill behaves in Responsive (ie: non-desktop) context
• Manually verify can preview image fill via block editor in editor mode
• Manually verify save output on website aligns correctly in various permutations of image fill
• Manually verify blocks created with older version of the block still work

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.

[frontdevde]

Moved the deprecated part to its own file to declutter index.js.

[michelleweber]

Looks fine!

[kjellr]

This seems pretty solid in my testing, and I think it's a welcome addition to the block. I do wonder if we should rephrase the label though.

Let image fill the entire column

This can be a little confusing because if there isn't much text in the "Text" column (or if the image is very tall), the image will already be filling the entire column. I wonder if mentioning "cropping" in some way would be more clear:

• Automatically crop image and fill available space
• Crop image to fill entire column

[frontdevde]

Thanks for the feedback, @kjellr. As per your suggestion, I updated the copy to "Crop image to fill entire column".

[getdave]

Great work here. Tested and it seems to work really well.

One a11y point which I think we should consider...

[jorgefilipecosta]

Thank you for working on @frontdevde, it is looking good 👍

[frontdevde]

Please note that with the merge of #13989 into master, I had to resolve a couple of conflicts and force push the rebased branch. In addition, I also updated the changelog to reflect the changes in this PR.

[frontdevde]

@mapk Thank you for your input!

In light of those three points, it seems reasonable to move forward without object-fit for now.

Personally, I agree.

Can we stay consistent here for now and present the object-fit in another PR that can address this situation in the other blocks as well?

@jorgefilipecosta @m-e-h Does this work for you?

[getdave]

Using the background-image isn't ideal, but consistent with current code in the Cover block

A key point.

it seems reasonable to move forward without object-fit for now.

I'd agree with this too. I concur with many folk here that object-fit is the preferable solution but it would Block this PR and would require cover to be updated as well. Why not ship this nice enhancement to our users and then look to add the object-fit upgrade in a separate PR. This fits nicely with Matt's approach to such dilemas 😄

One question: I'm not clear why the background-image version wouldn't work in IE11.

Also, an Issue should be raised regarding object fit for both media-text and cover so that this isn't lost.

[m-e-h]

One question: I'm not clear why the background-image version wouldn't work in IE11.

initial used as the default position value isn't supported in IE.
https://developer.mozilla.org/en-US/docs/Web/CSS/initial#Browser_compatibility

Probably best to not insert background-position inline at all if it's not specified.

I'm sure IE would just ignore initial and use the initial value anyway. Just saying, with you guys being all IE this and IE that. 😄

[frontdevde]

I've changed the default value for the background position from initial to 50% 50% now, which is supported by all browsers in our compatibility matrix and the intended result we want to see.

[jorgefilipecosta]

Things looked good on my tests, thank you for iterating on this 👍