Home » Documentation » DataStore Structure

DataStore Structure

The Quantum Viewports system manages viewport-specific styles in a centralized WordPress data store. This store holds both the editor state and the computed style state for blocks, allowing responsive styles to be applied consistently across editor preview, frontend rendering, and server-side output.

Table of Contents

Call the DataStore

It is available with the store name: quantumpress/viewports
For example:

wp.data.select( 'quantumpress/viewports' );

Base Structure

The store is initialized with a default state that provides baseline values for viewports, block styles, and editor interaction flags. Key properties include:

  • viewports – a list of predefined viewport widths paired with human-readable labels.
    The configuration can be extended via a constant QUANTUM_VIEWPORTS_EXTENDED=true in your wp-config.php file or .env file. In later releases, the selection of viewports will be editable in the UI.
  • viewport / iframeViewport – the currently selected viewport or 0 for default.
  • isActive / isSaving / isLoading – flags that track simulation and saving processes.
  • desktop / tablet / mobile – default numerical viewport breakpoints for desktop, tablet, and mobile.
  • saves / changes / removes / valids / defaults – objects keyed by block clientId representing the saved state, editor changes, explicit removals, validated styles, and default styles.
  • renderer – mapping of style properties to registered renderers, each with a callback function, panel and group associations, and optional block-specific mappings.
  • lastEdit – timestamp of the last block edit, used to synchronize the interface.

In future releases, changes and removals will be mirrored in the block attributes to enable full undo/redo support via the editor history.

Viewport Configuration

Default viewport values are provided for desktop, tablet, and mobile.

  • Desktop: 1360px (default)
  • Tablet: 780px (default)
  • Mobile: 360px (default)

Using a constant in your wp-config.php will extend the viewport selection: QUANTUM_VIEWPORTS_EXTENDED=true

SpectrumSets and CSS Generation

Each block’s style rules are resolved into SpectrumSets, which represent the computed style state per viewport. SpectrumSets are derived from the combination of:

  • saved values (saves)
  • validated styles (valids)
  • explicit removals (removes)
  • editor changes (changes)

In future versions, each Spectrum object will be defined as a class to increase accessibility and allow programmatic manipulation. CSS is generated from these SpectrumSets using the registered renderers and is stored in the cssSet property of the store.

Actions and Selectors

Interactions with the store are performed through Actions and Selectors:

  • Actions are used to update the store, such as applying new style changes or registering a block.
  • Selectors provide derived state, including resolved CSS, active viewport styles, and computed SpectrumSets.