Integrated full-page editing experience

Created on 10 February 2023, over 1 year ago
Updated 19 October 2023, 8 months ago

Problem/Motivation

I have found some modules that would make easier to use with Lupus Decoupled.

"spa_admin + jsonapi_field_formatter brings all the power of Drupal to your decoupled application: Layout Builder, Contextual Links, Admin Toolbar, View Modes - all work like if they were coupled - zero* changes necessary"

Here is the source article
https://events.drupal.org/prague2022/sessions/components-everywhere-comp...

🌱 Plan
Status

Active

Version

1.0

Component

Miscellaneous

Created by

πŸ‡¬πŸ‡·Greece pinkonomy

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @pinkonomy
  • πŸ‡¦πŸ‡ΉAustria fago Vienna

    Thank you for the pointer! We've been discussing the topic over at πŸ“Œ Frontend-rendered layout-builder previews Needs work which implements a first-step solution for rendering blocks via the frontend. Re-titling this to the topic of an integrated full-page editing experience

    I actually sat together with Fabian Franz checking out his solution, but missed his session what was before. Since recordings are up meanwhile, I'll check it out. There are many options for full-page previews, so we need to figure out what's the best way for us. I try to summarize options I see as start:

    First off, two options for rendering the whole page:
    A) Replace layout-builder preview with an iframe, rendering the whole layout-builder preview.
    B) Use spa_admin approach and render frontend-assets within Drupal context

    Second, options for integrating with layout-builder editing:
    1) Render blocks/sections with wrapping custom-elements or annotate them with metadata, so the frontend can trigger layout-builder operations. Replicate layout-builder JS scripts from within the frontend.
    2) Try re-using core twig templates and scripting, render core-markup and embed custom-elements within. Probably will approach B) since the cross-iframe communication would make re-using things impossible.

    Long-term goal:
    * After changing block configuration/content, layout-builder preview should refresh instantly. E.g. changes in drupal form (in off-canvas) should update tempstore.
    * Leverage Vue / React / .. reactivity for quick re-loads, just update the data. Could optimize on re-rendering only needed parts.

    I'm not sure the long-term goal is viable with option 2) since it would require a full re-render or some ajax replacement quirks, so it seems to me option 1) should be the way to here. Thoughts?

  • πŸ‡¬πŸ‡·Greece pinkonomy

    @fago,
    Thank you for the thorough explanation.
    I am really not so experienced to propose what the best solution should be, maybe other people could share their thoughts on this.
    Cheers

  • πŸ‡¦πŸ‡ΉAustria fago Vienna

    I clarified how the spa_admin approach works a bit better. This approach would work for all pages, not only layout-builder previews. However, I'm not convinced it's a good idea to use the spa_admin approach for all pages for editors, since it creates confusion around viewing pages within Drupal or on the public frontend. Imo, every page should be viewed via the frontend or in the backend.

    So yes, that means there is no admin-toolbar in the frontend, unless there is some sort of special integration done by the frontend.

  • πŸ‡¦πŸ‡ΉAustria fago Vienna

    Update on options:
    * Layout builder with Frontend preview via Iframes πŸ“Œ Frontend-rendered layout-builder previews Needs work
    * Same Page Preview module integration (full iframe)
    * Layout builder + Render custom elements within Drupal Theme (similar to SPA_admin)
    * Integrating with Drupal Gutenberg

Production build 0.69.0 2024