Block Editor 2.0

Beta Feature

Block Editor 2.0 is a complete rebuild of the dotCMS Block Editor field's rich-text editing experience on an updated technical foundation. The authoring interface is faster and significantly redesigned; the underlying data format and field configuration are unchanged.

This document covers what is new or different in Block Editor 2.0 — UX changes for content authors, the rollout and feature flag for administrators, and technical migration notes for developers. It does not duplicate the enduring reference material that is unchanged from 1.x: block types, field variables, VTL rendering, headless rendering, remote extension setup, embedded contentlet behavior, and WYSIWYG conversion all remain as documented in the Block Editor reference. Readers should keep that reference alongside this document.

What's New#


Toolbar#

Block Editor 2.0 Toolbar.

The first and most striking thing you'll notice is the menu: The bubble menu that previously floated over your text selection is gone. A persistent toolbar now sits at the top of the field and adapts its controls to whatever block or selection you're working in. Heading levels now include H1 through H6 (previously H1–H3 were available in the picker).

Slash Command Menu#

Block Editor 2.0 block selector.

Type / anywhere in the editor to open an inline insertion menu at your cursor. You can insert headings, paragraphs, lists, blockquotes, code blocks, tables, images, videos, horizontal dividers, or embedded content types — the same block types described in the Block Editor reference. The menu filters as you type; spaces are supported in the search. It is fully keyboard-navigable.

Tables#

Block Editor 2.0 table controls.

Tables received new editing tools: When your cursor is inside a table, controls appear so you can insert or delete rows and columns, merge or split cells, toggle headers, and add a caption for accessibility, making restructuring tables a trivial process.

While inside any table cell, the new persistent toolbar's controls will bind to the cell containing the cursor, allowing the use of the full suite of controls in an intuitive manner; bullets, code blocks, etc., are as easy to add to cells as the rest of the document.

Drag-And-Drop Handle#

Block Editor 2.0 drag handle.

Hover over any block to reveal a drag handle on its left edge. The behavior is the same as before — drag a block to reposition it in the document — but refined and optimized. A minor change.

Improved Media Handling#

Block Editor 2.0 image selector.

Images can be added by dragging a file into the editor or opening the asset picker. Videos can be added the same way, and also by pasting a URL directly into the editor; pasting an image URL produces a link rather than an embedded image, so use drag-and-drop or the picker for images. The picker supports filtering by folder, site, file type, and search query. While a file uploads, a placeholder appears so you can continue writing.

Block Editor 2.0 image property editor.

Once placed, you can edit the caption, alt text, alignment, and text-wrap directly in a small panel beside the image — no separate dialog required.

Code Blocks#

Block Editor 2.0 code block.

Code blocks now include syntax highlighting and a language selector.

Block Editor 2.0 link editor.

Click any existing link and a small popover opens in place. You can update the URL, the link text, and the new-tab toggle without leaving your writing position.

Tab Indenting#

Block Editor 2.0 image selector.

Press Tab inside a heading, paragraph, or blockquote to indent it; Shift+Tab to outdent. Tab continues to nest list items inside lists and move between cells inside tables, as before.

Emoji Picker#

Block Editor 2.0 image selector.

Available from the toolbar. Type to filter, click to insert.

Fullscreen Editing#

Block Editor 2.0 fulscreen button.

The toolbar has a fullscreen button that expands the editor to fill your screen, to give greater focus without the rest of the admin interface around it. Click it again or press Escape to go back to the normal view.

Text Operations#

  • Spell-check: Right-clicking inside the editor now opens your browser's native spell-check menu.
  • Markdown Interoperability: The "Paste from Markdown" and "Copy as Markdown" actions, which previously appeared in the right-click menu, have moved to the toolbar.

AI#

Two AI tools are available when dotAI is configured on your instance:

  • Ask AI: Generate copy from a text prompt and drop it into the document.
  • AI Image: Describe an image, get a generated visual, and insert it inline.

Both appear in the toolbar and slash menu only when dotAI is active. If you do not see them, contact your administrator to confirm whether dotAI is configured.

Existing Content#


Your existing content is safe. Every page, blog post, banner, and content item will load and render exactly as before. No migration, no re-publishing, and no URL or layout changes are required.

Block Editor 2.0 is fully backward compatible at the data layer.

Technical Details#


The editor has moved from TipTap v2 to TipTap v3, delivered as a new Angular standalone library (@dotcms/new-block-editor). The data model is unchanged; only the UX layer and maintenance surface have changed.