feat(ras-newsletter): Newsletters list progressive disclosure by Takshil-Kunadia · Pull Request #3887 · Automattic/newspack-plugin

Takshil-Kunadia · 2025-04-05T14:17:54Z

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:

Closes https://app.asana.com/0/1208970929679778/1208759817180346/f.

The Newsletters list displayed on the front-end to users to subscribe to during signup needed to be handled more gracefully. As per the discussion on ticket, this PR adds a "See all" button on the newsletter subscribe lists which when clicked displays the entire newsletter list. A setting is added in the Audience Configuration settings page in the "Newsletter Subscription Lists" section to set the number of initial newsletter to be displayed be default, while the rest of the newsletters hides behind the "See all" button.

Setting:-

Front-end:-

How to test the changes in this Pull Request:

Enable & Configure RAS and also enable the Present newsletter signup after checkout and registration in Audience settings.
Go to Newsletter > Settings and add a few Subscription list items with title & description.
Set the Initial list size to two or any number.
Log in as a guest window and click on Sign In, fill up the form.
Observe the newsletter list displaying the number of newsletter as set in the config and show an extra item partially.
Click on "See all" to display the entire list.

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?

…wsletter items and

…eight

thomasguillot · 2025-04-07T14:10:17Z

@Takshil-Kunadia I pushed some very small changes:

Reduced the gap to 12px
Updated the arrow-right icon to match wordpress/icons
Added a white to transparent gradient on the half-visible newsletter

Overall, this isn’t quite what I had in mind with the max-height. I was hoping to avoid a potentially super tall modal, especially after all the newsletters have loaded. That said, I really like what you’ve done, so let’s go with it 👍

✅ Design

leogermani · 2025-04-14T14:46:18Z

Works as expected, but I have two comments.

First, the "See all" button is still visible after I expanded the list (see screenshot). (Maybe it wasn't at first, but became visible again after scrolling down and up a few times)

The help text under the new option could be more descriptive. Suggestion:

"Number of newsletters initially visible during signup. Additional newsletters will be hidden behind a 'See all' button."

cc @thomasguillot

Takshil-Kunadia · 2025-04-15T08:38:49Z

@leogermani Thanks for taking a look! 🙇

About the see all button issue, I wasn't able to replicate it on mac safari/chrome (I am yet to test the same on windows env). Regardless I have modified that code to remove the button entirely instead of just hiding it.
Updated the help text ✅

leogermani · 2025-04-15T15:28:22Z

Everything works fine!

But I still think the admin UI needs some loce. Pinging @thomasguillot here:

The "initial list size" is taking a lot of space. And you have that huge input to enter a tiny number. The list of Newsletters is moved down far from the section title... and it's not clear that they are part of the same section anymore...

Another idea: Limit the number of lists displayed to 2 minimum and only show that option if there are more than 2 lists available

@thomasguillot can you give us some directions here?

thomasguillot · 2025-04-16T13:12:13Z

@leogermani I've reorganised this whole section.

I've also replaced the input with a RangeControl. Right now it ranges between 1 and 10 which I think should be sufficent.

leogermani

Beautiful!

github-actions · 2025-04-17T21:17:08Z

Hey @Takshil-Kunadia, 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.5.0-alpha.1](v6.4.4...v6.5.0-alpha.1) (2025-04-23) ### Bug Fixes * add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e)) * allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9)) * **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628)) * **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760)) * avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3)) * **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659)) * **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800)) * **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113)) * **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39)) * **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925)) * **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5)) * **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0)) * **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21)) * **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6)) * hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f)) * make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b)) * **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b)) * reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7)) * remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f)) * remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7)) * **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f)) ### Features * **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8)) * **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2)) * **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee)) * **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3)) * **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277)) * **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed)) * **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823) * **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0)) * **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726)) * update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))

matticbot · 2025-04-23T17:56:24Z

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.6.0-alpha.1](v6.5.0...v6.6.0-alpha.1) (2025-05-08) ### Bug Fixes * add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e)) * allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9)) * **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628)) * **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760)) * avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3)) * **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659)) * **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800)) * **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113)) * **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39)) * **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925)) * **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5)) * **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0)) * **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21)) * **ga4:** ensure gate_post_id and newspack_popup_id are passed to activities ([#3956](#3956)) ([fadaa4d](fadaa4d)) * **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6)) * hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f)) * make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b)) * **newsletters-wizard:** remove advertisers menu item ([#3948](#3948)) ([2fddbd6](2fddbd6)) * **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b)) * reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7)) * remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f)) * remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7)) * **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f)) ### Features * **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8)) * **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2)) * **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee)) * **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3)) * **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277)) * **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed)) * **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823) * **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0)) * **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726)) * update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))

