feat(newspack-ui): refactor newsletter signup form with Newspack UI utilities

[thomasguillot]

Changes proposed in this Pull Request:

Refactors the reader activation newsletter signup form to use Newspack UI utility classes, and adds the missing utilities needed to support it.

New Newspack UI utilities:

• Position utility classes (position-relative, position-absolute, etc.)
• Visibility utility classes (hidden, overflow-hidden)
• Gradient divider component (newspack-ui__gradient-divider) with matching color tokens
• New icons: arrowLeft, chevronDown, chevronDownSmall, chevronRight

Newsletter signup form refactor (class-reader-activation.php):

• Layout now uses newspack-ui__stack (vertical) with gap utilities instead of custom CSS
• Gradient divider replaces the CSS pseudo-element ::before trick for the truncated list fade
• "See all" button uses the new chevronDownSmall icon
• Improved accessibility: aria-label on the see-all button, aria-hidden on the decorative icon span
• <span class="email"> replaced with <strong class="email"> (JS selector updated accordingly)
• Removed component-specific margin overrides now covered by stack layout

UI demo page (class-newspack-ui.php):

• Added a full newsletter signup form demo with sample data

How to test the changes in this Pull Request:

1. Make sure you have multiple newsletters configured on your site
2. Go through the reader registration flow and verify the newsletter signup step looks correct
3. If there are more newsletters than the default visible count, verify the "See all" button appears and reveals the rest on click, hiding the gradient divider
4. Visit ?ui-demo and check the new "Newsletters Signup Form" section
5. Test in My Account — verify spacing is correct in the navigation, profile, and payment sections

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

[dkoo]

@thomasguillot sorry, this one fell off my radar. I updated the branch with trunk and it works well now.

[thomasguillot]

Thank you @dkoo. I might wait for #4600 to be merged first because there will be a bunch of conflicting changes and I might need to rework this PR.

[Copilot]

Pull request overview

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

---

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

[thomasguillot]

Hey @dkoo, this has been rebased on top of #4600 and is ready for another look!