canonical / canonical/vanilla-framework

[Component amendment]: Update Article block to support conditional metadata rendering (static & dynamic)

Open Beginner friendly
#5,779 3 comments 0 reactions 0 assignees View on GitHub
Priority: Medium Tier: Sites WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Component/pattern to amend

[Article block](https://github.com/canonical/vanilla-framework/blob/398afa824645f535a33355a4df7e37ee2440f566/templates/_macros/shared/vf_article_block.jinja)

related pull request: https://github.com/canonical/ubuntu.com/pull/16161

## Context

Metadata within the Article block is defined as optional.

However, based on recent findings:

Dynamic mode: the Latest News module automatically populates metadata because the Article Block always creates the metadata slot.
Static mode: the metadata slot is still rendered even when no metadata is provided, resulting in empty space.

This creates inconsistency between expected behavior (optional metadata) and actual rendering.

## Proposal

To address this, update the Article Block to conditionally render metadata is needed:

Dynamic mode: Do not create/render metadata container/slot if metadata is explicitly disabled.
Static mode: Do not render metadata container if no metadata is provided.

Contributor guide

Open the contributing guide

Research direction

Start with templates/_macros/shared/vf_article_block.jinja and inspect how the Article block creates its metadata container in dynamic and static modes. Update the rendering conditions so disabled dynamic metadata and absent static metadata do not produce a container or empty space, then verify both modes against the behavior described in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.