Class management

The Class Manager is the central hub for organizing and managing all your CSS classes. It provides a comprehensive interface for importing, organizing, searching, and maintaining your class library.

🏗️ Understanding Class Types

Plain Classes Gutenberg organizes classes into three categories:

📥 Imported Classes

  • Classes manually imported by you
  • From text input, JSON files, or other sources
  • Marked with blue “Imported” badge
  • Example: bg-primary, btn-large, custom-style

🧩 Gutenberg Classes

  • Classes automatically extracted from your post/page content
  • Found in Gutenberg blocks as you create content
  • Marked with purple “Gutenberg” badge
  • Example: wp-block-heading, has-text-color, aligncenter

🔍 Scanned Classes

  • Classes found by scanning your CSS/JS files
  • Automatically detected from selected files/folders
  • Marked with green “Scanned” badge
  • Example: mt-4, flex, bg-gray-100 (from TailwindCSS files)

📊 Admin Interface Overview

Navigate to Tools → Plain Classes Gutenberg → Class Manager

Tab Structure

  • Manage Classes: View, search, filter, and organize your classes
  • Import Classes: Add new classes from various sources

🔍 Managing Classes

Search & Filter

Search Box

  • Type any part of a class name to filter results
  • Real-time filtering as you type
  • Case-insensitive search

Type Filter Dropdown

  • All: Show all class types
  • Imported: Show only manually imported classes
  • Gutenberg: Show only Gutenberg-extracted classes
  • Scanned: Show only file-scanned classes

Layout Toggle

  • Wrap: Classes flow naturally (default)
  • List: Classes stack vertically for easier scanning

Class Display

Each class shows:

  • Class Name: The actual CSS class
  • Delete Button: ❌ Remove individual class

Bulk Operations

Export Classes

  • Click “Export Classes” to download JSON file
  • Includes all classes with their categories
  • Perfect for backup or transferring to another site

Delete All Classes

  • “Delete All” removes ALL classes from ALL categories
  • ⚠️ Warning: This action cannot be undone
  • Consider exporting first as backup

Replace Classes

  • “Replace All” – Upload JSON file to replace entire class library
  • Maintains categorization from JSON file
  • Useful for bulk updates or restoring from backup

📥 Importing Classes

Method 1: Text Import

Format Options:

  • Comma-separated: bg-red-500, text-white, p-4, m-2
  • Line-separated: Each class on its own line
    bg-red-500
    text-white  
    p-4
    m-2

Import Process:

  1. Click “Import” tab
  2. Choose format (Comma or Line)
  3. Paste classes in the text area
  4. Click “Import Classes”
  5. Classes automatically categorized as “Imported”

Method 2: JSON File Import

Supported JSON Formats:

Simple Array:

["bg-red-500", "text-white", "p-4"]

Categorized Object:

{
  "imported": ["custom-btn", "my-style"],
  "gutenberg": ["wp-block-heading"],
  "scanned": ["bg-red-500", "text-white"]
}

Import Options:

  • Merge Mode OFF: Preserves original categorization
  • Merge Mode ON: All classes become “Imported” type

Import Process:

  1. Click “Import from JSON File”
  2. Toggle “Merge all to imported” if desired
  3. Select your .json file
  4. Classes are added to appropriate categories

Method 3: Duplicate Detection

The system automatically prevents duplicate classes:

  • Checks against ALL existing classes before import
  • Shows count of new vs. duplicate classes
  • Only new classes are added

🔄 Export & Backup

Export Process

  1. Click “Export Classes” in Manage tab
  2. JSON file downloads automatically
  3. Filename: plain-classes-export-YYYY-MM-DD.json

Export Format

{
  "imported": [
    "bg-primary",
    "btn-large"
  ],
  "gutenberg": [
    "wp-block-heading", 
    "has-text-color"
  ],
  "scanned": [
    "bg-red-500",
    "text-white"
  ]
}

Backup Strategy

  • Regular Exports: Export weekly/monthly as backup
  • Before Major Changes: Export before bulk operations
  • Site Migration: Export from old site, import to new site

🔧 Advanced Operations

Bulk Replace Classes

Perfect for framework migrations (e.g., Bootstrap → TailwindCSS):

  1. Export current classes as backup
  2. Create new JSON with updated class names:
    {
     "imported": [
       "bg-blue-500",  // was "bg-primary"
       "text-lg",      // was "lead"  
       "flex"          // was "d-flex"
     ]
    }

  3. Use “Replace All” to swap entire library

Category Management

  • Change Category: Export → Edit JSON → Re-import
  • Clean Up Duplicates: Export → Remove duplicates → Replace All
  • Merge Categories: Use “Merge all to imported” option