feat(author-profile): avatar and social blocks for nested author profile

[rbcorrales]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• 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 provides the blocks that render inside the Author Profile as nested content and updates the Avatar block:

Avatar block enhancements:

• Consumes newspack-blocks/author context from the parent Author Profile block to render a single author's avatar in nested mode.
• Shows the site's default gravatar when no custom avatar is set.
• Shows a placeholder (diagonal line) for text-only custom bylines that have no author reference.
• Debounces image fetching when dragging the size slider to avoid excessive network requests.
• Renames "Stacked" style to "Overlapped" for clarity.

New social blocks:

• Author Social Links (newspack/author-profile-social): Container block that renders the author's social media links and email. Reads author data from the parent Author Profile block context.
• Author Social Link (newspack/author-social-link): Individual social link with SVG icon. Supports icon size customization via parent context.
• Both blocks use a shared socialButton SCSS mixin that provides consistent circular icon backgrounds across all block themes, using theme color tokens (base-2, base-3, contrast).
• Includes a PHP fallback SVG icon map for when rendering a block created in the classic theme in the block theme.
• These blocks are in their base version but can be further extended to provide greater flexibility for adding new social networks.

Other:

• Enriched newspack_author_info REST field with avatar URL, social links, and other metadata to reduce editor API calls. Overrides the newspack-newsletters field declaration to avoid having that repo as a dependency.
• Shared useCoAuthors hook updated to support single-author mode for nested context.

Closes NPPD-1147.

Related PRs:

• feat(author-profile): add block theme compatibility newspack-blocks#2286
• refactor(author-profile): move social button styles to plugin newspack-block-theme#412

How to test the changes in this Pull Request:

Full end-to-end testing steps are in the newspack-blocks PR. The following are additional tests specific to this PR:

Test standalone avatar (no regression):

1. Insert an Avatar block outside of an Author Profile block.
2. Verify it still renders the post author's avatar(s) as before.
3. With Co-Authors Plus, verify that multiple author avatars display correctly.
4. Verify the "Overlapped" style (previously "Stacked") still works.
5. Test with a Custom Byline that has no [Author] shortcode. The avatar should show a placeholder with a diagonal line.
6. Test the block behavior inside a Query Loop.

Test social block styling independently:

1. Verify that the icon size slider in the Author Social Links sidebar works.
2. Verify that the fallback SVG icons render for different services.

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 ran tests with your changes locally?

[Copilot]

Pull request overview

Adds nested Author Profile rendering support by enhancing the Avatar block to consume author context, introducing new “Author Social Links” inner blocks, and enriching REST author data to reduce editor-side fetches.

Changes:

• Enhanced Avatar block to support nested single-author context, default-avatar fallback, placeholder rendering, and debounced image fetching.
• Added new author-profile-social and author-social-link blocks with shared circular icon styling and SVG fallbacks.
• Introduced an enriched newspack_author_info REST field and updated useCoAuthors to support enriched data + deduplicated avatar fetching.

Reviewed changes

Copilot reviewed 26 out of 26 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
tests/unit-tests/bylines/class-test-avatar-block.php	Adds unit tests for enriched REST author info.
src/shared/scss/_mixins.scss	Introduces socialButton mixin for consistent social icon button styling.
src/shared/hooks/use-coauthors.test.js	Expands hook tests for nicename extraction and avatar fetching/deduping behavior.
src/shared/hooks/use-coauthors.js	Updates author mapping, nicename extraction, and per-nicename avatar fetch caching.
src/blocks/index.js	Registers the new social blocks (block-theme gated).
src/blocks/avatar/style.scss	Renames stacked style selector to overlapped.
src/blocks/avatar/hooks.js	Exports useDefaultAvatar for reuse in editor nested fallback.
src/blocks/avatar/edit.test.jsx	Adjusts editor test expectations around placeholder rendering.
src/blocks/avatar/edit.jsx	Adds nested-context rendering path + fetch debouncing + default avatar fallback.
src/blocks/avatar/class-avatar-block.php	Adds nested-context SSR rendering and renames the registered style.
src/blocks/avatar/block.json	Extends context usage to include newspack-blocks/author.
src/blocks/author-social-link/style.scss	Adds frontend styles for individual social link items.
src/blocks/author-social-link/social-icons.js	Adds fallback SVG icon map + SVG getter helper.
src/blocks/author-social-link/index.js	Registers the Author Social Link block in JS.
src/blocks/author-social-link/edit.js	Implements editor UI rendering for a single social link.
src/blocks/author-social-link/class-author-social-link-block.php	Adds SSR for a single social link and SVG fallback support.
src/blocks/author-social-link/block.json	Declares block metadata, parent restriction, and contexts used.
src/blocks/author-profile-social/style.scss	Adds frontend styles for the social links container/list.
src/blocks/author-profile-social/index.js	Registers the Author Social Links container block in JS.
src/blocks/author-profile-social/editor.scss	Adds editor-only layout styles for horizontal InnerBlocks.
src/blocks/author-profile-social/edit.js	Implements editor container behavior (auto-populate/reset inner links, icon sizing).
src/blocks/author-profile-social/class-author-profile-social-block.php	Adds SSR for container block with InnerBlocks + legacy flat render and SVG fallback map.
src/blocks/author-profile-social/block.json	Declares block metadata and provides icon-size context to children.
includes/plugins/co-authors-plus/class-author-rest-fields.php	Registers newspack_author_info REST field with enriched author data.
includes/class-newspack.php	Loads the new REST-field registration class.
includes/class-blocks.php	Loads new SSR block classes in block themes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[rbcorrales]

