Sorting of paragraphs 01 - create compact preview view modes [#2828101]

Problem/Motivation

Sorting of a long list of paragraphs using drag and drop is a tedious task and sometimes prone top failure when the list spans more space than one viewport height. Also it is not very easy to be able to discern where to put an item because some paragraph types are not easily identified.

Proposed resolution

Show paragraphs with a compact but informative preview view mode in the form. A compromise between height and shown field data needs to be made that on one hand lets the user identify the paragraphs and their fields values easily AND is of a small height to accommodate enough paragraphs on one viewport to make drag and drop simpler.

Remaining tasks

Create wireframes to show the concept
Create a design for the backend theme thunder_admin
Configure the view modes according to concept
Implement theming for those view modes

Comment	File	Size	Author
#5	Thunder_Backend_UI-UX_paragraph-previews.png	288.64 KB	pixelmord

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

16 November 2016 at 14:53

pixelmord created an issue. See original summary.

Comment #2

zerolab CreditAttribution: zerolab at Torchbox commented 8 December 2016 at 12:36

Related issues:

+#2825575: Introduce a Drag & Drop Mode

Comment #3

miro_dietiker

Switzerland

CreditAttribution: miro_dietiker at MD Systems GmbH commented 9 December 2016 at 07:42

Note that the preview mode renders the children. Thus, the preview mode is always flat.
If we would make children visible, it would lead to duplication in display.

As a result, if we use the preview mode for primary UI interaction, use cases are limited.
However, indeed, if we add the drag & drop mode, flexible dragging is still possible through the nested levels.

Background: Nesting is used to apply layout or functionality such as grid / columns and sliders / slides.
If an item wants to be moved from slide A to slide B or even out of a slide, or from the right column into full width, this is technically drag and dropping across entities / fields and currently not supported.
#2658694: Move a nested Paragraph across fields and nesting

IMHO it is important that the Thunder UI respects the fact that Paragraphs is used to build landing pages with layout and not just flat content. This is a key requirement we identified for flexible content creation: Advanced users need to be able to build flexible microsites and landing pages as content.

Comment #4

miro_dietiker

Switzerland

CreditAttribution: miro_dietiker at MD Systems GmbH commented 29 December 2016 at 09:55

Can you please add one of the screenshots that is already available about how such a preview mode could look like?

Comment #5

pixelmord CreditAttribution: pixelmord at Wunder commented 11 January 2017 at 09:12

File	Size
Thunder_Backend_UI-UX_paragraph-previews.png	288.64 KB

Regarding #3:

We discussed that and decided to stick with the notion to have a rendered preview of the paragraph as the default ui element representation for the widget, because it works best for the way the thunder distribution is intended. "Flat" lists of "pure" paragraphs benefit from having a preview that shows the right amount of information for the editor to judge the quality of the assembled content (e.g. article) by its pieces (paragraphs).

However that does not mean that for users and use_cases that think differently need to stick to that way of presenting paragraphs, they can always reconfigure the widget to show the collapsed mode if they want to do so. I even think that I saw in one of the paragraphs tickets a comment that there's a plan to make this option of switching the display always available when I remember correctly...

Regarding the support of landing pages and nested paragraphs the thunder core development team would need to make a concept first and see how that could be added as a feature for the distribution and at the moment the focus is on other things.

Regarding #4:

I attached a very preliminary screen design that shows the concept of compact previews for various paragraphs rendering a couple of the most important fields

Comment #6

zerolab CreditAttribution: zerolab at Torchbox commented 11 January 2017 at 10:10

Posted this on a Paragraphs issue, mirroring here. Wagtail (a Django-based CMS) has a concept similar to Paragraphs and uses a + button which slides in/out a panel with all available options, which works very well when you have a larger number of paragraph bundles - https://wagtail.io/media/images/stream-tall_tBFKDE6.width-878.png