feat: set base class as a variable for some templates

Author: Callin Mullaney

templates/admin/locale-translation-update-info.html.twig

@@ -13,13 +13,19 @@
  * @see \Drupal\locale\Hook\LocaleThemeHooks::preprocessLocaleTranslationUpdateInfo()
  */
 #}
-<div{{ bem('wrapper', [], 'locale-translation-update') }} tabindex="0" role="button">
-  <span{{ bem('prefix', [], 'locale-translation-update', ['visually-hidden']) }}>Show description</span>
+{% set locale_translation_update_block = 'locale-translation-update' %}
+{% set locale_translation_update_wrapper_attributes = {
+  class: bem('wrapper', [], locale_translation_update_block),
+  tabindex: '0',
+  role: 'button',
+} %}
+<div{{ add_attributes(locale_translation_update_wrapper_attributes) }}>
+  <span{{ bem('prefix', [], locale_translation_update_block, ['visually-hidden']) }}>Show description</span>
   {% if modules %}
     {% set module_list = modules|safe_join(', ') %}
-    <span{{ bem('message', [], 'locale-translation-update') }}>{% trans %}Updates for: {{ module_list }}{% endtrans %}</span>
+    <span{{ bem('message', [], locale_translation_update_block) }}>{% trans %}Updates for: {{ module_list }}{% endtrans %}</span>
   {% elseif not_found %}
-    <span{{ bem('message', [], 'locale-translation-update') }}>
+    <span{{ bem('message', [], locale_translation_update_block) }}>
       {%- trans -%}
         Missing translations for one project
       {%- plural not_found|length -%}
@@ -28,7 +34,7 @@
     </span>
   {% endif %}
   {% if updates or not_found %}
-    <div{{ bem('details', [], 'locale-translation-update') }}>
+    <div{{ bem('details', [], locale_translation_update_block) }}>
       {% if updates %}
         <ul>
           {% for update in updates %}

templates/admin/status-report-general-info.html.twig

@@ -29,17 +29,18 @@
  *     server.
  */
 #}
+{% set system_status_general_info_block = 'system-status-general-info' %}
 
 <h2>{{ 'General System Information'|t }}</h2>
-<div{{ bem('item', [], 'system-status-general-info') }}>
-  <h3{{ bem('item-title', [], 'system-status-general-info') }}>{{ 'Drupal Version'|t }}</h3>
+<div{{ bem('item', [], system_status_general_info_block) }}>
+  <h3{{ bem('item-title', [], system_status_general_info_block) }}>{{ 'Drupal Version'|t }}</h3>
   {{ drupal.value }}
   {% if drupal.description %}
     {{ drupal.description }}
   {% endif %}
 </div>
-<div{{ bem('item', [], 'system-status-general-info') }}>
-  <h3{{ bem('item-title', [], 'system-status-general-info') }}>{{ 'Last Cron Run'|t }}</h3>
+<div{{ bem('item', [], system_status_general_info_block) }}>
+  <h3{{ bem('item-title', [], system_status_general_info_block) }}>{{ 'Last Cron Run'|t }}</h3>
   {{ cron.value }}
   {% if cron.run_cron %}
     {{ cron.run_cron }}
@@ -48,15 +49,15 @@
     {{ cron.description }}
   {% endif %}
 </div>
-<div{{ bem('item', [], 'system-status-general-info') }}>
-  <h3{{ bem('item-title', [], 'system-status-general-info') }}>{{ 'Web Server'|t }}</h3>
+<div{{ bem('item', [], system_status_general_info_block) }}>
+  <h3{{ bem('item-title', [], system_status_general_info_block) }}>{{ 'Web Server'|t }}</h3>
   {{ webserver.value }}
   {% if webserver.description %}
     {{ webserver.description }}
   {% endif %}
 </div>
