Global Styles in Editor

Introduction

The Global Styles Extension adds a powerful styling panel to every Spectra block in the WordPress editor. It provides instant access to pre-built CSS classes, custom styling options, and a dedicated sidebar for creating and managing your own CSS classes. This extension bridges the gap between the Global Styles Admin Dashboard and your block styling workflow, making professional design accessible directly in the editor.

Extension Architecture

The Global Styles Extension works across three main interfaces:

• Block Panel: Global Styles dropdown in every Spectra block’s settings
• Editor Sidebar: Dedicated sidebar panel with tabs for Classes, Variables, and Cheatsheet
• Full Modal: Expanded modal view for comprehensive class management

How to Access Global Styles in the Editor

Method 1: Block Panel

1. Select Any Spectra Block
   • Click on any Spectra block (Container, Buttons, Text, etc.)
   • Look for the Global Styles panel in the right sidebar
   • Panel appears automatically for all supported blocks
2. Use the Dropdown
   • Click the dropdown to see available classes
   • Search by typing to filter options
   • Select multiple classes to apply them

Method 2: Editor Sidebar

1. Open the Sidebar
   • Click the Spectra Global Styles icon in the top toolbar
   • Or go to Plugins > Spectra Global Styles in the editor menu
2. Navigate the Tabs
   • Custom Classes: Create and edit CSS classes
   • Variables: Quick reference for CSS variables
   • Cheatsheet: Searchable reference of all available classes
3. Expand to Full View
   • Click “Open Full View” button to access the comprehensive modal interface

Settings Panel Organization

Block Panel – Global Styles Dropdown

Feature	Description	How to Use
Class Selection	Multi-select dropdown	Click to open, click classes to select
Search	Type-to-filter	Start typing to find specific classes
Categories	Organized groups	Browse by Typography, Colors, Spacing, etc.
Custom Classes	User-created classes	Appear at top of dropdown
Default Class	Block-specific default	Automatically assigned, can be removed

Sidebar Panel – Tab Overview

Tab	Purpose	Key Features
Custom Classes	Create/edit CSS classes	Code editor, pseudo-selectors, live save
Variables	Reference CSS variables	Quick copy, search, categories
Cheatsheet	Browse all classes	Search, filter by category, copy to clipboard

Custom Classes Tab

Creating a New Class

1. Enter Class Name
   • Type your class name in the “Add New Class” field
   • Use lowercase letters, numbers, and hyphens
   • Avoid starting with numbers
2. Click Add Class
   • Your new class is created and automatically selected
   • The CSS editor opens for immediate editing
3. Write CSS Properties
   • Type CSS properties directly (no selector needed)
   • Example: background: var(--color--primary);
   • Autocomplete suggests properties and values as you type

CSS Code Editor Features

Feature	Description	Benefit
Syntax Highlighting	CSS code is color-coded	Easier to read and write
Autocomplete	Suggests CSS properties and values	Faster coding, fewer errors
Live Validation	Checks CSS as you type	Immediate error feedback
WordPress Colors	Matches admin theme	Consistent visual experience

Using the CSS Autocomplete

The editor provides intelligent CSS autocomplete:

1. Property Suggestions
   • Start typing a property name (e.g., “back”)
   • Autocomplete shows matching properties (background, background-color, etc.)
   • Press Enter or Tab to accept
2. Value Suggestions
   • After typing a property and colon (e.g., “display: “)
   • Autocomplete shows valid values (flex, grid, block, etc.)
   • Includes CSS variables, colors, and common values
3. Keyboard Shortcuts
   • Ctrl+Space – Trigger autocomplete manually
   • Enter/Tab – Accept suggestion
   • Escape – Close autocomplete dropdown
   • Arrow keys – Navigate suggestions

Pseudo-Selector Support

Style different states of your class:

Selector	Purpose	Example Use
Default	Base styling	Background, padding, colors
Hover	Mouse hover state	Darker background, scale effect
Active	Click/pressed state	Pressed button appearance
Focus Visible	Keyboard focus	Outline, ring effect
Focus Within	Child has focus	Container highlight
Disabled	Disabled elements	Greyed out, reduced opacity
Checked	Checked inputs	Checkbox/radio selected state
Visited	Visited links	Different link color
First Child	First element	Remove top margin
Last Child	Last element	Remove bottom margin
Only Child	Single child	Special single-item styling

Saving Your Changes

1. Make Edits
   • Changes are tracked automatically
   • “Unsaved changes” indicator appears
2. Click Save Changes
   • Button activates when changes are detected
   • Styles apply immediately to editor and frontend
3. Error Handling
   • Invalid CSS prevents saving
   • Button shows specific error (Duplicate, Invalid Format, Invalid CSS)

Variables Tab

Quick access to all CSS variables defined in Global Styles Admin:

Variable Categories

• Colors: Primary, secondary, base colors with all shades
• Spacing: XS through XXL spacing values
• Typography: Font sizes for text and headings

Using Variables

1. Browse or Search
   • Scroll through categories
   • Use search to find specific variables
2. Copy Variable
   • Click the copy icon next to any variable
   • Variable name copied to clipboard
