feat: Add My Account button block by laurelfulford · Pull Request #4409 · Automattic/newspack-plugin

laurelfulford · 2026-01-20T19:25:52Z

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, along with Automattic/newspack-block-theme#400 and Automattic/newspack-theme#2618 adds a My Account button block to the Newspack Plugin, adds the button to just one pattern (for now) in the Block Theme (for testing), and moves some CSS from the Newspack Plugin to the classic theme to avoid clashing.

I have some open questions/possible weird cruft to still deal with:

For the block itself, it's a pretty basic button-style block with an editable label and an icon. You can edit most things you can edit with a regular button.
It does not have unique state for mobile - I was wondering if that should be something we do based on the screen breakpoint, or something we do in the block settings (eg. have a My Account button block style that shows only the icon that can be used on mobile?) cc @thomasguillot
Some of the logic for the block -- specifically the trigger that opens the sign-in modal and the JavaScript that updates the button label based on whether you're a reader -- still lives in the RAS code outside of the block. I think this is okay but I might be wrong!
Rather than hiding the block when you're logged in as an admin/not a reader, I gave it a 'disabled' state. I find it kind of confusing that the button isn't visible to admins in the classic theme, and I think that's how we end up with it looking so weird in some publisher headers: they're always logged in so they don't see it.
I've only added the block to the default header pattern in the theme to start, and added a check for RAS before it gets inserted. Once I nail down the mobile bit, I can add it to the rest!

Some of these (like the mobile state, and maybe adding an 'Outline' style) can also be handled in a separate PR if there isn't a for-sure direction to follow.

See NPPD-1123.

How to test the changes in this Pull Request:

Start with a test site running RAS.
Apply this PR, feat: Add My Account button block newspack-block-theme#400 and feat: move some My Account button styles to the theme newspack-theme#2618.
Confirm the default header has the My Account button in the header, alongside the Donate Block (note: if you've edited the Header Desktop template part, you'll need to reset it)
In an incognito window, click the button and confirm it triggers the My Account login window; once you sign up/sign in, the button should switch to say My Account.
In your regular window (as an admin) the button should still be visible but slightly greyed out:

Open the Site Editor, and edit the Header (Desktop) template part.
When you click the My Account button, you should have an option to switch between Signed In and Signed Out states.

In each state, try editing the button text to change it to something else.
Try changing some other block options: colours, font size, border radius, padding...
Save and publish your changes.
Confirm they display on the front end, and that your labels both appear for your incognito reader:

Test these PRs on a site running the Classic theme. It should look/act the same -- I mostly wanted to move the styles so we wouldn't have to be overwriting too much classic-theme specific stuff in the block.
Lastly, if possible test these PRs on a site without RAS and confirm that the My Account button isn't inserted.

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

This PR adds a new "My Account Button" block to Newspack Plugin, allowing sites with Reader Activation enabled to display a dynamic button that links readers to their account page or opens the sign-in modal. The block adapts its label and behavior based on authentication state.

Changes:

Added a new My Account Button block with dynamic labels for signed-in and signed-out states
Moved CSS styles from reader-activation-auth to allow reuse by the new block
Added account icon to the icons package

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/blocks/my-account-button/class-my-account-button-block.php	Server-side block rendering with authentication state handling and WooCommerce account URL detection
src/blocks/my-account-button/edit.js	Block editor component with toolbar toggle for previewing signed-in/out states
src/blocks/my-account-button/block.json	Block metadata with support for color, typography, spacing, and border customization
src/blocks/my-account-button/style.scss	Block styles including disabled state and icon sizing
src/blocks/my-account-button/index.js	Block registration with icon configuration
src/blocks/my-account-button/README.md	Documentation describing block behavior and settings
src/blocks/index.js	Registration logic preventing block from appearing in classic themes
packages/icons/src/account.js	New account SVG icon
packages/icons/index.js	Export for new account icon
includes/class-blocks.php	Include block PHP class and pass block theme flag to editor
src/reader-activation-auth/style.scss	Removed account link styles (moved to block-specific styles)

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

thomasguillot · 2026-01-21T12:26:56Z

The button should not disappear or be disabled. It should then link to My account.

(ignore the change of style in the screenshot above)

laurelfulford · 2026-01-21T15:45:35Z

Thanks @thomasguillot!

The button should not... be disabled. It should then link to My account.

The logic in the RAS code only switches the button to the signed in state when you're a registered reader and not when you're logged in. I can do this differently in the block and just have it show the signed in label for anyone who's logged in, but I didn't know the history of that choice re: making it reader specific. Do you?

…t for logged in users

laurelfulford · 2026-01-21T19:22:56Z

