Problem/Motivation
When Layout Builder Browser is configured to use the off-canvas it will fail to open if it has already been opened and closed once.
The only error produced is: An error occurred during the execution of the Ajax response: LoadJS
No errors show up in the site log, and inspecting the response in the Network browser console yields the following:
[
{
"command": "add_css",
"data": [
{
"rel": "stylesheet",
"media": "all",
"href": "\/sites\/default\/files\/css\/css_RYXJ0elqM7KK5dYs9ANS9YQ2lPNeDikw1G3HOCSEpV0.css?delta=0\u0026language=en\u0026theme=radicati_drupal_theme\u0026include=eJzLSazMLy2JTyrNzElJLYpPKsovL04t0ofSAMJHDHs\u0026exclude=eJyFUUFuxCAM_BAJpz6gL4kMOF1rCY6wicrvS7Kbrlgp7QEZZsYebENYKE3KHB1k-4yjZkQDl9R44w0zJcWkveyI8ismz8m0o_itBaINuawQxxcyREp3-VvyLNZEGU8avNKGR3aHe44RVsEObL8krcPMeenw1oOS3x3AiYlQuejkCsWA-dT06CkKJH4fQbWcsHmaDKFVUpoeaZPecEHr7xhIOX9c8F-RXbMXrRHlQsPz7CFt8C8_LJiKkSqKi3XQZvC2uvf3iOJhxc99f6bIq-f9fqxOfgAiztS7"
}
]
},
{
"command": "openDialog",
"selector": "#drupal-off-canvas",
"settings": null,
"data": "\u003Cdiv class=\u0022js-form-item form-item form-type-search js-form-type-search form-item- js-form-item- form-no-label\u0022\u003E\n \u003Clabel class=\u0022visually-hidden\u0022\u003EFilter by block name\u003C\/label\u003E\n \u003Cinput class=\u0022js-layout-builder-filter form-search\u0022 title=\u0022Enter a part of the block name to filter by.\u0022 type=\u0022search\u0022 size=\u002230\u0022 maxlength=\u0022128\u0022 placeholder=\u0022Filter by block name\u0022 \/\u003E\n\n \u003C\/div\u003E\n\u003Cdiv class=\u0022block-categories js-layout-builder-categories\u0022 data-layout-builder-target-highlight-id=\u0022block-0-content\u0022\u003E\u003Cdetails class=\u0022js-layout-builder-category js-form-wrapper form-wrapper\u0022 open=\u0022open\u0022\u003E\n \u003Csummary role=\u0022button\u0022 aria-expanded=\u0022true\u0022\u003EBasic Block\u003C\/summary\u003E\n \n \u003Cdiv class=\u0022layout-builder-browser-block-item\u0022\u003E\u003Ca href=\u0022\/layout_builder\/add\/block\/overrides\/node.1\/0\/content\/inline_block%3Abasic_block\u0022 class=\u0022use-ajax js-layout-builder-block-link\u0022 data-dialog-type=\u0022dialog\u0022 data-dialog-renderer=\u0022off_canvas\u0022 data-dialog-options=\u0022{\u0026quot;width\u0026quot;:\u0026quot;500px\u0026quot;}\u0022\u003EBasic\u003C\/a\u003E\u003C\/div\u003E\n\n \n\u003C\/details\u003E\n\u003C\/div\u003E\n",
"dialogOptions": {
"classes": {
"ui-dialog": "ui-dialog-off-canvas ui-dialog-position-side",
"ui-dialog-content": "drupal-off-canvas-reset"
},
"title": "Choose a block",
"modal": false,
"autoResize": false,
"resizable": "w",
"draggable": false,
"drupalAutoButtons": false,
"drupalOffCanvasPosition": "side",
"width": 300
},
"effect": "fade",
"speed": 1000
}
]
Steps to reproduce
Starting with a minimial installation of Drupal 10.3 install Olivero/Claro for the site theme and admin theme.
Install the minimum modules to have LBB work (Field UI, Layout Builder, Block Content...).
Assign a basic block type to a category in LBB.
Create a content type and configure it to use Layout Builder.
Edit the layout for a piece of content for that type.
Click Add Block, close the off-canvas, and click Add Block again.
You should see the AJAX loading icon briefly, then nothing happens and an AJAX error will be in the console.
Issue fork layout_builder_browser-3457703
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
jmfama commentedI am also encountering this using LBB 1.7 and Drupal 10.3.1.
Comment #3
jmfama commentedThe problem is somewhat similar to the one found here: https://www.drupal.org/project/simple_menu_icons/issues/3439303
Removing `$build['#attached']['library'][] = 'layout_builder_browser/browser';` on line 224 in BrowserController.php resolves this, so we need to find a way to ensure that the css file not loaded multiple times. Given that layout_builder_browser.css only contains one css rule right now, it is probably safe to remove this line until this is resolved.
Comment #4
jmickelaYeah, I spent a bunch of time debugging the AJAX request that happens when the off-canvas is opened and came to the conclusion that loading the library twice causes an error, but didn't see an easy way to test if a library had been loaded already.
Comment #6
mtalt commentedComment #8
mtalt commentedI was also encountering the issue with Drupal 10.3.1 and Layout Builder Browser 1.7. I've opened a MR that attaches the libraries to the layout_builder element through hook_element_info_alter(). This results in the libraries only being loaded once. I saw this method of attaching a library to layout builder in this issue.
Comment #9
jrbI think is actually due to a bug in BigPipe and core ajax.js. I created a separate issue here:
#3463875: Ensure uniqueBundleId is unique in LoadJS
That new issue includes a patch that fixes the bug.
Comment #10
jrbComment #11
milos.kroulik commentedI can confirm that MR !24 seems to solve the issue. The core issue seems to be fixed, but I wasn't able to find a solution for Drupal 10.3.x.