[wp-trac] [WordPress Trac] #48697: Twenty Nineteen - Linked Image Block Images Display Issue

[WordPress Trac]

#48697: Twenty Nineteen - Linked Image Block Images Display Issue
---------------------------+-----------------------------
 Reporter:  JarretC        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:
 Severity:  normal         |   Keywords:  has-patch
  Focuses:                 |
---------------------------+-----------------------------
 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/

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48697>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform