WP Manifestindependent plugin directory
manifest / editor / gutenberg-callout-block

Callout and Alert Box Block

A semantic, EAA-compliant callout and alert box block for Gutenberg, built using the native Block Styles API.

by Moshtafizur · github.com/moshtafizur-rahman-anty/gutenberg-callout-block · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/moshtafizur-rahman-anty/gutenberg-callout-block/archive/refs/heads/master.zip
Readme github.com/moshtafizur-rahman-anty/gutenberg-callout-block ↗

📣 CraftBlocks: Styled Callout & Alert Box

A native Gutenberg block demonstrating strict "Design with Core" principles, dynamic PHP rendering, and EAA-compliant accessibility.

📺 Watch the Build Process

🏗️ Development Approach

When building this modern Gutenberg block, I avoided writing bloated custom React sidebars to ensure enterprise-level performance and security:

  • "Design with Core" (Native UI): Instead of manually managing React state and <InspectorControls>, I utilized the native Block Styles API inside block.json. This forces WordPress to generate the color variant UI automatically, drastically reducing JavaScript payload.
  • Secure Dynamic Rendering: The block strictly uses a render.php file for frontend output. All user-generated rich text is heavily sanitized using wp_kses_post() to prevent malicious script injections while preserving allowed formatting.
  • Accessibility (EAA-Compliance): Replaced manual HTML construction with get_block_wrapper_attributes(). This allows the block to natively inject role="note" and aria-label tags, ensuring full compatibility with screen readers.
  • CSS Cascade Management: Unified the frontend and backend styling in a single SCSS file to prevent shorthand property conflicts in the editor.

🛠️ Tech Stack & APIs Used

  • React / ES6+
  • PHP 7.4+
  • WordPress Block API (v3)
  • @wordpress/scripts (Webpack / Babel)
  • SCSS / CSS

🚀 Installation & Testing

  1. Download the .zip file from the releases or clone this repository.
  2. Upload to the /wp-content/plugins/ directory of your local WordPress environment.
  3. Open your terminal and navigate to the plugin folder.
  4. Run npm install to install dependencies.
  5. Run npm run build to compile the production-ready assets.
  6. Activate the plugin through the WordPress admin dashboard and add the block to any post.

👨‍💻 About the Developer

Moshtafizur Rahman
WordPress & WooCommerce Developer

🌐 View my full portfolio | 💼 Upwork Profile | 🔗 LinkedIn