Paragraphs Frontend ui

Paragraphs Frontend ui is intended as a POC for editing paragraphs from the frontend.

It is based on ideas from geysir and landingspage, but is based on paragraphs_edit. That way it has better support for QuickEdit

The following features are currently available in the frontend trough contextual links:

• Quick Edit
• Editing of the content inside a modal
• Edit a different form mode 'Settings' from te settings tray
• Move paragraph items up/down
• Duplicate paragraph items
• Add a new item from a paragraph browser inside the settings tray

Screen recorings

Some gifs demonstrating the magic

Editing paragraphs settings & quick edit

https://www.dropbox.com/s/qg640za04222lg4/settings%26quickedit.gif?raw=1

Duplicating & moving paragraphs

https://www.dropbox.com/s/wdqvxdki22jgph4/move%26duplicate.gif?raw=1

Adding paragraphs

https://www.dropbox.com/s/aiivqhjvgmhy8fl/add-content.gif?raw=1

Using webforms with paragraphs

https://www.dropbox.com/s/oo2prxw57835dka/webform.gif?raw=1

Install

Clean Drupal

In a clean drupal you can install the paragraphs_frontend_ui_example for a setup.

After enabling the modules, visit these pages to add default content for the paragraph types:

admin/structure/paragraphs_type/text_with_image/browsers/default-content admin/structure/paragraphs_type/columns/browsers/default-content

Existing Drupal

You can also install the poc inside an existing drupal project with paragraphs.

First add a new Form mode 'Settings' to each paragraph type.

Then configure the Paragraph browser module.

Install paragraphs_frontend_ui

Known problems

For now it only works for non-multilingual websites. For now only admins can edit the frontend like this.

The goal is to use this POC to start on conversation about frontend editing capabilities for Paragraphs.