Blocks
A template screen is a stack of blocks. There are nine.
The palette
Section titled “The palette”| Block | What it renders |
|---|---|
| Heading | Display type, sized from your app’s typography tokens |
| Text | A paragraph of body copy |
| Icon | One icon, from the same set the navigation uses |
| Image | An uploaded image |
| Spacer | Vertical space |
| Divider | A hairline rule |
| Button | A tappable button with an action |
| Award | A myCred award display |
| Reviews | A reviews display |
Heading and Text take their sizes from Typography and Layout, so a template stays consistent with the rest of the app rather than becoming its own island.
Button actions
Section titled “Button actions”A button does one of four things:
| Action | What happens |
|---|---|
| None | Nothing. Useful while composing |
| Back | Returns to the previous screen |
| Feature | Opens another placed feature in this app |
| Link | Opens a URL carried by the block |
Feature is the one to understand. The button points at a feature you placed in navigation, so a template can be a front door to the rest of the app. Because the target is a property of the app rather than the template, the same template used in two apps can send members to two different places.
Adding and configuring blocks on a template screen
record → src/assets/media/template-blocks.mp4
Working with blocks
Section titled “Working with blocks”Each block has the same actions:
- Name block — a label for your own use while composing. It is not rendered.
- Copy and Paste — including between screens.
- Duplicate — copy and paste in one step.
- Lock and Unlock — stop a block being moved or edited by accident. Useful once a screen is finished.
- Delete.
Naming blocks is worth the moment it takes on any screen with more than a few. Ten unnamed Text blocks are hard to work with a week later.
Composition advice
Section titled “Composition advice”Lead with one Heading. A screen with three competing headings has none.
Use Spacer rather than empty Text blocks. An empty paragraph is a block that looks like a mistake to the next person editing.
Lock what is finished. Most accidental edits happen to the part of a screen you were not thinking about.
When it does not work
Section titled “When it does not work”| Symptom | Cause | Fix |
|---|---|---|
| A button does nothing | Its action is None, or the feature it points at was removed | Set the action, or point it somewhere that exists |
| A block will not move | It is locked | Unlock it |
| Heading sizes look wrong | They follow the app’s typography tokens | Change the tokens in Appearance |
| An Award or Reviews block is empty | Its backing plugin is not active on the site | Activate myCred or the reviews plugin |