It only takes a minute to sign up. Connect and share knowledge within a single location that is structured and easy to search. I am trying to make my first post in Gutenberg and I've discovered that aligning the image right around the blocks works in the editor but when I preview it is not floating right. Previously I had css for img. I even inserted custom html as follows:. And that didn't work though when I view source in the preview it should be just like before Gutenberg.
Using image alignment
Use Gutenberg columns to add images on your WordPress blog
Note: The instructions from this guide are referring to the Classic Editor. If you are using the WordPress block editor, please see this guide. When inserting images into your posts and pages, you can have your text wrap around them to promote a more attractive flow of content. This is a snap using the left and right alignment icons in the Classic Editor. Table of Contents. Click the Add Media icon above the editing area and insert your image.
Not quite what you're looking for?
Codex tools: Log in. Current versions of WordPress now have image alignment built-in. WordPress adds CSS classes to align the image to the right, left, and center of a paragraph, so the text will wrap around the image. In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style. First, here is a look at a typical image tag in your post, without the instructions for wrapping the text around the image.
Getting an image to float to the left or right of some text is not as obvious in Gutenberg as it was in the classic editor. But, the answer, once you know it is just as easy. The best way to start is by adding everything in separate blocks, including the image that you want to float. Ensure that all the text that you want at the side of the image appears in the blocks directly below the image. Something like this….