-<div{{ bem('item', [], 'system-status-general-info') }}>
-  <h3{{ bem('item-title', [], 'system-status-general-info') }}>{{ 'PHP'|t }}</h3>
+<div{{ bem('item', [], system_status_general_info_block) }}>
+  <h3{{ bem('item-title', [], system_status_general_info_block) }}>{{ 'PHP'|t }}</h3>
   <h4>{{ 'Version'|t }}</h4> {{ php.value }}
   {% if php.description %}
     {{ php.description }}
@@ -67,8 +68,8 @@
     {{ php_memory_limit.description }}
   {% endif %}
 </div>
-<div{{ bem('item', [], 'system-status-general-info') }}>
-  <h3{{ bem('item-title', [], 'system-status-general-info') }}>{{ 'Database'|t }}</h3>
+<div{{ bem('item', [], system_status_general_info_block) }}>
+  <h3{{ bem('item-title', [], system_status_general_info_block) }}>{{ 'Database'|t }}</h3>
   <h4>{{ 'Version'|t }}</h4>{{ database_system_version.value }}
   {% if database_system_version.description %}
     {{ database_system_version.description }}

templates/admin/update-project-status.html.twig

@@ -34,31 +34,33 @@
     project.status == constant('Drupal\\update\\UpdateManagerInterface::CURRENT') ? 'current',
   ]|filter(v => v is not empty)
 %}
+{% set project_update_block = 'project-update' %}
+{% set project_updates_block = 'project-updates' %}
 {% with { attributes: status.attributes } %}
   {% set project_status_attributes = {
-    class: bem('status', status_modifiers, 'project-update'),
+    class: bem('status', status_modifiers, project_update_block),
   } %}
   <div{{ add_attributes(project_status_attributes) }}>
     {%- if status.label -%}
       <span>{{ status.label }}</span>
     {%- else -%}
       {{ status.reason }}
     {%- endif %}
-    <span{{ bem('status-icon', [], 'project-update') }}>
+    <span{{ bem('status-icon', [], project_update_block) }}>
       {{ status.icon }}
     </span>
   </div>
 {% endwith %}
 
-<div{{ bem('title', [], 'project-update') }}>
+<div{{ bem('title', [], project_update_block) }}>
   {%- if url -%}
     <a href="{{ url }}">{{ title }}</a>
   {%- else -%}
     {{ title }}
   {%- endif %}
   {{ existing_version }}
   {% if install_type == 'dev' and datestamp %}
-    <span{{ bem('version-date', [], 'project-update') }}>({{ datestamp }})</span>
+    <span{{ bem('version-date', [], project_update_block) }}>({{ datestamp }})</span>
   {% endif %}
 </div>
 
@@ -75,7 +77,7 @@
     project.status == constant('Drupal\\update\\UpdateManagerInterface::NOT_SUPPORTED') ? 'project-not-supported',
   ]
 %}
-<div{{ bem('details', [], 'project-updates') }}>
+<div{{ bem('details', [], project_updates_block) }}>
   {% if extras %}
     <div class="extra">
       {% for extra in extras %}

templates/admin/update-version.html.twig

@@ -23,28 +23,29 @@
  * @see \Drupal\update\Hook\UpdateThemeHooks::preprocessUpdateVersion()
  */
 #}
+{% set project_update_block = 'project-update' %}
 {% set update_version_attributes = {
-  class: bem('version', [], 'project-update'),
+  class: bem('version', [], project_update_block),
 } %}
 <div{{ add_attributes(update_version_attributes) }}>
   <div class="clearfix">
-    <div{{ bem('version-title', [], 'project-update', ['layout-column', 'layout-column--quarter']) }}>{{ title }}</div>
-    <div{{ bem('version-details', [], 'project-update', ['layout-column', 'layout-column--quarter']) }}>
+    <div{{ bem('version-title', [], project_update_block, ['layout-column', 'layout-column--quarter']) }}>{{ title }}</div>
+    <div{{ bem('version-details', [], project_update_block, ['layout-column', 'layout-column--quarter']) }}>
       <a href="{{ version.release_link }}">{{ version.version }}</a>
