I think it may be SOMEWHERE in the css or a linked CSS file. Other themes – starter themes (most of them) don’t do this, but I seem to be missing something in the css?

Now to demonstrate the issue, I have created a VERY simple test theme and put it on a test site where you can see the behavior. On the backend (using either classic editor or the Gutenberg), it lays out fine. Yeah I am using the click on the image and select align left with text wrap around so ….

But when a custom template is used I get a layout that looks like what is on my WP Sandbox. (See link above)

Help appreciated in advance

So am I presuming correctly that I need to test and style “ALL” classes that the editor adds to the tags?

I guess these are all defined in a css file I should create for my purposes along the lines of a “editor-style.css” then?

Sorry if this seems obvious but I thought the editor code had intrinsic default styles.
?

Is this what you are shooting for? https://prnt.sc/p4fbcp

Add this to your css

.alignleft {
float: left;
padding-right: 20px;
}

.alignright {
float: right;
padding-right: 20px;
}

The presumption I had made was that the editors had some basic default styles they would pass to the frontpage side of the equation, that would to some basic level, reflect the editor “backend” preview. This is simply not the case.

As I go from starting with other existing template code, to coding from scratch, I see now I must maintain and enqueue something like the standard “editor-style.css” (for classic editor) and “editor-blocks” for Gutenberg editing.

I think I have a handle on this now, but I detail it here for others combing the forums for answers.

Thank you for taking the time to confirm my understanding.

Kind regards,

-John