Twenty Sixteen: Theme's built-in 'wide' image styles don't work with image blocks

[laurelfulford]

In Twenty Sixteen, if you insert an image larger than 840px wide in a post, far enough down the post that it will sit past the post meta, it will display as a larger image, running underneath the post meta.

This works when you use Gutenberg's classic block, but it no longer works when you use an image block. In that case, the image just matches the width of the rest of the content.

This was originally reported here: ​https://github.com/Automattic/themes/issues/363

[laurelfulford]

Twenty Sixteen - wide image using the classic editor

[laurelfulford]

Twenty Sixteen - wide image using the classic block

[laurelfulford]

Twenty Sixteen - wide image using the image block

[laurelfulford]

45380.patch​ should take care of this issue!

The wide image style in Twenty Sixteen is applied in really specific cases, so here’s a bit more context for testing. Pre-5.0, you can get this image style by:

1. Adding an image to a post.
2. The image needs to use the size ‘full size’.
3. The original image needs to be at least 840px wide.
4. When in the content, the image needs to be below the post meta on the left.

Unlike in the classic editor, the Image Block doesn’t add classes for image size, which is part of the reason why the current JavaScript doesn’t work. The Image block also uses the figcaption element for captions, which needs to be included in the JavaScript to get this displaying nicely.

I ran through a bunch of cases when testing that I’ve listed here in hopes that they’re helpful (and not terrifying!):

Testing the Image block (in all cases, start with a post):

1. Add an image block with an image larger than 840px wide. Make sure it’s far enough down in the content to be past the post meta.
2. Add an image block with an image larger than 840px wide, and add a caption. Make sure it’s far enough down in the content to be past the post meta.
3. Add an image block with a smaller image size (medium or thumbnail). Make sure it’s far enough down in the content to be past the post meta.
4. Add an image block and manually edit the image size and make it larger or equal to 840px wide. Make sure it’s far enough down in the content to be past the post meta.
5. Add an image block and manually edit the image size and make it less than 840px wide. Make sure it’s far enough down in the content to be past the post meta.
6. Finally, add an image block, with an image larger than 840px, to the very top.

Testing the classic editor and classic block (in all cases, start with a post):

These tests are to make sure images that already use the wide style continue to do so!

1. Add a full-sized image in the Classic block (over 840px wide); with and without a caption. Make sure it’s far enough down in the content to be past the post meta.
2. Add a smaller image in the Classic block; with and without a caption. Make sure it’s far enough down in the content to be past the post meta.
3. Add a full-sized image to the very top of the Classic block.
4. Add a full-sized image to the Classic editor (over 840px wide), with and without a caption. Make sure it’s far enough down in the content to be past the post meta.
5. Add a smaller image in the Classic editor; with and without a caption. Make sure it’s far enough down in the content to be past the post meta.
6. Add a full-sized image to the very top of the Classic editor.

It's important to note that this wide image style is not previewed in the editor -- adding checks for the image width there seems like it could turn into a bit of a mess, and beyond what a theme should be doing. Does this seem like enough of an issue not to add this behaviour? I’m leaning towards no, because the wide images also don’t preview in the classic editor, and this will make the image blocks behave more consistently with existing content in Twenty Sixteen. I’m interested to know what other people think, though!

[davidakennedy]

Hey @laurelfulford – I gave this a spin following the above steps, and didn't come up against any issues. It's good to go from me, and will make it as such.

It's important to note that this wide image style is not previewed in the editor -- adding checks for the image width there seems like it could turn into a bit of a mess, and beyond what a theme should be doing. Does this seem like enough of an issue not to add this behaviour? I’m leaning towards no, because the wide images also don’t preview in the classic editor, and this will make the image blocks behave more consistently with existing content in Twenty Sixteen. I’m interested to know what other people think, though!

I agree with your thinking here. I'm not sure there would be an easy way to make that work without creating a mess of code. That's a case where this is an older theme, and that's okay it doesn't preview exactly the right way. If Twenty Sixteen launched today, it wouldn't have that functionality, but instead leave it up to the user to control it with wide images.

[pento]

Looks good, thanks @laurelfulford!

[laurelfulford]

In 43911:

Twenty Sixteen: Update theme’s wide image styles to include Image Blocks

Twenty Sixteen includes functionality and styles that make full-size images extend wider than the content when they are added to posts, and appear below the post meta. This update adds the same behavior to image blocks and their captions.

Fixes: #45380.

[SergeyBiryukov]

Reopening for trunk.

[SergeyBiryukov]

@laurelfulford: Seems like we need to bump the version for css/blocks.css and js/functions.js in twentysixteen_scripts() in 5.0.2? It's currently set to 20181018 and 20160816, respectively, so the changes from [43911] might not get picked up due to caching.

[desrosj]

In 44263:

Twenty Sixteen: Update theme’s wide image styles to include Image Blocks

Twenty Sixteen includes functionality and styles that make full-size images extend wider than the content when they are added to posts, and appear below the post meta. This update adds the same behavior to image blocks and their captions.

Merges [43911] to trunk.

Props laurelfulford.
Fixes: #45380.

[laurelfulford]

Seems like we need to bump the version for css/blocks.css and js/functions.js in twentysixteen_scripts() in 5.0.2?

@SergeyBiryukov Eep, yes! Thank you for catching that! Some other themes have had updates to their blocks.css as well -- I'll make make a ticket shortly to cover updating the enqueue versions.