Plain Classes Gutenberg. Fresh from the start.

Easy class import and export

Managing consistent design systems across projects? Plain Classes makes it ridiculously easy to import and export utility classes. Whether you’re moving from staging to production or syncing styles between sites, your classes are preserved and portable.

  • Export your registered classes to a .json file
  • Import them on another site with a single click
  • Say goodbye to copy-pasting from old projects
Import

Fetch classes on save

No more second-guessing if your class list is up-to-date.

Every time you hit “Save”, the plugin automatically fetches the used classes in your blocks and syncs them with your configuration. This means:

  • Your class library stays current
  • Unused or obsolete classes don’t clutter your interface
  • You get an always-accurate list of what’s really being used in the editor

Think of it as automatic housekeeping for your CSS classes.

Claases Autocomplete

Rename classes

Need to change a utility class across multiple blocks? No problem.

With the built-in Rename Class feature, you can:

  • Easily rename any existing class
  • Instantly update all block references using that class
  • Keep your frontend and backend in sync without manual search-and-replace

This saves time and eliminates human error—especially when doing larger refactors or switching naming conventions.

Replace Wide

Classes Scanner

The Class Scanner feature is a real game changer for developers using Tailwind or BEM-style utility classes.

  • Scan your entire theme or plugin directory
  • Automatically detect all the classes used in your codebase
  • Instantly register them in the plugin’s class manager

Whether your classes live in PHP templates, block files, or HTML snippets, the scanner finds them so you can access them in the Gutenberg editor.

Css Files Scanner 1
Scripts Organizer
Core Framework
Greenshift

Scripts Organizer Integration

If you’re using Scripts Organizer to manage your custom CSS, JS, or PHP snippets, you’ll love how deeply it integrates with Plain Classes.

Here’s how it works:

  • When you save any code snippet inside Scripts Organizer (especially CSS),
  • Plain Classes will automatically scan your updated CSS
  • It will fetch all new class names used in your snippets
  • And it will remove any classes that no longer exist

This means your custom Script Organizer files stay perfectly in sync with the class manager—without you ever having to open the Plain Classes admin panel.

⚙️ It’s a full background automation:

No buttons to click. No manual syncing. Just save your work, and Plain Classes handles the rest.

This makes the combo of Scripts Organizer + Plain Classes an incredibly powerful toolset for developers who want fine-grained control over their frontend, without the bloat or distractions.

Core Framework and GreenShift Integration

Better Class Editing (GreenShift)

GreenShift uses tag-style inputs for utility classes. To change something like bg-red-300 to bg-red-200, you have to:

  • Remove the old tag
  • Search and select the new one

With Plain Classes, you can edit the class string directly — no extra steps, just faster updates.

One Place for All Classes

GreenShift only tracks classes used in its own blocks. Plain Classes tracks, autocompletes, and manages classes across:

  • Core blocks
  • GreenShift blocks
  • Any third-party or custom blocks

That means you get a centralized, consistent class list across your whole site.