PlugIndex

Directory / plugin

BlockGlow — Enhance, Optimize & Protect

v2.0.1 · by Mary Rose Elbambo

Enhance, optimize, and protect your WordPress website with block-level CSS customization, performance tools, and security features.

View on WordPress.orgHomepage

About this plugin

BlockGlow extends the WordPress Block Editor with tools for customizing, optimizing, and protecting your website.

Originally built as a per-block Custom CSS solution for Gutenberg, BlockGlow has evolved into a lightweight toolkit for block customization, performance optimization, and spam protection.

Features include:

  • Per-block Custom CSS with automatic CSS scoping.
  • Live CSS preview inside the block editor.
  • CSS validation and property validation.
  • Automatic CSS file generation and management.
  • LCP (Largest Contentful Paint) resource detection and preloading.
  • Automatic fetchpriority=”high” support for critical images.
  • Honeypot protection for Simple Membership forms.
  • Cloudflare Turnstile integration for Simple Membership forms.
  • CSS file management tools.
  • Secure file handling and capability checks.

Enhance

BlockGlow adds a “BlockGlow — Custom CSS” panel to the inspector of Gutenberg blocks.

Use the Custom CSS editor to apply styles to an individual block without affecting other instances of the same block.

Features include:

  • Per-block Custom CSS.
  • Automatic CSS scoping using a unique BlockGlow ID.
  • Live CSS preview inside the block editor.
  • CSS validation.
  • CSS property validation.
  • CodeMirror-based editor when available.
  • Fallback textarea editor with Tab and Shift+Tab support.
  • Automatic CSS file generation.
  • CSS file cleanup when styles are removed.
  • Graceful fallback to inline styles when CSS file generation is unavailable.
  • CSS Manager for managing generated CSS files.
  • Popup CSS editing for updating CSS from other blocks when supported.

Optimize

BlockGlow includes performance tools designed to help improve page loading and Core Web Vitals.

Current optimization features include:

  • LCP resource detection.
  • LCP image preloading.
  • Automatic fetchpriority=”high” support for critical images.
  • Optional LCP preload support for selected post types.
  • LCP analysis and re-analysis tools.
  • Saved LCP resource management.

When LCP preload is enabled, open the page while signed in as a user who can edit it. BlockGlow detects and saves the LCP resource URL for subsequent preloading. Anonymous visitors cannot change the saved resource.

Protect

BlockGlow includes optional protection features designed to help reduce automated spam submissions and registrations.

Current protection features include:

  • Honeypot protection for Simple Membership forms.
  • Cloudflare Turnstile integration for Simple Membership forms.

These protection features can be enabled and configured from the BlockGlow administration area.

External Services

BlockGlow optionally integrates with Cloudflare Turnstile to provide spam and abuse protection for supported Simple Membership forms.

Cloudflare Turnstile is only used when the Cloudflare Turnstile protection feature is enabled and configured by the site administrator.

When enabled, BlockGlow loads the Cloudflare Turnstile JavaScript from Cloudflare’s servers. When a user interacts with a protected form, Turnstile generates a verification token. BlockGlow sends the token to Cloudflare’s Turnstile verification service to verify the request.

Service:
https://www.cloudflare.com/products/turnstile/

Turnstile documentation:
https://developers.cloudflare.com/turnstile/

Cloudflare Privacy Policy:
https://www.cloudflare.com/privacypolicy/

Cloudflare Terms of Service:
https://www.cloudflare.com/terms/

Please review Cloudflare’s documentation and policies for information about how Cloudflare processes data when Turnstile is used.

How CSS Scoping Works

BlockGlow creates a unique BlockGlow ID for each block instance and uses it to scope custom CSS.

For example:

[data-blockglow-id="bg-xxxxxxx"] h2 {
    color: red;
}

The CSS is scoped to the individual block instance so that styles do not unintentionally affect other blocks.

You can also use & as a shorthand for the BlockGlow wrapper in the Custom CSS editor.

Example:

& .my-class {
    color: red;
}

BlockGlow automatically replaces & with the appropriate BlockGlow selector for the editor preview and front-end output.

Support

BlockGlow is actively developed with a focus on helping WordPress users enhance, optimize, and protect their WordPress websites.

Feature requests, bug reports, and suggestions are welcome.

Plugin tags