CDN Error Mockups

CDN Error Mockups provides a block for creating realistic Cloudflare-style error screens. Use it in error page templates, maintenance pages, design previews, and lighthearted site experiences.

The block is independently developed and is not affiliated with, endorsed by, or connected to Cloudflare, Inc.

Features

• Customize the error title, HTTP error code, and explanatory messages.
• Configure Browser, Cloudflare, and Host labels and statuses independently.
• Choose which service is presented as the source of the error.
• Reveal the visitor’s IP address without calling an external service.
• Generate a new mock Ray ID and timestamp when the page loads.
• Preserve keyboard focus and announce the revealed IP to assistive technology.
• Adapt the three service statuses for desktop and narrow screens.
• Keep the block’s CSS isolated from the surrounding WordPress theme.

Usage

1. 01Open a post, page, or template in the block editor.
2. 02Add the CDN Error Mockup – Cloudflare block.
3. 03Use the block settings sidebar to configure: The title and error code.
4. 04The “What happened?” and “What can I do?” messages.
5. 05Browser, Cloudflare, and Host names, locations, and status text.
6. 06The service that should appear as the source of the error.
7. 07Publish or preview the page.

The block works well in:

• 404 and other error templates.
• Maintenance and temporary outage pages.
• Theme and page-builder previews.