Install
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/swissspidy/block-invokers/archive/refs/heads/main.zipWordPress Block Invokers
Experimenting with the Invoker Commands API.
Demo
This allows the button block to control other blocks on your site:
https://github.com/user-attachments/assets/74f83e35-18e1-4bfb-bd4c-0764de539860
Try it
Try it now in your browser:
Or install and activate the latest nightly build on your own WordPress website:
How it works
The button block gets new command and commandFor attributes, mirroring the
command and
commandfor
HTML attributes. Blocks that can be controlled by a button (details, video, audio, image)
expose the commands they support, and the editor UI lets you wire a button up to one of them.
Spec status
The Invoker Commands API
(command/commandfor and CommandEvent) is part of the HTML spec and supported in
Chrome 135+, Firefox 144+, and Safari 26.2+.
The invokers-polyfill is loaded on the
frontend for older browsers whenever a button uses commands.
Only the popover and dialog commands (toggle-popover, show-popover, hide-popover,
show-modal, close, request-close) are built into HTML so far. The commands for
<details> and media elements used by this plugin are still part of the
Open UI future invokers proposal,
so this plugin uses custom (---prefixed) commands — which are part of the spec — and
implements their proposed behavior itself:
| Block | Commands |
|---|---|
| Details | --toggle, --open, --close |
| Video | --play-pause, --play, --pause, --toggle-muted |
| Audio | --play-pause, --play, --pause, --toggle-muted |
| Image | --show-lightbox, --hide-lightbox |
Once those proposals land in the HTML spec and in browsers, the plugin can switch to the built-in command names.
Development
Requirements: Node.js 20+, PHP 8.0+, Composer, and Docker (for wp-env).
npm install
composer install
# Build the plugin.
npm run build
# Linting.
npm run lint:js
composer lint
# JS unit tests.
npm run test:unit
# PHP unit tests.
npm run wp-env start
./node_modules/.bin/wp-env run tests-cli --env-cwd=wp-content/plugins/block-invokers vendor/bin/phpunit
# E2E tests.
npm run wp-env start
npm run test:e2e