AJAX MessageCommand markup and styling differs from Theme default

Created on 24 October 2023, 11 months ago
Updated 5 September 2024, 8 days ago

Problem/Motivation

MessageCommand was introduced in #3086096: Add a generic Ajax Message command β†’ . It is helpful to show status messages in AJAX contexts. Sadly it uses a totally different "render pipeline" than the active theme does. In fact it uses none, but builds the message area in JavaScript, without using the Theme's twig templates. That's how it's implemented.

From a Themers and Theme Prespective and from "Component" thinking, this is wrong. AJAX messages should use the same templates, as regular messages do.
That's why I'd rate this as bug from outer perspective. Still I think it was a (discussable) design decision.

This results in issues like this: πŸ“Œ Override Drupal.theme.message to to make sure JS messages get rendered correctly Fixed

Of course, I know talk is cheap and this is hard to resolve, because the messages are added dynamically and you can't tell if the message area already exists. But these problems can be solved.

Implementation:
https://git.drupalcode.org/project/drupal/-/blob/11.x/core/misc/message....
https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Ajax%21Me...

Steps to reproduce

Show a regular status message using PHP in a custom theme, where the message area was modified in twig
Compare the result to a status message added by JavaScript. They differ a lot, if the JS-built dom structure isn't the same as the one in Twig.

Proposed resolution

Return the theme rendered message wrapper and the messages in the AJAX result. Only add the wrapper on the page, if none is present.
After adding or if the message wrapper is already existing, add the rendered messages.

This way the theme handles the message output, like it would do on a regular call, but AJAX builds the message from the theme results without a difference.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

πŸ› Bug report
Status

Needs work

Version

11.0 πŸ”₯

Component
AjaxΒ  β†’

Last updated 1 minute ago

Created by

πŸ‡©πŸ‡ͺGermany Anybody Porta Westfalica

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

Merge Requests

Comments & Activities

  • Issue created by @Anybody
  • πŸ‡©πŸ‡ͺGermany Anybody Porta Westfalica
  • πŸ‡©πŸ‡ͺGermany Anybody Porta Westfalica
  • πŸ‡¬πŸ‡§United Kingdom catch

    Closed πŸ“Œ The AJAX messages command should render messages using the twig template Active as duplicate.

    Bumping to major based on πŸ› 10.3 upgrade now missing status-message theme suggestions Needs work .

  • πŸ‡ΊπŸ‡ΈUnited States Luke.Leber Pennsylvania

    Injecting here that this would make styling file upload errors quite a bit easier!

    It'd pay to take a hard look at the file module to determine how feasible the approach in the IS actually is.

  • πŸ‡¬πŸ‡§United Kingdom catch

    I took a look at how this could work.

    The main thing we want, is to use #theme 'status_messages' to render the messages in PHP, before they're sent to JavaScript.

    I think something like this would probably do it:

    1. Add a new RenderedMessagesCommand - it would take an array of messages instead of a single one.

    2. messages.js would need to support a new 'rendered' option (in the options array) where it just appends the markup string it was given, instead of passing it through Drupal.theme.message

    3. RenderedMessagesCommand would take the messages array, pass it through '#theme' 'status_messages', add the 'rendered' option, and return otherwise the same structure as MessagesCommand.

    4. To solve πŸ› 10.3 upgrade now missing status-message theme suggestions Needs work , we'd then use RenderedMessagesCommand in big pipe instead of MessageCommand.

    It doesn't allow us to remove Drupal.theme.message though, because we provide a pure JavaScript API to add messages, and those can't be rendered in PHP, so the underlying issue that themes need to theme JavaScript messages separately is still there. That makes me wonder how useful it really is compared to opening issues against themes that don't implement message styling. e.g. I just found πŸ“Œ Add js message theme override to match Umami message markup Needs review .

  • πŸ‡ΊπŸ‡ΈUnited States Luke.Leber Pennsylvania

    We've started to use drupalSettings + js_settings_alter to provide server-side rendered templates to the frontend.

    Our Drupal.theme.messages implementation pulls the markup from drupalSettings. Might not be robust enough for core, but has worked rather well for us...and even covers the obscure file.module validation cruft too.

  • πŸ‡ΉπŸ‡·Turkey Umit Turkey

    These update problems of Drupal are so annoying that I'm at the point where I'm going to quit. There is no documentation on the subject. Why would they make such a change without consulting the community. I am not updating any site because of this issue.

  • πŸ‡¬πŸ‡§United Kingdom catch

    @luke.leber πŸ› 10.3 upgrade now missing status-message theme suggestions Needs work shows pretty conclusively that the current situation with separate js and twig theming isn't robust, so I think it's a good idea to try this - could you extract your logic into an MR? Seems OK for bc too given we'd be changing the default behaviour and js theme overrides should still work the same way.

  • Merge request !9329Let's see if this has any problems? β†’ (Open) created by Luke.Leber
  • Pipeline finished with Failed
    18 days ago
    Total: 241s
    #265094
  • Pipeline finished with Failed
    18 days ago
    #265108
  • Pipeline finished with Failed
    18 days ago
    #265113
  • Pipeline finished with Failed
    18 days ago
    Total: 385s
    #265111
  • Pipeline finished with Failed
    18 days ago
    #265178
  • Status changed to Needs work 11 days ago
  • πŸ‡¬πŸ‡§United Kingdom catch
  • πŸ‡ΊπŸ‡ΈUnited States Daniel Korte Brooklyn, NY

    daniel korte β†’ made their first commit to this issue’s fork.

  • Pipeline finished with Failed
    8 days ago
    Total: 470s
    #274808
Production build 0.71.5 2024