3. Use in Custom Classes
   • Paste into the CSS editor
   • Example: color: var(--color--primary);

Cheatsheet Tab

Searchable reference for all available Global Styles classes:

Search and Filter

Filter Type	How to Use	Example
Text Search	Type in search field	“primary”, “padding”, “lg”
Category Filter	Click category buttons	Colors, Spacing, Typography
Tag Filter	Select tags	Size tags (xs, sm, md, lg)

Copying Classes

1. Find Your Class
   • Search or browse to find the class you need
2. Click Copy
   • Click the copy icon next to the class name
   • Class name copied to clipboard
3. Apply to Block
   • Paste into Global Styles dropdown
   • Or add to Additional CSS Classes field

Full Modal View

Access expanded functionality by clicking “Open Full View”:

Modal Layout

• Left Sidebar: Class list with search and management
• Center Panel: CSS code editor with full height
• Right Panel: Live preview and cheatsheet

Additional Features in Modal

Feature	Description
Larger Editor	More space for complex CSS
Class Sidebar	Easy navigation between classes
Preview Panel	See styling before saving
Bulk Actions	Manage multiple classes

Tips and Best Practices

Design Guidelines

1. Use System Variables
   • Always use CSS variables when possible
   • var(--color--primary) instead of #3498db
   • Ensures consistency and easy global updates
2. Organize Your Classes
   • Use descriptive names: card-hover, btn-primary, section-dark
   • Group related classes with prefixes
3. Mobile Considerations
   • Test classes on different screen sizes
   • Use responsive units (rem, %) where appropriate

Workflow Tips

1. Start Simple
   • Begin with basic classes
   • Add complexity as needed
2. Use Pseudo-Selectors
   • Create interactive states for engagement
   • Always define base styles first
3. Reference Cheatsheet
   • Check available classes before creating new ones
   • Combine system classes with custom ones

Performance Tips

1. Keep Classes Focused
   • One purpose per class
   • Avoid overly complex selectors
2. Reuse Classes
   • Create reusable patterns
   • Apply same class to multiple blocks
3. Clean Up Unused Classes
   • Periodically review your custom classes
   • Delete classes that are no longer used

Troubleshooting

Common Issues

Autocomplete not showing CSS properties?

• Ensure you’re typing after a property name or colon
• Try pressing Ctrl+Space to trigger manually
• Check that you’re not inside a comment

Changes not saving?

• Check for CSS validation errors (button will show error type)
• Ensure all properties have valid values
• Remove any syntax errors (missing colons, semicolons)

Classes not appearing on frontend?

• Clear browser cache
• Check if theme CSS is overriding
• Verify the class is applied to the block

Sidebar not opening?

• Ensure Spectra Pro plugin is active
• Check for JavaScript errors in console
• Try refreshing the editor

Editor height too small?

• The editor expands to fill available space
• Try opening Full Modal view for more room
• Scroll within the editor if content is long

CSS Validation Errors

Error	Meaning	Solution
Invalid Format	CSS syntax error	Check for missing colons or semicolons
Invalid CSS	Browser doesn’t support property/value	Verify property name and value are valid
Duplicate Properties	Same property twice	Remove duplicate, keep one

Frequently Asked Questions

Q: Can I use Global Styles classes on non-Spectra blocks? 
A: The dropdown appears only on Spectra blocks, but we are thinging of expanding it further for core blocks.

Q: Do my custom classes work on the frontend? 
A: Yes! Custom classes are automatically included in the generated CSS and work on both editor and frontend.

Q: Can I import/export my custom classes? 
A: Currently, classes are stored in the WordPress database. Use WordPress export/import or database tools to migrate between sites.

Q: How do I delete a custom class? 
A: Select the class, then click the “Delete Selected Class” button. Confirm the deletion in the dialog.

Q: Can I use CSS variables from my theme? 
A: Yes! The CSS editor accepts any valid CSS including theme variables. Use them like: color: var(--theme-primary);

Q: Why don’t I see my custom classes in the dropdown? 
A: Custom classes appear in the “Custom Classes” category at the top of the dropdown. Make sure you’ve saved the class after creating it.

Q: Can I undo changes in the CSS editor? 
A: Yes! Use Ctrl+Z (or Cmd+Z on Mac) to undo. The editor maintains a full undo history.

Q: How do hover states work with the CSS editor? 
A: Select the “Hover” pseudo-selector from the dropdown before writing CSS. The system automatically generates the proper :hover selector.

Compatibility and Requirements

System Requirements

• WordPress: 6.6.0 or higher required
• PHP: 8.1 or higher
• Modern Browsers: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+ with CSS support

Theme Compatibility

• Universal Support: Works with all standard WordPress themes
• Block Themes: Full compatibility with FSE themes
• Classic Themes: Works with traditional themes using Gutenberg

Dependencies

The CSS editor requires modern browser features:

• ES6 JavaScript support
• CSS Custom Properties (CSS Variables)
• Flexbox and Grid layout support

Performance Considerations

• Minimal Impact: CSS generated only for used classes
• Cached Styles: Editor stylesheets cached for performance
• Lazy Loading: Modal components loaded on demand