Using the editor
The editor's rail and panels, the Design panel's tabs, Help, and the keyboard shortcuts.
The editor opens with the page on the canvas, the inspector on the right for the selected block, and a rail of named panels on the left. One panel is open at a time. Choosing a panel's item again closes it and gives the canvas the room back.
The rail
The rail shows only the panels that work in this editor. A panel that is not built yet has no item at all, so nothing on the rail opens an empty panel.
| Item | What it holds |
|---|---|
| Add | The blocks, components and saved patterns you can place. Drag one onto the canvas, or choose it to place it after the selected block, or at the end of the page when nothing is selected. |
| Layers | The page as a tree. Select, expand and move blocks here as on the canvas. |
| Design | The site's look, in three tabs: Variables (the design tokens), Classes and Fonts. |
| Settings | The entry's other fields, such as its title, slug and SEO. It appears only when the entry has fields besides the page itself. |
| Help | The keyboard shortcuts in effect, and links to these pages. |
Add, Layers and Design sit at the top. Settings and Help sit at the bottom.
The editor remembers the panel you left open, and on Design the tab you left on, the next time you open it in the same browser.
Help
Help lists the keyboard shortcuts the editor has right now, read from the same list the keyboard uses. So a key shows there only if pressing it does what Help says. When the editor and the page around it both bind a key, Help shows the binding that runs inside the editor.
Escape closes Help and returns you to the rail.
Keyboard shortcuts
On a Mac, ⌘ replaces Ctrl.
| Keys | What they do |
|---|---|
| Ctrl+Z | Undo the last change |
| Ctrl+Shift+Z or Ctrl+Y | Redo the last undone change |
| Ctrl+D | Duplicate the selected block |
| Delete or Backspace | Delete the selected block |
| Enter | Edit the selected block's text |
| Escape | Clear the block selection |
| Alt+↑ / Alt+↓ | Move the selected block up or down |
| Alt+→ / Alt+← | Move the selected block into the container above it, or out of its container |
| Ctrl+K | Open the command palette |
| F6 | Move to the next area of the editor: rail, panel, canvas, inspector |
| Ctrl+0 | Show the page at actual size |
| Shift+1 | Fit the page to the canvas |
| Shift+F10 or the menu key | Open the menu of the block that holds focus, from a link or button inside it. Elsewhere, right-click the block or use its toolbar |
Help is the complete list for the editor you have open, including any shortcut the page around it adds, such as saving.
Related
- Page Builder — install the plugin and render its pages
- Locked areas — keep a section's structure while authors edit it