HM Block Gradient Border

Adds a gradient border style control to the WordPress block editor. Works with any theme that supplies gradient presets in theme.json.

Features

• Adds a Gradient Border panel to the block inspector (Styles tab) for supported blocks.
• Applies is-style-gradient-border class when a gradient is selected; removes it when cleared.
• Injects --border-gradient and --border-width CSS custom properties server-side so the frontend renders without a flash of un-styled content.
• Supported blocks (default): core/columns, core/column, core/group, core/image, core/cover, core/media-text, core/post-terms, core/query-title.
• Extend the supported block list with the hm-block-gradient-border.supportedBlocks JavaScript filter.

Installation

1. Download the latest release ZIP.
2. Upload to wp-content/plugins/ or install via Plugins → Add New → Upload Plugin.
3. Activate the plugin.

Or via Composer:

composer require humanmade/hm-block-gradient-border

Extending supported blocks

Add more blocks before this plugin's JS loads:

wp.hooks.addFilter(
    'hm-block-gradient-border.supportedBlocks',
    'my-plugin/extend-gradient-border',
    ( blocks ) => [ ...blocks, 'core/heading' ]
);

Architecture

• src/index.js — Editor extension: registers the borderGradient attribute and renders the GradientPicker panel via editor.BlockEdit and blocks.registerBlockType filters.
• src/view.scss — Frontend CSS: .is-style-gradient-border::after with mask-composite: exclude to draw the gradient ring.
• inc/render.php — render_block filter (priority 10): stamps --border-gradient and --border-width onto the element's inline style.

Developer workflow

npm install
npm run build        # production build
npm run start        # watch mode
npm run lint:js      # lint JavaScript
npm run lint:css     # lint CSS
npm run playground:start  # start WordPress Playground at http://127.0.0.1:9400
npm run test:e2e     # run Playwright tests

Release workflow

See RELEASE.md.