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

  1. Install IU Paragraphs 2.2.7 with a Rivet-based theme.
  2. Create content containing a Rivet Billboard paragraph.
  3. Provide a title, body, and link for the Billboard.
  4. View the rendered paragraph.
  5. Inspect the Billboard link markup.
  6. Observe that rvt-cta is on the link field wrapper and is absent from the rendered &lt;a&gt; 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-cta is present on the anchor
  • [ ] Assert that rvt-cta is 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.

Command icon 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

jwilson3 created an issue. See original summary.

  • jwilson3 committed 701e3192 on 2.2.x
    Issue #3636983 by jwilson3: Apply rvt-cta class to billboard link
    
jwilson3’s picture

Assigned: jwilson3 » Unassigned
Status: Active » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.