Why Gin Toolbar loads libraries related to media library?

Created on 31 January 2025, 2 months ago

Problem/Motivation

Hello,

I encountered this issue this week: πŸ› Incompatibility between Bootstrap 5 and Claro / Gin Toolbar Active

The problem comes from:

function gin_toolbar_library_info_alter(&$libraries, $extension) {
...
  if ($extension == 'media_library' && isset($libraries['widget'])) {
    $libraries['widget']['dependencies'][] = 'claro/media_library.theme';
    $libraries['widget']['dependencies'][] = 'gin/media_library';
  }

  if ($extension == 'media_library' && isset($libraries['view'])) {
    $libraries['view']['dependencies'][] = 'claro/media_library.theme';
    $libraries['view']['dependencies'][] = 'gin/media_library';
  }

When is the toolbar interacting with media library? Why is it needed?

πŸ’¬ Support request
Status

Active

Version

2.0

Component

Code

Created by

πŸ‡«πŸ‡·France Grimreaper France πŸ‡«πŸ‡·

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Grimreaper
  • πŸ‡¨πŸ‡­Switzerland saschaeggi Zurich

    When is the toolbar interacting with media library? Why is it needed?

    The toolbar module ist just called "toolbar" as it was originally named this way. It's functionality has grown over time quite a bit and it does provide all the things which are not possible to handle within an (admin) theme (to get past limitations).

    This one depends on your use case and could be made optional in the future for sure. If you use Drupal's frontend editing tools this is needed to style for example the modal itself and it's contents under the umbrella of the admin theme as you'll get it unstyled otherwise (unless you include styles for this in your frontend of course). This is a longstanding issue in Drupal (Core) as admin themes can't declare anything outside of it's own context (/admin) and that we can't differ admin tools from frontend tools. Again this really depends on your use case, if this should be part of the admin experience or not.

    I hope this helps ☺️

    I'm closing this as works as designed for now. If you think we should make this optional in the future, we can open a new issue to track it's development to provide maybe a setting for it.

    Cheers!

  • πŸ‡«πŸ‡·France Grimreaper France πŸ‡«πŸ‡·

    Thanks for the feedback :)

    I understand that it is not possible for the admin theme to provide by itself styling in front even for stuff we (can) consider admin.

    That's also why the Gin Layout Builder module exists :p

    But the problem with loading admin theme assets on the front theme is side effects. Or the admin theme should prepare assets for this usage. Example in the case of CSS prefixed with a selector (.my-modal .my-usual-selector) to avoid side effects.

    Currently if I use a media library modal (with for example Layout Builder and a content block with a media field) with Core 11.1.2, Olivero, Claro, I got the following screenshot:

    Not exactly like the result in admin theme unfortunately.

    Next screenshot is the same situation but with Gin 4.0.4 and Gin Toolbar 2.0.0, also not in admin theme:

    And I think that's normal, because some preprocess and/or Twig templates overrides are not in the front theme.

    See the following screenshots with UI Suite Bootstrap 5.1.x (no more Gin Layout Builder, just Gin Toolbar):

    And as soon as claro/media_library.theme library is loaded:

    (Because both Claro and Bootstrap 5 (the framework) use the "icon-link" class, so...Boom)

    So between all those side effects, I no more want to load assets from the admin theme in the front theme that's way too risky. And I am slowly getting out of maintaining Gin Layout Builder, I don't think it is technically feasible.

    I spent last 2024 trimester to make the media library/offcanvas/modals in UI Suite Bootstrap nice by using Bootstrap elements directly so no more need of admin theme assets in front and no more need of core offcanvas styling.

    Unfortunately, that's hard to think that each front theme needs to do the same work, but to avoid side effects I don't see how different it is possible to be done.

    The issue can stay close, no problem.

    Side note: now in Sobki Bootstrap, Gin is only on admin theme and using Gin Login. No more Gin Toolbar and Gin Layout Builder.

  • πŸ‡¨πŸ‡­Switzerland saschaeggi Zurich

    Gin's styles are scoped for the modal while Claro's aren't that's true.

    Like i mentioned above

    If you think we should make this optional in the future, we can open a new issue to track it's development to provide maybe a setting for it.

    We can create a follow-up to either (or both):
    a) remove the need for Claro's styles and embed them into Gin so everything we provide for the modal is scoped.

    b) Add a setting to enable/disable the libraries being exposed in the first place

    Like I mentioned I'm completely not against this, but I know there are use cases (and thus we've added it) to have them exposed.

    With the given solutions above we should be able to make it work in all situations

    Feel free to open a follow-up!

    Have a nice weekend

  • πŸ‡«πŸ‡·France Grimreaper France πŸ‡«πŸ‡·

    Thanks for the quick reply.

    "scoped": that's the word I was searching for, thanks :)

    Thanks for the proposals, currently I have a limited bandwidth and occupied with higher priority issues, so for the moment it will stay like that.

    I don't forget that you are ok with changes, so if needed I will open a follow up :)

    Have a nice weekend too :)

Production build 0.71.5 2024