Skip to main content

Blocks & Conditional Logic​

Flow provides a Gutenberg-native form builder with layout/container blocks and field blocks rendered inside a single React runtime. The editor serializes the block tree into one frontend runtime definition, so the final form behaves as one coordinated application instead of many isolated dynamic blocks.

Container blocks​

Flow includes container/layout blocks such as:

  • Form
  • Group
  • Grid
  • Stack
  • Fieldset
  • Collapse
  • Wizard
  • Wizard Step
  • Success State
  • Visually Hidden
  • Divider

Light-DOM presentation blocks​

Flow also includes a Gallery block for modal/lightbox layouts. It accepts core/image inner blocks, renders in the normal document DOM rather than the Mantine shadow-root runtime, and can show previous/next controls, optional thumbnails, optional captions/counter, and a modal-aware start position.

When the gallery lives inside a Flow Modal, the opener wrapper can target it with wps-flow-gallery-target--{galleryId} and request a 1-based starting image with wps-flow-gallery-index--N. The Gutenberg sidebar also includes a helper panel that generates those class patterns for authors.

Field blocks​

Flow includes rich input/value blocks such as:

  • Text field
  • Textarea field
  • Select field
  • Checkbox group field
  • Checkbox field
  • Date field
  • Switch field
  • Number field
  • Radio field
  • Password field
  • PIN field
  • Color field
  • File field
  • Slider field
  • Range slider field
  • Tags field
  • Rating field
  • AI Suggestions
  • Submission Meta
  • Save Draft button
  • Submit button

Wizard and success-state flows​

The Wizard and Wizard Step blocks let you build multi-step forms with per-step validation, optional step navigation rules and optional progress indicators.

The Success State block lets you render a dedicated post-submit or post-AI-acceptance view instead of only showing a generic success message. This is useful when you want a richer confirmation state with next actions, submission metadata or "return to form" / "submit anyway" controls.

The editor also includes a preview control for form authors so they can preview a specific wizard step or success state directly in Gutenberg without clicking through the whole flow every time.

AI Suggestions block​

The AI Suggestions block is meant for assisted completion before final submission. It can:

  • run against a selected preset,
  • optionally use knowledge-base retrieval,
  • render multiple suggestions with confidence and related documentation,
  • support accept and reject actions,
  • allow a user to continue with a normal submit even after reviewing suggestions.

The runtime tracks AI suggestion state, which means other blocks and conditions can react to whether suggestions already ran, were accepted or were rejected.

Save Draft and submission metadata​

The Save Draft button block enables draft persistence on forms that allow drafts. The runtime can save a draft, resume it later, and optionally delete it.

The Submission Meta block is intended for success-state layouts and similar response UIs. It can render backend-provided metadata such as submission ID, status, accepted timestamp or AI-related response details.

Conditional logic​

Conditional logic can control field and container behaviour dynamically. Supported actions include show/hide, enable/disable, set required/set optional, update options, set value and clear value. Operators include equality checks, containment tests, starts/ends with, numeric comparisons, emptiness checks and membership tests such as any-of/none-of.

Flow also exposes AI-aware conditions so layouts can react to the runtime suggestion state. Typical examples:

  • show a follow-up section only after AI suggestions ran,
  • reveal manual fields when the user rejected all suggestions,
  • render an alternate success state after an AI suggestion was accepted.

Theming and presentation​

Flow forms support configurable presentation settings such as language, text direction, colour mode, primary colours, generated custom palettes and custom theme overrides. See the Theming (CSS variables) page for guidance on overriding Mantine and Flow design tokens.