Sometimes when loading experience builder (most often, seemingly, after switching between Git branches) many unexpected CSS files are loaded into the page. These extra CSS files such as base.css interfere with the styling of the page by setting things like margin for all h1-h6 tags.
I don't think there should be any CSS files loaded that are not explicitly called in by the React app.
Before running drush cr
After running drush cr
There are many situations where this happens, but this is the first reliable way I found to reproduce the symptoms:
'js_message_test'/js_message_test_link the first page you visit after the cache clear| Comment | File | Size | Author |
|---|---|---|---|
| Drupal_Experience_Builder.png | 163.45 KB | jessebaker | |
| Drupal_Experience_Builder.png | 468.79 KB | jessebaker |
Show commandsStart 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:
changes
Comments
Comment #3
bnjmnmComment #4
bnjmnmI updated the steps to reproduce and added a failing e2e test that admittedly does not follow the exact steps as summarized, but still runs into the problem. In the test, it fails due to an error vs a non-passing assertion because the pile of Olivero assets include navigation JS that assumes certain elements are present and it errors when those elements aren't found.
Comment #6
hooroomooOk found from comment under
experience_builder_library_info_alterand previous MRs it's because of Drupal.ajax bringing in Drupal.message that brings in Olivero assets but because the hooks run after a cache clear the current workaround that unsets the drupal.message library isn't getting triggered if a page that adds the library is visited first?Comment #7
bnjmnmRe #6 Yep that's what it looks like.
cache_discovery- cidlibrary_info:oliverois the culprit. If this cache item is first generated when the XB UI loads, the$route_name === 'experience_builder.experience_builder'condition is true and the library info cache will omit the extra assets. I suspect when that scenario happens then Olivero risks having some assets missing, but I haven't confirmed this.Comment #8
hooroomooThis is admittedly kinda hacky, hopefully this MR can invoke a cleaner solution
Comment #9
hooroomooComment #10
balintbrewsI think @bnjmnm would be the best person to review the solution.
Comment #11
bnjmnmI can't codeowner-signoff because I provided the initial commit with the test, but this solution is AOK - it gets around having to use the libraries info alter hook that is sensitive to the first page visit. What's there is sorta workaroundy, but not moreso than what was removed, and it stops this bug from happening.
Comment #14
lauriiiComment #15
wim leersWow, #1945262: Introduce "before" and "after" for conditional ordering in library definitions strikes again! 😬 I first commented on that core issue … 11.5 years ago 😮💨