feat(ARC-3816): HetArchief quote block by RobbeBierebeeck · Pull Request #371 · viaacode/react-admin-core-module

RobbeBierebeeck · 2026-08-06T08:25:27Z

ARC-3816 · FA: Aanpassingen bestaande contentblokken · Figma

Adds a second quote visualisation for hetarchief.be as its own block type, HETARCHIEF_QUOTE. The existing AvO quote block is untouched and keeps running alongside it.

What's here

BlockHetArchiefQuote — pill-framed quote: square left corners, 400px right radius, a meemoocons-light quote glyph, the quote, and an optional author. Frame colour and text colour travel to CSS as custom properties. Desktop and mobile both built from the Figma nodes (455:5722 / 455:7186).
ContentBlockType.Quote renamed to AvoQuote. The enum value stays 'QUOTE', mirroring the existing AvoHero = 'HERO', so no stored content page is affected.
New SOLID_COLOR_FIELD helper (+ GET_SOLID_COLOR_OPTIONS_ARCHIEF / _AVO) — the background-colour list minus the entries that are not a plain CSS colour. Used for both of this block's pickers.
Bug fix in defaults.ts — the three colour-field helpers had defaultValue || isAvo() ? A : B, which parses as (defaultValue || isAvo()) ? A : B and silently discarded an explicitly passed defaultValue.
Translations — the four new keys are in ui/src/shared/translations/hetArchief/nl.json, scoped [HET_ARCHIEF] so they are not extracted into the AvO set.
The FA's third picker, "Achtergrondkleur contentblok", needed no new field: BLOCK_FIELD_DEFAULTS() already provides it and BLOCK_STATE_DEFAULTS initialises it to Transparent ("geen").

Deliberate deviation from the FA — needs a PO nod

The FA specifies that Tekstkleur and Kleur kader offer "bestaande achtergrondkleuren uit het contentblok Quote + uitbreidingen", i.e. the full 19-entry background list. Three of those entries are not usable here:

Value	As Tekstkleur	As Kleur kader
`Geen` (`TRANSPARENT`)	text invisible	frame invisible
`meemoo logo` (`<MEEMOO_LOGO>`)	invalid CSS, colour inherited	no frame
`Overgang zwart wit` (gradient)	invalid CSS, colour inherited	renders, but not a flat fill

Both pickers therefore use SOLID_COLOR_FIELD, which drops those three and keeps everything else including all ten tertiary colours. Covered by tests in defaults.test.ts. If the FA owner wants the literal full list back, that is a one-line swap to BACKGROUND_COLOR_FIELD.

Reviewer notes

This rename is source-breaking for both consumer apps. ContentBlockType.Quote is referenced by:

hetarchief-client/src/modules/admin/wrappers/admin-core-config.tsx:78
avo2-client/src/admin/shared/hoc/with-admin-core-config.const.tsx:103

Both need the reference renamed on their next bump. The avo2-client side is out of scope here and its team should be told.

Release needs a minor/major bump, not a patch. npm run bump defaults to --part=patch.

Side effect of the defaults.ts fix. Three pre-existing call sites pass GET_BACKGROUND_COLOR_OPTIONS_*()[1] (white): BLOCK_FIELD_DEFAULTS().backgroundColor, BlockCTAs, BlockCardsWithoutDescription. They previously resolved to [0] (Transparent) because of the bug. They now resolve to white — but only as the displayed fallback when a stored value is missing from the options list; nothing is persisted or re-rendered differently. This matches those authors' evident intent.

The block responds to viewport width, not container width. Correct on the public page; in the CMS preview pane it keeps the desktop layout when the pane is narrow. A container query would fix it — not done, since the Figma does not cover it.

Depends on

viaacode/hetarchief-hasura#409 — the HETARCHIEF_QUOTE enum row must exist before a page using the block can be saved.

Verification

npm run type-check 0 · npx biome ci . 0 · npm test 76 passed, 1 failed (sanitize.test.ts, pre-existing on release/v6.0.0) · stylelint clean on the new SCSS. Rendered and checked in hetarchief-client against both Figma nodes.

🤖 Generated with Claude Code

…helpers

… textColor - BlockHetArchiefQuote: render the meemoocons-light ligature via the literal word "quotes" instead of U+201D, which the icon font has no glyph for. font-feature-settings/font-variant-ligatures enable the ligature, with a sans-serif fallback since admin-core doesn't ship the font. - Rename HetarchiefQuote symbols to HetArchiefQuote casing to match sibling HetArchief* blocks (enum VALUE and tText keys stay byte-identical). - Fix the 6 biome ci regressions: reorder the Avo quote block's imports/exports back beside BlockAvoHero, and reformat the wrapped tText call. - Widen textColor to Color | GradientColor | CustomBackground to match what BACKGROUND_COLOR_FIELD actually allows. - Use the shared $g-bp2 breakpoint instead of a hardcoded 768px value. - Clear stylelint violations in the new SCSS (unquoted font names, generic fallbacks, comment spacing, media-feature range notation). - Preserve authored line breaks in the quote text via white-space: pre-line. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

