Gutenberg Classes Cheatsheet Demo Playground

wp-hunter

Live demo for CodeCanyon reviewers

Gutenberg CSS Workflow

Gutenberg Classes Cheatsheet Demo Playground

Select any block, apply a class set, preview design tokens and animations. This page is built with native Gutenberg blocks and enhanced with reusable CSS utilities.

Open editor demo View docs

What this plugin demonstrates

Use this page as a safe playground: open the editor, select blocks, and test the plugin sidebar without touching production content.

CSS

CSS class sets

Apply single classes or reusable class groups from a searchable Gutenberg panel.

wh-section-card

VAR

Design tokens

Create CSS variables once and reuse them across custom styles and blocks.

var(–wh-primary-color)

Animation presets

Add viewport or click animations directly from Gutenberg block settings.

Fade Up

Typography and content blocks

The cheatsheet is useful for editors too. They can apply approved typography, spacing, button and section styles without memorizing CSS class names.

Select a Heading, Paragraph, Image, Group, or Button block.
Open the Classes Cheatsheet sidebar panel.
Click a class entry to toggle it on the selected block.

Design tokens preview

Primary color--wh-primary-color

Surface--wh-surface-color

Radius--wh-radius-md

Shadow--wh-shadow-md

Click animation buttons

Click each button on the frontend to replay the selected animation preset.

Pulse

Bounce

Shake X