Nested paragraphs are important but have difficult UX. In #2642810: UX improvements for nested paragraphs we have discussed intensively and developed UX improvements that can be achieved by tweaking visual appearance alone.
A vital feature for nested paragraphs is the default edit mode set in the paragraphs form widget: "Open", "Closed" or "Preview", and the corresponding actions to "Edit" or "Collapse" paragraphs.
These actions are so vital to working with deeply nested paragraphs, that they should always be available. Obviously, one always needs to be able to activate "Edit"; but it's enormously helpful to also always have the option to "Preview" or "Close" a paragraph type. For example, "closed" is the right mode for rearranging the sequence of items, while "preview" is often a better default choice.
At the moment this doesn't happen for 2 reasons:
Firstly, in certain nested circumstances, the collapse button action does not appear, and while we can click "Edit" to expand a paragraph, that cannot be reversed. See this for an example - the para type "Body text" in the paragraphs field "Left" has been expanded by "Edit", and now no collapse action is visible. This looks like a bug.
Secondly, the availability of the three actions depends on what you set for the default mode. If the sitebuilder selects Open as the default mode as the default, then a content editor can never close or preview paragraphs. If Preview is the default, then you can never close paras, and if Closed is the default then you can never preview.
The simplest solutions is the most powerful and flexible: whichever mode a paragraph is currently in, regardless of the default, have the actions to enter the other 2 modes available.
There's a lot of room to discuss what sequence these actions should be in - in particular what is the topmost action, thoe one that shows on the face of the actions dropbutton. I would suggest:
currentMode=closed then actions={Edit, Preview, Remove}
currentMode=preview then actions={Edit, Close, Remove}
currentMode=open&default=closed then actions={Close,Preview, Remove}
currentMode=open&default=preview then actions={Preview,Close, Remove}
currentMode=open&default=open then actions={Preview,Close,Remove}
where the action listed first is the topmost.
| Comment | File | Size | Author |
|---|---|---|---|
| #19 | collapsable_nested.png | 48.45 KB | toncic |
| #19 | paragraphs-always_offer-2650306-19.patch | 3.16 KB | toncic |
| #15 | interdiff-2650306-14-15.txt | 612 bytes | recrit |
| #15 | paragraphs-always_offer-2650306-15.patch | 2.88 KB | recrit |
| #14 | always_offer-2650306-14.patch | 2.88 KB | johnchque |
Comments
Comment #2
jonathanshawComment #3
screon commentedI'm very interested in this one. Editing long pages is really a pain right now, since you can't collapse open paragraphs.
Comment #4
geek-merlinYes this would really help.
Comment #5
miro_dietikerIMHO we will add a JS based collapse / expand feature that will always be present and affect all paragraphs without any AJAX.
Also during drag&drop it will be triggered.
I guess i'll create a separate issue about it.
We will also need to figure out how it affects the other UI settings as it seems. :-)
Comment #6
miro_dietikerMind the specific issue #2725141: Widget form is not collapsible when adding a new item w/default edit mode = closed (marked as duplicate).
Comment #7
recrit commentedPosting patch from #2725141: Widget form is not collapsible when adding a new item w/default edit mode = closed for active development here.
Comment #8
recrit commentedComment #10
miro_dietikerWe will have a second widget and this change should only affect it. We want to avoid UX on the current existing widget.
Comment #11
johnchquethen it goes to the Experimental widget.
Comment #12
miro_dietikerLet's do this ASAP. It changes visibility of buttons and changes the impact of configuration.
Comment #13
johnchqueDoing this. :)
Comment #14
johnchqueNot sure if this breaks something. Let's try. Edit and collapse are always displayed.
Comment #15
recrit commented#14 did not work for me with the latest. It still only showed delete (X button).
The attached checks the $paragraphs_entity which is initialized if new or existing.
Comment #16
wiktorb commented#15 works fine - tested with both classic and experimental widget
Comment #17
johnchqueIt needs more review. Probably check if there is some other code that can be removed.
Comment #18
miro_dietikerTried this.
Now Collapse is always present.
After collapsing, without any change, it shows "You have unsaved changes on this Paragraph item."
This clutters the UI and questions why "Collapse" is really helping a user.
Not sure if we can solve this. We don't have change detection now. This would / will need another issue.
Also the "Duplicate" action is not visible when expanded.
#2829316: Implement "duplicate paragraphs" feature
I think this issue should always show Duplicate too.
This reminds me to the needed reference case issues that we also need to profile UI performance:
#2847110: Profile UI performance
Comment #19
toncic commentedRe rolled patch, tested manually and changed test a little bit.
For me is working fine, providing screenshot.
The second part for displaying duplicate is done in previous issue #2851049: Enable "duplicate paragraphs" feature for paragraphs "open" mode
Comment #21
miro_dietikerCommitted with some improved asserts.
Comment #23
donquixote commentedI understand the general motivation, but I disagree with the decision to make this universal.
There are valid use cases where specific paragraphs fields should remain always open.
Mostly if the paragraphs field allows only one or very few specific paragraphs types.
Example use case
Node type "Landing page".
- Paragraphs field, Edit mode = "Collapsed". Allowed paragraph types = All or most.
Paragraph type "Columns".
- Paragraphs field, Edit mode = "Open". Allowed paragraph types = "Column".
Paragraph type "Column":
- Paragraphs field, Edit mode = "Collapsed". Allowed paragraph types = All or most.
Having the "Collapse" button in "Columns" adds more confusion than it helps, because now we have 3 levels.
Proposed solution
I think the best option would be to have 4 options:
- Always open (NEW)
- Open, collapsible
- Closed, expansible
- Closed, show nested
Or a checkbox "Allows expand / collapse" that would be enabled by default. Unchecking this would hide all of the options.
I would do this by subclassing the widget, but I am already doing this for other purposes. Too many dimensions of inheritance are not good..