Twenty Nineteen - Linked Image Block Images Display Issue

[JarretC]

The style.css stylesheet has the following code

@media only screen and (min-width: 768px) {
  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
    max-width: calc(8 * (100vw / 12) - 28px);
  }
}

@media only screen and (min-width: 1168px) {
  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
    max-width: calc(6 * (100vw / 12) - 28px);
  }
}

Due to the fact that the > combinator specifies a direct child of the specified element, any images that are used in an image block and then linked somewhere do not adhere to the width set by the theme.

To replicate...

1. Create an image block
2. Add an image
3. Create a link to that image

The above CSS only targets

<figure>
    <img />
</figure>

However, adding a link to the image causes this HTML

<figure>
    <a>
        <img />
    </a>
</figure>

Attached patch removes the > child selector to ensure that all images within the image block are matched.

Reported on forums here:
​https://wordpress.org/support/topic/image-width-changes-when-you-insert-link-with-visual-editor/

1. Match the max-width of a linked image to the post content width.
2. Assign the same max-width to the image captions.
3. Reset the image max-width to 100% when inside column blocks.

Trac ticket: https://core.trac.wordpress.org/ticket/48697

[sabernhardt]

Thanks for the report and the original patch!

r45605 added that max-width, and the SCSS comment explains that it does not belong on images that are aligned left, right or center. Those have a figure in between the wp-block-image class and the image, so the child selector did not affect them.

<div class="wp-block-image">
	<figure class="aligncenter">
		<img />
	</figure>
</div>

In addition to adjusting styles for linked images, the captions apparently need the max-width to match the content width for proper centering. And in columns, the images need to go back to max-width: 100%.

[audrasjb]

Before patch: image with and without link weren't using the same size

[audrasjb]

After patch: same size applies to both images with or without link

[audrasjb]

Self assigning for commit consideration.

[audrasjb]

In 52927:

Twenty Nineteen: Display Image block at the same size whether the image is linked or not.

This change makes sure the max-width value is assigned for linked images.

Props JarretC, sabernhardt.
Fixes #48697.

Committed in https://core.trac.wordpress.org/changeset/52927