WordPress
Version 6.2 or newer with the block editor enabled.
Official documentation
Build a reusable CSS workflow directly inside Gutenberg.
Gutenberg Classes Cheatsheet helps developers create a controlled design system and lets content editors apply it without memorizing class names.
6Starter utilities
19+Animation presets
20CSS history versions
3Admin themes
01
Before installation
Requirements
Recommended setup
Use a recent WordPress release, HTTPS, and a staging site when introducing a new CSS workflow to an existing project.
PHP
Version 7.4 or newer. PHP 8.x is recommended.
Permissions
An administrator account is required to manage plugin settings and CSS projects.
02
Getting started
Installation
- 1
Upload the plugin
In WordPress, open Plugins → Add New Plugin → Upload Plugin and select
wp-hunter-cheatsheet.zip. - 2
Activate it
Activate Gutenberg Classes Cheatsheet. A new Classes Cheatsheet item appears in the main admin menu.
- 3
Review the starter setup
Open Classes Cheatsheet → Entries and Styles. The plugin includes starter entries and a published Starter Utilities CSS project.
- 4
Verify Gutenberg
Edit a post or page, select a block, and find the Classes Cheatsheet panels in the block inspector.
Updating from an earlier version?
Create a database backup first. Plugin migrations preserve existing entries, mappings, projects, tokens, and animation presets.
03
First workflow
Quick start
Create or choose a class
Use a starter utility or add your own entry in Class entries and sets.
Write the CSS
Create a CSS project, add the matching selector, validate it, and publish it.
Apply it in Gutenberg
Select a block and click the entry in the Classes Cheatsheet panel.
Refine safely
Use live preview, drafts, validation, and version history before publishing changes.
.wh-section-card {
padding: var(--wh-space-md, 1rem);
color: var(--wh-text-color, #1f2937);
background: var(--wh-surface-color, #fff);
border-radius: var(--wh-radius-md, 12px);
box-shadow: var(--wh-shadow-md, 0 10px 30px rgba(15, 23, 42, .12));
}04
Visual tour
Screenshots
Use these screenshots as a quick visual map of the main admin screens and Gutenberg controls.
05
Editor experience
Gutenberg panel
The plugin adds focused controls to the selected block's inspector. They are designed for both developers and content editors.
Favorites
Keep frequently used entries one click away. Favorites are stored per WordPress user.
Recent
Quickly return to the latest applied entries and class sets.
Suggested
See relevant entries based on the selected block and configured block mappings.
All entries
Search and filter the complete class library by category, label, class, or description.
Class sets are toggled together
Clicking a class set adds all classes in the set. Clicking it again removes the same set from the selected block.
06
Reusable class library
Entries and class sets
Open Classes Cheatsheet → Entries. Use the internal tabs to manage categories separately from class entries.
Categories
Categories organize the library and power block-specific suggestions. Default categories include Paragraph, Heading, Section, Image, Button, and Default.
Class entries and sets
Each entry includes a category, human-readable label, one class or a space-separated class set, and an optional description.
| Field | Purpose | Example |
|---|---|---|
| Category | Controls filtering and suggestions. | Button |
| Label | Friendly name shown to editors. | Primary button |
| Classes | One class or a reusable class set. | btn btn-primary is-large |
| Description | Explains when the entry should be used. | Main call-to-action |
07
CodeMirror 6 workspace
CSS projects
The Styles screen is a complete CSS workspace with independent projects, drafts, validation, preview, publishing, and recovery tools.
Safe publishing flow
Save work as a draft, validate it, and publish only when it is ready.
Targeted loading
Load a project globally or limit it by content type or URL pattern.
Responsive preview
Test draft CSS against a live page at desktop, tablet, and mobile widths.
Version recovery
Compare saved versions and restore any of the latest 20 versions to a draft.
Project settings
- Load published CSS on the frontend.
- Load published CSS inside Gutenberg.
- Choose a loading scope and optional URL pattern such as
/shop/*. - Set project priority when multiple projects affect the same page.
- Add a version note before publishing an important change.
Autocomplete included
CodeMirror 6 provides standard CSS completion, bracket closing, diagnostics, and design-token suggestions when typing var(--.
08
Consistent design values
Design tokens
Design tokens are reusable CSS custom properties managed from Design System → Design tokens. They load globally and are available in CSS projects and Gutenberg.
.product-card {
padding: var(--wh-space-md);
color: var(--wh-text-color);
background: var(--wh-surface-color);
border-radius: var(--wh-radius-md);
}For developers
Define a controlled vocabulary for colors, spacing, radii, shadows, and other reusable values.
For editors
Copy any token or apply supported color tokens directly as block text and background colors.
09
Motion presets
Animations
Create reusable animation presets in Design System → Animations, preview them in the admin area, and assign them to selected Gutenberg blocks.
| Trigger | Behavior | Recommended use |
|---|---|---|
| Viewport | Runs once when the block enters the viewport. | Sections, cards, headings, images. |
| Immediate | Runs when the page is ready. | Hero content and important notices. |
| Click | Replays each time the element is clicked. | Buttons and interactive blocks. |
Preset controls
- Organize presets with managed animation categories.
- Choose from ready-made animation types or provide custom CSS.
- Configure duration, delay, easing, distance, and trigger.
- Search, filter, paginate, and preview presets before assigning them.
- Animations automatically respect the user's reduced-motion preference.
10
Relevant suggestions
Block mapping
Block mappings connect registered Gutenberg block types to entry categories. When an editor selects a mapped block, matching entries appear in the Suggested view.
core/buttonButton
core/headingHeading
core/imageImage
Map third-party blocks too
Use the registered block suggestions to map blocks from other plugins and themes without guessing their internal names.
11
Move and protect configuration
Import and export
The JSON transfer tool includes categories, entries, block mappings, design tokens, animation categories, and animation presets. CSS projects have their own draft download and version history.
Download configuration
Create a portable JSON file for backup or another WordPress site.
Add without replacing
Preview incoming data and merge it with the current configuration.
Restore a complete setup
Replace current configuration after reviewing the import preview.
Reset all settings is destructive
The reset action restores starter entries, mappings, design tokens, animation presets, and CSS projects. Export your configuration first if you may need it later.
12
Emergency control
Safe mode and recovery
Safe mode immediately prevents all published CSS projects, generated design tokens, and animations from loading. Use it when a style change affects site usability or access.
1. Enable safe modeStop plugin-generated CSS and animations immediately.
2. Inspect the projectUse validation, live preview, and version comparison.
3. Restore or correctRestore a previous version to draft or fix the current CSS.
4. Publish and disable safe modeVerify the corrected version before restoring normal loading.
13
Faster editing
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| Ctrl / Cmd + S | Save the current CSS project draft. |
| F11 | Enter or exit fullscreen CSS editing. |
| Esc | Exit fullscreen mode. |
| Ctrl + Space | Open CodeMirror completion suggestions. |
14
Common solutions
Troubleshooting
Published CSS does not appear on the frontend
Check that safe mode is disabled, the project is published, frontend loading is enabled, and the current URL matches the project's scope and URL pattern. Clear page and server caches after publishing.
An entry does not appear in Suggested
Confirm that the selected block type is mapped to the entry's category. The entry remains available under All entries even without a mapping.
Animation preview works in admin but not on the frontend
Confirm that the preset is assigned to the block, safe mode is disabled, and the browser does not have reduced motion enabled. For Click presets, click the animated block itself.
A local CSS draft notice appears
The browser has a newer unsaved local draft. Restore it to continue editing or discard it to keep the server version.
A style update caused a layout problem
Enable safe mode, open version history, compare recent versions, and restore the last working version to draft before publishing it again.
15
Frequently asked questions
FAQ
Does the plugin replace Additional CSS classes?
No. It improves the workflow around Gutenberg's existing class field by providing a searchable, reusable class library and design-system controls.
Can one entry apply several classes?
Yes. Add space-separated classes to create a reusable class set. The complete set is toggled when the editor clicks the entry.
Can CSS load only on selected pages?
Yes. Each CSS project has an independent scope, optional URL pattern, and priority.
Can I use my existing CSS framework?
Yes. Create entries or class sets for framework utilities and keep the framework's styles loaded by your theme or plugin.
Does the plugin call an external service?
No. Version 1.8.4 works locally inside WordPress and does not require an external account or API key.
16
Release history
Changelog
Recent releases focus on making the plugin easier to manage, safer to test, and more comfortable for real editorial workflows.
Better entry creation flow
New class entries are inserted at the top of the table, highlighted, focused, and scrolled into view.
Dedicated reset screen
Updated WP-Hunter links to wp-hunter.win and moved the protected reset action into its own tab.
Documentation links and bottom pagination
Added documentation links in the admin and synchronized bottom pagination controls for long entry and animation lists.
Dark-theme refinements and starter utilities
Improved action buttons, added a protected reset action, and included starter utility classes with matching CSS.
WP-Hunter admin theme
Introduced WordPress, WP-Hunter Dark, and system-aware admin interface themes.
Design system and animations
Added design tokens, animation presets, managed animation categories, Gutenberg animation controls, and expanded ready-made animation presets.
CSS editor improvements
Improved the CSS project editor with CodeMirror 6, live preview, validation, formatting, themes, and a more comfortable preview layout.
WP-Hunter support
Need a hand with your CSS workflow?
Before contacting support, reproduce the issue with a default theme when possible and include your WordPress, PHP, and plugin versions.
Include with a support request
- A clear description and reproduction steps.
- WordPress, PHP, and plugin versions.
- Relevant screenshots or screen recording.
- Browser console errors, when available.