## Flow Blocks & Conditional Logic

Flow renders the whole form as one coordinated React tree, so blocks are authoring primitives for a single runtime rather than isolated frontend widgets.

Top-level Flow blocks now include **Form**, **Content Root**, and **Modal**.

- **Form** is the interactive shadow-root/Mantine runtime for submission flows.
- **Content Root** is the shadow-root display/runtime surface for non-form Flow content.
- **Modal** is a light-DOM native `<dialog>` shell for reusable page overlays, trigger-driven confirmations, and host-page controlled content.

Flow also includes a **Gallery** block for modal/lightbox layouts. It accepts `core/image` inner blocks, stays in the light DOM instead of the Mantine shadow-root runtime, can show previous/next controls plus optional thumbnails/captions/counter, and can start on a specific image when the opener wrapper includes `wps-flow-gallery-target--{galleryId}` and `wps-flow-gallery-index--N`.

Container blocks include **Group**, **Grid**, **Stack**, **Fieldset**, **Collapse**, **Wizard**, **Wizard Step**, **Success State**, **Visually Hidden** and **Divider**.

Field and action blocks include **Text**, **Textarea**, **Select**, **Checkbox**, **Checkbox Group**, **Date**, **Switch**, **Number**, **Radio**, **Password**, **PIN**, **Color**, **File**, **Slider**, **Range Slider**, **Tags**, **Rating**, **AI Suggestions**, **Submission Meta**, **Save Draft Button** and **Submit Button**.

The newer runtime-oriented pieces are worth calling out:

- **Wizard / Wizard Step**: multi-step flows with per-step validation and optional stepper navigation.
- **Success State**: dedicated post-submit or post-AI-acceptance screens.
- **AI Suggestions**: frontend suggestions with accept/reject/continue behavior and optional knowledge-base support.
- **Submission Meta**: renders backend response metadata inside confirmation screens.
- **Save Draft Button**: persists drafts for later resume.
- **Modal**: a top-level light-DOM wrapper that uses the browser's dialog layer instead of the Flow shadow-root runtime, so outer-page triggers, hash navigation, and static-export-friendly overlays work without a Mantine shell.
- **Gallery**: a light-DOM, Mantine-free gallery/lightbox block with a Gutenberg helper panel for generating the trigger classes needed to open a modal on a specific slide.

Conditional logic supports the usual visibility and value operators, but it can also react to AI-specific runtime state such as whether suggestions already ran, were accepted or were rejected.

In Gutenberg, the Form toolbar can preview a chosen wizard step or success state directly, which makes deep form editing much faster.