Dropbutton quickly shows/hides its menu on pageload causing layout shift

We fixed a similar issue with the mobile-friendly menus within Olivero by adding a noscript_styles variable to the html.html.twig.

This patch follows the same pattern.

That being said, it would be nice if libraries or themes/modules had an easier way to add noscript styles to a page. Maybe something like this in a *.libraries.yml file could be a followup:

drupal.dropbutton:
  css:
    component:
      misc/dropbutton/dropbutton.css: { noscript: true }

Was able to confirm the shift as seen in the gif.

Applied the patch and no longer seeing it.

I've been wanting this addressed for a long time! Pretty minor stuff

1. +++ b/core/themes/claro/claro.theme
   @@ -39,6 +39,28 @@ function claro_theme_suggestions_details_alter(&$suggestions, $variables) {
   +function claro_preprocess_html(&$variables) {
   +  $theme_path = \Drupal::request()->getBasePath() . '/' . \Drupal::service('extension.list.theme')->getPath('claro');
   +  $query_string = \Drupal::state()->get('system.css_js_query_string') ?: '0';
   

   If this goes in a page_attachments_alter there isn't the need to change html.html.twig, and its leveraging an existing API to add this

    function claro_page_attachments_alter(array &$attachments) {
     $theme_path = \Drupal::request()->getBasePath() . '/' . \Drupal::service('extension.list.theme')->getPath('claro');
     $query_string = \Drupal::state()->get('system.css_js_query_string') ?: '0';
   
     $attachments['#attached']['html_head'][] = [
       [
         '#tag' => 'link',
         '#noscript' => TRUE,
         '#attributes' => [
           'rel' => 'stylesheet',
           'href' => $theme_path . '/css/components/dropbutton-noscript.css?' . $query_string,
         ],
       ],
       'dropbutton_noscript',
     ];
   }

   It's possible this was tried and ruled out in Olivero but couldn't quickly find the relevant issue as it was implemented when Olivero was contrib. If the reasoning is already in the issue and there's a good reason to use the existing approach, link to the issue with the explanation, address item 2 (which is only needed if you keep preprocess_html) and fine to re-rtbc.

2. +++ b/core/themes/claro/templates/classy/layout/html.html.twig
   @@ -38,6 +38,7 @@
   +    {{ noscript_styles }}
   

   If my attachments_alter suggestion isn't implemented,and this change still happens, then this template file should be moved to a new directory. Any theme that used to have (the now removed) Classy as a subtheme had the classy templates it used copied to a /classy subdirectory to help distinguish formerly-classy from templates specific to the theme. Once we change it, it's effectively overridden and belongs to Claro, etc.

   This isn't particularly apparent in Drupal 10 as the test coverage that would let you know the move was needed got removed with Classy

To be honest, I'm not sure why we implemented it the way we did in Olivero. I think it was a situation where the code morphed a bunch and then it ended up there (which works well). That being said, I like this solution better because it doesn't need to modify the HTML template.

New patch and interdiff attached. Thank you :)

I just tested this and it work perfect. Also, since @bnjmnm's feedback has been addressed, I'm moving this back to RTBC.

Woah! I've wanted to work on this so many times since we first implemented the Claro dropbuttons. Thank you @mherchel & all! 💯

Committed c5604c9 and pushed to 11.x. Also cherry-picked to 10.1.x. Thanks! 🎉

Automatically closed - issue fixed for 2 weeks with no activity.