Designing layout blocks #

This page is for theme designers whose site uses Exponential Layouts, the block editor in which editors arrange pages themselves. On those pages you do not design a page; you design the blocks editors place, the view types they choose for each block, and the layout types whose zones hold the blocks. The technical side is covered well in the designer help: Layouts for designers, Block definitions, Block view templates, Styling layout blocks and Tutorial: build a landing page with layouts.

Contents #

1. Design the parts, not the page
2. Block types and view types
3. Any order, any width
4. Containers
5. Layout types and zones
6. Shared layouts
7. Naming view types for editors
8. The block design sheet

Design the parts, not the page #

A landing page mockup is still useful, as an example of what editors could build. But what you hand over is a set of blocks, each designed on its own and checked next to every other. Ask yourself for every block: does it look right directly below a hero, directly above the footer, next to itself, and alone on a page?

Block types and view types #

A block type (title, text, list, gallery, hero ...) defines what a block holds and which settings editors fill in. A view type is one of the looks a block type offers; editors pick one per block. Adding a view type to an existing block type needs a template and a line of settings, no PHP, which makes it the cheapest way to give editors a new look (Block definitions). Adding a block type needs a developer.

So when a new look is requested, first ask whether it is a new view type of an existing block. A "news cards" look is a view type of the list block, not a new block.

Any order, any width #

• Order: editors can put any block after any other. Spacing between blocks comes from one rule of the design, not from each block's margins (Styling layout blocks).
• Width: a block may sit in a full-width zone, a column of a container, or a narrow side zone. Draw each view type at full width and at about 300 pixels (Spacing and grid).
• Content: a list block can show one item or fifty; a text block can be one line or a long article. Use the stress set (Designing with real content).
• Empty: a block with nothing to show should not leave a gap (Designing empty and error states).

Containers #

Container blocks (two, three or four columns) hold other blocks in their placeholders. Design the columns' gap and the point where they stack on small screens, and check blocks inside a column of a three-column container: that is the narrowest place most blocks will ever be.

Layout types and zones #

A layout type is a grid of named zones (for example a main zone and a sidebar). Editors choose a layout type when they create a layout, so each layout type is a page skeleton you design once (Layout types and zones). Keep their number small: two or three layout types usually cover a content site.

Shared layouts #

Some layouts are shared: their zones (often a header, a footer or a pre-footer area) are linked into many other layouts, so a change appears everywhere. Design those blocks with the same care as the frame, since they appear on many pages (Shared layouts and linked zones).

Naming view types for editors #

Editors choose view types from a list of names. Name each by what it looks like and where it fits:

The identifier in settings uses your theme's prefix (mytheme_cards); the label editors see is translated (Designing for editors).

The block design sheet #

For each block type and view type, hand over:

The style guide page can show every block type and view type with sample content, or build a test layout with all of them on the development installation.

Related pages #

• Layouts for designers
• The layouts editor
• Exponential Layouts course for trainers
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.