[wp-trac] [WordPress Trac] #48336: Global block editor image styles causing problems

[WordPress Trac]

#48336: Global block editor image styles causing problems
--------------------------+-----------------------------
 Reporter:  dennis_f      |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:  ui            |
--------------------------+-----------------------------
 I was just testing WordPress 5.3 RC1 on my site and I noticed that the
 images layout was broken in one of the elements. The element is a custom
 theme element that is outside the main content area (it is not added from
 the editor). Then I noticed the following global CSS that is added
 globally for all images on the front-end in the /wp-includes/css/dist
 /block-library/style.css:


 {{{
 img {
   max-width: 100%;
   height: auto; }
 }}}


 I think that there will be many others affected by this global CSS,
 especially the `max-width: 100%;` property. Some more dynamic elements
 (like sliders) that assume the default image max-width being none, and
 need the image to overflow its parent will now look broken with this
 global rule.

 I'm not very familiar with the block editor internals, but I believe that
 those styles should be somehow scoped to the block editor elements only
 and not applied globally to all elements on the front-end.

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