Use the attr() method in templates (see #7218)

Description
-----------

See https://github.com/contao/contao/pull/7209/files#r1598224759

<img width="775" alt="" src="https://github.com/contao/contao/assets/1192057/00e4aad4-2ea5-423f-8d80-c917b2b67641">

The content element templates belong to deprecated legacy elements, so I‘m not sure if we want to update these, too?

Commits
-------

b8eaf2d Use the `attr()` method in templates
01e85a5 Allow overwriting the wrapper attributes in child templates
3f428e9 Reduce duplicate code
9dcc427 Unify HtmlAttributes usage in legacy templates (see #13)
3f4899c Clean up
3e27bb5 Move the $this->extend() call to the top
a62e072 Adjust the ce_teaser.html5 template
bf5e8ee Adjust the info_default.html5 template

Co-authored-by: fritzmg <fmg@inspiredminds.at>

core-bundle/contao/templates/block/block_searchable.html5

@@ -1,13 +1,25 @@
+<?php
 
-<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass([$this->class, 'block'])
+    ->addStyle($this->style)
+    ->mergeWith($this->wrapperAttributes)
+;
 
-  <?php $this->block('headline'); ?>
-    <?php if ($this->headline): ?>
-      <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
-    <?php endif; ?>
-  <?php $this->endblock(); ?>
+?>
 
-  <?php $this->block('content'); ?>
-  <?php $this->endblock(); ?>
+<?php $this->block('wrapper'); ?>
+  <div<?= $this->wrapperAttributes ?>>
 
-</div>
+    <?php $this->block('headline'); ?>
+      <?php if ($this->headline): ?>
+        <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
+      <?php endif; ?>
+    <?php $this->endblock(); ?>
+
+    <?php $this->block('content'); ?>
+    <?php $this->endblock(); ?>
+
+  </div>
+<?php $this->endblock(); ?>

core-bundle/contao/templates/block/block_unsearchable.html5

@@ -1,15 +1,7 @@
+<?php $this->extend('block_searchable') ?>
 
-<!-- indexer::stop -->
-<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
-
-  <?php $this->block('headline'); ?>
-    <?php if ($this->headline): ?>
-      <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
-    <?php endif; ?>
-  <?php $this->endblock(); ?>
-
-  <?php $this->block('content'); ?>
-  <?php $this->endblock(); ?>
-
-</div>
-<!-- indexer::continue -->
+<?php $this->block('wrapper'); ?>
+  <!-- indexer::stop -->
+  <?php $this->parent(); ?>
+  <!-- indexer::continue -->
+<?php $this->endblock(); ?>

core-bundle/contao/templates/elements/ce_accordionSingle.html5

@@ -1,5 +1,15 @@
+<?php
 
-<section class="<?= $this->class ?> ce_accordion ce_text block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass([$this->class, 'ce_accordion', 'ce_text', 'block'])
+    ->addStyle($this->style)
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
+
+<section<?= $this->wrapperAttributes ?>>
 
   <div class="<?= $this->toggler ?>"<?php if ($this->headlineStyle): ?> style="<?= $this->headlineStyle ?>"<?php endif; ?>>
     <?= $this->headline ?>

core-bundle/contao/templates/elements/ce_accordionStart.html5

@@ -1,5 +1,15 @@
+<?php
 
-<section class="<?= $this->class ?> ce_accordion block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass([$this->class, 'ce_accordion', 'block'])
+    ->addStyle($this->style)
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
+
+<section<?= $this->wrapperAttributes ?>>
 
   <div class="<?= $this->toggler ?>"<?php if ($this->headlineStyle): ?> style="<?= $this->headlineStyle ?>"<?php endif; ?>>
     <?= $this->headline ?>

core-bundle/contao/templates/elements/ce_headline.html5

@@ -1,4 +1,14 @@
+<?php
 
-<<?= $this->hl ?> class="<?= $this->class ?>"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass($this->class)
+    ->addStyle($this->style)
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
+
+<<?= $this->hl ?><?= $this->wrapperAttributes ?>>
   <?= $this->headline ?>
 </<?= $this->hl ?>>

core-bundle/contao/templates/elements/ce_sliderStart.html5

@@ -1,5 +1,15 @@
+<?php
 
-<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass([$this->class, 'block'])
+    ->addStyle($this->style)
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
+
+<div<?= $this->wrapperAttributes ?>>
 
   <?php if ($this->headline): ?>
     <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>

core-bundle/contao/templates/elements/ce_teaser.html5

@@ -1,12 +1,20 @@
+<?php $this->extend('block_searchable'); ?>
 
-<div class="<?= $this->class ?> ce_text block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+<?php
 
-  <?php if ($this->headline): ?>
-    <h1><?= $this->headline ?></h1>
-  <?php endif; ?>
+$this->wrapperAttributes = $this
+    ->attr()
+    ->addClass('ce_text')
+    ->mergeWith($this->wrapperAttributes)
+;
 
-  <?= $this->text ?>
+$this->hl = 'h1';
+
+?>
 
+<?php $this->block('content'); ?>
+
+  <?= $this->text ?>
   <p class="more"><a href="<?= $this->href ?>" title="<?= $this->readMore ?>"><?= $this->more ?><span class="invisible"> <?= $this->headline ?></span></a></p>
 
-</div>
+<?php $this->endblock(); ?>

core-bundle/contao/templates/elements/ce_toplink.html5

@@ -1,6 +1,16 @@
+<?php
+
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass([$this->class, 'block'])
+    ->addStyle($this->style)
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
 
 <!-- indexer::stop -->
-<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+<div<?= $this->wrapperAttributes ?>>
   <a href="<?= $this->request ?>#top" title="<?= $this->title ?>"><?= $this->label ?></a>
 </div>
 <!-- indexer::continue -->

core-bundle/contao/templates/forms/form_explanation.html5

@@ -1,4 +1,13 @@
+<?php
 
-<div class="<?= $this->prefix ?> explanation<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>">
+$this->wrapperAttributes = $this
+    ->attr()
+    ->addClass([$this->prefix, 'explanation', $this->class])
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
+
+<div<?= $this->wrapperAttributes ?>>
   <?= $this->cspInlineStyles($this->generate()) ?>
 </div>

core-bundle/contao/templates/forms/form_row.html5

@@ -1,5 +1,14 @@
+<?php
 
-<div class="<?= $this->prefix ?><?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>">
+$this->wrapperAttributes = $this
+    ->attr()
+    ->addClass([$this->prefix, $this->class])
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
+
+<div<?= $this->wrapperAttributes ?>>
   <?php $this->block('label'); ?>
   <?php $this->endblock(); ?>
 

core-bundle/contao/templates/forms/form_wrapper.html5

@@ -1,6 +1,16 @@
+<?php
+
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass([$this->class, 'block'])
+    ->addStyle($this->style)
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
 
 <!-- indexer::stop -->
-<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+<div<?= $this->wrapperAttributes ?>>
 
   <?php if ($this->headline): ?>
     <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>

core-bundle/contao/templates/member/member_default.html5

@@ -1,10 +1,17 @@
+<?php $this->extend('block_unsearchable'); ?>
 
-<!-- indexer::stop -->
-<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+<?php
 
-  <?php if ($this->headline): ?>
-    <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
-  <?php endif; ?>
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass([$this->class, 'block'])
+    ->addStyle($this->style)
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
+
+<?php $this->block('content'); ?>
 
   <?php if ($this->message): ?>
     <p class="tl_confirm"><?= $this->message ?></p>
@@ -21,5 +28,4 @@
     </div>
   </form>
 
-</div>
-<!-- indexer::continue -->
+<?php $this->endblock(); ?>

core-bundle/contao/templates/member/member_grouped.html5

@@ -1,10 +1,17 @@
+<?php $this->extend('block_unsearchable'); ?>
 
-<!-- indexer::stop -->
-<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+<?php
 
-  <?php if ($this->headline): ?>
-    <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
-  <?php endif; ?>
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass([$this->class, 'block'])
+    ->addStyle($this->style)
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
+
+<?php $this->block('content'); ?>
 
   <?php if ($this->message): ?>
     <p class="tl_confirm"><?= $this->message ?></p>
@@ -30,5 +37,4 @@
     </div>
   </form>
 
-</div>
-<!-- indexer::continue -->
+<?php $this->endblock(); ?>

core-bundle/contao/templates/modules/mod_article.html5

@@ -1,8 +1,18 @@
+<?php
+
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass([$this->class, 'block'])
+    ->addStyle($this->style)
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
 
 <?php if ($this->teaserOnly): ?>
 
   <?php $this->block('alias'); ?>
-    <article class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+    <article<?= $this->wrapperAttributes ?>>
       <div class="ce_text block">
         <h2><?= $this->headline ?></h2>
         <div class="teaser">
@@ -21,7 +31,7 @@
 
 <?php else: ?>
 
-  <div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+  <div<?= $this->wrapperAttributes ?>>
     <?php if ($this->printable): ?>
       <?php $this->block('syndication'); ?>
         <!-- indexer::stop -->

core-bundle/contao/templates/modules/mod_articlenav.html5

@@ -1,10 +1,16 @@
+<?php $this->extend('block_unsearchable'); ?>
 
-<!-- indexer::stop -->
-<div class="<?= $this->class ?> pagination block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+<?php
 
-  <?php if ($this->headline): ?>
-    <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
-  <?php endif; ?>
+$this->wrapperAttributes = $this
+    ->attr()
+    ->addClass('pagination')
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
+
+<?php $this->block('content'); ?>
 
   <ul>
     <?php if ($this->first): ?>
@@ -32,5 +38,4 @@
     <?php endif; ?>
   </ul>
 
-</div>
-<!-- indexer::continue -->
+<?php $this->endblock(); ?>

core-bundle/contao/templates/modules/mod_breadcrumb.html5

@@ -1,6 +1,17 @@
+<?php
+
+$this->wrapperAttributes = $this
+    ->attr($this->cssID)
+    ->addClass([$this->class, 'block'])
+    ->addStyle($this->style)
+    ->set('aria-label', 'Breadcrumb')
+    ->mergeWith($this->wrapperAttributes)
+;
+
+?>
 
 <!-- indexer::stop -->
-<nav class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?> aria-label="Breadcrumb">
+<nav<?= $this->wrapperAttributes ?>>
 
   <?php $this->block('headline'); ?>
     <?php if ($this->headline): ?>

core-bundle/contao/templates/modules/mod_changePassword.html5

@@ -1,10 +1,6 @@
+<?php $this->extend('block_unsearchable'); ?>
 
-<!-- indexer::stop -->
-<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
-
-  <?php if ($this->headline): ?>
-    <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
-  <?php endif; ?>
+<?php $this->block('content'); ?>
 
   <?php if ($this->message): ?>
     <p class="tl_confirm"><?= $this->message ?></p>
@@ -21,5 +17,4 @@
     </div>
   </form>
 
-</div>
-<!-- indexer::continue -->
+<?php $this->endblock(); ?>