Twenty Twenty-Two horizontal scrolling on images and text

[wpfed]

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 ​https://wordpress.org/themes/twentytwentytwo/

[costdev]

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 wordpress.org rather than an issue in Core.

[dd32]

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 wp-themes.com hasn't changed in a long time - It's a non-block post from yonks ago.. Here's the raw content of that post (​https://wp-themes.com/twentytwentytwo/?p=19)

[caption id="" align="alignnone" width="435" caption="Boat"]<img class="wp-image-59" alt="Boat" src="https://wpdotorg.files.wordpress.com/2008/11/boat.jpg" width="435" height="288">[/caption]

Boat.

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.

[costdev]

@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="https://wpdotorg.files.wordpress.com/2008/11/boat.jpg" width="435" height="288">
    <figcaption class="wp-caption-text">Boat</figcaption>
</figure>

Image block with caption:

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
    <img src="https://wpdotorg.files.wordpress.com/2008/11/boat.jpg" alt="Boat"/>
    <figcaption>Boat.</figcaption>
</figure>
<!-- /wp:image -->

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

.wp-caption { /* doing this on `figure` won't work without `!important` */
    max-width: 100%;
}

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

[poena]

Is it time to update the sample content to using blocks yet?
​https://meta.trac.wordpress.org/ticket/30#comment:76

[costdev]

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

[karmatosed]

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.

[wpfed]

Sounds good @karmatosed

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

[karmatosed]

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