[wp-trac] [WordPress Trac] #45380: Twenty Sixteen: Theme's built-in 'wide' image styles don't work with image blocks

[WordPress Trac]

#45380: Twenty Sixteen: Theme's built-in 'wide' image styles don't work with image
blocks
-------------------------------------------------+-------------------------
 Reporter:  laurelfulford                        |       Owner:
                                                 |  laurelfulford
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.0
Component:  Bundled Theme                        |     Version:  5.0
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots has-patch needs-     |     Focuses:
  testing                                        |
-------------------------------------------------+-------------------------
Changes (by laurelfulford):

 * keywords:  needs-patch has-screenshots => has-screenshots has-patch
     needs-testing


Comment:

 [attachment:"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 content 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!

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/45380#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform