內容簡介
總結：ReadEase提供了一個名為Text Resizer的簡單、本地化的Gutenberg區塊，針對區塊主題建構者，讓網站訪客可以控制文字大小。該區塊設計符合無障礙準則，可幫助您的網站達到WCAG 2.1文字調整準則，為需要更大文字的訪客提供無縫體驗。
問題與答案：
1. ReadEase的Text Resizer是針對哪些使用者而設計的？
- 答：Text Resizer是針對區塊主題建構者設計，以讓網站訪客可以控制文字大小。
2. 可以使用哪些控制風格來調整文字大小？
- 答：可以選擇下拉式菜單、按鈕、滑桿或極簡圖示等多種控制風格。
3. ReadEase的Text Resizer提供哪些自訂選項？
- 答：可以自訂標籤位置、可調整規模設定、規模範圍選項、自定CSS選擇器、僅在行動裝置上顯示控制、持久喜好等功能。
4. ReadEase如何與區塊主題建構者整合？
- 答：ReadEase與區塊主題無縫整合，尊重主題的色彩調色板和排版風格，並提供CSS自定屬性進行進階自定義設置。
外掛標籤
開發者團隊
原文外掛簡介
ReadEase provides a simple, native Gutenberg block named Text Resizer aimed for block theme builders that gives site visitors control over text size. Theme builders can add the block to any template (header, footer, sidebar) via the Site Editor.
Built with accessibility in mind, this block helps your site meet WCAG 2.1 text resize guidelines while providing a seamless experience for visitors who need larger text.
Features
Multiple control styles – Choose from dropdown, buttons, slider, or minimal icons
Customizable label – Position on top, side, or hide completely with custom text
Flexible scale settings – Configure minimum/maximum scale (1.0x to 1.5x) and number of size steps (2-5)
Scale scope options – Apply scaling to full page or exclude template parts (header/footer)
Custom CSS selector – Target specific elements using advanced selector option
Mobile-only mode – Show controls only on mobile and tablet devices
Persistent preferences – Saves visitor choice via localStorage across sessions
Smooth CSS transitions – Animated scaling with reduced motion support
Fully accessible – Keyboard navigable with proper ARIA labels
Block theme support – Native WordPress color, spacing, and alignment controls
Theme customization – CSS custom properties for easy style overrides
Control Styles
Dropdown – Select menu showing percentage options (e.g., 100%, 125%, 150%)
Buttons – Row of “A” buttons in progressively larger sizes
Slider – Range input with small/large “A” labels at each end
Icons – Minimal button group with minus, reset (A), and plus controls
For Theme Builders
ReadEase integrates seamlessly with block themes. The block respects your theme’s color palette and typography, and provides CSS custom properties for advanced customization.
Customize the appearance in your theme CSS:
.wp-block-readease-text-resizer {
--text-resizer-border-radius: 8px;
--text-resizer-button-bg-hover: rgba(0, 0, 0, 0.1);
}
See the full list of CSS custom properties in the GitHub documentation.
