WordPress.org

Make WordPress Core

Opened 8 months ago

#48697 new defect (bug)

Twenty Nineteen - Linked Image Block Images Display Issue

Reported by: JarretC Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: 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 (1)

48697.diff (697 bytes) - added by JarretC 8 months ago.

Download all attachments as: .zip

Change History (1)

@JarretC
8 months ago

Note: See TracTickets for help on using tickets.