Basic Usage

This guide covers everything you need to know to use WyvernPress effectively. Whether you’re using the instant Pattern Library or AI-powered styling, you’ll learn best practices and workflows.

Understanding WyvernPress Components

WyvernPress has two main styling engines:

1. Pattern Library (Instant, Free)

The Pattern Library contains 100+ pre-built CSS patterns that match common styling requests:

Response Time: Under 50ms
Cost: Zero (no API calls)
Success Rate: Handles 60% of typical requests
Best For: Common styling tasks (colors, shadows, borders, etc.)

How It Works:

You describe desired styling
WyvernPress extracts keywords from your description
Pattern matching algorithm scores all patterns
If confidence ≥70%, pattern CSS is returned instantly
If confidence <70%, fallback to AI

Example Patterns:

“blue button” → background-color: #007cba;
“rounded corners” → border-radius: 8px;
“subtle shadow” → box-shadow: 0 2px 4px rgba(0,0,0,0.1);

2. AI Styling (2-3 seconds, Optional Cost)

For complex or unique styling requests, WyvernPress uses AI:

Response Time: 1-3 seconds
Cost: Small API cost if using paid AI service (free patterns first)
Success Rate: Handles anything Pattern Library can’t
Best For: Complex, unique, or creative styling

How It Works:

Pattern Library check fails (confidence <70%)
Request sent to OpenRouter AI (Claude, GPT-4, etc.)
AI analyzes your description and block context
Generates custom CSS optimized for your specific case
Returns with accessibility and browser compatibility checks

Example AI Requests:

“steampunk-themed card with brass metallic accents and vintage typography”
“glassmorphism effect with frosted background blur”
“animated gradient border that pulses on hover”

The WyvernPress Panel

Let’s explore the WyvernPress styling panel in detail.

Panel Layout

The panel consists of several sections:

Styling Input - Where you describe your desired styling
Generate Button - Triggers CSS generation
Preview Area - Shows generated CSS code
Confidence Indicator - Shows match quality (Pattern vs AI)
Action Buttons - Apply, Reset, Edit CSS
History - Previously applied styles (upcoming feature)

Styling Input Best Practices

Write effective styling descriptions:

Be Specific

❌ Vague: “Make it look good” ✅ Specific: “Blue background, white text, rounded corners, subtle shadow”

