Quick Start

This guide will walk you through styling your first block with WyvernPress. You’ll learn the basic workflow and see results immediately.

What You’ll Learn

By the end of this quick start, you’ll know how to:

• Open the WyvernPress styling panel
• Describe desired styling in plain English
• Preview CSS changes before applying
• Apply and save styles to your blocks

Time Required: 2 minutes

Step 1: Open the Block Editor

1. Create or Edit Content

   • Go to Posts → Add New Post (or edit an existing post)
   • Alternatively: Pages → Add New Page
   • The WordPress Block Editor (Gutenberg) will open

2. Add a Block to Style

   • Click the + icon to add a new block
   • Choose any block type (we’ll use a Button block for this example)
   • Type: /button and press Enter
   • Or search for “Button” in the block inserter

Step 2: Select Your Block

1. Click on the Block

   • Click anywhere on the button you just added
   • The block toolbar appears above the block
   • The block should have a blue outline indicating it’s selected

2. Verify Block Selection

   • Look at the top toolbar - you should see “Button” indicating the selected block type
   • The right sidebar shows block settings

Step 3: Open WyvernPress

There are three ways to open the WyvernPress styling panel:

Option A: Via Sidebar

1. Look at the right sidebar in the editor
2. Click the WyvernPress tab
3. The WyvernPress styling panel expands

Option B: Via Block Toolbar

1. With the block selected, look at the toolbar above it
2. Find the WyvernPress icon (a wyvern/dragon icon)
3. Click the icon to open the styling panel

Option C: Via Settings Menu

1. Click the three dots (…) in the top right corner
2. Select Plugins
3. Click WyvernPress

Step 4: Describe Your Desired Styling

Now comes the magic - simply describe how you want your button to look!

1. Find the Styling Input Box

   • In the WyvernPress panel, you’ll see a text area labeled “Describe your desired styling”
   • Click inside the text area to focus it

2. Type Your Description

   Try this example:

   Make this button blue with rounded corners and a subtle shadow

   Other examples you can try:

   • “Add a gradient from purple to pink”
   • “Make it larger with bold text”
   • “Add a hover effect that makes it glow”

3. Click Generate

   • Click the Generate CSS button
   • WyvernPress will process your request (usually 50-500ms)

Step 5: Preview the Results

1. Review Generated CSS

   • WyvernPress displays the generated CSS in a code preview box
   • You’ll see properties like background-color, border-radius, box-shadow

2. Live Preview

   • The CSS is automatically applied to your block as a preview
   • Look at your button - it should now have the styling you described
   • Changes are not saved yet - this is just a preview

3. Confidence Score

   • Notice the confidence indicator (if shown)
   • High confidence (70-100%): Pattern Library match (instant, free)
   • Lower confidence: AI-generated (takes 1-3 seconds)

Step 6: Apply or Refine

You have several options at this point:

Option A: Apply the Styling

If you’re happy with the preview:

1. Click the Apply Styles button
2. The CSS is permanently applied to your block
3. You’ll see a success message
4. The block now has custom CSS attributes saved

Option B: Refine the Styling

If you want to adjust:

1. Modify your description in the input box

   For example, change:

   Make this button blue with rounded corners and a subtle shadow

   to:

   Make this button dark blue with very rounded corners and a strong shadow

2. Click Generate CSS again

3. Preview the new results

4. Repeat until satisfied

Option C: Manual CSS Edit

For advanced users:

1. Click Edit CSS in the WyvernPress panel
2. Modify the CSS directly in the code editor
3. Changes preview in real-time
4. Click Apply when done

Step 7: Save Your Work

1. Save the Post/Page

   • Click Update (for existing posts) or Publish (for new posts)
   • Your styled block is now saved with its custom CSS

2. View on Frontend

   • Click View Post or View Page
   • Your button displays with the custom styling on the live site
   • The styles persist - they’re part of your block’s saved data

What Just Happened?

Let’s break down the workflow:

1. You selected a block - WyvernPress needs to know what to style
2. You described styling - Plain English, no CSS knowledge required
3. WyvernPress generated CSS - Either from Pattern Library (instant) or AI (2-3 seconds)
4. You previewed - See changes before committing
5. You applied - CSS saved to block attributes
6. You published - Styling persists on your live site

Pattern Library vs AI Styling

You might notice some requests are instant (under 50ms) while others take a few seconds. Here’s why:

Pattern Library (Instant)

When you request common styling patterns, WyvernPress uses its built-in Pattern Library:

• Speed: Under 50ms response time
• Cost: Zero - no API calls
• Coverage: 60% of typical requests
• Examples: “blue button”, “rounded corners”, “shadow”, “gradient”

AI Styling (2-3 seconds)

For complex or unique requests, WyvernPress uses AI:

• Speed: 1-3 seconds response time
• Cost: Small API cost (if using paid AI service)
• Coverage: Handles anything the Pattern Library can’t
• Examples: “steampunk-themed card with brass accents”, “neon glow effect”

Tip

Start Simple: Begin with simple descriptions like “blue button” or “add shadow”. WyvernPress will likely match these from the Pattern Library for instant, free results!

Try Different Block Types

Now that you’ve styled a button, try other blocks:

Paragraph Block

Make this text have a gradient background from light gray to white with padding

Heading Block

Style this heading with a gradient text effect from purple to pink

Image Block

Add rounded corners and a subtle border

Column Block

Add a hover effect that lifts this column slightly

Group Block

Make this a card with white background, shadow, and padding

Keyboard Shortcuts

Speed up your workflow with these shortcuts:

Action	Shortcut
Open WyvernPress panel	Ctrl+Shift+W (Windows) or Cmd+Shift+W (Mac)
Focus styling input	Tab when panel is open
Generate CSS	Ctrl+Enter (Windows) or Cmd+Enter (Mac)
Apply styles	Ctrl+S (Windows) or Cmd+S (Mac)

Common Beginner Mistakes

Avoid these pitfalls:

1. Forgetting to Select the Block

   • WyvernPress needs a selected block to style
   • If the panel is grayed out, click on a block first

2. Being Too Vague

   • ❌ “Make it pretty”
   • ✅ “Make this button blue with rounded corners”

3. Not Previewing First

   • Always preview before applying
   • Use the preview to experiment without committing

4. Overcomplicating Descriptions

   • Start simple and refine
   • Multiple simple requests > one complex request

Next Steps

Congratulations! You’ve styled your first block with WyvernPress.

Ready to level up?

• Learn Basic Usage: Master Pattern Library and AI features →
• Explore Patterns: Browse 100+ built-in patterns →
• Advanced Techniques: Custom patterns and workflows →

Quick Reference Card

Keep this handy while you learn:

Basic Workflow:

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

Common Descriptions:

• Color: “make it blue”, “add a gradient from X to Y”
• Spacing: “add padding”, “increase margin”
• Borders: “rounded corners”, “add a border”
• Effects: “add shadow”, “add hover effect”, “add glow”
• Size: “make it larger”, “increase font size”

Troubleshooting:

• Panel grayed out → Select a block first
• No preview showing → Check block is still selected
• CSS not applying → Click “Apply Styles” button
• Styles disappeared → Remember to save/publish post

Getting Help

Stuck on something?

• Basic Usage Guide: Detailed feature explanations →
• Pattern Library: See what’s possible →
• Support Forum: Ask the community →
• Video Tutorials: Coming soon!