WP Manifestindependent plugin directory
manifest / editor / hm-block-gradient-border

HM Block Gradient Border

Gradient border style control for WordPress core blocks

by Human Made · github.com/humanmade/hm-block-gradient-border · website

★ 0stars

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/humanmade/hm-block-gradient-border/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/humanmade/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.