Adding a CSS class to drupal_set_message - php

Question

I'm trying to add a CSS class to a specific message in Drupal that is output upon success when subscribing to a mailchimp list, here's the code for for submission function:
public function submitForm(array &$form, FormStateInterface $form_state) {
global $base_url;
$list_details = mailchimp_get_lists($this->signup->mc_lists);
$subscribe_lists = array();
// Filter out blank fields so we don't erase values on the Mailchimp side.
$mergevars = array_filter($form_state->getValue('mergevars'));
$email = $mergevars['EMAIL'];
$mailchimp_lists = $form_state->getValue('mailchimp_lists');
// If we only have one list we won't have checkbox values to investigate.
if (count(array_filter($this->signup->mc_lists)) == 1) {
$subscribe_lists[0] = array(
'subscribe' => reset($this->signup->mc_lists),
'interest_groups' => isset($mailchimp_lists['interest_groups']) ? $mailchimp_lists['interest_groups'] : NULL,
);
}
else {
// We can look at the checkbox values now.
foreach ($mailchimp_lists as $list) {
if ($list['subscribe']) {
$subscribe_lists[] = $list;
}
}
}
$successes = array();
// Loop through the selected lists and try to subscribe.
foreach ($subscribe_lists as $list_choices) {
$list_id = $list_choices['subscribe'];
$interests = isset($list_choices['interest_groups']) ? $list_choices['interest_groups'] : array();
if (isset($this->signup->settings['safe_interest_groups']) && $this->signup->settings['safe_interest_groups']) {
$current_status = mailchimp_get_memberinfo($list_id, $email);
if (isset($current_status->interests)) {
$current_interests = array();
foreach ($current_status->interests as $id => $selected) {
if ($selected) {
$current_interests[$id] = $id;
}
}
$interests[] = $current_interests;
}
}
$result = mailchimp_subscribe($list_id, $email, $mergevars, $interests, $this->signup->settings['doublein']);
if (empty($result)) {
drupal_set_message(t('There was a problem with your newsletter signup to %list.', array(
'%list' => $list_details[$list_id]->name,
)), 'warning');
}
else {
$successes[] = $list_details[$list_id]->name;
}
}
if (count($successes) && strlen($this->signup->settings['confirmation_message'])) {
drupal_set_message($this->signup->settings['confirmation_message'], 'status');
}
$destination = $this->signup->settings['destination'];
if (empty($destination)) {
$destination_url = Url::fromRoute('<current>');
}
else {
$destination_url = Url::fromUri($base_url . '/' . $this->signup->settings['destination']);
}
$form_state->setRedirectUrl($destination_url);
}
I'm specifically interested in altering this portion:
if (count($successes) && strlen($this->signup->settings['confirmation_message'])) {
drupal_set_message($this->signup->settings['confirmation_message'], 'status');
}
I would like to add a class that is output only for this confirmation message, and not for all of them. I've tried a couple things:
According to some related Q&A, I've tried editing the 'status' portion above to add a class there: 'status conf' or 'status, conf', neither of these work, the only accepted values are 'status', 'warning', and 'error', other values are not translated.
I've also tried this:
if (count($successes) && strlen($this->signup->settings['confirmation_message'])) {
drupal_set_message('' . $this->signup->settings['confirmation_message'] . '', 'status');
This option doesn't add the markup and just outputs it as a string:
"<div class="conf">Our confirmation message</div>"
Any suggestions?

Answer 1

A twig template is used to output the message html.
Why the documentation suggests there are only 3 options for the 'type' parameter, I don't know, but it is wrong. The status messages are just like any other themable (is that a word?) output.
Adding your own class, eg. drupal_set_message('Our confirmation message', 'conf'); does work, except the class (when the classy theme template is used) will be messages--conf.
In the case of the 'classy' theme, the template for messages is located at "core/themes/classy/templates/misc/status-messages.html.twig" and it looks like this:
{#
/**
* #file
* Theme override for status messages.
*
* Displays status, error, and warning messages, grouped by type.
*
* An invisible heading identifies the messages for assistive technology.
* Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
* for info.
*
* Add an ARIA label to the contentinfo area so that assistive technology
* user agents will better describe this landmark.
*
* Available variables:
* - message_list: List of messages to be displayed, grouped by type.
* - status_headings: List of all status types.
* - attributes: HTML attributes for the element, including:
* - class: HTML classes.
*/
#}
{% block messages %}
{% for type, messages in message_list %}
{%
set classes = [
'messages',
'messages--' ~ type,
]
%}
<div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
{% if type == 'error' %}
<div role="alert">
{% endif %}
{% if status_headings[type] %}
<h2 class="visually-hidden">{{ status_headings[type] }}</h2>
{% endif %}
{% if messages|length > 1 %}
<ul class="messages__list">
{% for message in messages %}
<li class="messages__item">{{ message }}</li>
{% endfor %}
</ul>
{% else %}
{{ messages|first }}
{% endif %}
{% if type == 'error' %}
</div>
{% endif %}
</div>
{# Remove type specific classes. #}
{% set attributes = attributes.removeClass(classes) %}
{% endfor %}
{% endblock messages %}
To override it, just add your own 'status-messages.html.twig' to your theme (MY_THEME/templates/misc/status-messages.html.twig) and alter as needed.