Frontend Assistant

The Frontend Assistant is the most powerful feature of Plain Classes Gutenberg – it allows you to visually edit CSS classes directly on your frontend with real-time preview. No more switching between admin panels and preview windows!

🎯 Overview

The Frontend Assistant provides:

  • Visual Element Selection: Click any element to edit its classes
  • Live Preview: See changes instantly as you type
  • Smart Autocomplete: Suggestions from your class library
  • Element Navigation: Move between related elements
  • Responsive Support: Toggle breakpoint classes on/off
  • Flexible Positioning: Move the assistant to any corner

🚀 Setup

Prerequisites

  • Valid license activated
  • WordPress admin user logged in
  • Frontend Assistant enabled in settings

Enable the Assistant

  1. Navigate to Settings
    • Go to Tools → Plain Classes Gutenberg → Settings
    • Find “Enable Frontend Assistant” checkbox
    • ✅ Check the box and save
  2. Verify Activation
    • Visit any frontend page while logged in as admin
    • You should see the assistant is ready (no visual indicator until activated)

💡 Basic Usage

Activating the Assistant

Keyboard Shortcut: Cmd + Click (Mac) or Ctrl + Click (Windows/Linux)

  1. Visit Frontend Page
    • Go to any page on your site’s frontend
    • Must be logged in as administrator
  2. Select Element
    • Hold Cmd (Mac) or Ctrl (Windows/Linux)
    • Click any element on the page
    • Element gets red outline for visual feedback
  3. Assistant Appears
    • Popup window appears with 🤖 icon
    • Shows current element info
    • Ready for class editing

Interface Components

Frontend Assistant Interface

🎛️ Assistant Interface

Header Section

  • 🤖 Robot Icon: Visual indicator
  • Element Selector: Shows current element (e.g., h1.title, div.container)
  • Position Controls: Move assistant to different corners
  • Close Button: ❌ Close the assistant

Main Editor

  • Class Input Field: Large text area for editing classes
  • Autocomplete Dropdown: Smart suggestions as you type
  • Breakpoint Toggle: Enable/disable responsive classes

Navigation Controls

  • ⬆️ Parent: Select parent element
  • ⬇️ Child: Select first child element
  • ⬅️ Previous: Select previous sibling
  • ➡️ Next: Select next sibling

Keyboard Shortcuts [[memory:3759612]]

All navigation shortcuts work on both Mac and PC:

  • Ctrl+Up (or Cmd+Up): Move to parent element
  • Ctrl+Down (or Cmd+Down): Move to child element
  • Ctrl+Left (or Cmd+Left): Move to previous sibling
  • Ctrl+Right (or Cmd+Right): Move to next sibling

✨ Advanced Features

Smart Autocomplete

The assistant provides intelligent suggestions from multiple sources:

Source Priority:

  1. Your Imported Classes: Manually added classes
  2. Scanned Classes: From your theme/plugin files
  3. Gutenberg Classes: WordPress block classes
  4. Winden Classes: If using Winden plugin

Autocomplete Behavior:

  • Triggers on any character input
  • Shows up to 50 most relevant suggestions
  • Filters based on current input
  • Supports partial matching

Navigation:

  • ↑↓ Arrow Keys: Navigate suggestions
  • Tab or Enter: Accept suggestion
  • Esc: Close suggestions

Breakpoint Support

For responsive frameworks like TailwindCSS:

Toggle Breakpoints:

  • Switch to enable responsive class support
  • Adds breakpoint prefixes to suggestions
  • Supports: sm:, md:, lg:, xl:, 2xl:

Example Usage:

/* Standard classes */
bg-blue-500 text-white p-4

/* With breakpoints enabled */
sm:bg-red-500 md:text-black lg:p-8

Element Navigation

Visual Feedback:

  • Red outline shows currently selected element
  • Outline updates as you navigate
  • Clear visual hierarchy

Smart Selection:

  • Skips text nodes and comments
  • Finds closest valid element
  • Handles complex DOM structures

Navigation Logic:

  • Parent: Moves up DOM tree
  • Child: Selects first meaningful child
  • Siblings: Moves left/right at same level

Positioning System

Corner Positioning:

  • Top-Left: Default position
  • Top-Right: Right side of screen
  • Bottom-Left: Lower left corner
  • Bottom-Right: Lower right corner

Auto-Adjustment:

  • Avoids covering selected element
  • Respects viewport boundaries
  • Maintains usability on mobile

