Make WordPress Core

Opened 2 years ago

Closed 3 months ago

#55034 closed defect (bug) (wontfix)

Twenty Twenty-Two horizontal scrolling on images and text

Reported by: wpfed's profile wpfed Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: close
Focuses: css Cc:


When navigating on the blog post worth a thousand words or elements on pixel android phone in chrome, horizontal scrolling is present on the page originating from image and text content.

Tested using the preview button on

Change History (10)

#1 follow-up: @costdev
2 years ago

I can reproduce the issue when previewing, but I can't reproduce it when I insert an image and set its width to 435px (to match the preview), nor when I insert a preformatted block and use the same content as the "Elements" post in the preview.

The image's <figure> in the preview doesn't have the wp-block-image class, but inserting an image in the editor has the class. The CSS applies max-width: 100%; to .wp-block-image img. I wonder if it's maybe a copy-paste issue on rather than an issue in Core.

This ticket was mentioned in Slack in #meta by costdev. View the logs.

2 years ago

#3 @SergeyBiryukov
2 years ago

  • Component changed from Themes to Bundled Theme

#4 in reply to: ↑ 1 @dd32
2 years ago

Replying to costdev:

The image's <figure> in the preview doesn't have the wp-block-image class, but inserting an image in the editor has the class. The CSS applies max-width: 100%; to .wp-block-image img.

The content on hasn't changed in a long time - It's a non-block post from yonks ago.. Here's the raw content of that post (

[caption id="" align="alignnone" width="435" caption="Boat"]<img class="wp-image-59" alt="Boat" src="" width="435" height="288">[/caption]


There is a chance that this is related to a wp-themes specific thing, as it's a singular WordPress site that all themes are dynamically switched into, so let me know if you can't duplicate it with the above post_content.

#5 @costdev
2 years ago

@dd32 Thanks!

After pasting the content you provided, the same issue occurred.

I inserted an image block and added a caption to see what the modern markup is:

[caption] Shortcode you provided:

<figure style="width: 435px" class="wp-caption alignnone">
    <img loading="lazy" class="wp-image-59" alt="Boat" src="" width="435" height="288">
    <figcaption class="wp-caption-text">Boat</figcaption>

Image block with caption:

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
    <img src="" alt="Boat"/>
<!-- /wp:image -->

So, Twenty Twenty-Two could include this to resolve the issue:

figure {
    max-width: 100%;

img {
    height: auto;
    max-width: 100%;
Version 0, edited 2 years ago by costdev (next)

#6 @poena
2 years ago

Is it time to update the sample content to using blocks yet?

#7 @costdev
2 years ago

@poena +1 IMO, definitely.

While TT2 needs the above CSS for [caption] shortcode support, I don't see any reason why the sample content couldn't be updated to use blocks.

#8 @karmatosed
3 months ago

  • Keywords close added

Unless I am mistaken this is an issue with the sample content not the theme? Please correct me if that isn't the case. Considering that, I would propose adding a 'close' keyword to this and focusing on updating the content. Thank you everyone for the collaboration so far.

#9 @wpfed
3 months ago

Sounds good @karmatosed

As was mentioned by @poena and @costdev issue would go away if blocks were used instead.

#10 @karmatosed
3 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Ok @wpfed thank you, I will close this out now then.

Note: See TracTickets for help on using tickets.