feat(Quote): Quote wrapper pattern uses new grid; build quote block

[jmuzina]

Done

• Enables embedding the pattern in future patterns
  • Updates the quote wrapper pattern to use the new 4/4/8 grid.
  • Refactors the quote wrapper pattern to use blocks. These blocks could be consumed by other patterns in the future.
  • Simplifies the use of separators (p-rule) inside the quote wrapper (see thread)
    • Top rule is a default rule, instead of a highlighted rule.
    • Removed muted rules within the quote block. Muted rules will only be used to separate quote blocks from each other when the pattern supports multiple quotes.
  • Removed the shallow section spacing around quote text (it is no longer present in the design)

Fixes #5589
Fixes WD-23969

QA

• Use quote examples and Percy to compare the examples against the design.
  • Please be sure to check on all 3 breakpoints and carefully look at all examples in the example set. Pay special attention to the use of horizontal rules, spacing beneath quote text, and grid column distribution of signpost column & quote body.
  • To see the grid distribution change, compare before and after on the medium breakpoint.
• Open quote block examples and match it against the design.
  • default
  • no signpost
• Review release notes

Check if PR is ready for release

If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention
  • if existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.X)
  • if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the what's new page.

[webteam-app]

Demo

Jenkins

demos.haus

[kim-isaac]

Thanks @jmuzina , Looks nice!
I have two comments below:

• At the medium dimension, the title and link should each expand to 100% width and stack vertically. (please check the figma file)
• Could I we have an example screens showing 2 or more blocks together? I'd like to verify whether the muted rule appears between them

Thanks again!

[jmuzina]

At the medium dimension, the title and link should each expand to 100% width and stack vertically. (please check the figma file)

Thanks for pointing this out, I've adjusted accordingly:

Screencast.from.2025-11-20.09-55-44.webm

Could I we have an example screens showing 2 or more blocks together? I'd like to verify whether the muted rule appears between them

@kim-isaac This PR doesn't add support for quote wrappers with multiple quote blocks, as that would change the API of the pattern. I'd suggest this can be done in a follow-up. In the current PR, the quote wrapper will never have muted rules, because there is only ever one block. However, I have prepared the pattern to support multiple blocks by exposing a has_divider setting at the block level, which the quote wrapper pattern could set to True for quote blocks after the first one.

https://github.com/jmuzina/vanilla-framework/blob/bebae8899eec8a2823095e396a6584874f59e8ea/templates/_macros/vf_quote-wrapper.jinja#L284-L285

[kim-isaac]

@jmuzina Thank you for the update!

My concern about the second part is that, if two or more quotes appear within a single section, they may all be treated as the first block and come without the rule for all of them (live site example)

If that’s the case, then until we support multiple quote blocks within the pattern, I think we should keep the rule visible even on the first block.

[jmuzina]

@kim-isaac

My concern about the second part is that, if two or more quotes appear within a single section, they may all be treated as the first block and come without the rule for all of them (live site example)

If that’s the case, then until we support multiple quote blocks within the pattern, I think we should keep the rule visible even on the first block.

I'd like to clarify which rules we're talking about here. This pattern currently has two HRs:

• default rule(formerly highlighted) at the top of the pattern above the title, spanning the grid
• muted rule above quote text, spanning the second 75%. Should only be shown on non-first blocks.

Since this pattern's initial implementation, that top (default) rule has only been shown if a title is present. This remains the case now.

I've taken advantage of this for the time being by only showing the muted rule if no title row is present, which seems to be the case for users who are rendering quote patterns one after another, as you linked. The result is that we can remove the muted rule from quotes with title rows (these are always the first block as far as I understand) and keep it for quotes without title rows. Here's an example. Does this work? If so, quote wrapper could benefit from the new approach to rules early (refactoring it to use two blocks will be much more effort).

Alternatively, I can always render the muted rule.

[kim-isaac]

@jmuzina Thanks for the explanation!
Given the structure you described, it sounds like updating the pattern won’t cause any issues on the live pages. That’s reassuring :) I'll add +1 with the current structure you've shared!