… block

RobbeBierebeeck · 2026-08-06T08:27:50Z

Closing to review locally first — will reopen once reviewed.

The background colour list contains three entries that are not a CSS colour: "Geen" (TRANSPARENT) rendered the text invisible, the meemoo logo sentinel and the black/white gradient were invalid in `color` and silently dropped the frame background.

The block writes its translation keys explicitly, so nl.json is the only place that can carry their Dutch text. Scope the keys to HET_ARCHIEF so they are not extracted into the avo translation set.

…-3816_hetarchief-quote-block # Conflicts: # ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.const.tsx # ui/src/react-admin/modules/content-page/const/content-block-config-map.ts # ui/src/react-admin/modules/content-page/const/content-block-initial-state-map.ts # ui/src/react-admin/modules/content-page/const/get-content-block-type-options.ts # ui/src/shared/translations/hetArchief/nl.json

reunefe · 2026-08-07T12:50:56Z

+			defaultValue ??
+			(isAvo() ? GET_FOREGROUND_COLOR_OPTIONS_AVO()[0] : GET_FOREGROUND_COLOR_OPTIONS_ARCHIEF()[0]),


Waarom deze change?

Die hoort hier eigenlijk niet thuis. Ik ben erover gevallen toen ik een default meegaf en die niet doorkwam: defaultValue || isAvo() ? A : B wordt gelezen als (defaultValue || isAvo()) ? A : B. Van zodra je dus een default meegeeft is die check altijd waar en krijg je sowieso de eerste AVO-kleur — de default die je meegeeft doet niets. Dat speelt vandaag ook bij BlockCTAs, BlockPageOverview, BlockCardsWithoutDescription en BlockOverviewWithCarousel. Zal ik het uit deze PR halen en apart zetten?

Zet deze inderdaad beter in een aparte PR, alsook log er een aparte bug voor met een reproductie.
Gezien dit een gedragsverandering te weeg zal brengen bij de contentblokken, zal meemoo die ook moeten testen en dat gaat niet zonder ticket.

Eruit gehaald, defaults.ts staat terug zoals op release/v6.0.0 en de test is mee verwijderd.

reunefe · 2026-08-07T12:55:58Z

Mixins gebruiken als ook variabelen. Dit ziet er ook goed uit mobiel?
Al deze vaste waardes lijken me zwaar af wijken van bestaande zaken

…lock

…mixins

reunefe

2 bijkomende vragen:

Getest samen met de client? Want daar zit nog styling: https://github.com/viaacode/hetarchief-client/blob/487de883538e4ca3d960f24be96c98628a5480c7/src/styles/admin-core/content-blocks/_quote.scss
Wat gebeurd er met de huidige ContentBlockType.QUOTE blokken die al in Het archief zitten?
- https://qas.hetarchief.be/admin/content-paginas/7b3a0603-e7eb-404a-a636-33aa8a7f1e21
- https://qas.hetarchief.be/admin/content-paginas/3ff778c6-cd6f-41ff-b96e-2a75d7e5b5b2

reunefe · 2026-08-11T06:04:09Z

+		white-space: pre-line;
+
+		// Figma node 455:5724, style "P - XL".
+		@include typography.sofia-pro(3.2rem, 500, 4rem);


Waarom gebruik je niet gewoon sofia-pro-heading-xl() en overschrijft de font-weight.
Door de mixin op deze manier te gebruiken overal, zit er op termijn nergens meer een lijn in qua consistentie. Of we moeten de bestaande verschillende types uitbreiden met degene die je nodig hebt hier en in de PR voor de content labels. Zodat het consistent blijft

Presets uitgebreid met sofia-pro-body-xl() en sofia-pro-body-xs(), het blok gebruikt die nu. heading-xl() met een weight-override vond ik minder net.

Kleine kanttekening: in _typography.scss staat dat je sofia-pro(...) rechtstreeks mag gebruiken voor een maat die er niet in staat. Dat had ik gevolgd — misschien die comment aanpassen?

Comment dan inderdaad aanpassen

reunefe · 2026-08-11T06:09:42Z

+			defaultValue ??
+			(isAvo() ? GET_FOREGROUND_COLOR_OPTIONS_AVO()[0] : GET_FOREGROUND_COLOR_OPTIONS_ARCHIEF()[0]),


Zet deze inderdaad beter in een aparte PR, alsook log er een aparte bug voor met een reproductie.
Gezien dit een gedragsverandering te weeg zal brengen bij de contentblokken, zal meemoo die ook moeten testen en dat gaat niet zonder ticket.

reunefe · 2026-08-11T06:10:29Z

+			defaultValue ??
+			(isAvo() ? GET_COLOR_OPTIONS_EXTENDED_AVO()[0] : GET_BACKGROUND_COLOR_OPTIONS_ARCHIEF()[0]),


Samen met de andere changes aan die defaultValues apart zetten en ticket voor loggen voor testing en traceability

… this pr

reunefe · 2026-08-11T07:19:20Z

