Tiled Gallery block: Add server render srcset

[sirreal]

Related to https://github.com/Automattic/wp-calypso/issues/30118

Add srcset to Tiled Gallery blocks. This adds a srcset which will provide improved image sizes using photon.

Compainion to #12061

It provides a number of alternatives in the srcset, between a calculated minimum and maximum, with a step.

Current values:

Min	Max	Step
600px	2000px	300px

There were enough changes that it felt appropriate to rework the simple block registration as part of a class that serves to namespace some functions.

Questions

Are the minimum and maximum values appropriate? The maximum 2000px was found to be around the Photon threshold on the image size in bytes.

Is the step appropriate? Should we have more or less alternatives?

Testing

• Add a tiled gallery
• Publish and view the post on the frontend
• Verify that the original img[src] is preserved and correct (should be the same as the src in the code editor)
• Verify that the img[srcset] looks good
• Verify that the srcset results in different image sizes loading at different viewport widths. Note that different browsers may exhibit slightly different behavior.
  • Start with a narrow viewport
  • Watch img requests in your network tab. Filter on /(i[0-2]\.wp\.com)|(files\.wordpress\.com)/ to see only photon requests.
  • Scale the viewport up and watch larger images load.
• Test with lazy images enabled and disabled.

It's very important to test all the different layouts!

Also verify the same behavior in D24729-code for Simple sites.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello sirreal! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D24729-code before merging this PR. Thank you!

[matticbot]

sirreal, Your synced wpcom patch D24729-code has been updated.

[simison]

Noting that having "lazy images" feature enabled also fiddles with these attributes, so it's important to verify this works with that module on or off.

[jeherve]

I tested this in Jetpack, and I would have a few questions, and a concern:

Currently on master, if I create a squared gallery it ends up loading 800px-wide images in a space where only 692px can fit:

It's not perfect, but that works.

With this PR, however, it ends up loading the 600px version of the image, thus upscaling it a little, which is definitely not ideal:

[sirreal]

but when I disable lazy loading images, I don't get square layout working

I've been unable to reproduce this on my Jetpack site.

[simison]

but when I disable lazy loading images, I don't get square layout working

So this was due be building blocks bundle with Automattic/wp-calypso#30724 — with the latest master build from Calypso all works great. 👍

I've tested with and without Lazy loading images, with and without carousel features as well.

[matticbot]

sirreal, Your synced wpcom patch D24729-code has been updated.

[simison]

Rebased + addressed PHP linter complaining about filename.

@kraftbj good for another look! :-)

stale

[kraftbj]

There's an issue that exists in master per @simison preventing images from getting the ssl arg, so approving this to merge and will fix that up in an upcoming PR.

[simison]

D24729-code still needs to be deployed but since this touches only one infrequently updated file and it's night in Europe, I'm leaving it for tomorrow for less risky wpcom deploy.

Tracking editor dropping ssl=1 in #12199

[sirreal]

D24729-code (this diff) requires D27606-code

[sirreal]

r191530-wpcom