WP Manifestindependent plugin directory
manifest / editor / hm-block-interactivity

HM Block Interactivity

Click, hover, and CSS-class-driven show/hide/toggle for WordPress blocks via the WP Interactivity API

by Human Made · github.com/humanmade/hm-block-interactivity · 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-interactivity/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-interactivity ↗

Adds click, hover, CSS-class, and aria-hidden driven show/hide/toggle behaviour to WordPress blocks using the WP Interactivity API.

Requires WordPress 6.5+.

Features

  • Trigger panel on designated blocks: click, hover, CSS class present, or aria-hidden.
  • Visibility panel on all blocks inside a trigger context: show on interaction, hide on interaction, or always.
  • Animation modes: fade + height, fade only, or height only.
  • Column width on interaction: set an active flex-basis on core/column blocks.
  • CSS class filter: children can respond to specific CSS classes from a parent css-class trigger.

Default trigger blocks

core/group, core/columns, core/column, core/media-text, core/cover, cloudcatch/splide-carousel-item.

Extend the list via the hm-block-interactivity.triggerBlocks JavaScript filter.

Installation

composer require humanmade/hm-block-interactivity

Or download the latest release ZIP and install via the WordPress plugin uploader.

Architecture

  • src/index.js — Editor extension. Registers interactivityTrigger, interactivityVisibility, interactivityAnimation, interactivityTriggerClassFilter, interactivityTriggerClass, and interactivityColumnWidth attributes. Renders the inspector panels.
  • src/view.js — ES module. Registers the hm-block-interactivity store with the WP Interactivity API. Compiled as a script module (output.module: true).
  • src/view.scss — Transition styles for .ol-shows-on-interaction / .ol-hides-on-interaction + animation modifiers.
  • inc/render.php — render_block filters that stamp data-wp-interactive, data-wp-context, data-wp-on, and data-wp-class directives onto the block HTML.
  • webpack.config.js — Two-config array: index (editor, regular script) and view (frontend, ES module).

Interoperability note

If you run this plugin alongside a theme that already contains the same interactivity filters (e.g. the ol-theme), disable the theme's version first. The PHP filter hooks (render_block prio 15/20/22) and the store namespace (hm-block-interactivity) would conflict if both are active simultaneously.

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.