Slideshow block: Add image size selector

[mmtr]

Changes proposed in this Pull Request:

Add an image size selector to the slideshow block that allows users to choose the image size for the gallery inserted in the block.

The selector defaults to large size. Previously, all the images were loaded in full size. This should improve the performance when visiting a page, since the large size will be enough for most users, making necessary to download less MB.

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

Improvement for the Slideshow block.

Testing instructions:

• Start creating a new post.
• Insert a slideshow block.
• Add some images.
• Make sure you can resize the images with the image size selector.
• Make sure the selector defaults to large.
• Publish the post.
• Verify on the frontend the images are loaded with the selected size.
• Load an existing post containing a slideshow block (created before applying this branch).
• Make sure the image size selector has a full value (since the post was created before the image selector was available).

Proposed changelog entry for your changes:

Slideshow block: Add image size selector

[matticbot]

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

[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: November 5, 2019.
Scheduled code freeze: October 29, 2019

Generated by 🚫 dangerJS against c222943

[matticbot]

mmtr, Your synced wpcom patch D32207-code has been updated.

[mmtr]

The image selector is working after the last commit, but we still need to add a deprecated version of the block in order to support existing posts containing slideshow blocks (the block expect now images in large size but existing posts are using the full size).

[mmtr]

The image selector is working after the last commit, but we still need to add a deprecated version of the block in order to support existing posts containing slideshow blocks (the block expect now images in large size but existing posts are using the full size).

I don't think this is possible. The deprecation would be a block with sizeSlug defaulting to full, but we don't have any way of detecting if a block is deprecated in this case, since Gutenberg removes attributes set with default values when serializing a block. This means that both, a block inserted before the image selector is available and another one inserted with the image selector, would have the same attributes serialized (sizeSlug will be omitted), so Gutenberg will use the current version of the block.

The consequence of leaving the block without handling deprecations is that blocks added before the image selector will still use full size images (which is ok) but the image selector will be set as "Large". Maybe not a big deal 🤷‍♂️.

[gwwar]

The deprecation would be a block with sizeSlug defaulting to full, but we don't have any way of detecting if a block is deprecated in this case, since Gutenberg removes attributes set with default values when serializing a block.

This seem a bit silly that we can't detect this.

Can we add a block version attribute here? For example pick 1.0 for this update, and if it's missing the property we know images should be full, and then explicitly save the image size and block version on save. Later on if we make more updates to the block, we can bump the block version and we know which set of assumptions/transformations we need to make. I can defer to you though @mmtr if this seems like too much work.

Overall, this tests very well for newly created blocks.

[matticbot]

mmtr, Your synced wpcom patch D32207-code has been updated.

[mmtr]

Can we add a block version attribute here? For example pick 1.0 for this update, and if it's missing the property we know images should be full, and then explicitly save the image size and block version on save. Later on if we make more updates to the block, we can bump the block version and we know which set of assumptions/transformations we need to make. I can defer to you though @mmtr if this seems like too much work.

We would have the same problem if that block version attribute was defaulting to a value (using the default property when defining the attributes in the block settings), since Gutenberg would set the default value when the attribute was missing.

But this gave me an idea: if we don't define a default attribute value on the block settings but instead we set a default value programmatically based on the lack of the attribute + presence of images, we could differentiate newly created blocks without the attribute set from blocks created in the past by assuming that as of now is not possible to have a block with images and no size. If we find a block with images an no image size set, it'll mean it was created when the image selector was not available. I explored this approach in 41d406c and it seems it works 🙂

[matticbot]

mmtr, Your synced wpcom patch D32207-code has been updated.

[matticbot]

mmtr, Your synced wpcom patch D32207-code has been updated.

[gwwar]

I explored this approach in 41d406c and it seems it works

Nice, I'd definitely leave a comment though explaining that :D

[gwwar]

Thanks @mmtr ! This tests well for me. I also verified that old slideshows now correctly show "full" instead of "large" when a size attribute is now set.

[jeherve]

It seems I can't change the number of seconds between each slide anymore. I get an error in the console whenever I try to move the slider:

Uncaught TypeError: Cannot read property 'props' of undefined
    at setAttributes (edit.js:211)
    at onChange (controls.js:75)
    at onChange (components.min.js:19)

[matticbot]

mmtr, Your synced wpcom patch D32207-code has been updated.

[matticbot]

mmtr, Your synced wpcom patch D32207-code has been updated.

[matticbot]

mmtr, Your synced wpcom patch D32207-code has been updated.

[mmtr]

It seems I can't change the number of seconds between each slide anymore. I get an error in the console whenever I try to move the slider:

Uncaught TypeError: Cannot read property 'props' of undefined
    at setAttributes (edit.js:211)
    at onChange (controls.js:75)
    at onChange (components.min.js:19)

Good catch! Fixed in a16c9ac but then I noted the preview was not rendering the right image size when the autoplay mode was on, so I refactored briefly how the URLs of the images are updated on c222943 which seemed to do the trick.

[jeherve]

This seems to work well on my end. It should be good to merge!

[noahott]

Is it possible to use custom image sizes with the Slideshow block? I’ve created a number of custom image sizes with my theme but only see the default Thumbnail, Medium, Large, and Full Size options in the Image Size dropdown.

Thanks