feat(author-profile-social): add support for colors, block spacing, brand style by thomasguillot · Pull Request #4509 · Automattic/newspack-plugin

thomasguillot · 2026-02-24T16:04:46Z

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 adds a bunch of enhancements to the block:

New style: "Brand" that inherits the brand's colours
If default style selected: User can control Icon and icon background colours (I used Core's Color panel instead of custom one because of ordering. I renamed "Text" and "Background" to "Icon color" and "Icon background" with some JS)
We now support block spacing
I removed the padding setting

We are extracting the gaps and colours to apply them to the actual link

video.mp4

How to test the changes in this Pull Request:

Add an author profile block
Edit the social links
Switch to this branch and refresh
You should see more settings in the sidebar.
Test the colours
The spacings (gap and margin)
Test brand vs default

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?

…queue

Co-authored-by: Laurel <laurel.fulford@automattic.com>

…lock.php Co-authored-by: Laurel <laurel.fulford@automattic.com>

rbcorrales · 2026-03-21T02:53:22Z

Removing the review label since there are still changes requested.

I think Thomas might be AFK for a few days, so @laurelfulford feel free to incorporate those markup changes you suggested, since you might be more familiar with that than me 😅

Otherwise, I can take a stab at that at some point later next week.

laurelfulford · 2026-03-24T18:03:58Z

Thanks @rbcorrales! Taking a swing at updating that now - I think @thomasguillot tackled everything else 🙂

laurelfulford · 2026-03-25T00:12:36Z

I think I got the block markup sorted in acfc2ea -- the colour/icon blocks still had to work the original way, but the margins and gap should now be coming from WordPress magic!

…lockGap Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

rbcorrales

@laurelfulford Thanks for making these improvements. I found two issues while testing with how the block behaves in the editor:

1. Block Spacing control wasn't working for me in the editor

The block uses <InnerBlocks> as a child of the <ul> wrapper, but WordPress injects layout classes (is-layout-flex, scoped container classes) only through useInnerBlocksProps. Without those classes on the wrapper, the scoped gap CSS generated by the Block Spacing control has no matching selector, so changing the slider has no visible effect in the editor. The frontend is fine because WP handles layout classes server-side.

2. Default icon gap was too wide

With native WP layout, the block inherits the theme's global blockGap (2rem in newspack-block-theme), which is way too much space between small circular icons. The old code defaulted to --wp--preset--spacing--20 (0.5rem).

Core's social-links block gets its tight default from a blockGap entry in the block theme's theme.json, but our block doesn't have one, and we shouldn't require every theme to add it.

So, I pushed a fix in b100210 with two changes:

Switched from <InnerBlocks> to useInnerBlocksProps, same pattern Core's social-links uses. This causes WP to inject the layout classes into the wrapper <ul>, so the Block Spacing control works in the editor. Also removed the now-redundant display: flex rules from editor.scss since is-layout-flex handles that.
Added a wp_theme_json_data_blocks filter that sets a default blockGap of spacing-20 for this block. This sits at the "blocks" layer in the theme.json cascade (default < blocks < theme < user), so themes can still override it, and user block spacing overrides work correctly. I went with this approach over CSS because theme.json-level styles get the right specificity and cascade position automatically.

block-spacing-test.mov

One thing to be aware of is that the Block Spacing slider shows empty/leftmost on a freshly inserted block, even though the gap is visually correct (8px). This is expected WP behavior for theme.json-level defaults. The slider only reflects explicitly saved block attributes, not inherited defaults.

Unrelated, but I noticed Core's social-links block has a similar issue: once you change the Block Spacing from the default, the gap renders without any spacing in the editor regardless of the value:

core-social-test.mov

I'm going to approve the PR since it's working fine with our collective changes on my end 😄, but feel free to let me know if there's something that needs updating.

laurelfulford · 2026-03-31T00:01:23Z

Thanks @rbcorrales! I took the latest for a spin and retested the sizing/spacing, everything looks good to me! Thank you for taking this one to the finish line, I think it's good to go! 🙂

Dismissing stale review.

rbcorrales · 2026-04-01T17:42:25Z

I'll go ahead and merge it so we can get this closed. Thanks!

github-actions · 2026-04-01T17:43:26Z

Hey @thomasguillot, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

# [6.37.0-alpha.1](v6.36.1...v6.37.0-alpha.1) (2026-04-02) ### Bug Fixes * **card-settings-group:** change default actionType from chevron to none ([#4610](#4610)) ([00505ed](00505ed)) * **post-date:** preserve classic theme markup and fix archive titles ([#4602](#4602)) ([c5fb825](c5fb825)) * remove removal of block visibility ([#4595](#4595)) ([9396379](9396379)) ### Features * **access-control:** filter available lists by content restrictions ([#4589](#4589)) ([959127f](959127f)), closes [#4581](#4581) [#4583](#4583) [#4590](#4590) * **access-control:** premium newsletters UI ([#4577](#4577)) ([6f8c891](6f8c891)), closes [#4581](#4581) [#4583](#4583) [#4590](#4590) * **author-profile-social:** add support for colors, block spacing, brand style ([#4509](#4509)) ([21cf4c9](21cf4c9)) * campaigns wizard light UI refresh ([#4588](#4588)) ([6078c4b](6078c4b)) * **color-picker:** simplify component to use basecontrol ([#4581](#4581)) ([ff677ea](ff677ea)) * **components:** add CardFeature component ([#4583](#4583)) ([5aabb18](5aabb18)) * **content-gate:** institution management ui ([#4582](#4582)) ([ae88750](ae88750)) * **content-gate:** institutional access redirect and loading UX ([#4593](#4593)) ([548d236](548d236)) * **content-gate:** institutions ([#4574](#4574)) ([49b0c05](49b0c05)) * **content-gate:** personalized institutional access verification page ([#4596](#4596)) ([0eed591](0eed591)) * **image-upload:** simplify component to use basecontrol; remove info prop ([#4580](#4580)) ([d51eb54](d51eb54)) * **integrations:** add ActionScheduler group handling ([#4559](#4559)) ([411732a](411732a)) * **integrations:** promoted fields for content gate and campaign segmentation ([#4601](#4601)) ([f943df2](f943df2)) * **newspack-ui:** add stack layout and color utility classes ([#4600](#4600)) ([1934067](1934067)) * **post-date:** centralize date features from theme into plugin ([#4579](#4579)) ([19f15eb](19f15eb)) * **sync:** prevent stale data on retry, improve logging and error handling ([#4562](#4562)) ([5467f34](5467f34)) * **tags:** add private tags feature ([#4507](#4507)) ([06d7711](06d7711)) * **yoast:** add primary category utility and settings toggle ([#4563](#4563)) ([4b396c3](4b396c3))

github-actions · 2026-04-02T18:20:27Z

🎉 This PR is included in version 6.37.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.37.0](v6.36.3...v6.37.0) (2026-04-13) ### Bug Fixes * **card-settings-group:** change default actionType from chevron to none ([#4610](#4610)) ([00505ed](00505ed)) * **post-date:** preserve classic theme markup and fix archive titles ([#4602](#4602)) ([c5fb825](c5fb825)) * remove removal of block visibility ([#4595](#4595)) ([9396379](9396379)) ### Features * **access-control:** filter available lists by content restrictions ([#4589](#4589)) ([959127f](959127f)), closes [#4581](#4581) [#4583](#4583) [#4590](#4590) * **access-control:** premium newsletters UI ([#4577](#4577)) ([6f8c891](6f8c891)), closes [#4581](#4581) [#4583](#4583) [#4590](#4590) * **author-profile-social:** add support for colors, block spacing, brand style ([#4509](#4509)) ([21cf4c9](21cf4c9)) * campaigns wizard light UI refresh ([#4588](#4588)) ([6078c4b](6078c4b)) * **color-picker:** simplify component to use basecontrol ([#4581](#4581)) ([ff677ea](ff677ea)) * **components:** add CardFeature component ([#4583](#4583)) ([5aabb18](5aabb18)) * **content-gate:** institution management ui ([#4582](#4582)) ([ae88750](ae88750)) * **content-gate:** institutional access redirect and loading UX ([#4593](#4593)) ([548d236](548d236)) * **content-gate:** institutions ([#4574](#4574)) ([49b0c05](49b0c05)) * **content-gate:** personalized institutional access verification page ([#4596](#4596)) ([0eed591](0eed591)) * **image-upload:** simplify component to use basecontrol; remove info prop ([#4580](#4580)) ([d51eb54](d51eb54)) * **integrations:** add ActionScheduler group handling ([#4559](#4559)) ([411732a](411732a)) * **integrations:** promoted fields for content gate and campaign segmentation ([#4601](#4601)) ([f943df2](f943df2)) * **newspack-ui:** add stack layout and color utility classes ([#4600](#4600)) ([1934067](1934067)) * **post-date:** centralize date features from theme into plugin ([#4579](#4579)) ([19f15eb](19f15eb)) * **sync:** prevent stale data on retry, improve logging and error handling ([#4562](#4562)) ([5467f34](5467f34)) * **tags:** add private tags feature ([#4507](#4507)) ([06d7711](06d7711)) * **yoast:** add primary category utility and settings toggle ([#4563](#4563)) ([4b396c3](4b396c3))

