內容簡介
**總結：**
Quantum Viewports 是一個 WordPress 外掛，可以擴展原生的 Gutenberg 區塊，提供具有響應式樣式控制的功能，而無需使用額外的區塊。這個外掛與標準區塊組件直接集成，不像其他外掛會添加自定義區塊或重複組件。
**問題與答案：**
1. Quantum Viewports 與其他外掛的不同之處是什麼？
- Quantum Viewports 與標準區塊組件直接集成，無需添加自定義區塊或重複組件。
2. Quantum Viewports 提供的主要功能有哪些？
- 能與所有區塊主題實時集成。
- 直接將響應式控制（手機、平板電腦、桌面）添加到區塊樣式中，包括邊距、填充、邊框、陰影、背景和自定義屬性。
- 將所有生成的樣式包裝為 CSS 類，以獲得整潔的前端輸出。
- 應用以行動優先的方式進行設置：根據編輯時處於活動狀態的視圖範圍，應用設置到適當的視圖範圍。
- 包括 Keyframe-style 用戶界面，可以預覽、重置或管理每個視圖範圍的響應式樣式。
- 包括開發者友好的 API（registerRenderer），可以附加自定義樣式組件（目前僅支持 JavaScript）。
3. Quantum Viewports 目前處於哪個階段？他們歡迎什麼樣的反饋？
- Quantum Viewports 目前處於早期訪問階段。
- 他們正在收集真實世界的反饋，以確保對不同主題和編輯器配置具有更廣泛的兼容性。
- 如果用戶遇到任何意外情況、成功故事、問題或不同的主題設置，他們希望聽到您的觀點。
4. Quantum Viewports 的前端結果是怎樣的？
- 儲存並預覽時，邊距會自適應：行動端為 20px，平板電腦為 40px，桌面為 60px。
- 所有樣式都被包裝在 CSS 類中，遵循以行動為先的模式，最適任何區塊主題。
外掛標籤
開發者團隊
📦 歷史版本下載
原文外掛簡介
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
Insert a Paragraph block
Open the Block Editor and add a Paragraph block.
Mobile View (base, 0px)
Select the Paragraph → open Styles panel → Spacing → Margin → Bottom.
Set margin to 20px.
This applies from 0px up, used as the baseline for all viewports.
Tablet View (override, min-width tablet)
Switch to Tablet viewport.
Change bottom margin to 40px.
This applies from the tablet breakpoint upwards, including Desktop.
A Keyframe marker appears for Tablet.
Desktop View (optional, min-width only)
Switch to Desktop viewport.
To apply changes only to Desktop, toggle “Edit on min-width”.
Set bottom margin to 60px.
Now a Media Query is generated for Desktop only.
Tablet margin remains 40px, Mobile margin remains 20px.
Frontend Result
Save and preview.
Margins adapt: Mobile 20px, Tablet 40px, Desktop 60px.
All styles are wrapped in CSS classes, mobile-first, optimized for any Block Theme.
Feedback and Issues
GitHub Repository: https://github.com/Quantum-Press/Viewports
Contact: https://quantum-press.com/en/contact