-      <span{{ bem('version-date', [], 'project-update') }}>({{ version.date|date('Y-M-d') }})</span>
+      <span{{ bem('version-date', [], project_update_block) }}>({{ version.date|date('Y-M-d') }})</span>
     </div>
     <div class="layout-column layout-column--half">
-      <ul{{ bem('version-links', [], 'project-update') }}>
+      <ul{{ bem('version-links', [], project_update_block) }}>
         {% if version.core_compatible is not defined or version.core_compatible %}
-          <li{{ bem('download-link', [], 'project-update') }}>
+          <li{{ bem('download-link', [], project_update_block) }}>
             <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
           </li>
         {% endif %}
-        <li{{ bem('release-notes-link', [], 'project-update') }}>
+        <li{{ bem('release-notes-link', [], project_update_block) }}>
           <a href="{{ version.release_link }}">{{ 'Release notes'|t }}</a>
         </li>
         {% if core_compatibility_details %}
-          <li{{ bem('compatibility-details', [], 'project-update') }}>
+          <li{{ bem('compatibility-details', [], project_update_block) }}>
             {{ core_compatibility_details }}
           </li>
         {% endif %}

templates/media-library/progress-bar.html.twig

@@ -11,11 +11,20 @@
  * - message: A string containing information to be displayed.
  */
 #}
-<div{{ bem('progress') }} data-drupal-progress>
+{% set progress_block = 'progress' %}
+{% set progress_attributes = {
+  class: bem(progress_block),
+  'data-drupal-progress': true,
+} %}
+{% set progress_bar_attributes = {
+  class: bem('bar', [], progress_block),
+  style: 'width: ' ~ percent ~ '%',
+} %}
+<div{{ add_attributes(progress_attributes) }}>
   {% if label %}
-    <div{{ bem('label', [], 'progress') }}>{{ label }}</div>
+    <div{{ bem('label', [], progress_block) }}>{{ label }}</div>
   {% endif %}
-  <div{{ bem('track', [], 'progress') }}><div{{ bem('bar', [], 'progress') }} style="width: {{ percent }}%"></div></div>
-  <div{{ bem('percentage', [], 'progress') }}>{{ percent }}%</div>
-  <div{{ bem('description', [], 'progress') }}>{{ message }}</div>
+  <div{{ bem('track', [], progress_block) }}><div{{ add_attributes(progress_bar_attributes) }}></div></div>
+  <div{{ bem('percentage', [], progress_block) }}>{{ percent }}%</div>
+  <div{{ bem('description', [], progress_block) }}>{{ message }}</div>
 </div>

templates/navigation/navigation--message.html.twig

@@ -9,8 +9,9 @@
  * @ingroup themeable
  */
 #}
+{% set toolbar_message_block = 'toolbar-message' %}
 {%
-  set classes = bem('toolbar-message', ['type--' ~ type])
+  set classes = bem(toolbar_message_block, ['type--' ~ type])
 %}
 {% set navigation_message_link_attributes = {
   class: classes,
@@ -25,14 +26,14 @@
 {% if url is not empty %}
   <a{{ add_attributes(navigation_message_link_attributes) }}>
     {{ icon('navigation', type, { class: 'toolbar-message__icon', size: 20 }) }}
-    <div{{ bem('label', [], 'toolbar-message') }}>
+    <div{{ bem('label', [], toolbar_message_block) }}>
       {{ content }}
     </div>
   </a>
 {% else %}
   <div{{ add_attributes(navigation_message_attributes) }}>
     {{ icon('navigation', type, { class: 'toolbar-message__icon', size: 20 }) }}
-    <div{{ bem('label', [], 'toolbar-message') }}>
+    <div{{ bem('label', [], toolbar_message_block) }}>
       {{ content }}
     </div>
   </div>