Wrap text round image

Hey @swoolrich! I did some more testing on this, with the 2023 theme, and it looks like the theme basically makes left or right-aligned images break out of the content container, and forces them to stick to the edge of the screen. A solution to this, is to put your paragraphs and images inside a group block.

I’ve set up a test page showing this(both default and how it behaves inside a group block). This page is on a temporary site, so I’m also putting screenshots below:

This is an issue in TT2, TT3 and TT4 (as well as some other block themes).

As the image block is not wrapped in a div, it is not treated as part of the content and floats outside of it.

The following CSS fixes it:

@media only screen and (min-width : 768px) {
.single figure.alignleft {
	margin-inline-start: calc( ( 100% - var(--wp--style--global--content-size)) / 2 ) !important;
}

.single figure.alignright {
	margin-inline-end: calc( ( 100% - var(--wp--style--global--content-size)) / 2 ) !important;
}
}

Basically it moves the margin into the content for figure elements (pullquotes and images). Wrapping it in .single limits this to posts, but if you want the same behaviour on pages just remove it.

The media rule is to just do it on larger screens, it will wrap nicely on smaller screens anyway.

Thanks to this thread, I was finally able to do this. Since I was working within a columns block, I inserted the content into one of the columns to act as the container. In case someone wants to wrap text around an image, below are the steps I took.
1. Insert an image into a container (group or columns block) and from the toolbar in the preview screen, select the desired alignment.
2. Insert the paragraphs below or above the image, depending on the image alignment that was selected.
3. Play around with the image width. Enter the width in the settings ribbon, instead of the dimensions ribbon. Alternatively, use custom CSS to target width using clamp().
4. Margin between the image and text is set with the figure tag and not the img tag, so custom CSS is needed if you want to target that.

Some things in WP are just no intuitively designed. Once I saw that Media & Text block wasn’t an actual text wrap, I figured it wasn’t possible to do without custom HTML and CSS. So, I spent hours within the last two days. The alignment options should be moved to the settings area and be prominently displayed right above or below the width and height row. Moreover, WP should consider providing a block called “wrap text” or “float image” that is similar to the Media & Text block but uses float. Also, it would be good if we could target the margin directly in the editor which I think would mean moving the margin setting to the img tag or allowing the figure tag to be edited.