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

[sagarladani]

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

​https://share.cleanshot.com/Ewl5TgZMdla8HDxLeERf

[sagarladani]

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

[sabernhardt]

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

[sabernhardt]

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]

adding RTL fix for larger screens

[sabernhardt]

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

[sabernhardt]

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

[sabernhardt]

before patch: RTL language direction at 720px wide

[sabernhardt]

with patch: RTL language direction at 720px wide

[sabernhardt]

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

[poena]

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.

[sabernhardt]

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.

[poena]

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