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.

Command icon 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

jmickela created an issue. See original summary.

jmfama’s picture

I am also encountering this using LBB 1.7 and Drupal 10.3.1.

jmfama’s picture

The 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.

jmickela’s picture

Yeah, 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.

mtalt made their first commit to this issue’s fork.

mtalt’s picture

Assigned: Unassigned » mtalt

mtalt’s picture

Assigned: mtalt » Unassigned
Status: Active » Needs review

I 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.

jrb’s picture

I 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.

jrb’s picture

milos.kroulik’s picture

I 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.