Problem/Motivation

With more paragraph types, UX gets worse.

A project like https://www.drupal.org/project/paragraphs_browser introduced a browser with thumbnails / icons.
Almost all page builder tools offer visual indication.

Proposed resolution

We should add a icon / thumbnail field to the paragraph types.

The icons will be shown in the later added widget: #2236905: [META] Nicer UI / Icons for "Paragraph type" + "Add another Paragraph"
The icons can be displayed in admin UI to manage paragraphs before.
Not sure if we can display it with the current dropbutton.

High priority

#2833873: Display the type icon in the add button
#2833874: Display icons paragraph instance

Remaining tasks

#2830016: Add a thumbnail/icon field to Paragraphs type
#2832021: Support paragraph type icon config deployment
#2831763: Use Paragraphs types icons in the "Modal" add mode

User interface changes

API changes

Data model changes

Comments

miro_dietiker created an issue. See original summary.

johnchque’s picture

johnchque
Primary language Spanish
Location Bolivia
commented

Just wondering, will it allow to the users to define their own icons? if so, will it provide default icons?

johnchque’s picture

johnchque
Primary language Spanish
Location Bolivia
commented
Issue summary: View changes

Added another step.

drobnjak’s picture

drobnjak commented
Status: Active » Closed (duplicate)

Icon discussion is already open in this META issue - #2236905: [META] Nicer UI / Icons for "Paragraph type" + "Add another Paragraph"

drobnjak’s picture

drobnjak commented
Status: Closed (duplicate) » Active

Opening META again after the discussion with @miro_dietiker:

Introducing icons is more than just add them to the types and then use them in the "add" widget. With other features upcoming, the META topic will grow and there are things that need discussion about the icon concept in general.
miro_dietiker’s picture

miro_dietiker
Location Switzerland
commented

For instance, we need to decide what icon size are we recommending?
OK the answer should possibly be - SVG - but then the icon detail level still depends its display size.

Some component frontends show the icons in tiny buttons beside the button label. Others make them the primary selection, even removing the type label completely.

Thus we need to gain overview in this issue, where icons will be visible and have mocks dedicated to that aspect.

johnchque’s picture

johnchque
Primary language Spanish
Location Bolivia
commented

In the modal form added in #2831760: Introduce a "Modal form" mode for adding Paragraphs is the first place where we will use them for sure. About the other add options, not really sure.

miro_dietiker’s picture

miro_dietiker
Location Switzerland
commented

The modal form is a challenging step and might take some time. Not sure how much it is a top priority to make it happen.

Meanwhile, there are good reasons to start displaying the icons at current places that immediately add value:
#2833873: Display the type icon in the add button
#2833874: Display icons paragraph instance

miro_dietiker’s picture

miro_dietiker
Location Switzerland
commented
Issue summary: View changes
miro_dietiker’s picture

miro_dietiker
Location Switzerland
commented
Issue summary: View changes
flyke’s picture

flyke commented

Could someone please upload some screenshots of what you have now so we can see what it would look like at the moment to add paragraphs to a node using icons ?
I would like to visualize the current state of this very interesting functionality.

flyke’s picture

flyke commented

Just curious: Is this actually working ? Is this still under active development by someone ?
Any screenshot of this in action ?

toncic’s picture

toncic commented

@flyke check this child issue #2830016: Add a thumbnail/icon field to Paragraphs type.

toncic’s picture

toncic commented
Issue summary: View changes
miro_dietiker’s picture

miro_dietiker
Location Switzerland
commented

The discussion came up to support Type Style:
https://www.drupal.org/project/type_style

miro_dietiker’s picture

miro_dietiker
Location Switzerland
commented

This module also uses icons in the UI, but didn't check details:
https://www.drupal.org/project/paragraphs_ee

sushant-d’s picture

sushant-d commented

https://www.drupal.org/project/paragraphs_media_icons

This module replaces the default Paragraphs icon field with a Media entity stored in the public file system, preventing configuration table bloat and reducing database size.

yashaswi18’s picture

yashaswi18 commented

This issue has been open for quite a while, so I took some time to check how things look in the current version.

It seems paragraph types now support icons, and these are visible both in the paragraph types listing and in the content editing UI when adding paragraphs. This already improves the UX quite a bit compared to what was originally described here, especially when working with multiple paragraph types.

From what I can see, the main goal of having a visual distinction between paragraph types is largely addressed now, and it makes the selection process clearer for editors.

Since this is a META issue and covers multiple aspects (like different add modes and overall UI consistency), it might still be worth confirming if there are any remaining gaps. If everything is covered, please confirm if this can be closed.

yashaswi18’s picture

yashaswi18 commented
Status: Active » Needs review