github-actions · 2026-04-13T16:42:49Z

🎉 This PR is included in version 6.37.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

rbcorrales and others added 30 commits February 5, 2026 00:30

fix(avatar): show placeholder for text-only custom bylines in editor

2b76be5

feat(avatar): support as nested profile block content

3abcd69

fix(avatar): resolve guest author avatars in editor (#4460)

8e3903c

perf(avatar): register enriched newspack_author_info REST field

cf87cac

fix(avatar): resolve context at render time and debounce image fetch

ed5a86b

fix(avatar): respect avatarHideDefault and resolve at correct size

2e2710e

fix(avatar): increase image fetch debounce

dd8de18

feat(avatar): render default gravatar in nested mode fallback

ddfc1f8

feat(blocks): add social blocks with shared circular button mixin

9aee3ed

fix(author-profile-social): fix spacing and remove duplicate asset en…

e8203d6

…queue

fix(avatar): add missing useDefaultAvatar mock in edit tests

43edb25

fix(i18n): use correct text domain in social blocks

6fb8489

fix(a11y): add accessible labels to social link blocks

f3b945a

fix(author-social-link): sanitize REST API SVGs with safeHTML

6645402

fix(author-social): pass icon size via block context

f26814f

refactor(author-profile-social): replace wp globals with imports

f5bcfdc

fix(avatar): remove double escaping of author name

24e442e

fix(use-coauthors): cache negative avatar lookup results

25b9ba4

fix(avatar): remove double escaping in standalone render path

1c06d5f

fix(author-social): respect saved inner blocks on frontend

455ea09

fix(social-button): add hex fallbacks for theme color tokens

6fc7714

refactor(avatar): extract shared render_avatar_image helper

3d1fa9a

fix(author-social): remove unused website service

2373555

fix(social-icons): align myspace, soundcloud, wikipedia SVGs with theme

bf523ce

refactor(social-icons): make plugin the canonical SVG source

9339795

refactor(social-icons): deduplicate SVGs into shared class constant

4e3a5ff

fix(avatar): adapt overlap mask cutout to match border-radius

7b82e97

refactor(blocks): modularize avatar, deduplicate context, add types

ef89878

perf(blocks): fix useSelect memoization warnings and add apiVersion

4ccbdb2

fix(bylines): add missing ToggleControl deprecation prop

0c9c6d3

github-actions Bot added the [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator label Mar 10, 2026

thomasguillot and others added 6 commits March 11, 2026 09:10

Update src/blocks/author-profile-social/edit.jsx

fac1316

Co-authored-by: Laurel <laurel.fulford@automattic.com>

fix: indentation

e0eddf9

Update src/blocks/author-profile-social/edit.jsx

6e4d8ee

Co-authored-by: Laurel <laurel.fulford@automattic.com>

Update src/blocks/author-profile-social/class-author-profile-social-b…

980b7e3

…lock.php Co-authored-by: Laurel <laurel.fulford@automattic.com>

fix: php wrapper style error

acee80c

feat: improve colour controls for author profile social block

5d10a0f

laurelfulford self-requested a review March 19, 2026 17:32

rbcorrales removed the [Status] Needs Review The issue or pull request needs to be reviewed label Mar 21, 2026

fix: replace wrapper div with ul and use native WP layout/margin support

acfc2ea

laurelfulford requested a review from rbcorrales March 25, 2026 00:12

fix(author-profile-social): use useInnerBlocksProps and set default b…

b100210

…lockGap Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

rbcorrales approved these changes Mar 30, 2026

View reviewed changes

github-actions Bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator labels Mar 30, 2026

rbcorrales merged commit 21cf4c9 into trunk Apr 1, 2026
9 checks passed

rbcorrales deleted the update/author-profile-social branch April 1, 2026 17:43

github-actions Bot added the needs-changelog label Apr 1, 2026

thomasguillot removed the needs-changelog label Apr 2, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(author-profile-social): add support for colors, block spacing, brand style#4509

feat(author-profile-social): add support for colors, block spacing, brand style#4509
rbcorrales merged 56 commits intotrunkfrom
update/author-profile-social

thomasguillot commented Feb 24, 2026

Uh oh!

rbcorrales commented Mar 21, 2026

Uh oh!

laurelfulford commented Mar 24, 2026

Uh oh!

laurelfulford commented Mar 25, 2026

Uh oh!

rbcorrales left a comment

Uh oh!

laurelfulford commented Mar 31, 2026

Uh oh!

rbcorrales commented Apr 1, 2026

Uh oh!

Uh oh!

github-actions Bot commented Apr 1, 2026

Uh oh!

github-actions Bot commented Apr 2, 2026

Uh oh!

github-actions Bot commented Apr 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

thomasguillot commented Feb 24, 2026

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

rbcorrales commented Mar 21, 2026

Uh oh!

laurelfulford commented Mar 24, 2026

Uh oh!

laurelfulford commented Mar 25, 2026

Uh oh!

rbcorrales left a comment

Choose a reason for hiding this comment

Uh oh!

laurelfulford commented Mar 31, 2026

Uh oh!

rbcorrales commented Apr 1, 2026

Uh oh!

Uh oh!

github-actions Bot commented Apr 1, 2026

Uh oh!

github-actions Bot commented Apr 2, 2026

Uh oh!

github-actions Bot commented Apr 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants