Issue #3368764 by pdureau: Replace PHP hooks by Twig filters

templates/overrides/system/item-list.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation for an item list.
+ *
+ * Available variables:
+ * - items: A list of items. Each item contains:
+ *   - attributes: HTML attributes to be applied to each list item.
+ *   - value: The content of the list element.
+ * - title: The title of the list.
+ * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
+ * - attributes: HTML attributes to be applied to the list.
+ * - empty: A message to display when there are no items. Allowed value is a
+ *   string or render array.
+ * - context: A list of contextual data associated with the list. May contain:
+ *   - list_style: The custom list style.
+ *
+ * @see template_preprocess_item_list()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if context.list_style %}
+  {%- set attributes = attributes.addClass(['item-list__' ~ context.list_style, 'mzp-u-list-styled']) %}
+{% endif %}
+{% if items or empty %}
+  {%- if title is not empty -%}
+    <h3>{{ title }}</h3>
+  {%- endif -%}
+
+  {%- if items -%}
+    <{{ list_type }}{{ attributes }}>
+      {%- for item in items -%}
+        <li{{ item.attributes }}>{{ item.value }}</li>
+      {%- endfor -%}
+    </{{ list_type }}>
+  {%- else -%}
+    {{- empty -}}
+  {%- endif -%}
+{%- endif %}

templates/overrides/system/table.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation to display a table.
+ *
+ * Available variables:
+ * - attributes: HTML attributes to apply to the <table> tag.
+ * - caption: A localized string for the <caption> tag.
+ * - colgroups: Column groups. Each group contains the following properties:
+ *   - attributes: HTML attributes to apply to the <col> tag.
+ *     Note: Drupal currently supports only one table header row, see
+ *     https://www.drupal.org/node/893530 and
+ *     http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_table/7#comment-5109.
+ * - header: Table header cells. Each cell contains the following properties:
+ *   - tag: The HTML tag name to use; either 'th' or 'td'.
+ *   - attributes: HTML attributes to apply to the tag.
+ *   - content: A localized string for the title of the column.
+ *   - field: Field name (required for column sorting).
+ *   - sort: Default sort order for this column ("asc" or "desc").
+ * - sticky: A flag indicating whether to use a "sticky" table header.
+ * - rows: Table rows. Each row contains the following properties:
+ *   - attributes: HTML attributes to apply to the <tr> tag.
+ *   - data: Table cells.
+ *   - no_striping: A flag indicating that the row should receive no
+ *     'even / odd' styling. Defaults to FALSE.
+ *   - cells: Table cells of the row. Each cell contains the following keys:
+ *     - tag: The HTML tag name to use; either 'th' or 'td'.
+ *     - attributes: Any HTML attributes, such as "colspan", to apply to the
+ *       table cell.
+ *     - content: The string to display in the table cell.
+ *     - active_table_sort: A boolean indicating whether the cell is the active
+         table sort.
+ * - footer: Table footer rows, in the same format as the rows variable.
+ * - empty: The message to display in an extra row if table does not have
+ *   any rows.
+ * - no_striping: A boolean indicating that the row should receive no striping.
+ * - header_columns: The number of columns in the header.
+ *
+ * @see template_preprocess_table()
+ *
+ * @ingroup themeable
+ */
+#}
+<table{{ attributes.addClass("mzp-u-data-table") }}>
+  {% if caption %}
+    <caption>{{ caption }}</caption>
+  {% endif %}
+
+  {% for colgroup in colgroups %}
+    {% if colgroup.cols %}
+      <colgroup{{ colgroup.attributes }}>
+        {% for col in colgroup.cols %}
+          <col{{ col.attributes }} />
+        {% endfor %}
+      </colgroup>
+    {% else %}
+      <colgroup{{ colgroup.attributes }} />
+    {% endif %}
+  {% endfor %}
+
+  {% if header %}
+    <thead>
+      <tr>
+        {% for cell in header %}
+          <{{ cell.tag }}{{ cell.attributes }}>
+            {{- cell.content -}}
+          </{{ cell.tag }}>
+        {% endfor %}
+      </tr>
+    </thead>
+  {% endif %}
+
+  {% if rows %}
+    <tbody>
+      {% for row in rows %}
+        <tr{{ row.attributes }}>
+          {% for cell in row.cells %}
+            <{{ cell.tag }}{{ cell.attributes }}>
+              {{- cell.content -}}
+            </{{ cell.tag }}>
+          {% endfor %}
+        </tr>
+      {% endfor %}
+    </tbody>
+  {% elseif empty %}
+    <tbody>
+      <tr>
+        <td colspan="{{ header_columns }}">{{ empty }}</td>
+      </tr>
+    </tbody>
+  {% endif %}
+  {% if footer %}
+    <tfoot>
+      {% for row in footer %}
+        <tr{{ row.attributes }}>
+          {% for cell in row.cells %}
+            <{{ cell.tag }}{{ cell.attributes }}>
+              {{- cell.content -}}
+            </{{ cell.tag }}>
+          {% endfor %}
+        </tr>
+      {% endfor %}
+    </tfoot>
+  {% endif %}
+</table>

templates/patterns/billboard/pattern-billboard.html.twig

@@ -4,7 +4,7 @@
 
 <div{{ attributes.addClass('mzp-c-billboard') }}>
   <div class="mzp-c-billboard-image-container">
-    {{ image }}
+    {{ image|add_class('mzp-c-billboard-image') }}
   </div>
   <div class="mzp-c-billboard-content">
     <div class="mzp-c-billboard-content-container">
