Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#55034 new defect (bug)

Twenty Twenty-Two horizontal scrolling on images and text

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

Description

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/

Change History (7)

#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 wordpress.org 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 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.

#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="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:

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?
https://meta.trac.wordpress.org/ticket/30#comment:76

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

Note: See TracTickets for help on using tickets.