Widgets
Visual editor
Arrange widgets on a VitNode page in the browser. Open the visual editor from the user menu, add, move and edit widgets, then save, with keyboard support and a preview.
The visual editor lets a moderator rearrange a page's widgets on the page itself. They open Edit widgets from the user menu, the page grows outlines around its content zones and a sidebar slides in, and they drag, edit and save without leaving the page.
public page ā Edit widgets ā the same page, editable ā Save ā public page
Before you begin
- A page with editing turned on. An editable page gets the editor, storage and saving from core; that is the usual way. A page that stores widgets somewhere else uses a custom editor host.
- The page's moderator permission. An editable page names it, such as Widgets ā Edit page widgets for the newsroom plugin. Administrators with full access hold it already.
To try everything below, open /newsroom/zones from the newsroom plugin, signed in as an administrator.
Open the editor
Open the user menu in the header and choose Edit widgets. The entry only appears on a page you can edit.
The whole site moves over to make room for the Widgets sidebar, and every zone gets a dashed outline with its name. An empty zone, which renders nothing for visitors, shows Drag and drop widgets here and an Add widget button.
Nothing on the page restarts. A half-filled form or a playing video around the zones keeps its state. A link with ?edit=true can ask for edit mode on arrival, but it never grants it.
Add a widget
The Widgets sidebar lists every widget the page's zones accept, grouped by plugin, with a search field on top.
- Click a widget to add it to the targeted zone, or to the first zone that accepts it.
- Drag it onto the page. A blue line shows exactly where it will land.
- Add widget on a zone targets that zone. The sidebar says Adding to ā¦ and lists only what that zone accepts.
The new widget is selected and its fields open in the sidebar, ready to fill in. The Layout section adds an Area, which places widgets side by side in up to four columns; see Layout areas.
Move a widget
Drag a widget by any part of it. Drop it above or below another widget, into another zone, or onto an empty zone. A zone that does not accept the widget turns red and refuses it; nothing moves.
Everything works from the keyboard too:
| Key | What it does |
|---|---|
| Tab | Moves between widgets. |
| Enter | Selects the widget and opens its fields. |
| Space | Picks the widget up, and drops it the second time. |
| ā ā | Moves it through the positions of its zone and into the next zone. |
| Esc | Puts it back where it started. |
Screen readers hear each step with the widget's name and the zone, such as Callout was dropped into the after-profile zone, position 1 of 2. On a touchscreen, press and hold a widget to pick it up.
Edit a widget
Click a widget to select it. Its Edit and Remove actions appear on the widget, and its fields open in the sidebar under Properties, with Duplicate and Remove. The widget on the page changes as you type, so the page is the preview.
A widget with variants shows a Variant picker above its fields. Changing it changes the look and keeps the content.
Back to widgets at the top of the sidebar returns to the list and clears the selection.
Preview, save and finish
The sidebar footer shows the page's state (Saved, Unsaved changes, Savingā¦, Save failed) and these buttons:
| Button | What it does |
|---|---|
| Preview | Hides outlines and handles, so links and buttons inside widgets work. Back to editing returns. |
| Discard changes | Puts every zone back to how the page loaded. |
| Save | Stores the changes and stays in edit mode. A Page saved toast confirms it. |
| Finish editing | Leaves edit mode. With unsaved changes it asks first: Save and finish, Leave without saving or Keep editing. |
The browser asks the same question when you navigate away with unsaved changes. If somebody else saved the same zone since you opened the editor, the server refuses the save with Somebody else saved this page first, and your changes stay in the editor. Two people editing different zones of one page both succeed.
When the editor refuses to save
- A zone holds content the editor cannot read, such as an entry without a widget type. The zone says This zone holds content the editor cannot read and Save is disabled. Choose Remove invalid entry for each one. The editor never drops content silently.
- A widget's stored data no longer matches its fields, for example after a plugin update. The widget shows Widget data needs fixing. You can move or remove it, but not edit it.
- A zone leaves the page while you edit, for example behind a tab. It leaves the editor too, and the footer names it if it had unsaved changes.
What the editor does not do
- No areas inside areas, and no widgets that contain zones.
- No drafts or revisions. Save writes the live layout.
- No per-breakpoint layouts. Widgets are responsive on their own.
- No images, files, relations or rich text in widget fields yet.
- No live collaboration, so nobody sees anybody else editing.
- No dimming of the parts of the page that cannot be edited.
Visitors never download it
The editor's code loads on the first click of Edit widgets, never before. A visitor who only reads the page downloads none of it; a test in @vitnode/core fails the build if the editor ever reaches the public bundle.
Related
- Editable pages: make a page editable, with storage and permissions from core.
- Custom editor host: edit widgets stored anywhere else, with your own save route.
- Content zones: where widgets render on a page.