matticbot · 2025-05-08T17:11:37Z

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.6.0](v6.5.1...v6.6.0) (2025-05-14) ### Bug Fixes * add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e)) * allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9)) * **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628)) * **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760)) * avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3)) * **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659)) * **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800)) * **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113)) * **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39)) * **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925)) * **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5)) * **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0)) * **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21)) * **ga4:** ensure gate_post_id and newspack_popup_id are passed to activities ([#3956](#3956)) ([fadaa4d](fadaa4d)) * **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6)) * hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f)) * make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b)) * **newsletters-wizard:** remove advertisers menu item ([#3948](#3948)) ([2fddbd6](2fddbd6)) * **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b)) * reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7)) * remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f)) * remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7)) * **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f)) ### Features * **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8)) * **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2)) * **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee)) * **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3)) * **email-change:** remove env constant requirement ([#3943](#3943)) ([f04e58f](f04e58f)) * **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277)) * **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed)) * **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823) * **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0)) * **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726)) * update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))

matticbot · 2025-05-14T17:30:00Z

🎉 This PR is included in version 6.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Takshil-Kunadia added 4 commits April 5, 2025 16:05

feat(newsletters): add disclosure button for newsletter signup ui

d9f1474

feat(newsletters): add backend setting for initial list size

a189577

feat(newsletters): remove obvious comments

1150582

feat(newsletters): ui fixes and improve max height calculation for ne…

c75c482

…wsletter items and

Takshil-Kunadia marked this pull request as ready for review April 5, 2025 14:18

Takshil-Kunadia requested a review from a team as a code owner April 5, 2025 14:18

Takshil-Kunadia requested review from leogermani and thomasguillot April 5, 2025 14:19

Takshil-Kunadia added the [Status] Needs Design Review label Apr 5, 2025

thomasguillot added 4 commits April 7, 2025 14:51

fix: gap height

fb2b290

feat: add gradient to newsletter-list-container

b09e24e

fix: only display gradient when newsletter-list-container has a max-h…

5e9b864

…eight

feat: update arrow-right icon to match wordpress/icons

a31c0f9

thomasguillot removed their request for review April 7, 2025 14:10

thomasguillot added [Status] Needs Review The issue or pull request needs to be reviewed [Status] Design Approved and removed [Status] Needs Design Review labels Apr 7, 2025

Takshil-Kunadia added 2 commits April 15, 2025 14:02

fix(newsletters): update "See all" button logic

bcbf552

feat(newsletters): update setting help text

8d278f5

thomasguillot added 2 commits April 16, 2025 13:36

feat: use rangecontrol

bbe1533

feat: reorganise newsletter signup card

3092986

leogermani approved these changes Apr 16, 2025

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 Apr 16, 2025

leogermani merged commit 53f4eed into trunk Apr 17, 2025

leogermani deleted the feature/newsletter-signup-progressive-disclosure branch April 17, 2025 21:16

github-actions Bot added the needs-changelog label Apr 17, 2025

leogermani removed the needs-changelog label Apr 17, 2025

matticbot added the released on @alpha label Apr 23, 2025

matticbot added the released label May 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ras-newsletter): Newsletters list progressive disclosure#3887

feat(ras-newsletter): Newsletters list progressive disclosure#3887
leogermani merged 12 commits into
trunkfrom
feature/newsletter-signup-progressive-disclosure

Takshil-Kunadia commented Apr 5, 2025

Uh oh!

thomasguillot commented Apr 7, 2025

Uh oh!

leogermani commented Apr 14, 2025

Uh oh!

Takshil-Kunadia commented Apr 15, 2025

Uh oh!

leogermani commented Apr 15, 2025 •

edited

Loading

Uh oh!

thomasguillot commented Apr 16, 2025

Uh oh!

leogermani left a comment

Uh oh!

github-actions Bot commented Apr 17, 2025

Uh oh!

matticbot commented Apr 23, 2025

Uh oh!

matticbot commented May 8, 2025

Uh oh!

matticbot commented May 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Takshil-Kunadia commented Apr 5, 2025

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

thomasguillot commented Apr 7, 2025

Uh oh!

leogermani commented Apr 14, 2025

Uh oh!

Takshil-Kunadia commented Apr 15, 2025

Uh oh!

leogermani commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thomasguillot commented Apr 16, 2025

Uh oh!

leogermani left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 17, 2025

Uh oh!

matticbot commented Apr 23, 2025

Uh oh!

matticbot commented May 8, 2025

Uh oh!

matticbot commented May 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

leogermani commented Apr 15, 2025 •

edited

Loading