Tiled gallery block: Add srcset to images in the editor #12061

sirreal · 2019-04-16T12:21:36Z

Independent companion to #11397
Implementation from Automattic/wp-calypso#30989

Add srcset to images in the Tiled Gallery block in the editor. This allows the browser to pick smaller assets when possible improving several aspects of performance.

Testing

No changes to the saved output. No block invalidation should occur. Try loading posts with older Tiled Galleries and they should work fine.
Add a Tiled Gallery block with a lot of large images.
Disable cache and reload the editor with a very small viewport.
Watch the network tab, initially smaller assets are requested.
Scale up the viewport.
Depending on the browser (different browsers handle srcset differently) you will likely see more requests fired for larger assets as the viewport width increases.

For a block with a lot of large images, the editor should be more responsive.

Changelog

Add srcset to Tiled Gallery block in the editor for an improved editing experience.

matticbot · 2019-04-16T12:21:42Z

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 D26982-code before merging this PR. Thank you!

matticbot · 2019-04-24T16:16:50Z

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

jetpackbot · 2019-04-24T16:26:18Z

	Warnings
⚠️	"Testing instructions" are missing for this PR. Please add some
⚠️	"Proposed changelog entry" is missing for this PR. Please include any meaningful changes

This is an automated check which relies on PULL_REQUEST_TEMPLATE. We encourage you to follow that template as it helps Jetpack maintainers do their job. If you think 'Testing instructions' or 'Proposed changelog entry' are not needed for your PR - please explain why you think so. Thanks for cooperation 🤖

Generated by 🚫 dangerJS against 4bafbe2

extensions/blocks/tiled-gallery/utils/index.js

simison

Looking fabulous! I like the move to utils.

Tested with all layouts on Chrome — scaling the browser window bigger looks amazing in the Networks tab and images load blazing fast now:

Tested also by adding blocks with old code and then reloading the editor to confirm nothing breaks.

matticbot · 2019-04-25T15:49:18Z

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

sirreal · 2019-04-25T15:49:46Z

Rebased and applied suggestion. Re-review please 🙂

simison · 2019-04-25T15:53:17Z

extensions/blocks/tiled-gallery/utils/index.js

