Make WordPress Core

Opened 20 months ago

Last modified 14 months ago

#56748 assigned defect (bug)

Twenty Twenty-One: Image stuck to text in responsive sizes

Reported by: sagarladani's profile sagarladani Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: 2nd-opinion has-patch
Focuses: css Cc:

Description

In responsive after 481px screen size image got stuck to text.

https://share.cleanshot.com/Ewl5TgZMdla8HDxLeERf

Attachments (8)

#56748.patch (380 bytes) - added by sagarladani 20 months ago.
I have add "float: none" css in max width 481 media css.
56748.1.patch (482 bytes) - added by sabernhardt 20 months ago.
56748.add-rtl.patch (790 bytes) - added by sabernhardt 20 months ago.
adding RTL fix for larger screens
floating-images-LTR-481px-before.png (72.3 KB) - added by sabernhardt 20 months ago.
before patch: image blocks aligned left and right at 481px wide
floating-images-LTR-481px-with-patch.png (71.9 KB) - added by sabernhardt 20 months ago.
with patch: image blocks aligned left and right at 481px wide
floating-images-RTL-720px-before.png (90.0 KB) - added by sabernhardt 20 months ago.
before patch: RTL language direction at 720px wide
floating-images-RTL-720px-with-patch.png (89.9 KB) - added by sabernhardt 20 months ago.
with patch: RTL language direction at 720px wide
56748.RTL-fix-only.patch (661 bytes) - added by sabernhardt 16 months ago.

Download all attachments as: .zip

Change History (16)

@sagarladani
20 months ago

I have add "float: none" css in max width 481 media css.

#1 @sagarladani
20 months ago

  • Keywords has-patch added; needs-patch removed
  • Summary changed from Image stuck to text in responsive to Image stuck to text in responsive in twentytwentyone theme

#2 @sabernhardt
20 months ago

  • Component changed from General to Bundled Theme
  • Focuses ui removed
  • Summary changed from Image stuck to text in responsive in twentytwentyone theme to Twenty Twenty-One: Image stuck to text in responsive sizes

Thanks for the report and patch!

The editor's block-library styles make the images float (and add a different margin) even at small screen sizes.

.wp-block-image .alignleft {
 float:left;
 margin:.5em 1em .5em 0;
}
.wp-block-image .alignright {
 float:right;
 margin:.5em 0 .5em 1em
}

For Twenty Twenty-One theme CSS patches, styles need to be updated in the SASS. It might be good to set the top margin to zero, too, for the alignleft and alignright classes (earlier in the SASS file so it applies at any screen size).

Last edited 20 months ago by sabernhardt (previous) (diff)

#3 @sabernhardt
20 months ago

  • Milestone changed from Awaiting Review to 6.2
  • Version set to 5.6

The block-library styles had the top margin before the Twenty Twenty-One theme was created, so that probably should stay.

I simply moved the float correction into the SASS, to compile all the stylesheets from that.

@sabernhardt
20 months ago

adding RTL fix for larger screens

@sabernhardt
20 months ago

before patch: image blocks aligned left and right at 481px wide

@sabernhardt
20 months ago

with patch: image blocks aligned left and right at 481px wide

@sabernhardt
20 months ago

before patch: RTL language direction at 720px wide

@sabernhardt
20 months ago

with patch: RTL language direction at 720px wide

#4 @sabernhardt
20 months ago

The second patch is beyond the original scope of this ticket, but RTL styles are wrong in both the theme and the block-library styles at screen sizes above 481 pixels. (I opened GB44845 for other themes, and this patch could solve it for Twenty Twenty-One in multiple WordPress versions.)

Last edited 20 months ago by sabernhardt (previous) (diff)

#5 @poena
16 months ago

LTR: I am concerned that the difference between the before and after are too big, with the images shifting this way, it would be a big visual difference for existing websites.

#6 @sabernhardt
16 months ago

  • Keywords 2nd-opinion added

Yes, maybe we should keep the floating from the editor styles. I think more people could prefer to remove it, but some might prefer the layout the way it always has been (since version 1.0 with WordPress 5.6).

For anyone who does not like this lack of margin, there are at least two ways to work around it:

  1. Remove the float in the Customizer's Additional CSS.
  2. I think using the Columns block to separate images and paragraphs tends to display better than setting the image's alignment option. That can help avoid awkward text wrapping around floating images (for example, a narrow column of text can split words, or else only the last word or two appears below the image).

The theme's RTL fix may belong on a new ticket instead, but I'm adding the patch here.

#7 @poena
16 months ago

  • Milestone changed from 6.2 to Future Release

#8 @poena
14 months ago

The separate RTL issue was solved here: https://github.com/WordPress/gutenberg/pull/47617

Note: See TracTickets for help on using tickets.