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

[Anlino]

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.

[nielslange]

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

[nielslange]

@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?

[Anlino]

@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.

[ianbelanger]

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.

[ianbelanger]

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

[samful]

I wanted to help out @ianbelanger. To remove the !important I had to also exclude the figure elements we are working on using :not, from the rule that was overriding the rules used in the Suggested solution. (this was the entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) rule.)

Then I simply put the condensed Suggested solution CSS into the style.css file in the correct places without the !important. Please check my patch file, I expect the style-rtl.css file will need to be changed in the same way if approved.

[ianbelanger]

Thanks for submitting the patch @samful, unfortunately in my testing, the patch does not fix the issue.

First, your patch would not apply for me, I had a line endings error when trying to apply it. So I took your CSS and added to style.css in my local install. It did add the margins to images, with captions that were set to alignnone or aligncenter and added using the classic editor, but it also removed the margins from all other items on the page. Paragraphs, images added as blocks, etc...

I am not exactly sure why this happened yet, but I am investigating further.

[samful]

Apologies for that @ianbelanger , I failed in testing this properly and will take more care in the future... The issue seemed to be because of the :not CSS seemingly not supporting more specific targeting like :not(figure.aligncenter) , I can't seem to find example of this online, so I'm assuming this isn't supported and I changed it to a more broad :not(.aligncenter).

I tested this patch on the sample page using blocks and added a few paragraphs of text under my image in the classic editor and the margins seem to be back now. I just hope my not rule isn't too broad now.

[samful]

refreshed with proper /src path and line numbers