Thanks @thomasguillot! I've made the following changes:

I tweaked the editor markup so it matches the front-end structurally and visually
I removed the 'disabled' styles from the block
I made it so the button block always goes to /my-account when the user is logged in, including editorial roles

One last thing from me: what do you think we should do for mobile? I was thinking either make the button only show the icon on small screens, or have an icon-only style as an option that can be added to the mobile header. Or maybe a third option - do you have any preferences?

…as href

…hing

… in users

rbcorrales

Thanks for addressing all the comments. The button is looking great!

laurelfulford · 2026-01-29T18:04:39Z

Thanks for the review, @rbcorrales! 🙌

github-actions · 2026-01-29T18:04:57Z

Hey @laurelfulford, 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! ❤️

github-actions · 2026-01-29T18:04:58Z

Hey @laurelfulford, 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! ❤️

* feat(my-account): custom subscription details page for Newspack sites * feat: show status badge * feat: start "renew subscription" button for inactive subs * style: unbold grand total if not showing subtotals * feat: custom order again buttons * fix: show order-again button in subscription header only for expired/cancelled status * fix: restore p.order-again element * fix: improper placement of conditional * fix: remove duplicate button class name * Update includes/plugins/woocommerce/my-account/templates/v1/subscription-header.php Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * fix: esc_html_e instead of _e * fix: esc_html_e instead of _e * Update includes/plugins/woocommerce/my-account/class-my-account-ui-v1.php Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * fix: global namespace WCS_Staging class * fix: add missing template file * fix: remove unneeded template file * fix: remove no-longer-used variable * Update includes/plugins/woocommerce/my-account/templates/v1/related-orders.php Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * fix: only show order-again button in expired subscription headers * fix: remove .button class from order-again button * feat(newspack-ui): update demo * feat(newspack-ui): update notice * feat(my-account): reorganise subscription header * feat(newspack-ui): adjust margin for text + icon buttons * fix: full-width header buttons instead of dropdown at mobile viewports * fix: better targeting for header dropdown * fix: show "renew subscription" for cancelled subs sans resubscribe action * fix: set header badge class based on status * feat: replace My Account notices w/ Newspack UI snackbars * style: remove top margin from switch button in header * feat(subscriptions): update table padding * feat(newspack-ui): partially update snackbar * feat: update table * fix: snackbar autohide behavior * fix: snackbar notices behavior * feat(newspack-ui): small tweaks to snackbar * fix(memberships): allow free trial members to comment (#4428) This PR addresses an issue where we were incorrectly filtering memberships with an "active" status, omitting free trial memberships. The Memberships::$active_statuses array uses a hyphen rather than an underscore for `free_trial`, which the wc_memberships_get_user_memberships methods requires. * chore(release): 6.29.4 [skip ci] ## [6.29.4](v6.29.3...v6.29.4) (2026-01-28) ### Bug Fixes * **memberships:** allow free trial members to comment ([#4428](#4428)) ([32d455e](32d455e)) * fix(subscriptions): skip free trial tweak during switches (#4432) * chore(release): 6.29.5 [skip ci] ## [6.29.5](v6.29.4...v6.29.5) (2026-01-29) ### Bug Fixes * **subscriptions:** skip free trial tweak during switches ([#4432](#4432)) ([4277a3c](4277a3c)) * feat: Add My Account button block (#4409) * chore: update translation files [skip ci] * feat(content-gate): support new metering schema (#4419) * chore: update translation files [skip ci] * chore: deprecate circle ci (#4413) * chore(github-actions): fix reusable workflow reference * fix(collections): hide indicator for unpublished collections (#4434) * fix: snackbar slide in-out position * Update src/newspack-ui/js/notices.js Co-authored-by: Miguel Peixe <miguel.peixe@automattic.com> * refactor: newspackUI public API via modules * feat: add newspack_ui_notice_is_urgent to make notices dismissmible --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Thomas Guillot <thomas@automattic.com> Co-authored-by: Rasmy Nguyen <raz@automattic.com> Co-authored-by: matticbot <semantic-release-bot@martynus.net> Co-authored-by: Miguel Peixe <miguel.peixe@automattic.com> Co-authored-by: Laurel <laurel.fulford@automattic.com> Co-authored-by: matticbot <sysops+ghmatticbot@automattic.com> Co-authored-by: Ramon Corrales <rbcorrales@users.noreply.github.com>

# [6.31.0-alpha.1](v6.30.1...v6.31.0-alpha.1) (2026-02-05) ### Bug Fixes * **collections:** hide indicator for unpublished collections ([#4434](#4434)) ([3eda622](3eda622)) * **content-gate:** persist restricted content ([#4420](#4420)) ([856695d](856695d)) * decrease image size for Collections in certain cases ([#4395](#4395)) ([de3c001](de3c001)) * **my-account:** "order again" checkout redirect ([#4427](#4427)) ([3a9e7fb](3a9e7fb)) * remove alignments from the My Account Block button ([#4438](#4438)) ([8de3526](8de3526)) ### Features * Add My Account button block ([#4409](#4409)) ([b0c414f](b0c414f)) * **avatar:** add custom byline support ([#4424](#4424)) ([152b1af](152b1af)) * **content-gate:** grouped access rules evaluation and normalization ([#4435](#4435)) ([aa182c9](aa182c9)) * **content-gate:** layout deletion and default content handling ([#4436](#4436)) ([f0b3b18](f0b3b18)) * **content-gate:** support group subscriptions access rule ([#4442](#4442)) ([416cd13](416cd13)) * **content-gate:** support new metering schema ([#4419](#4419)) ([e3f2f56](e3f2f56)) * **my-account:** new layout for single subscription pages ([#4425](#4425)) ([6425dbf](6425dbf)), closes [#4428](#4428) [#4432](#4432) [#4409](#4409) [#4419](#4419) [#4413](#4413) [#4434](#4434)

github-actions · 2026-02-05T17:02:19Z

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.32.0-alpha.1](v6.31.0...v6.32.0-alpha.1) (2026-02-10) ### Bug Fixes * **collections:** hide indicator for unpublished collections ([#4434](#4434)) ([3eda622](3eda622)) * **content-gate:** persist restricted content ([#4420](#4420)) ([856695d](856695d)) * decrease image size for Collections in certain cases ([#4395](#4395)) ([de3c001](de3c001)) * **my-account:** "order again" checkout redirect ([#4427](#4427)) ([3a9e7fb](3a9e7fb)) * remove alignments from the My Account Block button ([#4438](#4438)) ([8de3526](8de3526)) ### Features * Add My Account button block ([#4409](#4409)) ([b0c414f](b0c414f)) * **avatar:** add custom byline support ([#4424](#4424)) ([152b1af](152b1af)) * **content-gate:** grouped access rules evaluation and normalization ([#4435](#4435)) ([aa182c9](aa182c9)) * **content-gate:** layout deletion and default content handling ([#4436](#4436)) ([f0b3b18](f0b3b18)) * **content-gate:** support group subscriptions access rule ([#4442](#4442)) ([416cd13](416cd13)) * **content-gate:** support new metering schema ([#4419](#4419)) ([e3f2f56](e3f2f56)) * **my-account:** new layout for single subscription pages ([#4425](#4425)) ([6425dbf](6425dbf)), closes [#4428](#4428) [#4432](#4432) [#4409](#4409) [#4419](#4419) [#4413](#4413) [#4434](#4434)

