Title: CDN Error Mockups Author: Hiroshi Sato Published: јануари 27, 2026 Last modified: јули 26, 2026 --- Search plugins ![](https://ps.w.org/cdn-error-mockups/assets/banner-772×250.png?rev=3550691) ![](https://ps.w.org/cdn-error-mockups/assets/icon.svg?rev=3448002) # CDN Error Mockups By [Hiroshi Sato](https://profiles.wordpress.org/hiroshisato/) [Download](https://downloads.wordpress.org/plugin/cdn-error-mockups.1.2.0.zip) [Live Preview](https://mk.wordpress.org/plugins/cdn-error-mockups/?preview=1) * [Details](https://mk.wordpress.org/plugins/cdn-error-mockups/#description) * [Reviews](https://mk.wordpress.org/plugins/cdn-error-mockups/#reviews) * [Installation](https://mk.wordpress.org/plugins/cdn-error-mockups/#installation) * [Development](https://mk.wordpress.org/plugins/cdn-error-mockups/#developers) [Support](https://wordpress.org/support/plugin/cdn-error-mockups/) ## Description 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. Open a post, page, or template in the block editor. 2. Add the **CDN Error Mockup – Cloudflare** block. 3. Use the block settings sidebar to configure: 4. * The title and error code. * The “What happened?” and “What can I do?” messages. * Browser, Cloudflare, and Host names, locations, and status text. * The service that should appear as the source of the error. 5. Publish or preview the page. The block works well in: * 404 and other error templates. * Maintenance and temporary outage pages. * Theme and page-builder previews. * Demo, educational, and humorous content. ### IP address display and privacy The IP address is requested only after a visitor selects **Click to reveal**. The request is sent to this plugin’s REST API endpoint on the same WordPress site. No external IP lookup service is contacted. The endpoint checks `CF-Connecting-IP`, `X-Forwarded-For`, and `REMOTE_ADDR`. Sites behind a CDN or reverse proxy should configure that proxy correctly, because forwarded headers can otherwise be inaccurate or spoofed. The displayed value is informational and should not be used for authentication or authorization. ### Source code Human-readable JavaScript and SCSS source is available in the [`src` directory](https://github.com/hiroshisatoy/cdn-error-mockups/tree/main/src). Compiled assets distributed with the plugin are stored in `build`. ### Credits The project is based on ideas and code from [cloudflare-error-page](https://github.com/donlon/cloudflare-error-page) by donlon, licensed under the MIT License. See [THIRD_PARTY_LICENSES.md](https://github.com/hiroshisatoy/cdn-error-mockups/blob/main/THIRD_PARTY_LICENSES.md) for details. ## Screenshots [⌊Block placed in a 404 page template.⌉⌊Block placed in a 404 page template.⌉[ Block placed in a 404 page template. [⌊Error code, messages, source, and service statuses in the block settings.⌉⌊Error code, messages, source, and service statuses in the block settings.⌉[ Error code, messages, source, and service statuses in the block settings. [⌊The published error mockup on the front end.⌉⌊The published error mockup on the front end.⌉[ The published error mockup on the front end. ## Blocks This plugin provides 1 block. * CDN Error Mockup – Cloudflare Adds a block that mimics the Cloudflare downtime error screen. ## Installation #### Install from WordPress 1. Open **Plugins > Add New Plugin** in WordPress. 2. Search for **CDN Error Mockups**. 3. Select **Install Now**, and then activate the plugin. #### Install a ZIP file 1. Download `cdn-error-mockups.zip` from the [latest GitHub release][github-release]. 2. Open **Plugins > Add New Plugin > Upload Plugin**. 3. Select the ZIP file and choose **Install Now**. 4. Activate the plugin. ## FAQ ### Is this an official Cloudflare plugin? No. This is an independent project for educational and entertainment purposes. It is not affiliated with, endorsed by, or connected to Cloudflare, Inc. ### Can every part of the mock error be customized? The title, error code, explanatory messages, error source, and the labels and statuses for Browser, Cloudflare, and Host can be configured in the block settings sidebar. ### Does the plugin send visitor data to an external service? No. The optional IP reveal feature uses a same-site WordPress REST API request and server request headers. ### Can the block be used more than once? Yes. It can be added to multiple posts, pages, and templates. ### What versions are required? The plugin requires WordPress 6.9 or newer and PHP 8.0 or newer. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “CDN Error Mockups” is open source software. The following people have contributed to this plugin. Contributors * [ Hiroshi Sato ](https://profiles.wordpress.org/hiroshisato/) * [ Pixelium, Inc. ](https://profiles.wordpress.org/pixelium/) “CDN Error Mockups” has been translated into 1 locale. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/cdn-error-mockups/contributors) for their contributions. [Translate “CDN Error Mockups” into your language.](https://translate.wordpress.org/projects/wp-plugins/cdn-error-mockups) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/cdn-error-mockups/), check out the [SVN repository](https://plugins.svn.wordpress.org/cdn-error-mockups/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/cdn-error-mockups/) by [RSS](https://plugins.trac.wordpress.org/log/cdn-error-mockups/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.2.0 * Isolate block styles from the active theme. * Improve keyboard focus and the accessible IP reveal interaction. * Generate Ray IDs without depending on translated labels. * Add WordPress Coding Standards checks through Composer. * Add a reproducible WordPress Playground 404-template demo Blueprint. #### 1.1.1 * Add contextual translations for “Error code” in the inspector and mockup. #### 1.1.0 * Add configurable Browser, Cloudflare, and Host statuses. * Add the same-site IP address reveal feature. #### 1.0.0 * Initial release. ## Meta * Version **1.2.0** * Last updated **2 недели ago** * Active installations **Fewer than 10** * WordPress version ** 6.9 or higher ** * Tested up to **6.9.6** * PHP version ** 8.0 or higher ** * Languages * [English (US)](https://wordpress.org/plugins/cdn-error-mockups/) и [Japanese](https://ja.wordpress.org/plugins/cdn-error-mockups/). * [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/cdn-error-mockups) * Tags * [404](https://mk.wordpress.org/plugins/tags/404/)[block](https://mk.wordpress.org/plugins/tags/block/) [cloudflare](https://mk.wordpress.org/plugins/tags/cloudflare/)[error page](https://mk.wordpress.org/plugins/tags/error-page/) * [Advanced View](https://mk.wordpress.org/plugins/cdn-error-mockups/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/cdn-error-mockups/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/cdn-error-mockups/reviews/) ## Contributors * [ Hiroshi Sato ](https://profiles.wordpress.org/hiroshisato/) * [ Pixelium, Inc. ](https://profiles.wordpress.org/pixelium/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/cdn-error-mockups/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://github.com/sponsors/sato-jp)