@@ -15,7 +15,7 @@
         {% if desc %}
         <p class="mzp-c-billboard-desc">{{ desc }}</p>
         {% endif %}
-        {{ cta_link }}
+        {{ cta_link|add_class('mzp-c-cta-link') }}
       </div>
     </div>
   </div>

templates/patterns/card/pattern-card.html.twig

@@ -10,7 +10,7 @@
   {% endif %}
   {% if image %}
   <div class="mzp-c-card-media-wrapper">
-    {{ image }}
+    {{ image|add_class("mzp-c-card-image") }}
   </div>
   {% endif %}
   <div class="mzp-c-card-content">

templates/patterns/menu_item/pattern-menu_item.html.twig

@@ -3,7 +3,7 @@
   {% if title or desc %}
   <div class="mzp-c-menu-item-link">
     {% if icon %}
-      {{ icon }}
+      {{ icon|add_class('mzp-c-menu-item-icon') }}
     {% endif %}
     {% if title %}
     <h{{ heading_level|default(4) }} class="mzp-c-menu-item-title">{{ title }}</h{{ heading_level }}>

templates/patterns/split/pattern-split.html.twig

@@ -11,7 +11,7 @@
       {{ body }}
     </div>
     <div class="mzp-c-split-media ">
-      {{ media }}
+      {{ media|add_class('mzp-c-split-media-asset') }}
     </div>
   </div>
 </section>

ui_suite_protocol.theme

@@ -9,46 +9,11 @@ declare(strict_types = 1);
 
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Render\Element;
-use Drupal\Core\Template\Attribute;
-
-/**
- * Add a value into the class attributes of a given element.
- *
- * Assumes element is an array.
- * Inspired by: https://www.drupal.org/node/3334294
- *
- * @param array $element
- *   An array.
- * @param string[]|string ...$classes
- *   The classes to add on element. Arguments can include string keys directly,
- *   or arrays of string keys.
- *
- * @return array
- *   The element with the given class(es) in attributes.
- */
-function _ui_suite_material_add_class(array $element, ...$classes): array {
-  if (\array_is_list($element)) {
-    foreach ($element as $index => $item) {
-      if (!\is_array($item)) {
-        continue;
-      }
-      $element[$index] = _ui_suite_material_add_class($item, ...$classes);
-    }
-    return $element;
-  }
-  $attributes = new Attribute($element['#attributes'] ?? []);
-  $attributes->addClass(...$classes);
-  $element['#attributes'] = $attributes->toArray();
-  return $element;
-}
 
 /**
  * Implements hook_preprocess_HOOK() for 'pattern_card'.
  */
 function ui_suite_protocol_preprocess_pattern_card(array &$variables): void {
-  if (array_key_exists('image', $variables) && is_array($variables['image'])) {
-    $variables['image'] = _ui_suite_material_add_class($variables['image'], 'mzp-c-card-image');
-  }
   // Disable link wrapping in layout builder.
   if (array_key_exists('link', $variables) && is_array($variables['link'])) {
     if (array_key_exists('layout_builder_add_block', $variables['link'])) {
@@ -57,38 +22,6 @@ function ui_suite_protocol_preprocess_pattern_card(array &$variables): void {
   }
 }
 
-/**
- * Implements hook_preprocess_HOOK() for 'pattern_billboard'.
- */
-function ui_suite_protocol_preprocess_pattern_billboard(array &$variables): void {
-  if (array_key_exists('image', $variables) && is_array($variables['image'])) {
-    $variables['image'] = _ui_suite_material_add_class($variables['image'], 'mzp-c-billboard-image');
-  }
-  if (array_key_exists('cta_link', $variables) && is_array($variables['cta_link'])) {
-    $variables['cta_link'] = _ui_suite_material_add_class($variables['cta_link'], 'mzp-c-cta-link');
-  }
-}
-
-/**
- * Implements hook_preprocess_HOOK() for 'pattern_split'.
- */
-function ui_suite_protocol_preprocess_pattern_split(array &$variables): void {
-  if (array_key_exists('media', $variables) && is_array($variables['media'])) {
-    $variables['media'] = _ui_suite_material_add_class($variables['media'], 'mzp-c-split-media-asset');
-
-  }
-}
-
-/**
- * Implements hook_preprocess_HOOK() for 'pattern_menu_item'.
- */
-function ui_suite_protocol_preprocess_pattern_menu_item(array &$variables): void {
-  if (array_key_exists('icon', $variables) && is_array($variables['icon'])) {
-    $variables['icon'] = _ui_suite_material_add_class($variables['icon'], 'mzp-c-menu-item-icon');
-
-  }
-}
-
 /**
  * Implements hook_form_alter().
  */
@@ -103,20 +36,6 @@ function ui_suite_protocol_form_alter(array &$form, FormStateInterface $form_sta
   }
 }
 
-/**
- * Implements hook_preprocess_HOOK() for 'table'.
- */
-function ui_suite_protocol_preprocess_table(array &$variables): void {
-  $variables['attributes']['class'][] = 'mzp-u-data-table';
-}
-
-/**
- * Implements hook_preprocess_HOOK() for 'item_list'.
- */
-function ui_suite_protocol_preprocess_item_list(array &$variables): void {
-  $variables['attributes']['class'][] = 'mzp-u-list-styled';
-}
-
 /**
  * Implements hook_preprocess_HOOK() for 'image'.
  *