WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 7 weeks ago

#48617 assigned defect (bug)

Twenty Twenty: Figure elements with inline style can overflow content bounds

Reported by: Anlino Owned by: nielslange
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-patch needs-testing
Focuses: Cc:

Description

In content created in the classic editor, images that have captions and are set to alignnone or aligncenter can exceed the width of the entry content. This is caused by the inline style on the figure element overwriting the width set on .entry-content > * in style.css.

Steps to reproduce:

  1. Add an image while using the classic editor.
  2. Set it to alignnone or aligncenter.
  3. Add a caption.
  4. Check on a screen size thinner than the width of the image.

Suggested solution:
(Condensed for clarity)

.entry-content figure.alignnone[style*="width"],
.entry-content figure.aligncenter[style*="width"] {
        max-width: calc(100% - 4rem) !important;
}

@media ( min-width: 620px ) {
        body:not(.template-full-width) .entry-content figure.alignnone[style*="width"],
        body:not(.template-full-width) .entry-content figure.aligncenter[style*="width"] {
                max-width: 58rem !important;
        }
}

@media ( min-width: 1280px ) {
        body.template-full-width .entry-content figure.alignnone[style*="width"],
        body.template-full-width .entry-content figure.aligncenter[style*="width"] {
                max-width: 120rem !important;
        }
}

First reported by @derlynad.

Change History (8)

#1 @SergeyBiryukov
5 months ago

  • Milestone changed from Awaiting Review to 5.3.1

#2 @nielslange
5 months ago

  • Owner set to nielslange
  • Status changed from new to assigned

#3 @nielslange
5 months ago

Happy to create a patch for this issue later today, @Anlino.

#4 @nielslange
5 months ago

  • Keywords reporter-feedback added

@Anlino I'm unable to reproduce this issue using an large image and the following code:

[caption id="attachment_1818" align="aligncenter" width="2560"]<img class="wp-image-1818 size-full" src="http://core.trac.test/wp-content/uploads/2019/11/evgeni-tcherkasski-SHA85I0G8K4-unsplash-scaled.jpg" alt="Lighthouse in the night" width="2560" height="1708" /> Lighthouse in the night[/caption]

Could you share your HTML code of this issue?

#5 @Anlino
4 months ago

@nielslange Sorry for the late reply. Using the code you posted causes the issue for me in the Classic Editor and the Classic block in the Block Editor. Screen capture here: https://www.andersnoren.se/private/media/trac/wp-caption-overflow.png

Note the image spanning the entire width of the screen, and the width of the figure being 580px even though the screen is only 375px wide.

#6 @ianbelanger
4 months ago

  • Milestone changed from 5.3.1 to Future Release

#7 @ianbelanger
3 months ago

  • Keywords needs-patch needs-testing added; reporter-feedback removed
  • Milestone changed from Future Release to 5.4

I would like to get this into the next major release, however I would prefer that we avoid using !important if possible. I will test and look for a solution when I get a chance, but any help with this issue is appreciated.

#8 @ianbelanger
7 weeks ago

  • Milestone changed from 5.4 to Future Release

This is not going to be ready for 5.4 Beta 1 which is today, so punting to a Future Release.

Note: See TracTickets for help on using tickets.