GB Styles - CSS Variables Manager for WordPress

A powerful WordPress plugin that provides CSS Variables management for the Gutenberg editor and Customizer. GB Styles has been rebuilt with React and features a modern, Raycast-inspired interface for managing CSS variables and writing live CSS/SCSS.

Version

1.1.2

What's New in v1.1.2

• 🚀 Complete React Rebuild - Modern React 18 architecture with TypeScript
• 🎨 Raycast-Inspired UI - Clean, minimal design with smooth animations
• ⚡ Improved Performance - Web Components with shadow DOM for isolation
• 🔧 Better State Management - Zustand for predictable state updates
• 📦 Smaller Bundle Size - Optimized build with code splitting

Features

🎨 CSS Variables Manager

• Command Palette Interface - Raycast-style search and navigation
• Smart Search - Fuzzy search through all CSS variables
• Color Preview - Visual preview for color variables
• Auto-Detection - Automatically opens when typing var or --
• Right-Click Menu - Context menu on any input field
• Instant Copy - One-click copy to clipboard
• Keyboard Navigation - Arrow keys, Enter, and Escape support

✏️ Live CSS Editor

• Monaco Editor - VS Code's editor with full SCSS support
• Syntax Highlighting - Full SCSS syntax highlighting
• Auto-Save - Changes save automatically after 2 seconds
• Live Preview - See changes instantly on your site
• Persistent Storage - CSS saved in WordPress uploads directory

🖥️ Modern UI & UX

• React Components - Built with React 18 and TypeScript
• Web Components - Encapsulated with shadow DOM
• Resizable Panels - Drag to resize panel width
• Multiple Positions - Right, left, or fullscreen modes
• Smooth Animations - Framer Motion powered transitions
• Dark Mode Ready - Supports light/dark themes
• Toast Notifications - Elegant feedback messages

⌨️ Keyboard Shortcuts

• Cmd/Ctrl + 1 - Open Variables panel
• Cmd/Ctrl + 2 - Open Live CSS editor
• Cmd/Ctrl + 0 - Toggle Fullscreen mode
• Cmd/Ctrl + ~ - Toggle panel visibility
• ESC - Close panel
• Arrow Keys - Navigate search results
• Enter - Copy selected variable

🔧 WordPress Integration

• Gutenberg Integration - Native toolbar button in block editor
• Customizer Support - Works in WordPress Customizer
• AJAX Operations - Secure WordPress AJAX with nonce
• Auto-Loading - CSS automatically loads on frontend
• Plugin Extensions - WPCodeBox integration support

Installation

1. Upload the gb-styles folder to /wp-content/plugins/
2. Activate the plugin through the WordPress admin
3. Look for the GB Styles button in the Gutenberg editor toolbar
4. Or access via keyboard shortcuts or right-click on input fields

Usage

In Gutenberg Editor

1. Toolbar Button - Click the "GB Styles" button in the editor header
2. Keyboard Shortcuts - Use Cmd/Ctrl + 1 for variables, Cmd/Ctrl + 2 for CSS editor
3. Right-Click - Right-click any input field to open the variables panel
4. Auto-Trigger - Type var or -- in any input to auto-open the panel

Variables Panel

• Search - Start typing to search through all CSS variables
• Navigate - Use arrow keys to move through results
• Copy - Click or press Enter to copy the variable
• Preview - Color variables show a visual preview
• Filter - Search filters by variable name and value

Live CSS Panel

• Write SCSS - Full SCSS support with syntax highlighting
• Auto-Save - Changes save automatically after 2 seconds
• Manual Save - Click Save button or use Ctrl/Cmd + S
• Revert - Undo changes with the Revert button
• Fullscreen - Use Cmd/Ctrl + 0 for distraction-free editing

Panel Controls

• Resize - Drag the edge to resize panel width
• Position - Click position button to cycle: Right → Left → Fullscreen
• Close - Click X or press Escape to close
• Persist - Position and size are remembered

JavaScript API

The plugin exposes a global gbStyles object for programmatic control:

// Open/close panel
gbStyles.open();
gbStyles.close();
gbStyles.toggle();

// Set active view
gbStyles.setView('variables');
gbStyles.setView('editor');

// Shortcuts
gbStyles.openVariables();
gbStyles.openEditor();

File Storage

CSS Files System

• CSS Files: /wp-content/uploads/gb-styles/styles.json - Multi-file storage with metadata
• Compiled CSS: /wp-content/uploads/gb-styles/global.css - Generated from active files
• Legacy: /wp-content/uploads/gb-styles/raw.scss (migrated to multi-file system)

CSS Classes System (Database)

• CSS Classes: WordPress database tables (wp_gb_styles_css_classes, wp_gb_styles_css_class_properties)
• Database Structure: Classes with user segregation and breakpoint support
• Properties: Stored per-breakpoint with unit and importance flags

Variables & Preferences

• CSS Variables: Runtime extraction from DOM (no persistent storage)
• UI Preferences: Browser localStorage (gb-styles-ui key) for breakpoint/selection state

Requirements

• WordPress 5.8+
• PHP 7.4+
• Modern browser with ES6 module support

Development

The plugin is built with:

• React 18 with TypeScript
• Vite for bundling
• Web Components for encapsulation
• Zustand for state management
• Monaco Editor for code editing
• Framer Motion for animations

Building from Source

cd gb-styles-react
npm install
npm run build

Development Status

✅ What's Been Accomplished

• Complete React Rebuild - Modern React 18 + TypeScript architecture
• Raycast-Inspired Interface - Command palette with fuzzy search
• CSS Variables Manager - Smart search with color previews and auto-detection
• Live CSS/SCSS Editor - Monaco editor with syntax highlighting and auto-save
• Web Components Architecture - Shadow DOM encapsulation for style isolation
• State Management - Zustand stores for predictable state updates
• WordPress Integration - Native Gutenberg toolbar button and Customizer support
• REST API Backend - Dual controller system for CSS files and classes management
• Database Layer - CSS classes storage with user segregation and breakpoint support
• Keyboard Shortcuts - Complete hotkey system for navigation and control
• Responsive Panels - Resizable panels with position memory
• File Storage System - SCSS/CSS file management in WordPress uploads
• Licensing System - SureCart WordPress SDK integration
• Performance Optimizations - CSS injection, persistent storage, and bundle optimization

🚧 What's Left to Implement

• [ ] Display Compiled GUI Styles on Frontend - Show generated CSS classes in the frontend interface
• [ ] Left / Right Tab Bar Orientation - Configurable tab positioning for better workflow
• [ ] Full Screen Tab Bar - Enhanced fullscreen mode with tab management
• [ ] GutenVibes Integration - Integration with GutenVibes plugin ecosystem

License Management

GB Styles includes a built-in licensing system powered by SureCart WordPress SDK. Access the licensing settings under Settings → GB Styles Licensing in your WordPress admin.

Changelog

1.1.2

• Complete React rebuild
• Raycast-inspired UI
• Improved performance
• Better keyboard navigation
• Web Components architecture

1.1.0

• Added licensing system
• Updated dependencies

1.0.0

• Initial release

Support

For issues, feature requests, or questions, please visit the plugin's support page or repository.

Credits

Developed by Daniel Snell and the Gutenberg Styles Team. Special thanks to the WordPress community for continued support and feedback.