Contrib.social

Grid layout groups/modifiers UI improvement

Open on Drupal.org →
Created on 2 February 2023, about 2 years ago
Updated 27 February 2023, almost 2 years ago

Problem/Motivation

Current grid layout UI/UX selection works fine for smaller number of enabled layouts. However we want to add modifiers support to our layouts.

For example we want modifiers like:
- Vertical alignment top
- Vertical alignment center
- Vertical expansion
- Horizontal alignment center
- Padding / Gutter: no gutter, small gutter, big gutter
- ...

So we can have 8 or more modifiers. If we have 12 enabled layouts, with 8 modifiers that is 96 layouts with modifiers to pick. Using simple select-box for this is not optimal for UX.

Proposed resolution

The idea is to add a new field `group` in paragraphs.grid_layouts.yml definition, for example

grid_1_2_column:
  group: '2 columns not equal'
  title: 'Two columns (1-2, 1), expansion, vertical center'
  ...

grid_2_1_column:
  group: '2 columns not equal'
  title: 'Wrapping (2-1, 1), expansion, vertical top'
  ...

The `group` field would allow us to group layouts in UI. We can then use two steps select boxes to make selection process easier, in first select box (first step) editor would select layout group and then in second select box he can only select layouts from this group.
In this way we would split selection of possibly hundred of layouts to two selections of 5 to 10 options.

If the layout definition does not belong to any group (does not have `group` yaml field defined) we will add this layout to special 'Other' group.

Remaining tasks

- Figure optimal UI solution.

User interface changes

- Layout selection in Behavior tab.

API changes

None.

Data model changes

✨ Feature request
Status

Needs review

Version

1.0

Component

Grid

Created by

🇷🇸Serbia pivica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @pivica
  • @pivica opened merge request.
  • Status changed to Needs work about 2 years ago
  • Comment about 2 years ago →
    🇷🇸Serbia pivica
  • Status changed to RTBC about 2 years ago
  • Comment about 2 years ago →
    🇨🇭Switzerland miro_dietiker Switzerland

    Yes, this looks great as a first step.

    It provides some level of grouping and makes the list visually easier to handle.

    Further improvements to the UI can be build on top of that step.

    So tests still pass... Do we need something to cover on top of the current tests?

  • Status changed to Needs review almost 2 years ago
  • Comment almost 2 years ago →
    🇷🇸Serbia pivica

    While testing with a bigger amount of layouts and renamed layouts I've figured out we need grouping on paragraphs behavior config form. Here is a new look:

    This change is needed, because if we have layout names where we remove group info label (that we had before because we didn't had grouping) then you will not know what to pick for special layouts for media, logo and similar.

    > So tests still pass... Do we need something to cover on top of the current tests?

    Tests now need fixing and we should cover with additional tests case when there is no group in options vs groups. But let's first figure is this a correct approach before improving tests.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024