github-actions · 2026-02-10T21:04:24Z

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.32.0](v6.31.1...v6.32.0) (2026-02-16) ### Bug Fixes * add check for my account before switching error notice ([#4484](#4484)) ([9e13eca](9e13eca)) * **collections:** hide indicator for unpublished collections ([#4434](#4434)) ([3eda622](3eda622)) * **content-gate:** persist restricted content ([#4420](#4420)) ([856695d](856695d)) * decrease image size for Collections in certain cases ([#4395](#4395)) ([de3c001](de3c001)) * **my-account:** "order again" checkout redirect ([#4427](#4427)) ([3a9e7fb](3a9e7fb)) * remove alignments from the My Account Block button ([#4438](#4438)) ([8de3526](8de3526)) ### Features * Add My Account button block ([#4409](#4409)) ([b0c414f](b0c414f)) * **avatar:** add custom byline support ([#4424](#4424)) ([152b1af](152b1af)) * **content-gate:** grouped access rules evaluation and normalization ([#4435](#4435)) ([aa182c9](aa182c9)) * **content-gate:** layout deletion and default content handling ([#4436](#4436)) ([f0b3b18](f0b3b18)) * **content-gate:** support group subscriptions access rule ([#4442](#4442)) ([416cd13](416cd13)) * **content-gate:** support new metering schema ([#4419](#4419)) ([e3f2f56](e3f2f56)) * **my-account:** new layout for single subscription pages ([#4425](#4425)) ([6425dbf](6425dbf)), closes [#4428](#4428) [#4432](#4432) [#4409](#4409) [#4419](#4419) [#4413](#4413) [#4434](#4434)

github-actions · 2026-02-16T17:09:17Z

🎉 This PR is included in version 6.32.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

