No space between columns of Layout Builder

Not just umami demo, but this can be seen with Bartik theme.

We should update the styles in Layout Builder to add padding or margin between columns.

Changing the title to make it more generic.

Each theme needs to set its own CSS for this, otherwise Layout Builder will be making assumptions about column padding that would need to be overwritten in every theme.

#5 +1

It should be done in themes.

Yes, agreed.

After giving it a bit of thought, why shouldn't we add default spacing from layout builder? If we give the spacing from a theme, each & every theme (including contributed too), have to take care of it. I am sure all themes would need that space.

Instead, we should give some ideal spacing from layout builder & then any theme can override it if needed. Thoughts?

That makes sense @thamas. Thanks.

I would have thought we should have a 'sensible' default (as much as possible) so that rather than every single theme having to specify padding/margin to fix the issue, some will have to to make it more suitable for their theme. If doing it per theme means that people have to specify it for their theme, that's not much different than having to override a default.

I would guess though that this should be done in the Stable core theme, which is the default base theme, rather than in the layout builder module so that if you didn't have a base theme/didn't want the default styles, you wouldn't have to have them?

For setting the margin/padding can we use em so that it scales with default font sizes etc., like we did for the padding on the add link here? https://www.drupal.org/project/drupal/issues/3050225

Hi all,

For space between columns of Layout Builder i created patch which is resolved spacing issue between columns.

Please review and give feedback.

Thanks!

Fixed the custom command issue in patch #18

I uploaded patch with interdiff.

rolling up patch interdiff were added on #20.

This issue has been addressed in 9.2
Adding screenshot of fresh Drupal 9.2 install.
No more reproducible in D9.2

As mentioned to do in #5. Add the styles from patch #22 to your custom theme or upgrade to Drupal core 9.2.0. Is that correct?

/* Layout builder padding issue*/
/*https://www.drupal.org/project/drupal/issues/3061987*/
/* XXXXXXXXXXXXXXXXXXXXXXXXXX */

.layout__region {
  box-sizing: border-box;
  margin: 10px 0;
}

.layout__region--top {
  margin-top: 0;
}

.layout__region--bottom {
  margin-bottom: 0;
}

[class*="layout__region--first"] {
  padding-right: 15px;
}

[dir="rtl"] [class*="layout__region--first"] {
  padding-right: 0;
  padding-left: 15px;
}

[class*="layout__region--second"] {
  padding-left: 15px;
}

[dir="rtl"] [class*="layout__region--second"] {
  padding-right: 15px;
  padding-left: 0;
}

.layout__region--third {
  padding-left: 30px;
}

[dir="rtl"] .layout__region--third {
  padding-right: 30px;
  padding-left: 0;
}

@media screen and (max-width: 40em) {
  .layout__region {
    padding: 0;
  }
}

It works for me. Thank you.

I gues we should also add a style for .layout__region layout__region--fourth

.layout__region--fourth {
  padding-left: 30px;
}

[class*="layout__region--fourth"] {
  padding-left: 15px;
}

Changing this to a support request for now. If there's a concrete proposal to change each of the non-base themes that ship with core, that's fine. But per #5 we won't be changing this in the base themes.

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Hello everyone,

As Bartik has been removed from the Drupal core, I suggest that we either close this issue or retest using a different theme.

Thanks!