Keyboard Shortcuts

  • JNext lesson
  • KPrevious lesson
  • FSearch lessons
  • EscClear search

The visual builder supports keyboard shortcuts for common actions. All shortcuts use Cmd on macOS and Ctrl on Windows/Linux.

Saving

Cmd+S / Ctrl+S saves all sections by triggering the “Apply to Gutenberg” action. This is the same as clicking the Apply button in the top bar.

Section Management

Cmd+N / Ctrl+N adds a new empty section after the currently selected section.

Cmd+D / Ctrl+D duplicates the currently selected section. The duplicate is inserted immediately after the original.

Cmd+Backspace / Ctrl+Backspace deletes the currently selected section.

Section Reordering

Alt+Arrow Up moves the selected section up one position.

Alt+Arrow Down moves the selected section down one position.

Editor Focus

Alt+1 focuses the HTML editor.

Alt+2 focuses the CSS editor (switches the right pane to CSS if it’s showing JS).

Alt+3 focuses the JavaScript editor (switches the right pane to JS if it’s showing CSS).

Section Navigation

Arrow Up and Arrow Down (when a section item in the sidebar has focus) navigate between sections in the sidebar.

Code Editor Shortcuts

Inside the CodeMirror editors, these additional shortcuts are available.

Tab inserts a tab character (or indents the selection if text is selected).

Shift+Tab outdents the selection.

Cmd+Z / Ctrl+Z undoes the last change.

Cmd+Y / Ctrl+Y or Shift+Cmd+Z / Shift+Ctrl+Z redoes the last undone change.

Ctrl+Q folds/unfolds the code block at the cursor position.

Ctrl+Space / Cmd+Space (in the HTML editor only) triggers the CSS class autocomplete popup. This shows class names extracted from your theme’s stylesheets.

Shortcut Isolation

The code editors isolate certain keyboard shortcuts from WordPress and Gutenberg. This means pressing Tab, Cmd+Z, Ctrl+Space, and similar keys inside a code editor won’t trigger WordPress’s own handlers (like Tab switching between blocks). The editors capture these events and handle them internally.