WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 11 months ago

Last modified 11 months ago

#45380 closed defect (bug) (fixed)

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

Reported by: laurelfulford Owned by: laurelfulford
Milestone: 5.0 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-screenshots has-patch commit dev-reviewed fixed-5.0
Focuses: Cc:
PR Number:

Description

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

Attachments (5)

twenty-sixteen-original-editor-wide-image.png (1.2 MB) - added by laurelfulford 12 months ago.
Twenty Sixteen - wide image using the classic editor
twenty-sixteen-classic-block-wide-image.png (1.3 MB) - added by laurelfulford 12 months ago.
Twenty Sixteen - wide image using the classic block
twenty-sixteen-image-block-wide-image.png (872.1 KB) - added by laurelfulford 12 months ago.
Twenty Sixteen - wide image using the image block
twenty-sixteen-image-block-wide-image-after.png (1.3 MB) - added by laurelfulford 12 months ago.
45380.patch (4.0 KB) - added by laurelfulford 12 months ago.

Change History (15)

@laurelfulford
12 months ago

Twenty Sixteen - wide image using the classic editor

@laurelfulford
12 months ago

Twenty Sixteen - wide image using the classic block

@laurelfulford
12 months ago

Twenty Sixteen - wide image using the image block

#1 @laurelfulford
12 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

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.
  5. Add a full-sized image to the Classic editor (over 840px wide), with and without a caption.
  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!

Version 1, edited 12 months ago by laurelfulford (previous) (next) (diff)

#2 @davidakennedy
12 months ago

  • Keywords commit added; needs-testing removed

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.

This ticket was mentioned in Slack in #core-committers by laurelfulford. View the logs.


12 months ago

#4 @pento
12 months ago

  • Keywords dev-reviewed added

Looks good, thanks @laurelfulford!

#5 @laurelfulford
12 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

This ticket was mentioned in Slack in #core-themes by melchoyce. View the logs.


12 months ago

#7 @SergeyBiryukov
11 months ago

  • Keywords fixed-5.0 added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for trunk.

#8 @SergeyBiryukov
11 months ago

@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.

#9 @desrosj
11 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#10 @laurelfulford
11 months ago

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.

Note: See TracTickets for help on using tickets.