Make Important Information Impossible to Miss
WP Documentation includes a beautiful, accessible callout block with five built-in styles that work perfectly in both light and dark mode — no extra plugins needed.
Just add the block → choose style → type your message → done.
Note
This is the default style — perfect for tips, best practices, and gentle reminders.
Info
Use this when providing helpful information or context (most common style).
Success
Great for confirming actions, completed steps, or positive outcomes.
Warning
Highlight potential issues, deprecated features, or things that need attention.
Error
Critical alerts — breaking changes, security notices, or things that will fail.
Features That Just Work
| Feature | Included | Details |
|---|---|---|
| Full dark mode support | Yes | Colors auto-invert beautifully |
| Accessible contrast | Yes | WCAG AA compliant in both modes |
| Border or filled style | Yes | Toggle in block settings |
| Print-optimized | Yes | Icons preserved, colors adjusted |
| Works in columns | Yes | Responsive & mobile-ready |
Real-World Patterns That Work
| Pattern | Example Use Case | Recommended Style |
|---|---|---|
| API Deprecation | Old endpoint removed in v4 | error + warning |
| New Feature Launch | Introducing Mermaid diagrams | announcement |
| Common Mistake | Forgetting to clear cache after update | warning |
| Pro Feature Teaser | Available in WP Documentation Pro only | tip |
| Migration Checklist | Step-by-step upgrade guide | success + info |
| User Testimonial | Quote from a happy customer | quote |
| Beta Feature | Try our new AI writer (opt-in) | experimental |
Combine with Other Blocks
Flowchart
flowchart LR
A[Problem] --> B{Use Callout}
B --> C[Info]
B --> D[Warning]
B --> E[Success]
B --> F[Tip]
C --> G[Reader understands]
D --> H[Reader avoids mistake]
E --> I[Reader feels confident]
F --> J[Reader becomes power user]