ReadEase: Text Resizer
·
A Gutenberg block that lets site visitors resize text for improved readability and accessibility.
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.