Paragraphs Frontend Editor

Paragraphs Frontend Editor lets editors work with paragraphs directly on the rendered page: add, edit, move, duplicate, hide and remove them, and change their options. Forms open in a panel next to the page, and the page shows each change without loading again. Changes follow the revision settings of the content type and can be undone when access and moderation allow it.

The editor works on the paragraph fields as the theme renders them. There are no contextual links and no separate page builder: editors see the page as visitors will see it.

Features

The project consists of small modules, each for one task. Enable the ones you need:

• Add: add a paragraph at any position, choosing from the types the field allows.
• Edit: open the edit form at a paragraph, or the form of the whole page.
• Options: change fields marked as options, and the forms of enabled behavior plugins, in a small form at the paragraph.
• Move: reorder paragraphs by drag and drop or with the keyboard, also from one field into another.
• Duplicate: duplicate a paragraph with its nested paragraphs.
• Remove: remove a paragraph, right away with the option to undo it, or after a confirmation.
• Visibility: hide a paragraph from visitors without removing it, and show it again.
• Library: insert reusable paragraphs of Paragraphs Library and open their forms.
• Nested: let the other modules work with paragraphs in paragraphs, like the columns of a layout paragraph.
• Forms: open the forms of these modules in a panel next to the page, which then shows the change without loading again.
• Page Outline: list the paragraphs of the page in a sidebar, to find them, filter them and work with them.
• Page Translations: switch between the language versions of the page and open the forms to add or edit translations.
• Page Preview: view the saved page at smartphone, tablet, desktop or custom widths.
• Page Status: see the saved status and language of the page, with links to its revisions and a newer draft.
• Help: explain the available actions and show the descriptions of the paragraph types used on the page.

Shared by all modules:

• Undo: the message after a change offers to undo it, and to redo it, when access and moderation allow it.
• Concurrent changes: a version token and a lock per entity refuse a change to content that someone saved in the meantime, also against the edit form.
• Revisions and moderation: changes go into the latest revision, which may be a draft, and follow the moderation workflow.
• Translations: changes stay in the language being edited; lists shared by all translations are only changed from the original language.
• Accessibility: everything works with the keyboard; controls are named with the paragraph and its position, and changes are announced to screen readers.
• Permissions: each module has its own permissions, and administrators switch each module on and off for the whole site.

Requirements

• Drupal 11.3 or later
• Paragraphs
• Entity Reference Revisions
• For the Library module: Paragraphs Library, part of Paragraphs, and Entity Usage

Installation

composer require 'drupal/paragraphs_frontend_editor:^1.0@beta'

Enable the modules you need; they enable Paragraphs Frontend Editor. Most sites start with Edit, Add, Remove, Move, Duplicate, Forms, Page Outline, Page Preview, Page Status and Help, which need nothing but Paragraphs. Add Library, Page Translations, Nested, Options and Visibility where the site needs them.

Configuration

• Give editors the permissions of the modules they should use.
• Under Configuration › Content authoring › Paragraphs Frontend Editor, decide whether the edit mode starts switched on, and switch modules on and off for the whole site.
• Themes need to print attributes on paragraphs and paragraph fields, as core themes do. See Theming in the README.

Project status

1.0.0-beta1 is the first release on drupal.org.Please report problems and ideas in the issue queue.

Similar projects

• Paragraphs Edit adds contextual edit, clone and delete links, with their own routes, to individual paragraphs.
• Paragraphs frontend ui edits paragraphs from the frontend with contextual links, for editing in a modal, moving and duplicating.
• IO Builder is a visual builder with an integration for paragraphs and other entities, configured per form display.
• Paragraphs Easy Edit is an experimental module to add, edit, remove and rearrange paragraphs from the frontend.

Paragraphs Frontend Editor works without contextual links, on the paragraph fields of the page as they are rendered. It follows the revision settings, offers undo where permitted, refuses changes to content saved in the meantime, and works with translations, moderation and nested paragraphs.

Supporting organization

Liip develops and maintains the project.