Dialog styles are not loading correctly in Experience Builder

We're not totally sure where the problem lies, but starting with Gin to see if there is anything in how the libraries are loading.

Need to move this to gin_toolbar.

The problem is, that Gin alters the drupal.dialog library and adds the dialog library from Gin. However, that's insufficient, if that dialog is loaded on a non-admin page.

Therefore, we need to add gin_base instead of just dialog.

This MR should fix it. Please rebuild cache after applying the patch as we're changing the library declarations.

@saschaeggi, do you see any unintended consequences of this change for other contexts? I can't think of any, but you may well do so.

Tested manually and it works but will leave the RTBC for @saschaeggi.

@saschaeggi that suggested change looks much better in theory. However, the buttons don't have any background color defined with that approach. Any idea, what else we should add?

Do we know how this is supposed to look like? It seems still pretty much unstyled afterwards? 🤔

that suggested change looks much better in theory. However, the buttons don't have any background color defined with that approach

Maybe a cache clear?

Yes, caches were cleared, otherwise the updated library definition would be recognized either. I also cleared the browser cache.

Just compared the markup for admin pages and that dialog in XB, it is the same. Problem is that the XB page doesn't have the --gin-color-primary and similar defined. Do we have any chance getting them in a non-admin page?

I've added $libraries['drupal.dialog']['dependencies'][] = 'gin/gin_accent'; but that doesn't work because gin_page_attachments_alter doesn't get executed on a XB page.

While other parts of the dialog also look strange, the invisible buttons are critical, so I took a look. Here is what I think is happening.

The gin_dialog library — which is now being correctly used in this MR — has gin_accent as a dependency, it's being loaded, and yet, the variables defined there are not getting a value. The problem is that they're all scoped under the [data-gin-accent] selector in accent.css. That data attribute, among others, are being added in gin_preprocess_html(). Here is the catch. That preprocess never runs on the page where the XB app is rendered due to XB's unusual controller.

So those attributes would need to be set directly on the media library dialog's template somehow. Since this was my first time ever looking into the Gin codebase, I'll let you decide how to handle that best. Let me know if you need some kind of quick workaround in XB to make this possible before the Drupal CMS code freeze.

(By the time I finished writing this comment, #13 was posted, which is a somewhat similar conclusion. I'll leave this here in case the gin_preprocess_html() is helpful to note.)

Thanks @balintbrews for chiming in. I wonder if there is any preprocess hook that XB triggers which could be used by other like e.g. Gin to set the necessary variables to be attached, in this case to drupalSettings?

With regard to the media library rendering, i.e. the inner part of the dialog, I'm not sure that's a Gin thing. That sounds more like some other library from media needs to be attached by XB when loading this dialog. But I may be wrong.

With the disclaimer that I looked into this on a standard Drupal install with Gin/XB and not Drupal CMS I was able to reproduce the issue reported.

Then, I was able to address the majority of the problems with a single line adding variables.css to the dialog library in gin.libraries.yml

dialog:
  css:
    theme:
      dist/css/components/dialog.css: { minified: false, weight: 99 }
      dist/css/theme/variables.css: { minified: false } # adding this line fixes everything

I also have a branch in 📌 Media Library dialog styling Active named 3471978-try-using-admin-theme-without-fence that once it (or something comparable) lands it will look even better, but I think the above puts out the major fires that led to this issue being created.

With the suggested change in #16 this is what it looks like

It looks like this with my MR from this XB issue 📌 Media Library dialog styling Active

I'm also aware the suggested solution is pretty similar to what is in the MR. The differentiator may be due to how library alters are cached, which we discovered in 🐛 Many css files incorrectly being loaded on /xb/ pages Active make the (sorta reasonable) assumption that a single page isn't summoning multiple themes at once.

So, I've done another test. The gin_toolbar should work for Drupal in the backend, for Drupal in the frontend and also now for XB. By adding the library gin/gin_dialog as it is now in the MR, achieves all this. We should NOT add the accent library as this is only suitable for the backend, not for the frontend.

With this, we get the dialog in the backend just as before, and we get the improved dialog in the frontend and also in XB. Together with the XB fix in 📌 Media Library dialog styling Active , also the action button and the dialog content gets rendered alright in XB too.

If this works for everyone, please RTBC and we'll publish another release.

We should NOT add the accent library as this is only suitable for the backend, not for the frontend.

I would disagree here. The accent might be required to show the correct accent color within the dialog. As all our accent colors are gin prefixed this does not interfere with any content in the frontend. Also gin_dialog wraps all it's styles within the scope of .ui-dialog {} (note that we could change that to something like .gin-dialog {} down the line.

So with that there might no iframe needed.

That data attribute, among others, are being added in gin_preprocess_html(). Here is the catch. That preprocess never runs on the page where the XB app is rendered due to XB's unusual controller.

You're correct, also this will lead to more issues like Darkmode not working correctly, so we might want to fix this.

I have a branch in 📌 Media Library dialog styling Active (try-using-admin-theme-without-fence ) that works great with Claro and even runs hook_preprocess_html on the admin theme. Gin still doesn't look quite right and while I think the remaining tweaks need to be done on Gin's end. However, if it seems like an XB change might be the most reasonable, lmk and we'll figure it out.

Perhaps someone could try the current MR in this issue with the XB branch I've created and we can discuss what other changes might help and in which project.

I am using this patch → so Gin works with the recent changes made to experience builder. This appears to take care of everything and is a change made direclty to Gin vs gin toolbar.

Is this a Gin issue then and not a toolbar issue? Should we move to the Gin project?

Is there an issue for #21?