Generated with the help of an LLM.
Problem/Motivation
The Rivet Billboard template applies the rvt-cta component class to the link field's render array:
{{ link|merge({'#attributes':{'class':['rvt-cta']}}) }}
Because link is the complete rivet_billboard_link field render array, its #attributes are rendered on Drupal's field wrapper rather than on the actual anchor.
The resulting markup is effectively:
<div class="field field--name-rivet-billboard-link rvt-cta">
<div class="field__item">
<a href="/example">Learn more</a>
</div>
</div>
The expected markup is:
<div class="field field--name-rivet-billboard-link">
<div class="field__item">
<a class="rvt-cta" href="/example">Learn more</a>
</div>
</div>
Rivet's CTA styling, arrow pseudo-element, hover behavior, and focus behavior are intended for the interactive link. Applying the class to the field wrapper instead causes those styles and states to be associated with a non-interactive element. Wrapper styles such as Drupal's clearfix pseudo-element can also interfere with the CTA decoration and spacing.
This behavior is present in IU Paragraphs 2.2.7 and predates the current Rivet theme releases. It is not caused by the separate Rivet CSS-order regression.
Steps to reproduce
- Install IU Paragraphs 2.2.7 with a Rivet-based theme.
- Create content containing a Rivet Billboard paragraph.
- Provide a title, body, and link for the Billboard.
- View the rendered paragraph.
- Inspect the Billboard link markup.
- Observe that
rvt-ctais on the link field wrapper and is absent from the rendered<a>element.
Expected result: The Billboard's anchor has the rvt-cta class and receives Rivet's CTA presentation and interactive states.
Actual result: The field wrapper has the rvt-cta class while the anchor renders as an ordinary link.
Proposed resolution
Add the class to the link formatter's anchor attributes in a field preprocess function:
function iu_paragraphs_preprocess_field__rivet_billboard_link(&$variables) {
if (!empty($variables['items'][0])) {
$variables['items'][0]['content']['#options']['attributes']['class'][] = 'rvt-cta';
}
}
Render the field normally in paragraph--rivet-billboard.html.twig:
{{ link }}
This preserves Drupal's field wrapper while placing the Rivet component class on the interactive element it is intended to style.
A first-pass patch has been browser-validated with Drupal 11.4 and IU Paragraphs 2.2.7. The wrapper no longer receives rvt-cta, the anchor receives the class, and the CTA arrow and spacing render as expected.
Remaining tasks
- [x] Reproduce and identify the incorrect class placement
- [x] Prepare and browser-test a first-pass fix
- [ ] Add automated rendering coverage for a Billboard containing a link
- [ ] Assert that
rvt-ctais present on the anchor - [ ] Assert that
rvt-ctais absent from the field wrapper - [ ] Verify that an empty optional link field produces no warnings
- [ ] Review and merge
User interface changes
Corrects the rendered Billboard CTA styling and interactive behavior. There are no changes to the content-editing interface.
API changes
None.
Data model changes
None.
Issue fork iu_paragraphs-3636983
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #4
jwilson3