Experience States and Print Layout

Scope: Shared state model for Experience blocks

State Model

Block states entries are optional and support three id classes:

• Pseudo-state IDs: hover, active, focus, enabled, readonly, visited, selected, disabled
• Media state IDs: media-print, media-below-768, media-above-1200
• Generated custom IDs: sxxxxxx matching ^s[a-f0-9]{6}$

State entry shape:

• id
• name?
• activation?.when? for datum-driven states. A datum reference's path (on datumReference, or on datumCondition.datum) selects the value the state is evaluated against. Paths in the meta.* namespace (for example meta.isDirty) resolve from the datum's runtime metadata rather than the entity value.
• overrides as partial block props

Media states do not require activation expressions.

Data States

A data state applies its overrides while a datum value is set, or while it matches a condition. Use one to restyle, show or hide a block from data, for example colouring a task chip by its status.

• Add one from the block's add-state menu with Data Condition. It is available for every block type, and a block can have any number of them.
• Each data state gets a generated id (sxxxxxx), and you can rename it from its state menu.
• With the data state selected, its activation editor sets the datum the state watches and an optional condition on it. With no condition, the state is active while the datum value is truthy. Remove condition clears the activation, so the state never applies at runtime.
• In the designer, selecting any state previews its overrides, whatever its activation.
• When several active states set the same property, the state listed later wins.

Media States

Availability:

• Media states are available for all block types (Box, Link, Text, Image, Video, Audio, Button, Input, and Visualisation blocks).
• Pseudo-state availability depends on block type.

Page-Break Properties

Shared block props include print/page break controls.

These properties can be set directly on a block or through state overrides (including print-only media states).

Display and Hidden Blocks

display accepts:

• none
• inline-flex
• flex
• inline-grid
• grid

When display: none is set through a media state (for example media-print), the block is excluded for that media context and layout reflows naturally.