@laurelfulford thanks for the very detailed review!

I fixed the overlapped style issues in 7b82e97. The SVG mask now uses a <rect rx> that adapts to the border-radius, so the separator cutout matches the avatar shape. The CSS fallback preserves the circular default. The editor preview also updates live via getOverlapMask().

I think that was the last one pending from the feedback on this particular PR. Let me know if you have any questions or comments.

[thomasguillot]

Current:

The border radius on the mask is too small. The radius, should be selected radius + the whatever the gap is.

Expected:

[laurelfulford]

Thanks @rbcorrales! I'll defer to @thomasguillot's feedback on the overlap, he caught something I did not 🙂

The only other bit outstanding for me was the end-of-story Author Profile (like when it's added to the Site Editor) still seems limited to what social icons it shows -- it seems to just be the ones used in the placeholders. Otherwise I think that's it for this one, thanks for all your hard work and apologies for all the nitpicks! 😅

[rbcorrales]

Hey @thomasguillot, I wanted to clarify what you meant here. Looking at the screenshots you shared, the expected result actually shows a smaller border radius on the mask (tighter corners on the cutout), not a larger one. Did you mean that the mask radius should account for the gap by subtracting it rather than adding?

That's the approach I went with in bb3b3f0: mask_rx = avatar_rx - gap.
The core update for the calculation is this line (and its PHP equivalent), the rest is mostly refactoring:

rx = Math.round( Math.max( 0, Math.min( SVG_SIZE / 2, rx - OVERLAP_GAP ) ) * 100 ) / 100;

The gap is the visible separator between the overlapping avatars (7.5% of the avatar size on the SVG scale), which comes from the difference between the cutout width (25%) and the overlap amount (17.5%).

The idea is that the gap itself contributes to the perceived roundness of the separator corner, so the mask curve needs to be tighter to compensate. The total visual transition (mask curve + gap) then matches the avatar's border radius.

A couple of caveats worth noting with this approach:

1. Small radii: when the border radius is smaller than the gap offset, the mask radius clamps to 0 (sharp corners). For example on a 128px avatar, any border radius below ~10px produces a square cornered mask. This seems acceptable since those avatars are nearly square anyway.
2. Large radii approaching circular: the avatar's visual roundness maxes out at 50% border radius (perfect circle), but the mask hasn't caught up yet at that point. The mask continues getting rounder until the border radius reaches roughly 50% + gap. For example, on a 100px avatar the avatar is already a perfect circle at 50px, but the mask doesn't become fully circular until ~58px. In practice this means avatars with border radius close to 50% will have a slightly less round mask. For exact 50% we skip the SVG mask entirely and use a radial gradient.
3. Sync requirement: this change introduces a shared overlap fraction value (0.175) that needs to stay in sync across three files: the SCSS (where it sets the negative margin), the JS (editor side mask generation), and the PHP (frontend mask generation). Previously, this was only defined in CSS.

Let me know if the current result matches what you had in mind or if it needs further tweaking. But unless you feel strongly about this approach, I'd lean towards keeping the original radius without the gap offset. The visual difference is subtle, and it avoids both the maintenance cost of keeping three files in sync and the mismatch near the clamped extremes where the mask and avatar roundness fall out of step.

[thomasguillot]

@rbcorrales it still looks a bit odd but I think it's ok. In my opinion, if you're not using round avatars, you're better off using the default style and not the overlapped one anyway.

[thomasguillot]

padding/margin were not working on the front-end this should be fixed: fa917a2

Also, I moved the service label as block title ceb63f2

[rbcorrales]

@thomasguillot I committed 620319a, which fixes a duplicate wp-block-newspack-author-profile-social class on the frontend wrapper introduced in fa917a2. get_block_wrapper_attributes() already generates the block class from the registration when WP_Block_Supports::$block_to_render is set, so passing it manually in the class argument doubled it.

[rbcorrales]

@laurelfulford I updated the overlap mask math to use your approach from the minimize-math branch as it looked and worked better!

I didn't merge it directly because there were conflicts with earlier changes on the same files, so I replicated the logic, did some CSS cleanup, named the geometry values as local variables (so they have a context and look less magical 😄), and updated comments. Let me know if this looks good.

0f439e7