Block editor

Open Admin → Content → a page or post, then Open page builder. The content edit screen itself is settings-only for every content type — its panels (SEO, Discussion, Revisions, Advanced) sit in a left sub-nav, with only Publish in the rail. The builder is a fullscreen React editor outside the usual admin shell. It loads registered blocks from GET /api/blocks and optional patterns from GET /api/themes/patterns (and GET /api/themes/patterns/:slug).

Document format#

{
  "version": 1,
  "blocks": [
    {
      "type": "core.heading",
      "props": { "text": "Hello", "level": 2 }
    },
    {
      "type": "core.paragraph",
      "props": { "text": "Welcome to the site." }
    }
  ]
}

Layout blocks (core.section, core.container, core.group, core.columns, core.column, core.grid) nest children. Columns contain core.column nodes; Grid stores responsive placement on each child. HTML and rich text go through sanitizers in @justflows/blocks (sanitizeHtmlBlock, sanitizeRichText, safe URLs for hrefs and media).

Authoring flow#

1. 1

   Insert

   Pick a core block or a theme pattern. Patterns are starter trees from the active theme.

2. 2

   Edit props

   Each block has a schema (text, rich text, number, media, links, and so on). Every block also gets spacing, size, alignment, corners, shadow, background, text and accent colour, opacity, per-instance theme variables, a CSS class, scoped custom CSS, and entrance / hover / press animation — all from the inspector, no CSS required.

3. 3

   Save and publish

   The document is stored on the content row. Public HTML is produced by each block’s render() plus the content.render filter.

Per-block styling without CSS#

The Layout panel styles any block instance directly. background, textColor, and accent take validated colours; transparent or none clears a background so a themed band shows through. opacity is a 0–100% slider. All of these write onto the block's own root element, so they beat the theme's own rules for that block.

vars overrides theme CSS custom properties for one block instance. A blockControls map in the active theme's manifest promotes chosen variables to first-class inspector fields per block type — a dropdown, slider, or colour picker — with an All theme variables section covering the rest. GET /api/themes/style-tokens serves that list (name, current value, range bounds, select presets) and also powers the variable reference in the Custom CSS panel.

Live theme preview#

The canvas links the active theme's stylesheet, scoped to the editor surface: GET /theme.css?scope=<selector> runs every rule through scopeThemeCss, which confines each selector to one wrapper class (:root, html, and body become the wrapper; @keyframes stay global). Block previews emit the real jf-* markup, so the builder renders with the actual theme styling.

Reusable blocks, JSON, and history#

• Reusable blocks — save a block to the library and insert linked references. Editing the saved source updates every page that uses it; the server resolves references when rendering.
• Block JSON — select a block to edit its type, version, props, and children directly. This is also the escape hatch for props the inspector does not expose.
• Page JSON — deselect every block to edit the complete page document, including page-header configuration, without re-importing or changing block ids.
• Undo and redo — use the toolbar or ⌘Z / ⇧⌘Z. Rapid edits are grouped while text fields retain their native undo history.

Block pattern library#

The Insert panel has a categorized pattern library with theme-width previews and editable insertion: six accessible token-driven section starters, plus local site patterns and optionally synced ones, with locale variants and RTL-aware UI. Patterns import and export as validated JSON, themes register them through the theme SDK, and plugins contribute them at runtime with ctx.patterns.register() — automatically removed when the plugin deactivates. Every non-core block a pattern uses must be listed in requiresBlockTypes, so the builder shows an installation notice instead of importing a broken design. A bounded, sanitized opt-in marketplace directory surfaces community patterns. Required-block checking runs before a template is saved.

Page headers and content-aware editing#

Headers are a library, not always-on chrome. Theme builder → Header holds named headers with one marked the site default; every page renders that default unless it points at another named header or *None*. Pick a page's header from the dropdown in the page builder — the choice saves on its own, immediately. Posts and error pages render the site-default header. The light/dark control, language switcher, and login/register links are site-chrome blocks you can drop into any header.

Posts and other non-page content use the same visual builder, but the library hides whole-page patterns and site-chrome controls that do not belong inside an article. URL controls can search published pages and posts, and Image uses the Media Library picker.