feat: update reader activation newsletters list

[thomasguillot]

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 includes a bunch of smaller improvements:

• New utility classes for position and visibility
• The divider now supports a divider-gradient
• The spacing utility has moved to data attributes instead, for example data-margin-top="1", and now also supports gap
• A new vstack component
• And most importantly, the newsletter sign up form has been refactored to use all of the above, and added to the ?ui-demo page

How to test the changes in this Pull Request:

1. Make sure you have multiple newsletters on your site
2. Make sure we display newsletter form at the end of the registration flow
3. Test now
4. Switch to this branch and test again
5. Margins should be improved and more concistent
6. Check the ui-demo if the new Newsletter Sign Up form appears the same as the one you experienced during registration

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 refactors the newsletter signup form UI with several improvements to spacing, layout, and component organization. The changes introduce new utility classes and components to create a more maintainable and consistent design system.

Changes:

• Refactored spacing utilities from class-based (e.g., newspack-ui__spacing-top--16) to data-attribute-based (e.g., data-margin-top="3") for better flexibility and cleaner HTML
• Added new utility classes for visibility (hidden, overflow-hidden) and positioning (position-absolute, position-relative, etc.)
• Introduced a new vstack component for vertical stacking with gap-based spacing and a gradient divider component for visual fade effects
• Enhanced newsletter signup form with improved spacing, accessibility (aria-label on "See all" button), and better visual structure using the new components

Reviewed changes

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

Show a summary per file

File	Description
src/reader-activation-newsletters/style.scss	Removed redundant CSS rules that are now handled by utility classes and components
src/reader-activation-newsletters/newsletters-form.js	Updated JavaScript to hide gradient divider when "See all" is clicked
src/newspack-ui/scss/variables/_spacing.scss	Added spacer-1 variable (8px) for vstack default gap
src/newspack-ui/scss/elements/misc/_visibility.scss	New file with visibility utility classes (hidden, overflow-hidden)
src/newspack-ui/scss/elements/misc/_spacing.scss	Refactored from BEM classes to data-attribute selectors with loop-based generation
src/newspack-ui/scss/elements/misc/_position.scss	New file with position utility classes for all CSS position values
src/newspack-ui/scss/elements/misc/_index.scss	Added imports for position and visibility utilities
src/newspack-ui/scss/elements/misc/_dividers.scss	Added gradient-divider component with absolute positioning
src/newspack-ui/scss/elements/_layout.scss	Added vstack component for vertical flex layouts with gap spacing
includes/reader-activation/class-reader-activation.php	Refactored newsletter form HTML to use new utility classes and components
includes/plugins/woocommerce/my-account/templates/v1/payment-information.php	Updated to use new data-attribute spacing utilities
includes/plugins/woocommerce/my-account/templates/v1/navigation.php	Updated to use new data-attribute spacing utilities
includes/plugins/woocommerce/my-account/templates/v1/account-settings.php	Updated to use new data-attribute spacing utilities
includes/class-newspack-ui.php	Updated demo page to showcase new newsletter form with all improvements

---

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

[dkoo]

The new UI components and signup form look good! The only issue I'm seeing is that the "Sending to:" email address is no longer populating:

I can confirm that it does populate on trunk, so something must have changed in the selector logic that populates it.

[thomasguillot]

The only issue I'm seeing is that the "Sending to:" email address is no longer populating

🤦

Fixed: 4f97661