There are many complaints about the Paragraphs module, but it's a module I wouldn't build a Drupal site without, Decoupled or otherwise.
Complexity with nested paragraphs is a common issue though, but usually a necessary evil.
However we recently implemented the Layout Paragraphs module into the Foundry Drupal backend, and I've been really happy with what I've seen.
So today I'm experimenting with Druxt and the Layout Paragraphs module
When you have the Layouts Paragraphs module installed and configured correctly, which is not something that this post is going to cover, Layout Paragraphs allows you to create Sections for your Paragraphs.
Each section has it's own settings and layouts, and layouts can of course have regions; one column, two column, etc.
The module provides a very easy to use javascript interface allowing me to add my paragraphs into the regions, preview them and rearrange the content with buttons or drag and drop.
This allows the content creator the ability to make layout decisions within the content, while still allowing the frontend developer full control over the output.
That's a good question, and as I write these specific words I don't yet have the answer, I'm pretty confident it will work though, because:
Druxt module components use a Vue based theming system that allows the frontend developer, in this case me, to create a correctly named component in the Nuxt components directory allowing full control over the rendered markup.
This means that I can create a Field theme component that targets any Layout Paragraphs, nuxt/components/druxt/field/LayoutParagraphs.vue, and pass the field data through to a custom DruxtLayoutParagraph module.
All the required data to replicate the Layout Paragraphs behaviour is thankfully available in the provided JSON:API data, which allows for a relatively simple custom Druxt module to provide templates that can be used by the frontend developer.
I was happy enough with the results of the experiment, that I actually published the result as the DruxtLayoutParagraphs module.
The module adds a Field template and the DruxtLayoutParagraph component to render any fields using the Layout Paragraph field formatter.
As with other modules, component options are provided theming the module component based on the layout used in Drupal. E.g, ~/components/druxt/layout-paragraph/Onecol.vue
While the module in its current state it's already able to do everything I need for the moment, there's still more improvements to be made, and more features to be added.
Default slots, a Mixin and Storybook integration all need to be added to simplify the theming process.
And of course, more experiments to be done; Drag'n'Drop editing from the frontend is high on the list.