Reactions: Use Interactivity API #1722
Conversation
…utomattic/wordpress-activitypub into update/reactions-interactivity
There was a problem hiding this comment.
Pull Request Overview
Moves the Reactions block to use the Interactivity API for front-end rendering and removes its React dependency.
- Registers a new Interactivity store with actions and callbacks, binding state via data attributes in
render.php. - Removes React-based view logic (
src/reactions/view.js) and updates block metadata (block.json) toapiVersion3 with interactivity support. - Refactors styles, save/render flows, and tests to align with the Interactivity API approach.
Reviewed Changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/includes/class-test-blocks.php | Updated tests to use assertStringContainsString and removed deprecated React-based test |
| src/reactions/view.js | Replaced React rendering logic with Interactivity API store, actions, and callbacks |
| src/reactions/style.scss | Added new SCSS for interactivity-based layout, avatar groups, and modal styles |
| src/reactions/save.js | Adjusted save output to use useBlockProps.save wrapper and removed placeholder div |
| src/reactions/render.php | Added server-side wp_interactivity_state, data-binding attributes, and interactivity init |
| src/reactions/edit.js | Cleaned up dummy data generator signature and imported styles |
| src/reactions/block.json | Bumped apiVersion to 3, added interactivity support, and updated view script entries |
| includes/class-blocks.php | Removed explicit render_callback in register_block_type_from_metadata |
| .prettierignore | Removed ignore for src/reactions so code is formatted by Prettier |
Comments suppressed due to low confidence (1)
tests/includes/class-test-blocks.php:215
- The tests now only check for partial HTML fragments and may miss missing or incorrect wrapper attributes. Consider adding assertions to verify the full markup, including
data-wp-interactivebindings and block wrapper attributes to ensure complete coverage.
$this->assertStringContainsString( $expected, $output );
…utomattic/wordpress-activitypub into update/reactions-interactivity
There was a problem hiding this comment.
Pull Request Overview
This PR updates the Reactions block to use the new Interactivity API for front‑end rendering, removing the dependency on React while modernizing block registration and style definitions. Key changes include replacing React‑based frontend logic in view.js with interactivity‑based callbacks and actions, updating CSS styles and block.json metadata to reflect API Version 3, and adjusting PHP render logic to work with the new state management.
Reviewed Changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/reactions/view.js | Replaced React rendering with Interactivity API actions and callbacks. |
| src/reactions/style.scss | Updated styles and spacing, including modifications to gaps and layout. |
| src/reactions/save.js | Modified wrapper structure for saved markup. |
| src/reactions/render.php | Updated server‑side rendering to work with the new front‑end technique. |
| src/reactions/reactions.js | Revised component props and parameters to remove unused values. |
| Other files | Updated metadata, deprecation settings, and build configuration. |
|
@pfefferle This will likely need some more detail work on the Edit side, but should be good to test and get feedback on! Curious what you think of it! |
|
I've not looked too deep into the code yet, but it works quite well on my dev system. |
| }, [ buttonRef, items.length ] ); | ||
|
|
||
| const visibleItems = items.slice( 0, visibleCount ); | ||
| const visibleItems = items.slice( 0, 20 ); |
There was a problem hiding this comment.
shouldn't the be visibleCount be configurable somehow?
There was a problem hiding this comment.
I don't think it needs to be. It was never really configurable, the above code would just adjust it to the amount of space it has available in the viewport. That is still the case on the frontend but won't be the case in the Editor, which this code is limited to now.
On the frontend, avatars will be server-side rendered, so without a limit it would create a flash of overflowing avatars on posts with a lot of reactions. 20 is an arbitrary number but seemed to work reasonably well in testing.
Moves the Follow Me block to using the Interactivity API for front-end rendering. Removes the block's dependency on React in the frontend.
Proposed changes:
Other information:
Testing instructions:
Changelog entry
Changelog Entry Details
Significance
Type
Message
The Reactions block now uses the latest Block Editor technology for display on the frontend.