jessestu/editor--make-rows-of-blocks.md

## editor--make-rows-of-blocks.md

      
    Raw
  

              editor--make-rows-of-blocks.md
            
          
    Make rows of blocks in the WordPress editor.

One can line up images and other blocks in the new WordPress editor into rows using the following steps.

Video example

Please see a video walkthrough of these instructions at this link: http://cld.wthms.co/Db7QFl

How to set this up in the editor

Add a Custom HTML block at the top of the section you want organized into rows:
<div class="makeRow">
At the end of the row or column, add the following additional Custom HTML block:
</div>
CSS Styling

To make this styling work, please copy and paste the following CSS into My Site → Customize → CSS or Additional CSS:
/* This CSS sorts blocks into rows in the new editor. Setup guide: https://gist.github.com/1f86a7b6a348f262e52c89971bb9fac0/ */
.makeRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
Examples

This is how this looks in the editor:

Direct image link: http://cld.wthms.co/Xi9jEM
And on the final page:

Direct image link: http://cld.wthms.co/MSjQ76
Known Issue

When you use this method, the editor will show an error when you open the page in the future. This is because the HTML block expects the <div> tag to be completed, which means it opens with <div> and closes with </div>. You will see this error in the editor that you can ignore, or press Convert to HTML to show the original HTML again. Here is the error message that can be ignored: