Photon: Ignore data-width and data-height attributes

[mmtr]

Fixes #Automattic/wp-calypso#37193

Changes proposed in this Pull Request:

Ensures that only width and height attributes are taken into account by Photon when resizing an image.

Previously it was targeting any *width/*height attribute (such as data-weight and data-height) that are not intended for setting an image size (see Automattic/wp-calypso#37193 (comment)).

Is this a new feature or does it add/remove features to an existing part of Jetpack?

Bugfix

Testing instructions:

• Enable Photon:

• Create a post and add an image using HTML like this:

<img src="https://my-domain.com/wp-content/uploads/2019/11/image.png" data-width="100px" />

• Publish the post.
• View the post on the front end.
• Make sure the images has not been resize to 100px.
• Change the data-width attribute to width and update the post:

<img src="https://my-domain.com/wp-content/uploads/2019/11/image.png" width="100px" />

• Make sure the image has been resized to 100px.
• Try to play around with the quotes and spaces and make sure the image is still resized:

<!-- No whitespace -->
<img src="https://my-domain.com/wp-content/uploads/2019/11/image.png"width="100px" />

<!-- Single quotes -->
<img src='https://my-domain.com/wp-content/uploads/2019/11/image.png' width="100px" />

<!-- No whitespace and single quotes -->
<img src='https://my-domain.com/wp-content/uploads/2019/11/image.png'width="100px" />

Proposed changelog entry for your changes:

Photon: Ignore data-width and data-height attributes

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: December 3, 2019.
Scheduled code freeze: November 26, 2019

Generated by 🚫 dangerJS against 87dc0f9

[jeherve]

Do you think we could add some unit tests to tests/php/test_class.jetpack_photon.php to cover this new use-case?

[gwwar]

Thanks for digging into this @mmtr . I'm giving tentative approval, but would like two changes if possible:

• As @jeherve noted, it would be great to add additional unit tests for the filter so we can document the case, and quickly check data assumptions
• See if we can simplify the regex

Before:

After:

[gwwar]

Taking a second look at the screenshot we may also want to look into that resize query param to see if that value is expected.

[mmtr]

Taking a second look at the screenshot we may also want to look into that resize query param to see if that value is expected.

Seems to be expected when srcset is present:

jetpack/class.photon.php

Line 890 in 4f591d0

$args['resize'] = $width . ',' . $height;

[mmtr]

Do you think we could add some unit tests to tests/php/test_class.jetpack_photon.php to cover this new use-case?

Done in 87dc0f9. Sorry for the delay!

[gwwar]

This one is ready for another look @jeherve let us know if we need additional changes

[jeherve]

This looks good to me and tests well. Merging.