WP Manifestindependent plugin directory
manifest / editor / advanced-blendmode-block

Advanced Blend Mode Block

Add stunning visual effects to WordPress blocks with CSS blend modes. Features simple mode for standard blend effects and advanced Stripe mode that recreates Stripe.com's iconic triple-layer text effect—perfect for hero headings that burn into gradients while staying readable on solid backgrounds.

by EXZENT · github.com/exzenter/advanced-blendmode-block · website

★ 1stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/exzenter/advanced-blendmode-block/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/exzenter/advanced-blendmode-block ↗

A WordPress plugin that injects mix-blend-mode controls to the basic group, row, stack, P, and H blocks of the Gutenberg editor. It features a special "Stripe Mode" that replicates the triple-layer text effect found on Stripe.com.

Features

  • Simple Mode: Apply standard CSS mix-blend-mode values to blocks.
  • Stripe Mode: A sophisticated triple-layer effect for text:
    • Base Layer: Standard text color.
    • Color Burn Layer: "Burns" into the background (great for gradients).
    • Soft Overlay: Ensures legibility on solid/white backgrounds.
  • Supported Blocks: Paragraph, Heading, Group, Row, Stack.
  • Customizable: Full control over colors, opacity, and blend modes via the editor sidebar.

Installation

  1. Clone this repository into your WordPress plugins directory:
    cd wp-content/plugins
git clone https://github.com/exzenter/advanced-blendmode-block.git
  2. Navigate to the plugin directory and install dependencies:
    cd advanced-blendmode-block
npm install
  3. Build the assets:
    npm run build
  4. Activate the plugin in WordPress Admin.

Usage

  1. Select a supported block (e.g., Heading).
  2. Open the Blend Mode panel in the block settings sidebar.
  3. Toggle Enable Blend Mode.
  4. Choose between Simple CSS or Stripe Effect.
  5. Adjust settings to achieve your desired look.

Development

  • npm start: Watches for changes and rebuilds in development mode.
  • npm run build: Builds production assets.