Follow Me: Make it interactive!

[obenland]

Moves the Follow Me block to using the Interactivity API for front-end rendering. Removes the block's dependency on React in the frontend.

Requires a major version release, updates minimum required WordPress version to 6.5.

Proposed changes:

• Replaces React frontend of Follow ME block with Interactivity API.

Other information:

• Have you written new tests for your changes, if applicable?

Testing instructions:

• Go to the Editor and add a Follow Me block.
• Test it in the Editor and frontend and make sure it still works as expected.
• It will no-longer open the modal, when in the Editor.

Changelog entry

• Automatically create a changelog entry from the details below.

Changelog Entry Details

Significance

• Patch
• Minor
• Major

Type

• Added - for new features
• Changed - for changes in existing functionality
• Deprecated - for soon-to-be removed features
• Removed - for now removed features
• Fixed - for any bug fixes
• Security - in case of vulnerabilities

Message

The Follow Me block now uses the latest Block Editor technology for display on the frontend.

Server-side rendering what we canServer-side rendering what we can

[Copilot]

Pull Request Overview

This PR updates the Follow Me block to use the new WordPress Interactivity API for front-end rendering while removing its dependency on React for the interactive behavior. It also bumps the version to 2.0.0, updates block metadata and style files, removes the old follow-me.js legacy code, and adjusts build/package configurations for experimental modules.

Reviewed Changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/follow-me/view.js	Replaces React DOM rendering with Interactivity API state and adds focus trapping for modals.
src/follow-me/style.scss	Updates the component’s styling for improved layout and consistent spacing.
src/follow-me/render.php	Implements server‑side rendering using updated block attributes and state from Interactivity API.
src/follow-me/index.js	Adjusts block registration to align with experimental module flags and updated dependencies.
src/follow-me/follow-me.js	Entirely removed as it’s replaced by the new interactive implementation.
src/follow-me/edit.js	Updates the editor preview using new profile fetching methods and improved user option handling.
src/follow-me/button-style.js	Refactors style generation functions for the block and popup buttons.
src/follow-me/block.json	Updates version, adds an example definition, enables interactivity, and switches to module formats.

Comments suppressed due to low confidence (2)

src/follow-me/view.js:18

• [nitpick] Consider removing or cleaning up the keydown event listener when the modal is closed to prevent potential memory leaks.

element.addEventListener( 'keydown', function ( event ) { ... } );

src/follow-me/edit.js:130

• [nitpick] Consider adding error handling for the profile fetch to update the UI in case the API request fails, ensuring that the editor remains in a consistent state.

fetchProfile( effectiveUserId ).then( ( data ) => { setProfile( getNormalizedProfile( data ) ); } );

[Copilot]

Pull Request Overview

This PR updates the Follow Me block to use the new Interactivity API for frontend rendering, removes its React dependency, and requires a major version bump with WordPress 6.5+.

• Replaces the React-based frontend (follow-me.js) with an Interactivity API–driven view.js and server-side render.php.
• Refactors editor code (edit.js) to use InnerBlocks for the button and normalizes profile data.
• Updates block.json, build scripts, and PHP block registration to enable interactivity and bump package versions.

Reviewed Changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/follow-me/index.js	Added deprecated and save, registered block with interactivity.
src/follow-me/follow-me.js	Removed legacy React component.
src/follow-me/edit.js	Refactored editor to use useInnerBlocksProps and normalized data.
src/follow-me/deprecation.js	New migration logic to convert old attributes to core/button.
src/follow-me/button-style.js	Implemented helpers to generate CSS selectors and var resolution.
src/follow-me/block.json	Bumped version, added interactivity support and innerBlocks config.
package.json	Updated scripts for experimental modules, bumped dependencies.
includes/class-blocks.php	Switched to metadata registration, added interactivity callbacks.
build/follow-me/* & build/reply/*	Regenerated assets for interactivity and removed React bundles.
.prettierignore	Removed src/follow-me from ignore so it’s formatted.
.github/changelog/1691-from-description	Added changelog entry.

Comments suppressed due to low confidence (4)

src/follow-me/deprecation.js:7

• The deprecation migration logic for v1 should have accompanying unit tests to verify that attributes (e.g., buttonText, buttonOnly) are correctly migrated to the new innerBlock format.

const v1 = {

src/follow-me/button-style.js:7

• [nitpick] isCssVariableDefined invokes getComputedStyle on each call, which may run frequently and cause layout thrashing; consider caching the root styles or memoizing checks for known variables.

function isCssVariableDefined( variableName ) {

src/follow-me/button-style.js:29

• The helper functions getBackgroundColor, getLinkColor, getBlockStyles, and getPopupStyles involve nontrivial string logic for CSS variables—adding unit tests can help catch formatting or resolution regressions.

function getBackgroundColor( color ) {

src/follow-me/edit.js:17

• [nitpick] The DEFAULT_PROFILE_DATA and getNormalizedProfile logic appear duplicated across modules; consider extracting these into a shared utility to reduce duplication and ease future updates.

const DEFAULT_PROFILE_DATA = {

[pfefferle]

The Button on the archive page looks different to the button on the single view (Twenty Twenty-Five)

Archive	Single

[pfefferle]

Buttons still look weird in FSE themes (Twenty Twenty-Five and Twenty Twenty-Four):

[pfefferle]

Dark-Mode on FSE themes does not properly switch colors (see the headlines):

[obenland]

The Button on the archive page looks different to the button on the single view (Twenty Twenty-Five)

That seems to be a result of how Core enqueues inline styles for the button block. They're enqueued in Single view, but not in Archive.

[obenland]

@pfefferle If you agree, I'd love to move on with this one. I think the styles are in a pretty good place now, thank you for all your feedback on that. Any additional nitpicks we have we could address in follow-up PRs?

[jeherve]

@obenland Now that this is merged, do you think we could close #426? I haven't tested the block on trunk yet.

[obenland]

It's getting close, yeah! It's fixed for the Follow Me block and I think #1747 removes the React dependencies for the final block. Thanks for the nudge!