← All posts

Plain Classes for Gutenberg 1.1.0: CSS Class Manager Walkthrough

plain classes

Adding CSS classes in Gutenberg usually means opening Advanced, typing the class name from memory and hoping you spelled it right. Plain Classes for Gutenberg 1.1.0 puts a class field right in the block sidebar and gives it autocomplete. The suggestions can come from classes you register, your own CSS/SCSS files, a CDN framework like Bootstrap, or Tailwind CSS through Winden. This walkthrough covers every feature, including multi-block editing and a front-end Class Assistant for testing classes live.

Install and activate

You install it like any other WordPress plugin, so there's nothing extra to set up.

  1. Go to Plugins → Add New → Upload Plugin, choose the zip file and click Install Now.
  2. Click Activate.
  3. Click Settings under the plugin. It takes you to the License tab.
  4. Copy your license from the DPlugins shop account, paste it in and activate.

The plugin's admin page is under Tools → Plain Classes Gutenberg. It has three tabs: Settings, Write Classes and License.

Write classes on a block

Right after activation you can type classes on any block without opening the Advanced panel.

  1. Select any Gutenberg block.
  2. In the block sidebar, find the Plain Classes box.
  3. Type your class (we used test) and click Update.

Edits in the box apply right away. Open the page preview and inspect the element, and the class is in the markup.

Register classes manually

Without registered classes there's nothing to autocomplete, so you still have to remember every name. Registering them once gives you a suggestion list in every block.

  1. Go to Tools → Plain Classes Gutenberg → Write Classes.
  2. Under Import Classes, choose Separated Classes with comma or Separated Classes per row.
  3. Paste your classes (we added bg-blue and bg-red) and click Import Classes.

The classes appear under Manage Classes. You can search them with Search Classes, remove any of them with the ×, and switch the layout with the View toggle. Reload the editor, start typing in the Plain Classes box, and bg-blue and bg-red show up as suggestions.

Scan a CSS file for classes

If your classes come from a loop or a framework-style utility file, typing them in one by one is slow and error-prone. Plain Classes can scan a Scripts Organizer code block and pull the classes out of the compiled CSS.

In the video we created a Scripts Organizer code block called Theme, set to SCSS with Create file checked and Script Location set to Header. The SCSS generates column classes in a loop:

$columns: 10;

@for $i from 1 through $columns {
    .columns-#{$i} {
        width: (100% / $i);
    }
}

.vertical-center{
    display: flex;
    align-items: center;
}

The compiled file contains .columns-1 to .columns-10 plus .vertical-center. Change $columns to 12 and the file updates to 12 column classes right away.

To use it for autocomplete:

  1. Go to Tools → Plain Classes Gutenberg and select the Scripts Organizer file to scan (our Theme header SCSS block).
  2. Save changes.
  3. Open Write Classes. The scanned classes (columns-1 to columns-12, vertical-center) are merged with the ones you added by hand.

Back in the editor, the Plain Classes dropdown lists bg-blue, bg-red, all the column classes and vertical-center. When you change the SCSS, you rescan instead of retyping the class list.

Scan a CDN framework (Bootstrap)

Loading a framework from a CDN usually means no autocomplete, because the CSS never exists on your server. Plain Classes can scan an enqueued CDN stylesheet too.

  1. In Scripts Organizer Features, enable the Scripts Manager.
  2. Add the framework from its CDN. We used the Bootstrap 5.3 link from jsDelivr, copied from getbootstrap.com.
  3. In the Plain Classes settings, reload the list of sources, select Bootstrap and save changes.

Even though Bootstrap loads from the CDN, all its classes now autocomplete in the block editor. The same method works for other CSS frameworks.

Tailwind/Winden autocomplete

Tailwind CSS has far too many classes to store in the database. With Winden you get full Tailwind autocomplete from a cached JSON file instead.

  1. Open Winden → Settings → General.
  2. Under Autocomplete, check Enable Autocomplete and click Save Changes.
  3. Click Generate autocomplete. The job appears in the table with status Pending. Wait until it changes to Success.
  4. Under Integration: Gutenberg, enable Enable on Gutenberg Editor and Cached CSS and save.

If you open Write Classes in Plain Classes, the Tailwind classes aren't listed there. They aren't stored because there are too many. In the editor, though, typing in the Plain Classes box suggests Tailwind utilities. We set bg-slate-300 p-20 on a paragraph and saw it right away in the preview.

Multi-element class editing

When several blocks need the same styling, changing them one at a time is slow and easy to get wrong. Gutenberg supports multi-block editing, and Plain Classes supports it too.

  1. Select several blocks at once (we duplicated a paragraph and selected both in List View).
  2. Type in the Plain Classes box. The classes apply to all selected blocks. We used bg-red-300 text-white p-10.
  3. Click Update and reload the preview. Both blocks show the change.

The live Class Assistant

Tweaking classes in the editor and reloading the front end over and over slows down fine-tuning. The Class Assistant lets you edit classes on the live page, and nothing is saved.

  1. Go to Tools → Plain Classes Gutenberg → Settings.
  2. Under Enable Features, turn on Class Assitant (that's how it's spelled on screen) and click Save Changes. This page also has Class Assitant Custom Breakpoints, with defaults sm 640, md 768, lg 1024, xl 1280 and 2xl 1536.
  3. Visit the front end while logged in as an administrator. A small robot icon appears in the corner.
  4. Hold Ctrl (CMD on a Mac) and click any element.

The Classes Assistant panel shows the element's classes under Edit Classes. You can rewrite or delete them and click Update to see the result. The panel also has Toggle Breakpoints, Change Element (parent, child, prev, next) and Popup Position controls. These edits are preview-only. Reload the page and it goes back to its saved state, so you can experiment safely before making the real change in the editor.

Who is this for

  • Gutenberg site builders who write their own CSS: get autocomplete for your own class names instead of looking them up.
  • Scripts Organizer users: turn SCSS loops and utility files into a class list with one scan instead of typing it.
  • Bootstrap or other CDN framework users: autocomplete for framework classes without hosting the CSS yourself.
  • Winden/Tailwind CSS users: full Tailwind autocomplete in the block sidebar, plus a front-end assistant for testing classes before you commit them.

FAQ

How do I add CSS classes to a Gutenberg block with Plain Classes? Select the block and type in the Plain Classes box in the block sidebar. The class is added to the block right away. Update the page and it's in the front-end markup.

Can I get autocomplete for my own CSS classes? Yes. Register them under Tools → Plain Classes Gutenberg → Write Classes (comma-separated or one per row), or scan a Scripts Organizer CSS/SCSS file so the classes are pulled from your code.

Does it work with Bootstrap loaded from a CDN? Yes. Enqueue Bootstrap through the Scripts Organizer Scripts Manager, then select it as a scan source in Plain Classes. Its classes then autocomplete in the editor.

How does Tailwind CSS autocomplete work? Through Winden. Enable Autocomplete in Winden's General settings, click Generate autocomplete, wait for Success, and enable the Gutenberg integration. Classes come from a cached file, not the database.

Do Class Assistant edits change my page? No. Changes made with Ctrl/CMD + click on the front end are preview-only and disappear when you reload.

Get Plain Classes for Gutenberg → dplugins.com

Related posts