The Editor
The block editor appears wherever a contenteditor field is defined: the structure tree on the left, a live preview in the center and the inspector on the right while a block is selected. Nothing is stored until the entry or form is saved; that save also creates a version.
The structure tree (left)
Each row shows the block's name and summary, an enabled switch (disabled blocks stay in the document but are skipped on the frontend) and a clock icon when the block has a visibility schedule. On hover: add inside (containers only), move up, move down, and the ⋮ menu with Add block before / after, Duplicate, Enable / Disable, Save block as template and Delete.
Drag a row above or below a block, or onto the middle of a container, to move it. Moves that break the nesting rules (depth limit, allowed children) are refused.
Copy and paste
With a tree row focused, Ctrl/Cmd+C copies the block and Ctrl/Cmd+V pastes after it. The clipboard holds plain text, so blocks can be pasted into other pages and sites. Pasted blocks get fresh ids.
The live preview (center)
The preview renders the document through the real block partials, as content_render() does. It offers mobile (390px), tablet (768px), full and custom widths. Clicking a block selects it, disabled and out-of-schedule blocks are dimmed, and scripts do not run. On narrow screens the toolbar's Preview button opens it in a dialog. To make it look like your site, add your theme's CSS URLs under Settings → Content → Content Editor → Editor → Preview stylesheets (see the configuration reference).
The inspector (right)
All editing happens in the inspector, a panel up to 680px wide (full screen on narrow screens).
| Tab | Contents |
|---|---|
| Content | The block's fields. Rich Text switches between Formatted text and Rich text (October's editor with the media manager). Fields sharing a row name sit side by side. |
| Settings | Spacing per side, width, alignment, background, inverted text tone, CSS classes and anchor id. Hidden when Settings → Content → Content Editor → Editor → Show block settings in the editor is off; stored values keep rendering. |
| Visibility | The enabled switch and optional Show from / Show until dates, checked at render time. Per-block site restrictions are kept but have no picker yet. |
| SEO | A 0–100 score for the whole document: one H1, no skipped heading levels, headings present, enough text, heading-to-text ratio, image alt text, descriptive link text. Hidden when Show the SEO tab in the editor is off. |
Suggested CSS classes
List the classes your theme provides under Settings → Content → Content Editor → Editor → Suggested CSS classes, one row per class name with an optional label. A row may hold several classes separated by spaces; they are applied together. Once at least one row exists, clicking the CSS class field in a block's settings opens a list of them. Typing filters it by class name and label, the arrow keys and Enter pick an entry, and Escape closes the list. A picked class is added to the ones already set, never duplicated, and any other class can still be typed. Class names must be valid CSS identifiers; :, / and . are also accepted for utility classes such as md:hidden. Invalid names are rejected when you save the settings.
Adding blocks
Add block in the toolbar or below the tree opens a searchable picker with the tabs Blocks, Templates (see Templates) and Shared Content (when pieces exist). New blocks go to the end of the document. Add inside and Add block before / after insert at that position and list only the blocks allowed there. Field-level allowBlocks restrictions apply everywhere.
The toolbar
Undo / Redo, Add block, Preview (narrow screens), Fullscreen, an Unsaved changes badge, the AI menu (when AI is configured), Export / Import, Save as template, Keyboard shortcuts and History (once the record exists). When the editor is narrower than 640px, the actions from AI to History move into a More actions menu.
Keyboard & accessibility
The toolbar, the tree and the inspector tabs are one Tab stop each; the arrow keys and Home / End move inside them. Dialogs keep focus while open and return it on close, and screen readers announce every structural change. The shortcuts avoid October's form hotkeys (Ctrl+S, Ctrl+Enter, Alt+Shift+D, Alt+Shift+C). On macOS read Ctrl as Cmd and Alt as Option. Alt+Shift+H, or ? in the tree, lists all shortcuts.
Moving between areas
| Keys | Action |
|---|---|
| Alt+Shift+N / Alt+Shift+P | Next / previous area: toolbar, structure, preview, inspector |
| Alt+Shift+O | Go to the selected block in the structure tree |
| Alt+Shift+H | Show all keyboard shortcuts |
In the structure tree
| Keys | Action |
|---|---|
| ↑ / ↓, Home / End | Previous / next block, first / last block |
| → / ← | Expand or enter a container / collapse or go to the parent |
| Letters | Jump to a block by name |
| Space | Select the block; focus stays in the tree |
| Enter | Open the inspector with focus in its first field |
| Ctrl+Shift+↑ / ↓ | Move up / down |
| Ctrl+Shift+→ / ← | Move into the container above / out of the container |
| Ctrl+Shift+D | Duplicate |
| Ctrl+Alt+T / Ctrl+Alt+Y | Add a block before / after |
| Delete or Backspace | Delete |
| Ctrl+C / Ctrl+V | Copy / paste after |
| Ctrl+Z / Ctrl+Shift+Z or Ctrl+Y | Undo / redo |
| Shift+F10 or Menu key | Open the block's action menu |
Inspector and dialogs
← / → switch the inspector tabs. Esc closes the inspector and returns focus to the block's row in the tree.
Language
The editor UI follows the backend user's language: English, German, Spanish, Czech or Polish, otherwise English.