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