Vertikal Fast Frontend Microeditor

Vertikal Fast Frontend Microeditor lets authorized users highlight a word, phrase or sentence in a post and edit its whole containing text block (paragraph, heading, list item, quote …) in a TinyMCE modal on the front end. The block’s inline HTML (bold, italic, links) is kept. The originally highlighted phrase is shown pale yellow in the editor; that highlight uses the CSS Custom Highlight API and is never saved.

Workflow:

1. Select part of a paragraph, heading or other text block on a single post or page. Triple-click works too.
2. The block that will be edited gets a light-grey background and a small Edit button appears.
3. Edit the block in the modal (Visual or Code tab) and click Save text.
4. The post is saved (with a revision), the page reloads, scrolls to the changed text and highlights it for a few seconds.

Only the edited block changes in the stored content: everything else, including Gutenberg block delimiters, stays byte-identical. In block content, a paragraph or heading split into several elements becomes several proper blocks, and a list item can become several list items.