Create patterns/components for grid management

I realized that in Layout Builder, the drag&drop feature which allows to move blocks to other regions or sections is not working with layouts generated from patterns.

Also for patterns used as layouts, UI Styles Layout Builder is not able to add classes to a layout region because otherwise we would need to use the region_attributes variable generated by
https://git.drupalcode.org/project/drupal/-/blob/11.x/core/modules/layou...

I think this needs a discussion.

I opened a WIP MR with col 1 and col 4 for discussion.

Third problem. Configuration form UI, see screenshot.

Discussed with @pdureau,

The mechanism depends on region_attributes, created by template_preprocess_layout in layout_discovery module.

However, this region_attributes variable is not used in component templates. (and it does not exist if the component is not used as a layout.)

The solution would be to enforce every UI patterns component to use one attributes object by slot. But it will not possible when slots are printed without wrappers.

<div{{ attributes }}>
  <div{{ foo_attributes.addClass('foo')}}>
    {{ foo }}
  </div>
  {{ bar }}
 </div>

Also, it would not be possible to use the prop drilling from UI Styles because we do not have access to the content of the slots to inject the wrapper. (it is removed when rendering and blocks are rendered twice)

The mechanism depends on region_attributes, created by template_preprocess_layout in layout_discovery module.

However, this region_attributes variable is not used in component templates. (and it does not exist if the component is not used as a layout.)

The solution would be to enforce every UI patterns component to use one attributes object by slot. But it will not possible when slots are printed without wrappers.

See 📌 [2.0.0-beta2] Drag & drop in layout builder Postponed

Careful about this task.

We do it because Layout Options could be replaced by UI Patterns 2.x in projects. UI Patterns 2.x has a powerful source plugin system which allow nesting of components in a single place.

So, instead of reproducing, one by one, with similar architecture, the layouts plugins to UI components:

• grid 1 col
• grid 2 cols
• grid 3 cols
• grid 4 cols
• grid row

We can imagine an other system more similar to table components, with:

• one component for grid row
• one component for grid cols

We need to do test with UI Patterns 2.x UI to see if its is comfortable enough for ui_suite_bootstrap users.

Discussed with @pdureau today.

Current grid_row pattern and layout grid are missing some options about container.

The container option should not be a boolean but an enum (container, container-sm, etc, container-fluid, empty) and with a wrapper styles prop allowing to set styles on a wrapper div to be able to provide background color or else on the full width even if content is containerized.

I started pocing ✨ Bootstrap 5 : Layout > Columns Active and ✨ Bootstrap 5 : Layout > Gutters Active with grid_row_1.

Ready for review.

Waiting for 📌 [2.0.0-beta5] Add new EnumSetPropType Active to test in site building before merging.

Do we need to also update the examples from UI Examples ?

Good point

Issue #3449390 by grimreaper, pdureau: [5.1.0] Create components for grid management.
- Implements containers, columns and gutters of Bootstrap documentation.
- Add container wrapper with attributes.
- Fix is sequence

Almost forgot to try the breakout from DSFR.

Automatically closed - issue fixed for 2 weeks with no activity.