Make the Webmention form easier to understand and reusable as block

[pfefferle]

The Webmention form under the comments was a long block of text and a field labeled "URL/Permalink of your article". It was not really clear what to enter there. The German translation even said your own URL should be "the permalink", which is not what the original text meant.

This PR makes the form a bit more self-explanatory:

• the label now asks "Replied on your own website? Enter the URL of your post:"
• the input is full width, the "Ping me!" button is below it
• the explanation is hidden in a "How does this work?" toggle right next to the button, and opens in full width
• the default explanation is shorter and says clearly that your post has to link to this one

Closed	Opened

The form is now reusable. get_webmention_form( $args ) renders the template and is used by the classic comment form and by a new webmention/form block. The block is server side rendered, so both always look the same. A second form on the same page gets unique IDs. The old IDs and the webmention_comment_form template filter still work.

Which form is used depends on the theme:

• Classic themes (and ClassicPress) get the classic form after the comment form, like before. The block can still be added to a post by hand.
• Block themes (WordPress 6.4+) get the block through Block Hooks, after the Comments block. It can be moved or removed in the Site Editor. The classic form is not used there. On 6.2 and 6.3 block themes still get the classic form.
• The "show comment form" setting controls both automatic ways. A block added by hand always shows.
• The form is only rendered once per post, so a block in the post content and the hooked block (or the classic form) don't show up twice. There is a webmention_use_block_hooks filter to change the default.

It also fixes $post_id being passed to wp_kses_post() instead of the webmention_form_text filter.

The second commit fixes the JS linting: the missing @wordpress/* dev dependencies, Jest globals for the tests (the @wordpress/scripts 36 default config only knows Vitest), and the JSDoc Function types.

Two things to keep in mind:

• the strings changed, so existing translations of the form will fall back to English until they are translated again
• the full width toggle uses ::details-content, older browsers show the text only next to the button

Testing

• composer test:wp-env, 6 new tests in tests/phpunit/tests/class-test-form.php
• npm run test:unit and npm run lint:js
• check the form below the comments of a post
• add the "Webmention Form" block to a post or a single template

[Copilot]

Copilot review overview

🟡 Changes recommended

The editor preview generates duplicate element IDs, and the filter argument fix lacks regression coverage.

Review effort: Balanced
Findings: 1 · 1

Open (2)

• Use unique preview IDs for each Form block · New
• Add regression test for passing post ID to filter · New

What changed in this PR

Improves Webmention form clarity and introduces a reusable server-rendered block.

Changes:

• Redesigns form markup, text, styling, and unique IDs.
• Adds automatic Block Hooks integration and duplicate suppression.
• Updates tests, linting configuration, dependencies, and build artifacts.

File	Description
tests/​phpunit/​tests/​class-test-form.php	Tests form rendering and block integration.
templates/​endpoint-form.php	Clarifies URL placeholders.
templates/​comment-form.php	Adds reusable, accessible form markup.
src/​rsvp/​index.js	Refines callback JSDoc type.
src/​reaction-links/​reactions.js	Refines function JSDoc types.
src/​form/​render.php	Renders the dynamic form block.
src/​form/​index.js	Implements the editor preview.
src/​form/​block.json	Defines block metadata and hooks.
package.json	Adds direct WordPress dependencies.
package-lock.json	Locks added dependencies.
includes/​functions.php	Adds reusable rendering and hook selection.
includes/​class-block.php	Registers and controls the form block.
eslint.config.cjs	Configures Jest globals.
build/​form/​render.php	Provides built server rendering.
build/​form/​index.js	Provides compiled editor code.
build/​form/​index.asset.php	Declares editor script dependencies.
build/​form/​block.json	Provides built block metadata.
assets/​css/​webmention.css	Styles the redesigned form.

Files not reviewed (1)

• build/form/index.js: Generated file

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.