Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
We switched the default add paragraphs button to a drop down button.
And then we added the text to what paragraphs field the button belongs.
We improved the paddings and indentation to make it more clear.
Still, on the paragraphs sprint, people asked for an improvement to add a paragraph quickly on a different position than the last item.
Currently, a new item is always last and needs to be dragged to the wanted position.
Proposed resolution
Add a drag handle to the add button like it is done on image style management.
Remaining tasks
Decide if the button will stay at the position or if it is moved back to the bottom after adding.
IMHO it should stay at the position to allow adding multiple paragraphs.
We need to start with some sceeenshots or mockups covering the varying cases to discuss this direction.
User interface changes
Drag handle in front of the button.
This again changes indentation.
Note that this coul lead to confusion with paragraphs widgets that have no element, where the button is displayed unintended, without a drag handle, to add the first paragraph.
| Comment | File | Size | Author |
|---|---|---|---|
| Screen Shot 2016-05-27 at 10.56.16 .png | 17.06 KB | miro_dietiker | |
| #4 | paragraphs add drag handle.png | 101.83 KB | tassilogroeper |
| #9 | Screen Shot 2016-06-27 at 09.23.06 .png | 12.38 KB | miro_dietiker |
Comments
Comment #2
johnchqueShould we add a setting for adding this? Then the user can be aware that the drag handle will be always displayed.
Comment #3
miro_dietikerNot sure. I'm currently trying to avoid adding more and more settings.
Concerns have arised that the indentation creates confusion.
Indenting the button depending a setting won't make the situation better. ;-)
We need to have a nice UX always..
Comment #4
tassilogroeper CreditAttribution: tassilogroeper commentedComment #5
tassilogroeper CreditAttribution: tassilogroeper commentedComment #6
miro_dietikerNice! Thx for thee visual proposal.
It feels like (and i hope) the consequent indentation with a drag handle could make things more consistent.
Not sure if the bottom spacing works. You can only do this on the most top level! On the nested field level you don't add the bottom spacing!
Also, i really would love to have a clean screen of the widget with all paddings fixed, collapsed summary added, buttons added, ... to create some impression of everything combined... I might work on this tomorrow for the presentation (friday). Help appreciated!
Comment #7
miro_dietikerAh, this issue conflicts with the dragging across fields.
The button drag handle needs to limit drag action back to the current field only, like it is now. this button is not allowed to be moved to children.
#2658694: Move a nested Paragraph across fields and nesting
Also, single items can not have the drag handle removed, except if we really define a cardinality 1.
#2272221: Don't use draggable table if there is only one paragraph
Comment #8
zmove CreditAttribution: zmove commentedAs some people knows, I'm working on a paragraphs builder module (see my post here about it).
My references concerning the UX are all the visual interface builder you can find in the marked (webflow, bootply, jetstrap etc....).
They are all differents, but there is one thing that they all share : the fact to drag & drop the element you want to add (generaly in a sidebar). None of them have a button at the end of each elements to add something in it.
I think it would be a great thing for the UX to have just one "add" section that allow elements to be placed by using drag & drop.
Comment #9
miro_dietikerI have been looking at many solutions and can't see this common part. See also at Medium:
It's more an inline display, or an overlay of "add X selection".
That's also why i objected at #2753941: [Experimental] Create Outside In module MVP to provide block configuration in Off-Canvas tray and expand site edit mode
Could you provide some examples from what you investigated?
Also the parent issue here is #2738655: [META] Polish backend editing UX to the max
What you propose is pretty far from the default core pattern of an "Add" button at the end of each field item list. Or alternatively the (IMHO ugly) "place block" clutter in admin block management. Or the "add effect" UI at image styles.
If we do anything that significantly differ from those, we need UX iterations prior to implementation and a wise decision how far we want to go now. What we deliver now should feel like Drupal, not something different. For a different experience we will create an optional module.
Comment #10
zmove CreditAttribution: zmove commentedSee some examples of drag & drop elements with most famous builder around here :
webflow : https://vid.me/U4V8
jetstrap : https://vid.me/F3Kr
Brix : https://vid.me/4TDC
Regards
Alex
Comment #11
miro_dietikerYeah that's interesting! I feel it visualises a clear conflict coming up:
These builder looks to me like a technical collection of elements to build a page.
I like the fact that Paragraphs can be used to build complex sites and cover layout variation in content.
But what you describe is to me clearly the scope of an alternative UI and not polishing backend editing.
Also, before creating another builder, i would want to focus on a minimalistic content creation UI that allows a writer to focus. If you are a writer, you want to write, not build.
Comment #12
zmove CreditAttribution: zmove commentedI understant your opinion, but to me, at the era of modern website design, it's difficult to "write" something without considering columns layout, and the paragraphs module can't handle columns efficiently yet. That conclusion pushed me to work on the paragraphs builder module.
Fortunately, the concept is very flexible, and by thinking paragraphs type as simple element (column, textarea, image, video) I was able to transform it as a powerful builder just with some theming as you can see on that video.
But I'm stuck actually with some core paragraphs issues like this one and the fact to not be able to edit single paragraph item with contextual links or quick edit. With that 2 things, I would not be far from a really cool content addition system integrated with drupal that would make content creation a lot easier like all the builder you can find with wordpress that make it so popular.
Comment #13
miro_dietiker@zmove i appreciate your work and the proposals. We just need to find clear decisions about what is default behavior and what is optional modules.
For instance, you could help port this: #2448677: Support separate paragraph item editing with contextual links
It would unblock what you refer to.
Comment #14
pixelmord CreditAttribution: pixelmord at Wunder for Hubert Burda Media commentedRegarding the original topic of this issue, I think that making the add button draggable is not a complete solution for a better UX, because then you are still presented with a very tedious task when you have a long or even nested list of paragraphs, because dragging in long lists or even across multiple viewport heights is a nightmare.
We were looking for a solution for this problem during UX reviews for the thunder distribution and came up with an idea that enables you to add a new paragraph before and after each existing one: #2828110: Sorting of paragraphs 03 - create a NEW paragraph "in place" between existing ones (https://www.drupal.org/node/2828110#comment-11794492)
Comment #15
miro_dietikerYou can find multiple meta tasks in the paragraphs issue queue that contain solid proposals about how we want to address the key problems identified in Paragraphs.
Many meta issues significantly shift the situation and contribute to improvement. To mention a few:
#2825557: [META] Introduce edit perspectives
#2825575: Introduce a Drag & Drop Mode
#2236905: [META] Nicer UI / Icons for "Paragraph type" + "Add another Paragraph"
IMHO With the add widget, we could offer an add button between every paragraph item. But we should only display it actively if the mouse is near it with text and color to avoid too much UI overload. I'm adding detail definition for this to the Paragraphs UX board.
METAizing this issue.
Comment #16
zerolab CreditAttribution: zerolab at Torchbox commentedI hope I am not contributing to the noise. Wagtail (a Django-based CMS) has a similar concept to Paragraphs (called StreamField).
https://www.youtube.com/watch?v=oUJNweMWwVQ explains it and has some of the UI interactions, most importantly the inline add button which appears when going between fields. It also has icons that developers can set in code and they appear when the list of choices is shown (ties into #2236905: [META] Nicer UI / Icons for "Paragraph type" + "Add another Paragraph")
Comment #17
drobnjak CreditAttribution: drobnjak at MD Systems GmbH commentedPointing to general discussion about UX improvements - #2692051: [META] Alternative UI like divibuilder
Comment #18
miro_dietikerAdding a reference, since this issues goal to display an "add" button between each item is well descussed and proposed in the related issue.
Comment #19
miro_dietikerPostponing this for the results of the proposed add widget. It might make this issue a duplicate, or need more work. But we should first care about a better widget that supports a minimalistic add button.
Comment #20
miro_dietikerComment #21
miro_dietikerIt seems we have a duplicate issue at #2877927: Show add widget between paragraphs
Comment #22
miro_dietikerClosing this as the discussion accidentally continued here
#2236905: [META] Nicer UI / Icons for "Paragraph type" + "Add another Paragraph"
And the implementation is happening here
#2877927: Show add widget between paragraphs