Zeker validateren ivm bestaande quote blokken want op productie zijn er meerdere pagina's dit dit gebruiken:

…h apps

RobbeBierebeeck · 2026-08-11T09:41:33Z

Wat gebeurt er met bestaande QUOTE-blokken?

Niets. De rename raakt alleen de TypeScript-naam: Quote = 'QUOTE' werd AvoQuote = 'QUOTE'. De waarde blijft 'QUOTE', en de config-map, initial-state-map en renderer zijn allemaal op die waarde gekeyed. Opgeslagen pagina's blijven dus gewoon werken.

De styling in de client?

Blijft pakken. _quote.scss targeteert .c-block-quote, en BlockAvoQuote.tsx rendert nog steeds clsx('c-block-quote', className). Alleen de map- en bestandsnaam zijn veranderd, de CSS-klasse niet.

reunefe · 2026-08-11T09:44:14Z

Wat gebeurt er met bestaande QUOTE-blokken?

Niets. De rename raakt alleen de TypeScript-naam: Quote = 'QUOTE' werd AvoQuote = 'QUOTE'. De waarde blijft 'QUOTE', en de config-map, initial-state-map en renderer zijn allemaal op die waarde gekeyed. Opgeslagen pagina's blijven dus gewoon werken.

De styling in de client?

Blijft pakken. _quote.scss targeteert .c-block-quote, en BlockAvoQuote.tsx rendert nog steeds clsx('c-block-quote', className). Alleen de map- en bestandsnaam zijn veranderd, de CSS-klasse niet.

Dat is dus dan net het probleem, want de quote blokken moeten qua styling aanpassen. Maw als we de quoteblokken opsplitsen per client, dan moet er een migratie gebeuren zodat de nieuwe blokken ook naar de nieuwe styling switchen.
Tenzij de FA iets anders beschrijft?

Robbe Bierebeeck and others added 6 commits August 4, 2026 13:39

refactor(ARC-3816): rename the quote block symbols to avo quote

a55c669

fix(ARC-3816): honour the explicit default value in the colour field …

506dc42

…helpers

feat(ARC-3816): add the hetarchief quote block component

9776dc0

feat(ARC-3816): register the hetarchief quote content block

7a77b80

fix(ARC-3816): match the figma desktop and mobile specs for the quote…

f2c7d30

… block

RobbeBierebeeck closed this Aug 6, 2026

Robbe Bierebeeck added 2 commits August 6, 2026 11:48

feat(ARC-3816): add the quote block translations

b7fbb17

The block writes its translation keys explicitly, so nl.json is the only place that can carry their Dutch text. Scope the keys to HET_ARCHIEF so they are not extracted into the avo translation set.

RobbeBierebeeck reopened this Aug 6, 2026

reunefe requested review from bertyhell and reunefe and removed request for reunefe August 7, 2026 06:49

reunefe requested changes Aug 7, 2026

View reviewed changes

Robbe Bierebeeck added 3 commits August 10, 2026 21:36

refactor(content-blocks): use the shared colour lists for the quote b…

5b78f4c

…lock

style(content-blocks): rewrite the quote block styling on the shared …

5b163e2

…mixins

docs(content-blocks): document the colour and styling conventions

eb1aa13

reunefe reviewed Aug 11, 2026

View reviewed changes

reunefe requested changes Aug 11, 2026

View reviewed changes

revert(content-blocks): move the colour field defaultValue fix out of…

9692535

… this pr

Robbe Bierebeeck added 5 commits August 11, 2026 09:21

refactor(content-blocks): inline the quote block colour defaults

d50e30a

refactor(content-blocks): render the quote mark with the icon component

33211de

style(content-blocks): add the body-xl and body-xs sofia pro presets

b1df68d

fix(content-blocks): make the quote block translations app specific

98cab9f

fix(content-blocks): keep the avo quote translations available in bot…

47ff92f

…h apps

RobbeBierebeeck mentioned this pull request Aug 11, 2026

feat(content-pages): enable the hetarchief quote block viaacode/hetarchief-client#1623

Draft

		defaultValue ??
		(isAvo() ? GET_FOREGROUND_COLOR_OPTIONS_AVO()[0] : GET_FOREGROUND_COLOR_OPTIONS_ARCHIEF()[0]),

		defaultValue ??
		(isAvo() ? GET_COLOR_OPTIONS_EXTENDED_AVO()[0] : GET_BACKGROUND_COLOR_OPTIONS_ARCHIEF()[0]),

Uh oh!

Conversation

RobbeBierebeeck commented Aug 6, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's here

Deliberate deviation from the FA — needs a PO nod

Reviewer notes

Depends on

Verification

Uh oh!

RobbeBierebeeck commented Aug 6, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

reunefe left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

reunefe commented Aug 11, 2026

Uh oh!

RobbeBierebeeck commented Aug 11, 2026

Uh oh!

reunefe commented Aug 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

RobbeBierebeeck commented Aug 6, 2026 •

edited by atlassian Bot

Loading

reunefe left a comment •

edited

Loading