Blocks and layout

An email here is a list of blocks, top to bottom. There is no free canvas, no grid, and no way to place a block at an arbitrary position. Once you know how the list turns into a layout, the editor stops surprising you.

Blocks stack, in order

Every block occupies its own horizontal band. Add three blocks and you get three bands, in the order you added them. Drag a block up or down in the list and the bands reorder.

That is the whole model, with one addition.

Layout width is what makes columns

Every block has a Layout Width setting in its properties panel, offering 100%, 50%, 33%, and 25%. The panel explains the rule underneath it: blocks with widths that total 100% display side by side.

So two blocks set to 50% share one row. Four blocks at 25% share one row. A 50% and two 25% blocks share one row. A single block at 100% has the row to itself.

This is worth stating the other way round, because it is where people get stuck: you do not create a column and put things in it. You set widths on ordinary blocks and the rows form themselves. If two blocks refuse to sit side by side, their widths do not add up to 100%.

The columns block is a different thing

There is also a Columns block in the Layout group, which gives you two fixed containers you drop blocks into.

The two approaches overlap, and which you want depends on how much structure you need. Layout width is lighter and works for any run of blocks. The columns block is a real container, so it keeps its contents together when you move it and it is easier to reason about when a column holds several blocks.

For two paragraphs side by side, use layout width. For two mini-articles each with a heading, body, and link, use the columns block.

Why email layouts are this restricted

Email clients are not browsers. Outlook renders with Word’s engine, and support for the layout tools a web page would use ranges from partial to absent. The reliable way to build an email is nested tables, which is what this module generates.

So the restriction is not the editor being basic. It is what actually works once the email reaches an inbox.

Global styles

Alongside the blocks, an email carries settings that apply to all of it — background colour, font family, link colour, and content width. Email Settings in the toolbar is where they live.

Set these once at the start. Changing the font family after you have styled fifteen blocks individually will not retrospectively tidy them up.

What a block stores

Selecting a block shows its own properties, and they differ by type. A heading has content, level, font, alignment, and colour. A button adds a link, a size, and two colours. A table holds its rows. What they share is layout width, and — for most types — alignment.

Nothing about a block records where it sits. Position comes entirely from its place in the list and its width.

Build with blocks is the practical version of this page. Block catalogue lists all 27 types and what each is for.