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.