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

[karmatosed]

Apologies, but @sabernhardt would you be able to confirm which patch is the one to use after the separate RTL issue has been resolved in that last mentioned PR?

• Adds /*rtl:ignore*/ comments for front-end Image block margins, and sets the side margin to zero when it matches the left or right alignment, as in 56748.RTL-fix-only.patch.
• Sets a margin of zero in the editor, too, for the side that touches the edge of the content area.
• Adds /*rtl:ignore*/ comments for (any) left-aligned or right-aligned blocks in 05-blocks/utilities/_editor.scss, and replaces the 482px media query with the media(mobile) mixin for consistency.
• Tries adding an :after pseudo-element as a spacer at narrow screen widths. If an aligned image is narrower than the content area, the pseudo-element would give a 1em gap between the image and a paragraph, but only when it does not have a caption. When the image is at least as wide as the content, or when a smaller image has a caption, the image would have an extra pixel beneath it.

Trac 56748

## Front-end screenshots

Before patch, paragraph text in English can touch a small, floating image at narrow screen widths.

With patch applied, the English text has a little 1em horizontal space between it and a small image (without a caption) at narrow screen widths. Small images with a caption still can touch the text, and they have an extra pixel beneath the image and above the caption. Similarly, images that are large enough to fill the content area have the extra pixel beneath the aligned image.

Before patch, Hebrew text can also touch a small image at narrow screen widths. Also, the Image blocks have both left and right margins, but the outer side should be zero.

With patch applied, Hebrew text has the same new spacing as English at narrow screen widths (1em horizontal space with a small image or one horizontal pixel with a caption and/or larger image). The outer margin is corrected to zero, too.

[sabernhardt]

I built on 56748.RTL-fix-only.patch for the RTL styles.

• The theme needs /*rtl:ignore*/ comments for the --global--spacing-horizontal margin.
• I retained the zero margin rulesets from that patch, even though GB47617 should make those unnecessary with the latest versions of WordPress.
• PR 7335 updates editor styles to reflect the same margins, with the /*rtl:ignore*/ comments for any aligned block and the zero margin applied only to the Image block. (The zero margins may become unnecessary in the future with GB65249.)

I also wanted to add space between images and text, as that was the original intent of this ticket. A pseudo-element might help when images are small and do not have a caption. The impact with larger images and with captioned images seems minor.

The pseudo-element did not work for me in the editor, so it is not included there.

[sabernhardt]

editor screenshots before and after applying PR 7335

[sabernhardt]

The editor screenshots do not show much, so I did not upload them individually. PR 7335 does not change the LTR layout, and it only sets a margin of zero on one side for RTL.