🎨 Live Editing Workflow

Basic Class Editing

  1. Select Element with Cmd/Ctrl+Click
  2. View Current Classes in the text area
  3. Edit Classes directly: 
    /* Before */
bg-gray-100 text-black

/* After */
bg-blue-500 text-white shadow-lg
  4. See Changes immediately on the page

Adding Multiple Classes

Space-Separated Format:

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

With Autocomplete:

  1. Start typing: bg-
  2. See suggestions: bg-blue-500, bg-red-500, etc.
  3. Select with arrow keys + Enter
  4. Continue adding more classes

Responsive Design

Enable Breakpoints and add responsive classes:

/* Mobile-first approach */
text-sm md:text-base lg:text-lg
p-2 md:p-4 lg:p-6
bg-blue-500 hover:bg-blue-600 md:hover:bg-blue-700

Framework Integration

TailwindCSS Example:

flex items-center justify-between p-4 bg-white shadow-sm border-b

Bootstrap Example:

d-flex align-items-center justify-content-between p-3 bg-white border-bottom

Custom Classes:

header-nav main-menu-item active-state

🔧 Advanced Techniques

Class Inheritance

Understanding Specificity:

  • Classes added via assistant apply immediately
  • May override theme styles
  • Use !important sparingly: !bg-red-500

Cascading Strategy:

/* Base styles */
btn btn-primary

/* State modifications */
btn btn-primary hover:btn-primary-dark active:btn-primary-darker

Rapid Prototyping

Quick Design Changes:

  1. Select container element
  2. Try different layouts: flex, grid, block
  3. Adjust spacing: p-4, m-2, space-y-4
  4. Test colors: bg-blue-500, text-white
  5. Add effects: shadow-lg, rounded-md

Component Building:

/* Card component */
bg-white rounded-lg shadow-md p-6 border border-gray-200

/* Button component */
bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors

Performance Optimization

Class Management:

  • Remove unused classes promptly
  • Use semantic naming
  • Group related classes

Efficient Workflow:

  1. Plan changes before opening assistant
  2. Use autocomplete extensively
  3. Test responsive behavior
  4. Save frequently (changes persist automatically)

🚨 Troubleshooting

Assistant Won’t Appear

Problem: Cmd/Ctrl+Click doesn’t open assistant
Solutions:

  • Verify you’re logged in as administrator
  • Check license is activated
  • Ensure assistant is enabled in settings
  • Try refreshing the page
  • Check browser console for errors

Element Not Selectable

Problem: Can’t click certain elements
Solutions:

  • Try clicking child elements instead
  • Some elements may have click-blocking CSS
  • Use navigation buttons to reach element
  • Check if element has pointer-events: none

Classes Not Applying

Problem: Classes added but no visual change
Solutions:

  • Check CSS specificity conflicts
  • Verify class names are correct
  • Look for theme overrides
  • Use browser developer tools to debug

Autocomplete Not Working

Problem: No suggestions appear
Solutions:

  • Verify classes are imported in Class Manager
  • Check license activation
  • Clear browser cache
  • Reload the page

Assistant Position Issues

Problem: Assistant appears off-screen
Solutions:

  • Use position controls to move it
  • Try different corners
  • Refresh page to reset position
  • Check viewport size on mobile

🎯 Best Practices

Workflow Efficiency

  • Plan First: Know what changes you want to make
  • Use Shortcuts: Learn keyboard navigation
  • Leverage Autocomplete: Don’t type full class names
  • Test Responsive: Check different screen sizes

Class Organization

  • Logical Order: Layout → spacing → colors → effects
  • Consistent Naming: Follow framework conventions
  • Document Changes: Note significant modifications

Performance

  • Minimal Classes: Only add necessary classes
  • Remove Unused: Clean up experimental classes
  • Cache Consideration: Changes may require cache clearing

Safety

  • Backup First: Export classes before major changes
  • Test Thoroughly: Check all device sizes
  • Staging Environment: Test on staging site first

🔗 Integration with Other Features

Class Manager

  • Classes added via assistant appear in manager
  • Categorized as “Imported” type
  • Available in future autocomplete

Block Editor

  • Frontend changes don’t affect Gutenberg classes
  • Use Block Autocomplete for editor-specific classes
  • Frontend assistant is for visual refinement

File Scanner

  • Scanned classes appear in assistant autocomplete
  • Framework classes (TailwindCSS, Bootstrap) available
  • Real-time access to theme classes