Block Autocomplete

The Block Autocomplete feature seamlessly integrates Plain Classes Gutenberg with the WordPress Gutenberg block editor, providing intelligent CSS class suggestions directly within the block settings panel.

🎯 Overview

Block Autocomplete provides:

  • Native Integration: Built into Gutenberg block settings
  • Smart Suggestions: Intelligent autocomplete from all class sources
  • Framework Support: Breakpoint prefixes for responsive frameworks
  • Focus Mode: Distraction-free editing with expanded interface [[memory:3759611]]
  • Performance Optimized: Cached suggestions for fast loading
  • Multi-source Data: Combines imported, scanned, and external classes

🏗️ How It Works

Integration Points

The autocomplete integrates with WordPress Gutenberg at the block level:

  • Inspector Panel: Adds “Plain Classes” panel to block settings
  • Class Attribute: Directly modifies the block’s className attribute
  • Real-time Updates: Changes apply immediately to block preview
  • Framework Agnostic: Works with any CSS framework or custom classes

Data Sources

The autocomplete draws suggestions from multiple sources:

  1. 📥 Imported Classes: Your manually imported classes
  2. 🔍 Scanned Classes: Classes found in your theme/plugin files
  3. 🧩 Gutenberg Classes: WordPress block-specific classes
  4. 🌐 Winden Classes: External integration (if Winden plugin active)

🚀 Setup & Activation

Prerequisites

  • Plain Classes Gutenberg plugin installed and activated
  • Valid license key activated
  • Classes imported or scanned in Class Manager

Automatic Activation

Block Autocomplete is automatically available in the Gutenberg editor when:

  • ✅ Plugin is active
  • ✅ License is valid
  • ✅ At least one class exists in the database

No additional setup required – it works out of the box!

💡 Using Block Autocomplete

Accessing the Interface

  1. Open Block Editor

    • Edit any post, page, or custom post type
    • Add or select any Gutenberg block

  2. Find Plain Classes Panel

    • Look in the Block Settings sidebar (right side)
    • Find “Plain Classes” panel (appears near the top)
    • Click to expand if collapsed

  3. Start Typing

    • Click in the text area
    • Begin typing class names
    • Autocomplete suggestions appear automatically

Interface Elements

Text Area:

  • Large input field for entering classes
  • Auto-expands vertically as you type
  • Supports space-separated class names

Autocomplete Dropdown:

  • Appears below text area when typing
  • Shows up to 50 most relevant suggestions
  • Keyboard navigable with arrow keys

Focus Toggle: [[memory:3759611]]

  • “Focus Mode” toggle switch
  • Expands text area for distraction-free editing
  • Hides other block settings temporarily

✨ Advanced Features

Smart Triggers

The autocomplete triggers on various characters and prefixes:

Standard Triggers:

  • Space: – New class name
  • Empty: Start of field
  • Letters: Any alphabetic character

Framework Triggers:

  • @: Framework-specific classes
  • @@: Double-trigger for special classes
  • :: Pseudo-class selectors
  • !: Important modifiers

Responsive Triggers:

  • sm:: Small screen breakpoint
  • md:: Medium screen breakpoint
  • lg:: Large screen breakpoint
  • xl:: Extra large breakpoint
  • 2xl:: Double extra large breakpoint

Intelligent Filtering

Partial Matching:

Type: "bg-"
Shows: bg-red-500, bg-blue-500, bg-white, background-image...

Type: "text"  
Shows: text-white, text-lg, text-center, textbox...

Type: "flex"
Shows: flex, flex-1, flex-col, flex-wrap, d-flex...

Contextual Suggestions:

  • Recent classes appear first
  • Framework classes grouped logically
  • Commonly used classes prioritized

Focus Mode [[memory:3759611]]

What it Does:

  • Expands text area to 50% of viewport height
  • Temporarily hides other block settings
  • Reduces visual clutter for complex class editing
  • Perfect for working with utility-first frameworks

How to Use:

  1. Toggle “Focus Mode” switch in Plain Classes panel
  2. Text area expands dramatically
  3. Other settings panels become less prominent
  4. Toggle off when finished for normal view

🎨 Framework Integration

TailwindCSS

Utility Classes:

bg-blue-500 text-white p-4 rounded-lg shadow-md

Responsive Design:

text-sm md:text-base lg:text-lg xl:text-xl
p-2 md:p-4 lg:p-6 xl:p-8

State Variants:

bg-blue-500 hover:bg-blue-600 focus:bg-blue-700 active:bg-blue-800

Bootstrap

Layout Classes:

d-flex justify-content-between align-items-center

Responsive Utilities:

col-12 col-md-6 col-lg-4 col-xl-3

Components:

btn btn-primary btn-lg shadow-sm