laurelfulford added 8 commits January 19, 2026 10:27

feat: start building out My Account button block

5b7389c

feat: add icon and move some CSS to the classic theme

308d427

fix: renaming some files and updating block icon

6d507a1

feat: add placeholder icons, placeholder text, and 'inactive' state

bdab450

fix: remove icon for now until final version confirmed

63499cf

Merge branch 'trunk' into feat/add-my-account-block

b29e69e

fix: update previewState behaviour

0ab0a7e

feat: add readme

713e9d8

This was referenced Jan 20, 2026

feat: Add My Account button block Automattic/newspack-block-theme#400

Merged

feat: move some My Account button styles to the theme Automattic/newspack-theme#2618

Merged

laurelfulford added 5 commits January 20, 2026 13:44

feat: update block apiSchema

8bffee0

feat: add account icon to the button

14d69b8

fix: rename CSS classes

eaad88f

fix: update classnames; better (?) handling when RAS inactive

965e85f

fix: limit block to block themes and remove hiding logic

252e255

laurelfulford marked this pull request as ready for review January 21, 2026 00:37

laurelfulford requested a review from a team as a code owner January 21, 2026 00:37

laurelfulford added [Status] Needs Review The issue or pull request needs to be reviewed [Status] Needs Design Review labels Jan 21, 2026

laurelfulford requested a review from Copilot January 21, 2026 00:37

Copilot started reviewing on behalf of laurelfulford January 21, 2026 00:38 View session

Copilot AI reviewed Jan 21, 2026

View reviewed changes

Comment thread src/blocks/my-account-button/class-my-account-button-block.php Outdated

Comment thread src/blocks/my-account-button/class-my-account-button-block.php

laurelfulford added 3 commits January 20, 2026 16:53

fix: tone down the escapint

8eaf77e

feat: add tests for the My Account block

6809ba8

Merge branch 'trunk' into feat/add-my-account-block

e7443f8

thomasguillot added 2 commits January 21, 2026 14:04

fix: icon

c860716

fix: toolbar buttons

4f76a94

style: simplify default css

9ca7741

laurelfulford added 2 commits January 21, 2026 10:43

fix: updating markup in editor to match front-end

fdd6f82

fix: remove 'placeholder' state, and always send button to /my-accoun…

edf6123

…t for logged in users

rbcorrales requested changes Jan 26, 2026

View reviewed changes

Comment thread src/blocks/my-account-button/class-my-account-button-block.php

Comment thread src/blocks/my-account-button/class-my-account-button-block.php Outdated

Comment thread tests/unit-tests/class-test-my-account-button-block.php

Comment thread src/reader-activation-auth/index.js

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

laurelfulford added 5 commits January 27, 2026 16:52

fix: add missing newspack-reader__account-link class

28483ea

fix: add missing aria-hidden to button icon

6ad8233

feat: add test to make sure logged in button doesn't trigger modal, h…

6cd316e

…as href

feat: add test for empty button labels to make sure block returns not…

44b18d1

…hing

feat: add check for My Account URL before rendering button for logged…

dfeb6de

… in users

laurelfulford requested a review from rbcorrales January 28, 2026 16:10

laurelfulford removed the [Status] Needs Changes or Feedback The issue or pull request needs action from the original creator label Jan 28, 2026

rbcorrales approved these changes Jan 29, 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 Review The issue or pull request needs to be reviewed labels Jan 29, 2026

laurelfulford merged commit b0c414f into trunk Jan 29, 2026
16 checks passed

laurelfulford deleted the feat/add-my-account-block branch January 29, 2026 18:04

github-actions Bot added the needs-changelog label Jan 29, 2026

dkoo pushed a commit that referenced this pull request Jan 30, 2026

feat: Add My Account button block (#4409)

0346d06

laurelfulford removed the needs-changelog label Feb 3, 2026

Conversation

laurelfulford commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

thomasguillot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

laurelfulford commented Jan 21, 2026

Uh oh!

laurelfulford commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rbcorrales left a comment

Choose a reason for hiding this comment

Uh oh!

laurelfulford commented Jan 29, 2026

Uh oh!

Uh oh!

github-actions Bot commented Jan 29, 2026

Uh oh!

github-actions Bot commented Jan 29, 2026

Uh oh!

github-actions Bot commented Feb 5, 2026

Uh oh!

github-actions Bot commented Feb 10, 2026

Uh oh!

github-actions Bot commented Feb 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

laurelfulford commented Jan 20, 2026 •

edited

Loading

thomasguillot commented Jan 21, 2026 •

edited

Loading

laurelfulford commented Jan 21, 2026 •

edited

Loading