Quantum Viewports
Quantum Viewports extends the native Gutenberg blocks with responsive style controls without using extra blocks. Unlike other plugins that add custom blocks or duplicate components, Quantum Viewports integrates directly with the standard block components . Key Features: – Works with all Block Themes
Quantum Viewports extends the native Gutenberg blocks with responsive style controls without using extra blocks. Unlike other plugins that add custom blocks or duplicate components, Quantum Viewports integrates directly with the standard block components .
Key Features: – Works with all Block Themes out-of-the-box – Adds responsive controls (mobile, tablet, desktop) directly into block styles for margin, padding, border, shadow, background, and custom properties – Wraps all generated styles into CSS classes for clean frontend output – Built with a mobile-first approach : settings are applied to the appropriate viewport depending on which viewport is active while editing – Includes a Keyframe-style UI to preview, reset, or manage responsive styles per viewport – Includes a developer-friendly API ( registerRenderer ) to attach custom style components (currently JavaScript only)
Early Access – Feedback Welcome
Quantum Viewports is currently in active Early Access . The responsive style engine already works well with many Block Themes, but we are still gathering real-world feedback to ensure broader compatibility across different themes and editor configurations .
If you encounter something unexpected. A great success story, a bug, or a theme setup that behaves differently, we would love to hear from you. Every report helps us shape a reliable and truly native solution for responsive Block Styles in the WordPress ecosystem.
Getting Started
Example: Adjusting paragraph spacing with mobile-first and breakpoints
- 01Insert a Paragraph block Open the Block Editor and add a Paragraph block.
- 02Mobile View (base, 0px) Select the Paragraph → open Styles panel → Spacing → Margin → Bottom .
- 03Set margin to 20px .
- 04This applies from 0px up , used as the baseline for all viewports.
- 05Tablet View (override, min-width tablet) Switch to Tablet viewport .
- 06Change bottom margin to 40px .
- 07This applies from the tablet breakpoint upwards , including Desktop.
- 08A Keyframe marker appears for Tablet.
- 09Desktop View (optional, min-width only) Switch to Desktop viewport.
