Utility for GeneratePress is the complete GeneratePress Utility and GenerateBlocks design system companion for WordPress developers, agencies, and site builders. It bridges the gap between the GeneratePress Customizer and GenerateBlocks Pro Design Tokens and Global Styles, while adding native Color Management, automatic Color Shades, a Gradient Palette builder, Fluid Typography, Dark Mode, and one-click GP Export / GP Import and GenerateBlocks Export / Import tools — with zero frontend bloat.

Whether you use the free GeneratePress theme, GP Premium, GenerateBlocks, or GenerateBlocks Pro, every module integrates directly into the native WordPress Customizer and Gutenberg block editor.

🔗 Customizer Sync & Design Token Sync (New!)

Keep your GeneratePress Customizer and GenerateBlocks Pro Design Tokens (2.8.0+) in sync without duplicate setup:

Two-Way GP Global Colors Design Tokens Sync: Saving the GeneratePress Customizer automatically creates and updates matching color Design Tokens under the GeneratePress category in GenerateBlocks Pro. Updating those token values in the GenerateBlocks Design Tokens panel syncs changes right back to your GeneratePress Global Colors.
Color Shades & Variants Token Sync: Automatically exposes all generated Color Shades, tints (10–90), and color harmony tokens from Color Management under the Variants category in GenerateBlocks Design Tokens.
Fluid Typography Token Sync: Automatically registers your --utilfoge-step-* clamp() scale as unit Design Tokens scoped to fontSize under the Fluid Typography category for one-click selection inside GenerateBlocks typography controls.
One-Click “Sync Now” & Safe Checksum Architecture: Trigger a manual sync anytime from Appearance > Utility. Built on GenerateBlocks Pro’s native :root checksum validation and snapshot history — user-created tokens are never overwritten or deleted.
Gutenberg Editor CSS Sync: Automatically enqueues your active Child Theme stylesheet and Customizer Additional CSS inside the Gutenberg block editor for a true WYSIWYG editing experience (works with or without GenerateBlocks Pro).

🎨 Color Management, Color Shades & Harmony Variants

Build a complete design system palette directly from your GeneratePress Global Colors:

Automatic Color Shades & Tints (10–90): Generate full 9-step lightness scales (--slug-10 through --slug-90) from any base color in your palette.
Mathematical Color Harmonies: Generate Complementary, Triadic, Analogous, and Split-Complementary color variables with one click.
Bulk CSS Variable Import: Paste any :root CSS block to parse, map, and import colors straight into GeneratePress Global Colors and Design Tokens.

🌈 Gradient Palette & Native theme.json Presets

Visual Drag-and-Drop Gradient Palette Builder: Create linear and radial CSS gradients using the native WordPress React ColorPicker with full alpha transparency support.
Native Gutenberg & theme.json Integration: Automatically injects custom gradients as native WordPress presets (--wp--preset--gradient--*) plus .has-{slug}-gradient-text and .has-{slug}-gradient-border utility classes with dark mode variant support.

📐 Fluid Typography & Responsive clamp() Wizard

Zero-Media-Query Fluid Typography: Automatically calculate responsive font sizes using CSS clamp() based on your base size, min/max viewport widths, and modular scale ratios (Minor Third, Major Third, Perfect Fourth, Golden Ratio, or custom).
Automatic Heading & Token Mapping: Maps --utilfoge-step--1 through --utilfoge-step-8 to body and h1–h6, and syncs them directly to GenerateBlocks Pro Design Tokens.

🌙 Dynamic Dark Mode & HSL Contrast Engine

Zero-Duplication CSS Variable Override: Overrides your existing GeneratePress Global Colors inside the .dark scope so every block using var(--contrast), var(--base), or Design Tokens adapts to Dark Mode automatically.
HSL Contrast Boosting & Auto-Desaturation: Automatically calculates eye-friendly dark counterparts for your entire color palette.
Dark Mode Logo Replacement: Dedicated Customizer controls for desktop, mobile header, and GP Premium sticky navigation dark mode logos with zero-FOUC early script execution.

📦 GP Export / GP Import & GenerateBlocks Export / Import

A complete backup and migration toolkit for GeneratePress and GenerateBlocks:

GP Export & GP Import: Export and import GeneratePress theme settings, Global Colors, Typography, and customizer configurations.
GP Elements Export/Import: Backup and migrate custom GeneratePress Elements (gp_elements — Block, Header, Hook, and Layout Elements) across sites.
GenerateBlocks Export & GenerateBlocks Import: Migrate Global Styles, Design Tokens (gb_style_tokens), Style Categories, Local Patterns, Asset Library SVGs & Icons, Overlay Panels, Display Conditions, Forms, and Editor Access Profiles with automatic CSS cache rebuilding.
GeneratePress Brand Tool theme.json Import: Import palettes and typography directly from theme.json files.

⚡ Performance-First Philosophy

Zero bloat, zero external framework dependencies. Every module is individually toggleable under Appearance > Utility, uses native WordPress React components in the admin, and outputs ultra-clean CSS variables on the frontend.