PHP & JS · WORDPRESS ACCESSIBILITY

sensitive-image-block — Accessible Content-Warning & Blur-Reveal Block for WordPress

sensitive-image-block is a WordPress Gutenberg block that wraps medical, spoiler, or sensitive imagery in a customizable Gaussian blur overlay with an explicit reveal toggle. It is fully keyboard-accessible, announces state changes to screen readers via aria-expanded, and requires zero external JavaScript frameworks.

$ wp plugin activate sensitive-image-block

GitHub ↗

CSS Blur GPU Cost < 0.3 ms

ARIA Compliance aria-expanded + role

JS Interactivity WP Interactivity API

Layout Shift 0.000 CLS

Interactive Sensitive Image Blur Radius & ARIA Toggle Simulator Warning Label & Image Alt Description Gaussian Blur Filter & Reveal Behavior

Deterministic Execution Output & Telemetry STATUS: READY // 0 ERRORS

HTML / CSS (Gutenberg Block Output)

<figure class="wp-block-bhubbard-sensitive-image" data-blurred="true">
  <img src="clinical-photo.jpg" alt="Post-operative dental radiograph" class="sensitive-img" style="filter:blur(24px);transition:filter .25s ease;" />
  <button type="button" class="sensitive-toggle" aria-expanded="false" onclick="this.parentElement.dataset.blurred = this.parentElement.dataset.blurred === 'true' ? 'false' : 'true'">
    <span>⚠️ Sensitive Content — Click to Reveal</span>
  </button>
</figure>

Production Engineering Specifications

Repository:    https://github.com/bhubbard/sensitive-image-block
Live Studio:   https://code.brandonhubbard.com/sensitive-image-block/
Portal:        https://code.brandonhubbard.com/
Install:       wp plugin activate sensitive-image-block
Design System: Brandon Hubbard Swiss Modernist (#0A0A0C / 1px Exposed Structural Grid)