❌ Vague: “Add some color” ✅ Specific: “Add a gradient from purple (#8b5cf6) to pink (#ec4899)“

Use CSS-Friendly Terms

Even though you’re writing plain English, using CSS-related terms helps:

Good Terms:

Colors: “blue”, “gradient”, “transparent”
Spacing: “padding”, “margin”, “space”
Borders: “rounded corners”, “border”, “outline”
Effects: “shadow”, “glow”, “blur”, “hover effect”
Typography: “bold”, “font size”, “line height”
Layout: “center”, “flex”, “grid”

Example:

Add 20px padding, blue (#007cba) background, white text,
rounded corners (8px radius), and a subtle drop shadow

Break Complex Requests

Instead of one massive request, break it down:

❌ Too Complex:

Make this card have a gradient background from light blue to dark blue,
rounded corners, shadow, hover effect that lifts it up, border on hover,
larger text, and padding

✅ Step by Step:

Request 1: Blue gradient background and rounded corners
Request 2: Add shadow and padding
Request 3: Add hover effect that lifts the card

Confidence Indicator

The confidence indicator shows how WyvernPress matched your request:

Confidence	Source	Speed	Meaning
90-100%	Pattern	<50ms	Exact pattern match
70-89%	Pattern	<50ms	Good pattern match
50-69%	AI	1-3s	Pattern unsure, AI used
<50%	AI	1-3s	No pattern match, AI generated

What It Means for You:

High Confidence (70-100%): Pattern Library handled it, zero cost, instant
Low Confidence (<70%): AI used, small cost (if configured), takes 2-3 seconds

Working with Different Block Types

WyvernPress works with all Gutenberg blocks, but each has different styling possibilities.

Button Blocks

What You Can Style:

Background colors and gradients
Text color and typography
Border radius (roundness)
Padding and spacing
Shadows and effects
Hover states

Example Requests:

Blue gradient background with white text
Fully rounded pill-style button
Add glow effect on hover
Make it larger with more padding

Paragraph Blocks

What You Can Style:

Text color and size
Background colors
Padding and margins
Borders and shadows
Line height and spacing

Example Requests:

Light gray background with padding
Larger text (20px) with increased line height
Add left border accent in blue

Heading Blocks

What You Can Style:

Text color and gradients
Font size and weight
Text shadows and effects
Underlines and borders
Spacing

Example Requests:

Gradient text from purple to pink
Add underline accent in brand color
Larger heading with tight letter spacing

Image Blocks

What You Can Style:

Border radius (rounded corners)
Borders and shadows
Filters (grayscale, blur, etc.)
Aspect ratio and sizing
Hover effects

Example Requests:

Rounded corners with subtle shadow
Grayscale with color on hover
Add border and slight zoom on hover

Group/Container Blocks

What You Can Style:

Background colors and gradients
Padding and spacing
Borders and shadows
Full card styling
Responsive behavior

Example Requests:

White card with shadow and padding
Background image with overlay
Rounded corners and border

Column Blocks

What You Can Style:

Individual column backgrounds
Spacing between columns
Column shadows and borders
Responsive stacking
Alignment

Example Requests:

Add gap between columns
Each column has its own background
Stack on mobile devices

Preview and Apply Workflow

Understanding the preview system ensures you get exactly what you want.

Live Preview

When you generate CSS, WyvernPress applies it as a preview:

Non-Destructive: Original block styling preserved
Temporary: Not saved until you click “Apply”
Real-Time: See exactly how it will look
Reversible: Can generate new CSS or reset

Preview Controls

While previewing, you have options:

Regenerate: Try a different description

Modify your input text
Click “Generate CSS” again
New preview replaces old one

Edit CSS: Manual adjustments

Click “Edit CSS” button
Modify CSS directly in code editor
Changes preview in real-time
Good for fine-tuning AI or pattern results

Reset: Remove preview

Click “Reset” or close panel
Block returns to original state
No changes saved

Apply: Make it permanent

Click “Apply Styles”
CSS saved to block attributes
Persists when you save post

Apply Styles Button

When you click “Apply Styles”:

CSS is saved to the block’s attributes
Block stores custom CSS in its data
Styles persist across editor sessions
Styles appear on frontend when post is published
Success message confirms application

Remember to Save Post: Applying styles only saves them to the block. You still need to save/publish the post for changes to appear on your live site.

Undo and Redo

WyvernPress respects WordPress’s undo/redo system:

Undo Applied Styles

After applying styles, you can undo:

Press Ctrl+Z (Windows) or Cmd+Z (Mac)
Or click the undo arrow in the top toolbar
Block reverts to previous state
Can redo with Ctrl+Y / Cmd+Shift+Z

Remove All Custom Styles

To completely remove WyvernPress styling from a block:

Method 1: Via Panel

Select the block
Open WyvernPress panel
Click “Remove Styles” (appears if block has custom styles)
Confirm removal
Block returns to theme default styling

Method 2: Via Block Settings

Select the block
Click three dots (…) in block toolbar
Select “Clear all custom styles”
Confirm

Method 3: Advanced Tab

Select the block
Open block settings (right sidebar)
Go to “Advanced” tab
Find “Additional CSS” field
Clear the WyvernPress-generated CSS
Click elsewhere to apply

Performance Tips

Get the best performance from WyvernPress:

Use Pattern Library When Possible

Pattern Library is 100x faster than AI:

Pattern: <50ms response
AI: 1-3 seconds response

How to Favor Patterns:

Use common CSS terms (“blue”, “shadow”, “rounded”)
Keep descriptions simple
Check pattern library documentation for supported patterns

Cache Benefits

WyvernPress caches results aggressively:

Pattern Cache: Patterns cached in WordPress object cache
AI Result Cache: AI-generated CSS cached for 5 minutes
Browser Cache: Applied styles cached in your browser

What This Means:

Identical requests return instantly from cache
Even AI requests are instant if recently generated
Cache cleared when plugin updated

Batch Similar Blocks

Styling multiple similar blocks? Generate once, apply to all:

Style one block with WyvernPress
Copy the block (Ctrl+C / Cmd+C)
Paste multiple times (Ctrl+V / Cmd+V)
All copies have the same styling
Adjust individual blocks if needed

Accessibility Considerations

WyvernPress generates accessible CSS by default:

Automatic Accessibility Checks

When generating CSS, WyvernPress:

Color Contrast: Ensures text meets WCAG 2.1 AA (4.5:1 ratio)
Focus States: Adds visible focus indicators for interactive elements
Screen Reader: Preserves semantic HTML and ARIA attributes
Keyboard Navigation: Ensures styled elements remain keyboard accessible

Accessibility Warnings

If your request would create accessibility issues, WyvernPress warns you:

Example: Requesting light gray text on white background

⚠️ Accessibility Warning: Text contrast ratio (2.1:1) doesn't meet
WCAG AA standards (4.5:1 required). Consider darker text or lighter background.

You can:

Accept the suggestion and modify your request
Proceed anyway (not recommended)
Edit CSS manually to fix contrast

Manual Accessibility Checks

After applying styles, verify accessibility:

Browser DevTools:
- Right-click element → Inspect
- Check contrast ratio in DevTools
- Chrome/Edge show warnings for low contrast
WordPress Site Health:
- Go to Tools → Site Health
- Check for accessibility issues
External Tools:
- WAVE Browser Extension
- axe DevTools

Common Patterns Reference

Quick reference for most-requested styling patterns:

Colors

Blue background → background-color: #007cba;
Gradient blue to purple → background: linear-gradient(135deg, #007cba, #8b5cf6);
Transparent background → background-color: transparent;
White text → color: #ffffff;

Spacing

Add padding → padding: 1rem;
Large padding → padding: 2rem;
Add margin → margin: 1rem;
Space between items → gap: 1rem;

Borders

Rounded corners → border-radius: 8px;
Fully rounded → border-radius: 9999px;
Blue border → border: 1px solid #007cba;
Thick border → border: 3px solid;

Shadows

Subtle shadow → box-shadow: 0 2px 4px rgba(0,0,0,0.1);
Strong shadow → box-shadow: 0 4px 12px rgba(0,0,0,0.3);
Glow effect → box-shadow: 0 0 20px rgba(99,102,241,0.5);

Hover Effects

Lift on hover → transform: translateY(-4px);
Grow on hover → transform: scale(1.05);
Brighten on hover → filter: brightness(1.1);
Shadow on hover → box-shadow: 0 8px 20px rgba(0,0,0,0.2);

Typography

Larger text → font-size: 1.25rem;
Bold text → font-weight: 700;
Uppercase → text-transform: uppercase;
Letter spacing → letter-spacing: 0.05em;

Troubleshooting Common Issues

”No Block Selected” Message

Problem: WyvernPress panel shows “No block selected”

Solutions:

Click on any block in the editor
Ensure block is active (blue outline)
Try clicking directly on block content, not margin

Preview Not Showing

Problem: Generated CSS but no visual change

Solutions:

Verify block is still selected
Check browser console for errors (F12 → Console)
Ensure CSS targets the right element
Try refreshing the editor (Ctrl+F5)

Styles Disappear After Reload

Problem: Applied styles gone after reopening post

Solutions:

Verify you clicked “Apply Styles” button
Ensure you saved/published the post after applying
Check if caching plugin is stripping custom CSS
Verify WyvernPress is still activated

AI Requests Failing

Problem: “Failed to generate CSS” error message

Solutions:

Verify OpenRouter API key is valid
Check API key has available credits
Ensure internet connection is stable
Try rephrasing request to use Pattern Library
Check browser console for specific error

CSS Not Appearing on Frontend

Problem: Styles look good in editor but not on live site

Solutions:

Clear WordPress cache (if using cache plugin)
Clear browser cache (Ctrl+Shift+Delete)
Verify post/page is published, not draft
Check theme isn’t overriding custom styles
Inspect element in DevTools to see if CSS is applied

Advanced Usage Preview

Ready to go deeper? These advanced features are covered in other guides:

Custom Patterns: Add your own patterns to the library →
API Integration: Use WyvernPress API programmatically →
Performance Tuning: Optimize for high-traffic sites →
Bulk Operations: Style multiple blocks efficiently →

Best Practices Summary

Follow these guidelines for best results:

Start Simple: Use basic patterns before complex AI requests
Be Specific: Clear descriptions get better results
Preview First: Always check before applying
Test Accessibility: Verify contrast and focus states
Save Often: Apply styles, then save post
Use Patterns: 60% of requests can use instant Pattern Library
Iterate: Refine descriptions if first result isn’t perfect
Check Frontend: Verify styles on published site

Next Steps

You now have a solid understanding of WyvernPress basics!

Explore these resources to continue learning:

Pattern Library: Browse all 100+ patterns →
AI Styling: Learn advanced AI features →
CSS Generation: Understand how CSS is created →
Advanced Techniques: Custom patterns and workflows →

Quick Reference

Basic Workflow:

Select block → 2. Open WyvernPress → 3. Describe styling → 4. Generate → 5. Preview → 6. Apply → 7. Save

Pattern vs AI:

Pattern: <50ms, free, 60% of requests
AI: 1-3s, costs (if configured), complex requests

Keyboard Shortcuts:

Open WyvernPress: Ctrl/Cmd+Shift+W
Generate CSS: Ctrl/Cmd+Enter
Apply Styles: Ctrl/Cmd+S
Undo: Ctrl/Cmd+Z

Common Terms:

Colors: blue, gradient, transparent
Spacing: padding, margin, gap
Borders: rounded corners, border
Effects: shadow, glow, hover
Typography: bold, font size, uppercase