Developers · Gutenberg
Error Page block for WordPress
404 / error page section with large decorative error code, heading, description, primary and secondary CTA buttons, optional illustration image, and full background controls.
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
404 / error page section with large decorative error code, heading, description, primary and secondary CTA buttons, optional illustration image, and full background controls.
Inspector panels on this block: Content, Illustration, Sizing. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Developers → search “Error Page” (block name `blockenberg/error-page` in block.json). Style it in the sidebar after insert.
How to use Error Page block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Error Page”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Content. Set “Show Error Code”, “Error Code”, “Primary Button Label”, “Primary Button URL”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Error Code | On/off toggle in the inspector. On by default. Saved as `showError`. |
| Error Code | Text field in the inspector. block.json default: 404. Saved as `errorCode`. |
| Primary Button Label | Text field in the inspector. block.json default: Go to Homepage. Saved as `primaryLabel`. |
| Primary Button URL | Text field in the inspector. block.json default: /. Saved as `primaryUrl`. |
| Show Secondary Button | On/off toggle in the inspector. On by default. Saved as `showSecondary`. |
| Secondary Button Label | Text field in the inspector. block.json default: Contact Support. Saved as `secondaryLabel`. |
| Secondary Button URL | Text field in the inspector. block.json default: /contact. Saved as `secondaryUrl`. |
| Show Search Bar | On/off toggle in the inspector. Off by default. Saved as `showSearch`. |
| Show Illustration Image | On/off toggle in the inspector. Off by default. Saved as `showImage`. |
| Image Width (px) | Numeric range control in the inspector. Range 100–600. block.json default: 360. Saved as `imageWidth`. |
| Max Width (px) | Numeric range control in the inspector. Range 400–1200. block.json default: 700. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–300. block.json default: 100. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–300. block.json default: 100. Saved as `paddingBottom`. |
| Error Code (Typo Code) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoCode`. |
| Heading | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeading`. |
| Body / Buttons | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBody`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Error Code Color | Color control in the inspector. block.json default: #f3f0ff. Saved as `errorCodeColor`. |
| Heading | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Body Text | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
| Primary Button BG | Color control in the inspector. block.json default: #7c3aed. Saved as `primaryBg`. |
| Primary Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `primaryColor`. |
| Secondary Button Text | Color control in the inspector. block.json default: #374151. Saved as `secondaryColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- 404 / error page section with large decorative error code, heading, description, primary and secondary CTA buttons, optional illustration image, and full background controls — that is the job of Error Page, not a generic content block.
- Use it when you need the editor control labeled “Show Error Code”, which exists on this block’s inspector.
- It matches pages about 404, error, not found.
- 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 Error Page block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Error Page”. It sits under Developers. After insert, open Content and set “Show Error Code”, “Error Code”, “Primary Button Label”, “Primary Button URL”.
What makes Error Page different from other Blockenberg blocks?
404 / error page section with large decorative error code, heading, description, primary and secondary CTA buttons, optional illustration image, and full background controls. Inspector labels on this block include “Show Error Code”, “Error Code”, “Primary Button Label”, “Primary Button URL”.
Is the Error Page Gutenberg block free?
Yes. Error Page ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Error 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: Content, Illustration, Sizing).
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 Error Page from the Gutenberg inserter.