Make WordPress Core

Opened 4 years ago

Closed 2 years ago

Last modified 2 years ago

#48697 closed defect (bug) (fixed)

Twenty Nineteen - Linked Image Block Images Display Issue

Reported by: jarretc's profile JarretC Owned by: audrasjb's profile audrasjb
Milestone: 6.0 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-screenshots commit
Focuses: css Cc:

Description

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/

Attachments (3)

48697.diff (697 bytes) - added by JarretC 4 years ago.
Capture d’écran 2022-03-12 à 23.19.07.png (1.5 MB) - added by audrasjb 2 years ago.
Before patch: image with and without link weren't using the same size
Capture d’écran 2022-03-12 à 23.26.31.png (1.3 MB) - added by audrasjb 2 years ago.
After patch: same size applies to both images with or without link

Change History (8)

@JarretC
4 years ago

This ticket was mentioned in PR #2333 on WordPress/wordpress-develop by sabernhardt.


2 years ago
#1

  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

#2 @sabernhardt
2 years ago

  • Focuses css added
  • Milestone changed from Awaiting Review to 6.0

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
2 years ago

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

@audrasjb
2 years ago

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

#3 @audrasjb
2 years ago

  • Keywords has-screenshots commit added
  • Owner set to audrasjb
  • Status changed from new to assigned

Self assigning for commit consideration.

#4 @audrasjb
2 years ago

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

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.

Note: See TracTickets for help on using tickets.