Hello,

When you have several level of nesting and you use the preview mode of the first parent paragraphs, you can only see the first nested element.

I would be very helpful to be able to display all nested element, each ones with their own edit button. It would avoid some stange behavior and a big confusion about the content of a paragraph (that contain others paragraphs).

See the screenshot for a better explaination

CommentFileSizeAuthor
preview-edit.png103.32 KBzmove
preview.png29.21 KBzmove
open.png87.75 KBzmove

Comments

zmove created an issue. See original summary.

jeroen.b’s picture

Status: Active » Postponed (maintainer needs more info)

Hi @zmove,

I'm not really sure whether the preview mode is a good choice for the builder UI.
What would it look like when people don't use the builder UI? Perhaps you could create some wireframes or just edits of the current workflow?

jeroen.b’s picture

Version: 7.x-1.x-dev » 8.x-1.x-dev
Related issues: +#2692051: [META] Alternative UI like divibuilder
miro_dietiker’s picture

Title: Preview mode and several level of nesting... » Preview / Closed mode and several level of nesting...
Status: Postponed (maintainer needs more info) » Active
Issue tags: +Needs mockups, +Usability
Related issues: -#2692051: [META] Alternative UI like divibuilder +#2738655: [META] Polish backend editing UX to the max

We already discussed that once we are there, it could also still make sense to output nestings in a collapsed / non-editing mode. However IMHO it's too early to jump into this right now.

That's IMHO NOT the alternative UI problem. It's about polishing the backend UI to the max and thus one of our priorities.

I would however prefer to move forward with the other widget modes and improve UX first like
- Add the collapsed summary to the closed display
- Add the collapse / edit all button
- Move forward with the drag and drop across fields

Once we are there, you realise that the closed mode will make nestings also inaccessible while with edit mode things get overlong.
Collapse all will hurt because you can not drag a deep nest A to a different deep nest B anymore.
You will end up clicking edit on each parent level to end up where the item is to then finally drag and drop it.
Thus, the requirement with deep nesting is foreseeable to have closed (or preview) modes that provide quick access to all levels of nesting.
However, we will need to be careful to keep it still compact.

The real challenging part with "preview" mode is, it uses the ERR formatter, not the Paragraphs widget.
IMHO the first focus should be to the widget centric "closed" approach that is more simple, having the "preview" edit button idea as s follow-up.

For now, the best value would be to start with a mockup so we have some idea of the steps to go until we are there.

zmove’s picture

Thank you for your answer.

@jeroen.b : I think it would be a great addition to make it compatible with nesting preview mode because I think the builder system would be better if you use the frontend theme to add/edit node instead of the admin one. With the preview mode, when you edit the node, you could the same thing than when you view it, with just some small edit buttons when you hover elements, it would be a true WYSIWYG experience.

@miro_dietiker : I'm not sure to fully understand what do you mean by collapse system, my idea behind that issue is to be able to provide an editing interface that looks like the frontend / the final render of the page. Another solution would be to integrate single paragraphs editing with contextual links (I saw an issue about that). It could be a first step, but couldn't completely replace what I imagine cause you can't work with the layout using contextual links (columns, order of things etc....)

The best would be to provide both as both are complementary IMHO.

Alex

miro_dietiker’s picture

Yeah, a really minimalistic approach (and it's aligned to core) would be to "simply" push supporting quick edit.
Then you would have the visual nested / rendered representation, plus minimalistic editing in context.
#2476863: [META] Integrate more nicely with quick edit
And yeah, doing the contextual edit thing would also be nice.
We just need this simple and well test covered.

Also, before breaking with any existing pattern, we first want to gain great experience with collecting reference paragraph types to know what we are optimising for.
#2670768: [META] Build a best practices paragraph type collection