Modal: Unify in shared component

[obenland]

Follow-up to #1691 and #1722. Unifies modal component between Follow Me and Reactions block.

Proposed changes:

• Unifies modal component between Follow Me and Reactions block.

Other information:

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

Testing instructions:

• See testing instructions in Follow Me: Make it interactive! #1691 and Reactions: Use Interactivity API #1722 (make sure the blocks still work).

[Copilot]

Pull Request Overview

Unify modal functionality into a shared component, extracting duplicated styles and logic from individual blocks.

• Added a shared modal component (style.scss, index.js, README.md, and Blocks::render_modal helper)
• Updated Reactions and Follow-Me blocks to use the shared modal store and rendering
• Removed per-block modal SCSS and templates in favor of the shared implementation

Reviewed Changes

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

Show a summary per file

File	Description
src/shared/modal/style.scss	New shared modal styles
src/shared/modal/index.js	New shared modal store logic
src/shared/modal/README.md	Documentation for the shared modal component
src/reactions/view.js	Migrated reactions block to use shared modal store
src/reactions/style.scss	Removed duplicated modal styles
src/reactions/render.php	Updated PHP to use Blocks::render_modal
src/follow-me/view.js	Migrated follow-me block to use shared modal store
src/follow-me/style.scss	Removed duplicated modal styles
src/follow-me/render.php	Updated PHP to use Blocks::render_modal
includes/class-blocks.php	Added Blocks::render_modal method

Comments suppressed due to low confidence (5)

src/shared/modal/index.js:19

• The new shared modal store logic should have unit or integration tests covering open/close behavior, focus trapping, and positionModal calculations.

export function createModalStore( namespace ) {

src/shared/modal/index.js:30

• callbacks.positionModal must run in the store’s scope. Wrap it in withScope, e.g., setTimeout( withScope( callbacks.positionModal ), 0 ); and import withScope from '@wordpress/interactivity'.

setTimeout( callbacks.positionModal, 0 );

src/shared/modal/index.js:39

• Ensure trapFocus runs with the correct store context by wrapping it in withScope, e.g., withScope( () => callbacks.trapFocus( modalFrame ) ), and import withScope.

callbacks.trapFocus( modalFrame );

src/reactions/view.js:14

• The actions object from the store is used in callbacks but not destructured here. Add actions to the destructuring: const { actions, callbacks, state } = store( … );.

const { callbacks, state } = store( 'activitypub/reactions', {

src/shared/modal/README.md:38

• The code exports createModalStore, not createModalController. Update the import to import { createModalStore } from '../shared/modal';.

import { createModalController } from '../shared/modal';

[Copilot]

Pull Request Overview

Unify modal logic by introducing a shared Blocks::render_modal helper and aligning interactivity stores across Follow Me and Reactions blocks.

• Replace manual modal HTML in PHP render functions with Blocks::render_modal calls.
• Update client-side interactivity stores (view.js) to use a unified context.modal shape.
• Bump asset version hashes for related build files.

Reviewed Changes

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

Show a summary per file

File	Description
build/reactions/render.php	Remove inline modal markup and use Blocks::render_modal
build/follow-me/render.php	Remove inline modal markup and use Blocks::render_modal
build/reactions/view.js	Update interactivity store to use context.modal shape
build/follow-me/view.js	Update interactivity store to use context.modal shape
others (asset & CSS)	Version bumps and rebuilt assets

Comments suppressed due to low confidence (2)

build/follow-me/render.php:53

• The new store defines handleModalEffects for keydown/click handling, but it is never initialized; add a second data-wp-init (or extend the existing one) to call callbacks.handleModalEffects so modal open/close events are wired up.

'data-wp-init'        => 'callbacks.initButtonStyles',

build/follow-me/render.php:72

• The client code checks context.modal.isCompact but this key is never passed in the context; add 'isCompact' => false (or true as appropriate) to the modal array.

'modal'           => array(

[pfefferle]

The remote-reply link (see "Comment 5") no longer shows up!

Update: Seems to be a different issue!