+		const maxWidth = Math.min( PHOTON_MAX_RESIZE, width, height );
+
+		srcSet = range( minWidth, maxWidth, step )
+			.map( srcsetWidth => {


BTW you're using a mixture of srcset and srcSet in variable names. Not a biggie, just thought you ought to know. 😜

😱 Yeah… I think I was mostly using srcset, but React wants srcSet so… 🤷‍♂️

simison

Still fabulous. 👍

sirreal · 2019-04-25T16:06:14Z

FYI @MichaelArestad - we'd talked about this block's performance in the editor, I suspect you'll find this PR is a solid improvement.

MichaelArestad · 2019-04-25T18:14:17Z

Wonderful!

sirreal · 2019-04-29T14:55:28Z

Rebased to fix conflict

matticbot · 2019-04-29T14:55:32Z

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

sirreal · 2019-05-09T12:25:07Z

I believe this is ready but needs @Automattic/jetpack-crew review.

simison · 2019-05-14T11:54:07Z

@kraftbj any thoughts on getting this merged? Would be nice to give it some time to get tested in master before 7.4.

kraftbj · 2019-05-14T19:29:48Z

@sirreal @simison Apologies! Head was in the 7.3 game. Looking and testing it, it works for me, so merging.

simison · 2019-05-14T19:44:23Z

Ahaha no worries, thanks! 😌

…

On Tue, 14 May 2019, 22:30 Brandon Kraft, ***@***.***> wrote: Merged #12061 <#12061> into master. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12061?email_source=notifications&email_token=AAAVJAH5LS2FWVVUCZR76VTPVMHMFA5CNFSM4HGINTY2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOROF7FWY#event-2341204699>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAVJAGKFEOI2XCBQCCV37LPVMHMFANCNFSM4HGINTYQ> .

kraftbj · 2019-05-14T22:40:44Z

Could y'all check out the wpcom merge. There were some test failures when actually trying to get it in so want to defer to y'all on if there's something bigger in play.

simison · 2019-05-17T08:57:11Z

r191914-wpcom

* Kick off the changelog * Add 7.3.1 * Update date and post link * changelog: add #12219 * changelog: add #12170 * changelog: add #12184 * Changelog: add #12268 * Changelog: add #12081 * Changelog: add #12323 * Changelog: add #12204 * Changelog: add #12269 * Changelog: add #12332 * changelog: add #12339 * changelog: add #12209 * Changelog: add #12319 * Changelog: add #12357 * Changelog: add #12124 * Changelog: add #12373 * Changelog: add #12252 * Changelog: add #12383 * Changelog: add #12372 * changelog: add #12337 * Changelog: add #12290 * Changelog: add #12301 * Changelog: add #12061 * Testing list: add instructions for #12061 * Changelog: add #12393 * Update minimum supported version See #12287 * Changelog: add #12406 * Testing list: add #12406 * Changelog: add #12277 * Changelog: add #12412 * Changelog: add #11318 * Changelog: add #12328 * Changelog: add #12425 * Changelog: add #12380 * Changelog: add #12428 * Changelog: add #12414 * Changelog: add #12395 * Changelog & Testing list: add #12416, #12417, #12418, and #12348 * changelog: add #12379 * Changelog: add #12341 * changelog: add #12444 * Changelog: add #12434 * Changelog: add #12454 * Changelog: add #12460 * Changelog: add #12463 * Changelog: add #12457 * Changelog / testing list: add #10333 * Changelog: add #12467 Co-authored-by: Jeremy Herve <jeremy@jeremy.hu>

sirreal added [Feature] Tiled Gallery A different way to display image galleries on your site, in different organizations and shapes. [Focus] Performance [Status] In Progress [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack labels Apr 16, 2019

sirreal self-assigned this Apr 16, 2019

matticbot added the Touches WP.com Files label Apr 16, 2019

sirreal force-pushed the update/tiled-gallery-block-editor-srcset branch from 9817f92 to dab6e2b Compare April 24, 2019 16:16

sirreal added [Status] Needs Review To request a review from Crew. Label will be renamed soon. [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it and removed [Status] In Progress labels Apr 24, 2019

sirreal marked this pull request as ready for review April 24, 2019 16:21

sirreal requested a review from a team as a code owner April 24, 2019 16:21

sirreal force-pushed the update/tiled-gallery-block-editor-srcset branch from dab6e2b to d3a2ffa Compare April 24, 2019 16:21

sirreal requested a review from a team April 24, 2019 16:21

sirreal force-pushed the update/tiled-gallery-block-editor-srcset branch from d3a2ffa to 5f3bc6e Compare April 24, 2019 21:59

sirreal mentioned this pull request Apr 25, 2019

Tiled Gallery block: Add server render srcset #11397

Merged

simison reviewed Apr 25, 2019

View reviewed changes

extensions/blocks/tiled-gallery/utils/index.js Outdated Show resolved Hide resolved

simison previously approved these changes Apr 25, 2019

View reviewed changes

sirreal dismissed simison’s stale review via e56b4c7 April 25, 2019 15:49

sirreal force-pushed the update/tiled-gallery-block-editor-srcset branch from 5f3bc6e to e56b4c7 Compare April 25, 2019 15:49

sirreal requested a review from simison April 25, 2019 15:49

simison reviewed Apr 25, 2019

View reviewed changes

simison previously approved these changes Apr 25, 2019

View reviewed changes

sirreal dismissed simison’s stale review via 4bafbe2 April 29, 2019 14:55

sirreal force-pushed the update/tiled-gallery-block-editor-srcset branch from e56b4c7 to 4bafbe2 Compare April 29, 2019 14:55

simison approved these changes Apr 30, 2019

View reviewed changes

simison requested a review from a team April 30, 2019 09:05

simison added this to the 7.4 milestone Apr 30, 2019

kraftbj approved these changes May 14, 2019

View reviewed changes

kraftbj merged commit 4f6c119 into master May 14, 2019

matticbot added [Status] Needs Changelog and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels May 14, 2019

kraftbj deleted the update/tiled-gallery-block-editor-srcset branch May 14, 2019 19:30

sirreal mentioned this pull request May 16, 2019

Tiled Gallery: Remove invalidating strip attribute from block save #12390

Merged

jeherve added [Status] Has Changelog and removed [Status] Needs Changelog labels May 17, 2019

jeherve added a commit that referenced this pull request May 17, 2019

Changelog: add #12061

743b512

jeherve added a commit that referenced this pull request May 17, 2019

Testing list: add instructions for #12061

c2ef92d

jeherve added a commit that referenced this pull request May 23, 2019

Changelog: add #12061

d821ded

jeherve added a commit that referenced this pull request May 23, 2019

Testing list: add instructions for #12061

03ab3ff

jeherve mentioned this pull request May 30, 2019

Tiled Gallery Block: 404 on each image upload #12515

Closed

jeherve mentioned this pull request Sep 27, 2019

Tiled Gallery: Photon strips color profile information #13561

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tiled gallery block: Add srcset to images in the editor #12061

Tiled gallery block: Add srcset to images in the editor #12061

sirreal commented Apr 16, 2019 •

edited

Loading

matticbot commented Apr 16, 2019

matticbot commented Apr 24, 2019

jetpackbot commented Apr 24, 2019 •

edited

Loading

simison left a comment

matticbot commented Apr 25, 2019

sirreal commented Apr 25, 2019

simison Apr 25, 2019 •

edited

Loading

sirreal Apr 25, 2019

simison left a comment

sirreal commented Apr 25, 2019

MichaelArestad commented Apr 25, 2019

sirreal commented Apr 29, 2019

matticbot commented Apr 29, 2019

sirreal commented May 9, 2019

simison commented May 14, 2019

kraftbj commented May 14, 2019

simison commented May 14, 2019 via email

kraftbj commented May 14, 2019

simison commented May 17, 2019

Tiled gallery block: Add srcset to images in the editor #12061

Tiled gallery block: Add srcset to images in the editor #12061

Conversation

sirreal commented Apr 16, 2019 • edited Loading

Testing

Changelog

matticbot commented Apr 16, 2019

matticbot commented Apr 24, 2019

jetpackbot commented Apr 24, 2019 • edited Loading

simison left a comment

Choose a reason for hiding this comment

matticbot commented Apr 25, 2019

sirreal commented Apr 25, 2019

simison Apr 25, 2019 • edited Loading

Choose a reason for hiding this comment

sirreal Apr 25, 2019

Choose a reason for hiding this comment

simison left a comment

Choose a reason for hiding this comment

sirreal commented Apr 25, 2019

MichaelArestad commented Apr 25, 2019

sirreal commented Apr 29, 2019

matticbot commented Apr 29, 2019

sirreal commented May 9, 2019

simison commented May 14, 2019

kraftbj commented May 14, 2019

simison commented May 14, 2019 via email

kraftbj commented May 14, 2019

simison commented May 17, 2019

sirreal commented Apr 16, 2019 •

edited

Loading

jetpackbot commented Apr 24, 2019 •

edited

Loading

simison Apr 25, 2019 •

edited

Loading