Custom Frameworks

Component Classes:

header-nav menu-item active-state

Utility Classes:

u-margin-top-large u-text-center u-color-primary

🚀 Performance Optimization

Caching Strategy

Class Data Caching:

  • 5-minute transient cache for class data
  • JSON file generation for static serving
  • Browser-level caching with versioning

Loading Optimization:

  • Classes loaded asynchronously
  • Paginated suggestions for large datasets
  • Debounced search to reduce server requests

Memory Management

Large Class Libraries:

  • Handles 5000+ classes efficiently
  • Client-side filtering for performance
  • Optimized DOM rendering

Network Efficiency:

  • Minimal AJAX requests
  • Compressed class data
  • CDN-friendly static files

🎯 Best Practices

Workflow Efficiency

Class Organization:

/* Logical order: Layout → Spacing → Colors → Effects */
flex items-center justify-between p-4 bg-white text-gray-900 shadow-lg

Framework Consistency:

/* TailwindCSS example */
bg-blue-500 hover:bg-blue-600 transition-colors duration-200

/* Bootstrap example */  
btn btn-primary btn-lg shadow-sm

Editor Tips

Use Autocomplete Extensively:

  • Don’t type full class names
  • Let autocomplete suggest correct spellings
  • Discover new classes through suggestions

Focus Mode for Complex Edits:

  • Enable when working with many classes
  • Especially useful for utility-first frameworks
  • Disable for quick edits

Test Responsive Classes:

  • Use different breakpoint previews in editor
  • Verify responsive behavior works correctly
  • Consider mobile-first design approach

🔧 Advanced Usage

Custom Class Creation

While Editing:

  1. Type new class name in text area
  2. Class applies to block immediately
  3. Gets added to database automatically
  4. Available in future autocomplete suggestions

Framework Integration:

  • Custom classes work alongside framework classes
  • No conflicts with existing class systems
  • Maintains specificity rules

Bulk Class Management

Multiple Classes:

bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold py-2 px-4 rounded

Class Removal:

  • Select and delete unwanted classes
  • Use backspace to remove last class
  • Clear entire field with Ctrl+A → Delete

Class Reordering:

  • Cut and paste to reorder classes
  • Consider CSS specificity when ordering
  • Group related classes together

🚨 Troubleshooting

Autocomplete Not Appearing

Problem: No suggestions when typing
Solutions:

  • Verify license is activated
  • Check if classes exist in Class Manager
  • Clear browser cache and reload editor
  • Ensure JavaScript is enabled

Performance Issues

Problem: Slow autocomplete response
Solutions:

  • Check class library size (5000+ may be slow)
  • Clear transient cache: wp-admin/admin.php?page=plain-classes-gutenberg&pcguten_clear_cache=1
  • Optimize class database
  • Check server performance

Classes Not Applying

Problem: Classes added but no visual effect
Solutions:

  • Verify CSS framework is loaded
  • Check CSS specificity conflicts
  • Ensure class names are correct
  • Test in frontend preview

Focus Mode Issues

Problem: Focus mode not working properly
Solutions:

  • Try toggling off and on again
  • Refresh the editor page
  • Check for theme conflicts
  • Verify browser compatibility

🔗 Integration with Other Features

Class Manager

  • Classes added via autocomplete appear in manager
  • Automatically categorized as “Gutenberg” type
  • Available across all features

Frontend Assistant

  • Classes from autocomplete available in assistant
  • Cross-feature consistency
  • Shared autocomplete data

File Scanner

  • Scanned classes appear in autocomplete
  • Real-time updates when scanning completes
  • Framework classes automatically available

📱 Responsive Design Support

Breakpoint Prefixes

TailwindCSS Style:

sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl

Custom Breakpoints:

  • Plugin respects your framework’s breakpoint system
  • Suggestions include appropriate prefixes
  • Maintains responsive design patterns

Mobile Editor

Touch Support:

  • Touch-friendly autocomplete interface
  • Proper touch scrolling in suggestions
  • Mobile-optimized text area sizing

Responsive Testing:

  • Use editor preview modes
  • Test on actual devices
  • Verify responsive classes work correctly

🔍 Debug & Logging

Console Logging

The plugin provides debug information in browser console:

// Debug info (logged once per page load)
🔍 Plain Classes Autocomplete Debug Info: {
  windowPlainClasses: {classes: Array(1250)},
  windenClassesRaw: "...",
  windenClassesType: "string",
  windenClassesLength: 1250
}

Debug Information:

  • Total classes loaded
  • Data source verification
  • Performance metrics
  • Error reporting

Troubleshooting Log

Check browser console for:

  • Class loading errors
  • Network request failures
  • JavaScript errors
  • Performance warnings