Contrib.social

Grid layout inheritance

Open on Drupal.org →
Created on 13 February 2023, about 2 years ago

Problem/Motivation

With introduction of ✨ Grid layout groups/modifiers UI improvement Needs review we will have multiple layouts with modifiers where the only difference is title, description, image and wrapper CSS class - for example 2 cols centered, 2 cols top align, 2 cols bottom align, etc.

Creating layout variations with modifiers would require a lot of copy&pasting of base layout definitions.

We can save quite a bit of code c&p if we introduce layout inheritance.

Proposed resolution

Add a support for a new optional field parent into layout yaml definition which value is a key of inherited parent layout. This would look like this:

custom_theme_1_1_column:
  group: '2 columns equal'
  title: 'Wrapping (1-1, 1)'
  description: 'Layout with two columns of equal width.'
  preview: 'images/1_1_column.svg'
  wrapper_classes:
    - grid-layout-row
  columns:
    -
      classes:
        - grid-layout-col
        - grid-layout-col-md-1-2
      view_mode: teaser_grid
    -
      classes:
        - grid-layout-col
        - grid-layout-col-md-1-2
      view_mode: teaser_grid
  libraries:
    - 'custom_theme/grid_layout'

custom_theme_1_1_column_top:
  parent: custom_theme_1_1_column
  title: 'Wrapping (1-1, 1), top'
  description: 'Top aligned layout with two columns of equal width.'
  wrapper_classes:
    - grid-layout-row
    - grid-layout--top

We get a nice saving of code in yaml files and also if parent layout will get some fix or improvement in future all child layouts from this parent will automatically get the changes.

We will support single level inheritance. Theoretically proposed code is supporting multi level inheritance, but for now multi level inheritance is not needed and we will not write tests for it.

Remaining tasks

- Test coverage.

User interface changes

None.

API changes

Layout definitions in paragraphs.grid_layouts.yml will get a new field parent which key value is id of parent layout.

✨ Feature request
Status

Needs work

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
  • Status changed to Needs work about 2 years ago
  • Comment about 2 years ago →
    🇷🇸Serbia pivica

    Here is a first patch.

    Tests needs to be added for this.

  • Comment about 2 years ago →
    🇨🇭Switzerland miro_dietiker Switzerland

    Is this inheritance already applicable with the example styles that we offer in the collection?

    Does this work similarly to styles or once more a bigger difference?

    One thing that i learned with isolated components is that duplication is a feature. If you derive work from an original layout, you don't get accidental changes. This adds freedom to evolve the original, without fear to break things. Drupal core exactly decided for this approach with theming: copy instead of subclass a base theme.

    Maybe, to still know what the original was, a property could make sense, to display a warning that the styles might need update after a major change in the original... But without inheritance.

    You choose the base layout related to grid count, with a variation for vertical alignment. Does the base has no vertical alignment definition or the inherited overrides it? How about other aspects like responsiveness modifiers?

    For me, looking at a single layout definition without going to the parent, is less abstraction and more simple to review. For instance also, it's way easier to grep "where is modifier x in use?".

    So let's assess of this really improves maintainability in real life scenarios.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024