feat(block-theme): comments panel block

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guidelines?
• Does your code follow the WordPress coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adds a comments panel block set consisting of:

• A containing Comments Panel block.
• A Comments Panel Button, that will open and close the panel.
• A Comments panel content block, that's restricted to Core's comment blocks, and is prepopulated, but does allows some editing (changing settings, reordering, deleting and re-adding comments-related blocks).

It also includes some JS to open and close the panel, and to handle comments pagination within the panel so the comments are reloaded via AJAX rather than refreshing the whole page.

This block replicates the comments template parts that current live in the block theme; some of the testing steps are copied directly from this block theme PR.

Closes NPPD-1396

How to test the changes in this Pull Request:

Update comments settings:

1. Start on a site running the block theme.
2. Set up your test site to have several comments on a post (20+) - more is better!
3. Under WP Admin > Settings > Discussion, enable comment pagination and set the comments per page to something reasonably low -- you basically want 3-4+ pages of comments. Save.

Add the new block:

1. Navigate to Site Editor > Patterns, and edit the post footer template part.
2. Delete the existing Comments Menu template part:

3. Add the new Comments Panel template part, and click Save.
4. Click the block and click 'Open Panel' - confirm the Comments panel opens:

5. Try changing the button styles and settings - Default, Icon only, and Text Only, and different colour and typography settings. Save and view on the front end and confirm they took.
6. Try changing the overlay colour and confirm that it took.

Test on the front-end

1. Navigate to your post with all the comments.
2. Scroll down and click the 'Comments' button. Confirm the panel opens.
3. Confirm the close button, clicking the overlay, and clicking the Esc button all close the panel.
4. Page through comments using the in-panel pagination -- confirm comments load without a full page reload (and that the URL updates).
5. Right-click a comment's date on a non-first page, copy the link, open it in a new tab -- confirm the panel auto-opens and scrolls to that comment.
6. While logged in, post a comment and a reply -- each posts and the panel stays open.
7. Repeat commenting in an incognito window -- it should prompt for name/email but allow commenting.
8. Under Settings > Discussion, check "Users must be registered and logged in to comment". In a fresh incognito window, confirm commenting shows a login message and the link goes to /wp-login.php.

Make a mess

1. Go back to the Site Editor and add a second comments panel block to the template.
2. On the front-end, confirm that only one panel is output (by viewing source), and that all buttons open the one panel.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully run tests with your changes locally?

[Copilot]

Pull request overview

Adds a new “Comments Panel” block set to the Newspack plugin for block-theme sites, providing a slide-in comments drawer with an accompanying trigger button and editable (restricted) comments template, plus frontend behavior for opening/closing and AJAX-like pagination/submission.

Changes:

• Registers three new blocks: newspack/comments-panel, newspack/comments-panel-trigger, and newspack/comments-panel-content (JS + PHP render callbacks + block.json).
• Adds a frontend view.js controller to manage panel open/close, scrim, focus trapping, inline comment pagination, and inline comment form submission.
• Introduces a new “comments” icon in both the PHP UI icon set and the JS icon package, plus a small PHPUnit test asserting the icon is registered.

Reviewed changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
plugins/newspack-plugin/webpack.config.js	Adds a new webpack entry to build the comments panel frontend view script.
plugins/newspack-plugin/tests/unit-tests/newspack-ui-icons.php	Adds a unit test verifying the new comments SVG icon is registered.
plugins/newspack-plugin/src/blocks/index.js	Registers the new comments panel blocks in the plugin’s block registry and block-theme allowlist.
plugins/newspack-plugin/src/blocks/comments-panel/view.js	Implements frontend panel behavior (open/close, scrim, focus trap, inline pagination, inline form submission).
plugins/newspack-plugin/src/blocks/comments-panel/trigger/index.js	Registers the trigger block’s editor settings (icon, edit, dynamic save).
plugins/newspack-plugin/src/blocks/comments-panel/trigger/edit.js	Implements the trigger block editor UI (label, styles, preview toggle integration).
plugins/newspack-plugin/src/blocks/comments-panel/trigger/class-comments-panel-trigger-block.php	Server-rendered trigger button markup (dynamic block).
plugins/newspack-plugin/src/blocks/comments-panel/trigger/block.json	Defines trigger block metadata, attributes, and supports (color/typography/spacing/border).
plugins/newspack-plugin/src/blocks/comments-panel/style.scss	Adds shared styling for the panel, scrim, close button, and body scroll lock.
plugins/newspack-plugin/src/blocks/comments-panel/preview-refs.js	Adds shared editor-only state (toggle refs + subscribers) for preview open/close.
plugins/newspack-plugin/src/blocks/comments-panel/panel-preview-toggle.js	Adds a shared toolbar button component to toggle panel preview in the editor.
plugins/newspack-plugin/src/blocks/comments-panel/index.js	Registers the parent “Comments Panel” block (editor + styles import).
plugins/newspack-plugin/src/blocks/comments-panel/edit.js	Implements the parent block editor template (locked trigger + content).
plugins/newspack-plugin/src/blocks/comments-panel/content/index.js	Registers the content block settings (dynamic wrapper; saves InnerBlocks wrapper).
plugins/newspack-plugin/src/blocks/comments-panel/content/edit.js	Implements the content block editor UI (template + overlay color setting + preview rendering/notice).
plugins/newspack-plugin/src/blocks/comments-panel/content/class-comments-panel-content-block.php	Server-renders the panel (one per request) with dialog semantics and overlay color data attribute.
plugins/newspack-plugin/src/blocks/comments-panel/content/block.json	Defines content block metadata/attributes (including overlayColor) and supports.
plugins/newspack-plugin/src/blocks/comments-panel/class-comments-panel-block.php	Server-renders the outer wrapper and ensures common assets are loaded.
plugins/newspack-plugin/src/blocks/comments-panel/block.json	Defines parent block metadata and hooks up the built frontend view script.
plugins/newspack-plugin/includes/class-newspack-ui-icons.php	Adds a new comments SVG to the PHP icon registry.
plugins/newspack-plugin/includes/class-blocks.php	Loads the new comments panel PHP block classes when block-theme blocks are enabled.
packages/icons/src/comments.js	Adds a new React comments icon for use in editor UI.
packages/icons/index.js	Exports the new comments icon from the icons package entrypoint.