Quantum Viewports extends the Gutenberg BlockEditor with viewport-specific controls for standard blocks. It allows editors and developers to adjust block properties such as margin, padding, and other style attributes independently for desktop, tablet, and mobile, without needing separate CSS or media queries.
- Viewport-specific controls Adjust block styles per viewport directly in the Gutenberg sidebar.
- Keyframe-style UI Each viewport has a “keyframe” view for inspecting the CSS generated for that viewport. Styles can be reviewed, deleted, or restored per viewport.
- Developer extensibility
Add custom style renderers for blocks or themes via the
registerRendererAPI. You can control rendering order, CSS selectors, and panel/label hooks. - CSS output preview Inspect the generated CSS for each block and viewport without leaving the editor.
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.
- WordPress with Gutenberg / Block Editor enabled
- Standard blocks for full functionality (third-party blocks may need extra configuration)
Quantum Viewports adds responsive style controls to the Gutenberg block editor for mobile, tablet and desktop viewports. It is available through the official WordPress.org plugin directory and can also be installed manually or from the plugin’s GitHub repository.
- Go to your WordPress dashboard → Plugins → Add New.
- Search for Quantum Viewports.
- Click Install Now and then Activate.
- Open the Block Editor and select any block — responsive viewport controls will appear in the block inspector.
- Download the plugin ZIP from WordPress.org (Quantum Viewports page).
- In the WordPress admin go to Plugins → Add New → Upload Plugin.
- Choose the ZIP file and click Install Now.
- Activate the plugin.
- Download the latest ZIP from https://github.com/Quantum-Press/Viewports/releases
- Extract the
quantum-viewports-plugin.ziptowp-content/plugins/quantum-viewports - Activate the plugin via Plugins → Installed Plugins.
- Select a block in the editor.
- Open the block sidebar to access block settings.
- Adjust styles for the current viewport.
- Switch between viewports (desktop, tablet, mobile) using the viewport toggle.
- Adjust styles per viewport – changes are automatically applied for that screen size, effectively generating the necessary media queries.
- Supports standard block properties like dimensions, spacing, border, shadow, and other configurable style attributes.
- Works best on desktop; preview behavior may vary on mobile previews.
- Changes are saved per viewport and applied automatically.
Quantum Viewports provides JavaScript and PHP APIs for registering custom style attributes. Once registered, the built-in StyleEngine automatically tracks your custom attributes.
Documentation: https://quantum-press.com/en/documentation/