Fix Drupal 10 compatibility issues with Bootstrap Layout Builder

I forgot about patching bootstrap layout builder you need this patch for D10 compatibility.
You also need to patch bootstrap styles 📌 Fix Drupal 10 Change of JS jquery/once to Drupal core/once, migrate JS API Fixed but you've already seen it.

Thanks! Will test both first thing tomorrow

Tested patch #3 in addition to the patch for bootstrap styles and the buttons for breakspoints do appear again.

Could this be added to a release? As this will be a blocker for some upgrading to D10

Facing the same issue.
Thanks, Paul for the #3 patch.

+     * This is a work around for modules that pass array as css class value
+     * this results in array of arrays that must be flatten before displaying
+     * in twig.

Is this for TWIG ~3.0 ?

To be honest I haven't been digging deeper into cause of this, but yes my current twig is "twig/twig": "^3.4.3".

On Drupal 10.0.2, twig/twig version is 3.5.0, and I also get the once() errors in the browser console.

I also see the Section column distribution selection doesn't work: the percent selectors are not clickable:

After applying patch #3, I get the following:

While the percent distributions for each breakpoint are now clickable and seem to be working, there are still once() errors and the UI seems incorrectly styled.

In addition to patch #3 here, I updated Radix to 5.0.8 and applied patch #8 from https://www.drupal.org/project/bootstrap_styles/issues/3330458 📌 Fix Drupal 10 Change of JS jquery/once to Drupal core/once, migrate JS API Fixed .

All the once() errors are now gone, BUT the UI is still incorrectly styled:

@jcandan I am getting the same results you have at #11 using Barrio B5 theme and having applied patch #3 here and patch #8 on the 'bootstrap_styles' issue.

I applied patch #3 and it fixed errors with .once

#13 RTBC

Confirming #3 worked for me and I'm seeing same UI weirdness that @jcandan mentions. This is super helpful as I work on a lot of D9 sites using this module and we're about to upgrade them all to D10.

The issue that we're seeing with the layout builder UI is due to the a Drupal Core CSS rule for the drupal-off-canvas-wrapper setting the label's display to "inline" (see line 105 of: /core/misc/dialog/off-canvas/css/form.css) as shown here:

:is(#drupal-off-canvas-wrapper input[type="checkbox"]) + label,
:is(#drupal-off-canvas-wrapper input[type="radio"]) + label {
  display: inline;
}

In order for Bootstrap Layout Builder's display of "flex" to persist, the CSS display attribute found in: bootstrap_layout_builder/css/layout-tab-styles.css would need to be more specific or need to be indicated as 'important'. I'm working on a temporary patch/solution for this and will post shortly.

I've created "MR !25" for the provided patch in addition to my previous comment that sets `display:flex` to `display:flex!important`.

The patchfile for this MR can be found here: https://git.drupalcode.org/issue/bootstrap_layout_builder-3335356/-/commit/2c6bcfdeae304f838157fabfe88e8168c2bfecd5.patch.

Changing status back to Needs Review as a new Patch/MR have been submitted.

Hope this helps!

Would someone mind putting together the steps needed to get all these patches working on D10.1+ so that the Bootstrap Styles/Bootstrap Layout Builder works in D10 if it's working for you? I haven't been able to get any of it to work.

@dalemoore you can use this collection of patches 🐛 🎨 Clean up UI for 1x branch RTBC .

I just installed them a few minutes ago in D10.1.1 and all seems to be going well save that I still get JS once errors logged in the console.

Not sure if this what makes it that sometimes 'configure section' links will fail to load up the sections 🐛 If you rename a section you can't 'configure' it again. Active and one has to recreate the section and move the blocks to be able to edit existing sections. This has happened twice within an hour now.

Confirm patch #3 works.
Setup Drupal 10.1.1 + PHP 8.1
Thanks!!

@MLZR patch #3 works when used with patch #8 from https://www.drupal.org/project/bootstrap_styles/issues/3330458 📌 Fix Drupal 10 Change of JS jquery/once to Drupal core/once, migrate JS API Fixed

Good to go now. Setup Drupal 10.1.1 + PHP 8.1

A little Ajax Error, but i can live with that

✅ Released bootstrap_layout_builder-2.1.2 →
Also
✅ Released bootstrap_styles-1.1.1 →

Hello

I updated to the last version of "Bootstrap Layout Builder" en "Bootstrap Styles".
When you choose 2, 3… columns the columns are stacked instead of side by side (see picture).

For this project I have
Drupal 10.1.1
Php 8.2.9
Bootstrap_layout_builder: 2.1.2
Bootstrap Styles : 1.1.1
Bootstrap_library: 2.0.2

For another project where it works perfect :
Drupal 9.3.13
Php 7.4.33
Bootstrap_layout_builder: 2.0
Bootstrap Styles : 1.0
Bootstrap_library": 2.0

Someone any idea to solve that problem ?

I have also some errors on my page see picture

Thanks in advance

Hello Mav_fly ,

Kindly share a screenshot of your recent log messages every time you try to create columns. Your problem appears to be a jquery/once problem that needs updating to core/once.

On Drupal 10 thats a sign of incompatiblity. I get a feeling there's a related module to BLB that is bringing the issue.

Hello Thomas

After further investigation on this project. The strange thing is that the layoutblocks are only broken when you set the page as homepage.
When you set for example node1 as homepage and you add columns the are stacked. Then when you set for example node 2 as homepage and you look back to node 1 the columns are then side by side.
So conclusion is that the problems is only on the page how is set as homepage.

Screenshots in attachment

Hello Mav_fly

Your problem should be related to the Layout Builder Blocks deprecate module code, see here https://www.drupal.org/project/layout_builder_blocks/issues/3363647 🐛 Fix deprecation notices with PHP 8.2 and Drupal 10 Fixed

And deprecate code in the adaptive theme you are using https://www.drupal.org/project/issues/adaptivetheme?categories=All →

Am using the bootstrap 5 theme, so it has no deprecated code and works with your same setting.

Try fixing that deprecation and revert with findings

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

@Thomas
I applied the patch for the Layout Builder Blocks and that solved the warnings for this.

But the warnings en problems related for the theme aren't yet solved. From the moment I have a solution I will share it with you!