Brochures Block

tibi/brochures and tibi/brochure create the brochure/material order flow. Editors manage the orderable items; the frontend app collects an order and sends email notifications through a WordPress REST endpoint.

Last modified: July 9, 2026

link Summary

Item	Value
Parent block	`tibi/brochures`
Child block	`tibi/brochure`
Parent editor title	`Brochures`
Child editor title	`Brochure`
Frontend app	`packages/wordpress/themes/tibi/src/brochures.tsx`
Block source	`packages/wordpress/plugins/tibi-block-library/src/brochures/`, `src/brochure/`
REST endpoint	`POST /wp-json/tibi/v1/submit-order`

link Editor Usage

Add one Brochures parent block, then add one Brochure child block for each orderable item.

Parent fields:

Attribute	Purpose
`title`	Form heading.
`description`	Introductory text.
`thankYouPageMessage`	Confirmation message after successful order.

Child fields:

Attribute	Purpose
`title`	Brochure/material name.
`description`	Description shown to users.
`attachmentId` / `attachmentUrl`	Downloadable file, normally a PDF.
`mediaId` / `mediaUrl`	Image shown for the item.
`langNb`	Bokmal quantity option.
`langNn`	Nynorsk quantity option.
`langEn`	English quantity option.

link Frontend Flow

The block renders:

#brochures-container
#brochures-data
#brochures

The PHP render callback serializes child brochure block data into #brochures-data. The React app reads that data and renders a three-step flow:

Velg materiell
Bestilling
Bekreftelse

link Submission Flow

The frontend posts JSON to:

POST /wp-json/tibi/v1/submit-order

Required request fields:

name
phone
email
address
town
zipCode

The endpoint sends:

Email	Value
Internal recipient	`nlb-utlaan@nb.no`
Internal subject	`Brosjyreskjema`
User subject	`Takk for din bestilling!`
Sender	`Tibi <utlaan-tibi@nb.no>`

Orders are emailed. They are not stored as WordPress entries.

link QA Checklist

Test on stage: https://beta.tibi.no.
Confirm each brochure has the correct file, image, title, and language toggles.
Place a test order and confirm the confirmation screen appears.
Confirm the internal order email contains the selected quantities.
Confirm the user confirmation email is sent.
Confirm required field errors are shown and focusable.

link When To Ask A Developer

Ask a developer before changing email recipients, sender address, required fields, order storage behavior, or the REST endpoint.