Developers · Gutenberg
Status Page block for WordPress
Display system/service status with component health indicators, uptime percentages, and incident history.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Display system/service status with component health indicators, uptime percentages, and incident history.
Inspector panels on this block: Page Info, Components, Incidents, Header & Layout, Status Badge Colors, Incident & Update Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Overall Status” options: ✅ All Systems Operational, ⚠️ Partial Outage, 🔴 Major Outage, 🔧 Under Maintenance; “Status” options: ✅ Operational, ⚠️ Degraded, 🔴 Outage, 🔧 Maintenance; “Severity” options: 🔴 Major, 🟡 Minor, ℹ️ Notice; “Status (Incidents)” options: Investigating, Identified, Monitoring, Resolved.
Where to find it
Gutenberg inserter → Developers → search “Status Page” (block name `blockenberg/status-page` in block.json). Style it in the sidebar after insert.
How to use Status Page block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Status Page”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Page Info. Set “Page Title”, “Overall Status”, “Show "Last Updated"”, “Last Updated Text”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Page Title | Text field in the inspector. block.json default: System Status. Saved as `pageTitle`. |
| Overall Status | Select control; the chosen value is saved on the block. Options: ✅ All Systems Operational; ⚠️ Partial Outage; 🔴 Major Outage; 🔧 Under Maintenance. block.json default: operational. Saved as `overallStatus`. |
| Show "Last Updated" | On/off toggle in the inspector. On by default. Saved as `showLastUpdated`. |
| Last Updated Text | Text field in the inspector. block.json default: February 24, 2026 · 12:00 UTC. Saved as `lastUpdated`. |
| Components Heading | Text field in the inspector. block.json default: Components. Saved as `componentsLabel`. |
| Show Uptime % | On/off toggle in the inspector. On by default. Saved as `showUptime`. |
| Show Descriptions | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Name | Text field in the inspector. Saved as `components`. |
| Description | Text field in the inspector. Saved as `components`. |
| Status | Select control; the chosen value is saved on the block. Options: ✅ Operational; ⚠️ Degraded; 🔴 Outage; 🔧 Maintenance. Saved as `components`. |
| Uptime % | Text field in the inspector. Saved as `components`. |
| Show Incidents Section | On/off toggle in the inspector. On by default. Saved as `showIncidents`. |
| Incidents Heading | Text field in the inspector. block.json default: Recent Incidents. Saved as `incidentsLabel`. |
| Incidents — Title | Text field in the inspector. Saved as `incidents`. |
| Severity | Select control; the chosen value is saved on the block. Options: 🔴 Major; 🟡 Minor; ℹ️ Notice. Saved as `incidents`. |
| Date | Text field in the inspector. Saved as `incidents`. |
| Time (UTC) | Text field in the inspector. Saved as `incidents`. |
| Status (Incidents) | Select control; the chosen value is saved on the block. Options: Investigating; Identified; Monitoring; Resolved. Saved as `incidents`. |
| Message | Multiline text field in the inspector. Saved as `incidents`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Block BG | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Header & Layout — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Header BG | Color control in the inspector. block.json default: #0f172a. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Meta Text | Color control in the inspector. block.json default: #94a3b8. Saved as `metaColor`. |
| Section Head | Color control in the inspector. block.json default: #111827. Saved as `sectionHeadColor`. |
| Component Name | Color control in the inspector. block.json default: #1f2937. Saved as `componentNameColor`. |
| Component Desc | Color control in the inspector. block.json default: #6b7280. Saved as `componentDescColor`. |
| Operational BG | Color control in the inspector. block.json default: #dcfce7. Saved as `operationalBg`. |
| Operational Text | Color control in the inspector. block.json default: #14532d. Saved as `operationalColor`. |
| Degraded BG | Color control in the inspector. block.json default: #fef9c3. Saved as `degradedBg`. |
| Degraded Text | Color control in the inspector. block.json default: #713f12. Saved as `degradedColor`. |
| Outage BG | Color control in the inspector. block.json default: #fee2e2. Saved as `outageBg`. |
| Outage Text | Color control in the inspector. block.json default: #991b1b. Saved as `outageColor`. |
| Maintenance BG | Color control in the inspector. block.json default: #e0e7ff. Saved as `maintenanceBg`. |
| Maintenance Text | Color control in the inspector. block.json default: #3730a3. Saved as `maintenanceColor`. |
| Major Border | Color control in the inspector. block.json default: #ef4444. Saved as `incidentBorderMajor`. |
| Minor Border | Color control in the inspector. block.json default: #f59e0b. Saved as `incidentBorderMinor`. |
| Notice Border | Color control in the inspector. block.json default: #3b82f6. Saved as `incidentBorderNotice`. |
| Dot: Investigating | Color control in the inspector. block.json default: #f59e0b. Saved as `updateDotInvestigating`. |
| Dot: Identified | Color control in the inspector. block.json default: #ef4444. Saved as `updateDotIdentified`. |
| Dot: Monitoring | Color control in the inspector. block.json default: #3b82f6. Saved as `updateDotMonitoring`. |
| Dot: Resolved | Color control in the inspector. block.json default: #22c55e. Saved as `updateDotResolved`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Display system/service status with component health indicators, uptime percentages, and incident history — that is the job of Status Page, not a generic content block.
- Use it when you need the editor control labeled “Page Title”, which exists on this block’s inspector.
- It matches pages about status, uptime, incident.
- Inserter grouping: docs sites, utilities, and developer landing pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Status Page block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Status Page”. It sits under Developers. After insert, open Page Info and set “Page Title”, “Overall Status”, “Show "Last Updated"”, “Last Updated Text”.
What makes Status Page different from other Blockenberg blocks?
Display system/service status with component health indicators, uptime percentages, and incident history. Inspector labels on this block include “Page Title”, “Overall Status”, “Show "Last Updated"”, “Last Updated Text”.
Is the Status Page Gutenberg block free?
Yes. Status Page ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Status Page to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Page Info, Components, Incidents, Header & Layout).
Related developers blocks
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Barcode Generator
Generate Code128 barcodes from any text or number. Customize bar height, width, colors, and download as PNG.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Browser Mockup
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Status Page from the Gutenberg inserter.