Global Styles & Presets

warning

Global style changes are site-wide. Make changes on staging first and capture a before/after snapshot so you can roll back quickly.

Global Styles & Presets Explained

Concept	Meaning	Outcome
Presets	Reusable style configurations	Buttons/containers look the same everywhere
Global styles	Shared rules across blocks	Consistent spacing and typography
Token alignment	Match theme colors/fonts	Fewer overrides and conflicts

Why It Matters

• Presets prevent inconsistent buttons, padding, and typography.
• Global styles reduce per-page styling hacks.
• A consistent system makes maintenance and redesigns easier.

How It Works

GenerateBlocks applies styles based on block attributes, global settings, and theme styling. Your child theme CSS can provide a final layer for small site-specific tweaks.

flowchart LR
  PRE[Presets/global styles] --> BLOCKS[Block attributes]
  TOKENS[Theme tokens] --> BLOCKS
  BLOCKS --> OUT[Rendered styles]
  CHILD[Child CSS] --> OUT

Practical Walkthrough

Step 1: Locate Global Style Folders (Source Hints)

locate-global-styles-folders.sh

cd /var/www/html
ls -lah wp-content/plugins/generateblocks/includes/global-styles 2>/dev/null | head -n 60 || true
ls -lah wp-content/plugins/generateblocks/includes/patterns 2>/dev/null | head -n 60 || true

Step 2: Capture Theme Tokens for Alignment

capture-theme-tokens.sh

cd /var/www/html
wp option get theme_mods_generatepress --format=json > /tmp/theme_mods_generatepress.json
grep -n "color\|font" /tmp/theme_mods_generatepress.json | head -n 60

Step 3: Keep Your Custom CSS in One Place

locate-child-theme-css.sh

cd /var/www/html
ls -lah wp-content/themes/generatepress-child/assets/css 2>/dev/null || true

Step 4: Locate GenerateBlocks-Related Options (Optional)

list-generateblocks-options.sh

cd /var/www/html
wp option list --search=generateblocks --fields=option_name,autoload 2>/dev/null | head -n 60 || true

Practical Examples

Example 1: Button Preset Rules

Define one button style:

• Primary color
• Border radius
• Hover state
• Focus state

Then reuse it instead of designing new buttons per page.

Example 2: Container Preset Rules

Create one section container preset:

• Max width aligned to your theme container
• Consistent vertical padding
• Background surface color

Example 3: Document Your Presets

Preset name	Used for	Notes
Primary Button	CTAs	Used in hero + footer
Section Surface	Page sections	Default spacing

Example 4: Align Presets to CSS Variables

wp-content/themes/generatepress-child/assets/css/tokens.css

:root {
  --brand-primary: #1e3a8a;
  --brand-surface: #f8fafc;
}

When your presets and CSS both reference the same tokens, redesigns become much simpler.

Best Practices

Practice	Why
Keep preset count small	Easier to maintain
Name presets by intent	Prevents misuse
Align presets to theme tokens	Consistent look
Snapshot changes	Fast rollback
Avoid duplicating styles in multiple places	Prevents conflicts

Troubleshooting

Symptom	Cause	Fix
Preset not applying	Block overridden locally	Reset local overrides and re-apply preset
Styles differ by page	Multiple CSS sources	Audit child CSS and optimization plugins
Changes not visible	Cache	Purge LSCache and any CSS cache

Hands-On

1. Write down 3 presets you need (button, container, text).
2. Align each preset to your theme token table.
3. Apply presets to two different pages and verify consistency.
4. Capture a before/after snapshot of relevant options and theme mods.

Quick Reference

styles-presets-cheatsheet.sh

cd /var/www/html
ls -lah wp-content/plugins/generateblocks/includes/global-styles 2>/dev/null | head

What's Next

• Next: Performance Considerations
• Related: Global Design Variables