feat(my-account): apply Newspack UI styles to My Account w/ env constant by dkoo · Pull Request #3951 · Automattic/newspack-plugin

dkoo · 2025-04-25T00:12:06Z

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:

Reorganizes My Account files to support switching between multiple different versions of the UI with an environment constant. Establishes v0 (current UI) and v1 classes which enqueue different assets and have the ability to load different custom templates depending on which UI version is active.

This PR doesn't attempt to fully implement new My Account designs, templates, or custom UI components yet, it just applies CSS to get global content/layouts and individual components as close as possible without altering the templates.

Some notes:

Does the use of child "UI version" classes and version string comparisons make sense for this? I'm imagining we might eventually need to support even more than two different versions of the UI.
The styles are split between the My Account SCSS and a new _my-account.scss Newspack UI module. The latter is so that we can @extend important WooCommerce classes with Newspack UI styles without importing and duplicating Newspack UI CSS in the compiled My Account CSS.
The V1 class dequeues WooCommerce styles from the Newspack Theme. This is so we don't have to fight/override the theme styles as much and can start from more of a blank slate.
Moved the My Account front-end JS from the includes folder to src/my-account with some more modular organization:
- JS is split into smaller modules by My Account section/feature
- Top-level JS is enqueued and executed in all My Account pages, regardless of active UI version
- JS and SCSS in v0 and v1 folders are compiled as separate files and enqueued/executed only when the matching UI version is active

How to test the changes in this Pull Request:

Check out this branch.
Log in as a verified reader with newsletters, subscriptions and/or donations.
Smoke test the My Account pages—without adding an environment constant to wp-config.php, all pages should look and behave identically as in trunk.
Add an environment constant to wp-config.php: define( 'NEWSPACK_MY_ACCOUNT_VERSION', '1.0.0' ); (this tells the plugin to load the v1 class)
Hard-refresh the My Account pages and confirm that the page layouts and their components are using Newspack UI styles (make sure to test both mobile and non-mobile breakpoints). Behavior of features throughout all pages should remain identical to v0/trunk.

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?

dkoo · 2025-04-25T17:22:10Z

Tagging @Automattic/newspack-design for a design review. Keep in mind this PR is an incremental step toward the full redesign and the scope of changes here is limited to CSS only.

miguelpeixe

The structure is looking great! I didn't look too much into the implemented styles because I understand it's still partial. My main focus was on how we're getting this foundation started.

I really like the directory structure for both backend and frontend. The v0 and v1 separation is a great idea and is implemented in a way that is very straightforward to figure out and navigate. Just left a minor comment for the PHP part.

In my testing I had no issues navigating the dashboard in both versions.

dkoo · 2025-05-09T22:48:57Z

Thanks for the feedback, @miguelpeixe! I'm glad the _VX convention made sense to you. 😆 I think this is ready for another review.

miguelpeixe

Thank you for the changes! Looks good and tests well!

dkoo · 2025-05-12T18:01:43Z

@thomasguillot d1bc651 also tweaks margins/spacing for the buttons inside tables:

mobile:

tablet/desktop:

thomasguillot

There are some vertical alignment issues but I'm not too concerned since this screen will eventually change.

github-actions · 2025-05-13T15:44:53Z

Hey @dkoo, 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.7.0-alpha.1](v6.6.2...v6.7.0-alpha.1) (2025-05-23) ### Bug Fixes * **404-images:** use JS without modifying content ([#3963](#3963)) ([9f5646b](9f5646b)) * add missing namespace ([#3980](#3980)) ([6d58793](6d58793)) * **emails:** add missing HTML markup in the change-email-cancel template ([#3981](#3981)) ([040ae30](040ae30)) * **ga4:** fire login/registration activities via SSO ([#3965](#3965)) ([8c97515](8c97515)) * hide modal content gate when modal checkout is opened ([#3953](#3953)) ([a503973](a503973)) * **jetpack:** handle the related posts max age option ([#3964](#3964)) ([8aad2b8](8aad2b8)) * make sure fix duplcate fields apply filters ([#3971](#3971)) ([f361a4e](f361a4e)) * namespace Lite Site ([#3975](#3975)) ([e4665ae](e4665ae)) * sync correction status with parent post status ([#3978](#3978)) ([dcd5a12](dcd5a12)) ### Features * add compatibility to network in custom bylines ([#3972](#3972)) ([199a993](199a993)) * add icons repository and remove custom icons ([#3883](#3883)) ([e56d2e0](e56d2e0)) * **analytics:** "My Account" dashboard interactions ([#3949](#3949)) ([22e9590](22e9590)) * **donations:** update notice style and type ([#3962](#3962)) ([3f60ef3](3f60ef3)) * **email-change:** remove env constant requirement ([#3943](#3943)) ([4158bf1](4158bf1)) * **my-account:** apply Newspack UI styles to My Account w/ env constant ([#3951](#3951)) ([e4aa5a2](e4aa5a2)) * **my-account:** full-site takeover template and custom nav menu ([#3974](#3974)) ([5cf8403](5cf8403)) * **woocommerce:** log error notices ([#3952](#3952)) ([1654007](1654007))

matticbot · 2025-05-23T15:46:04Z

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.7.0](v6.6.4...v6.7.0) (2025-06-02) ### Bug Fixes * **404-images:** use JS without modifying content ([#3963](#3963)) ([9f5646b](9f5646b)) * add missing namespace ([#3980](#3980)) ([6d58793](6d58793)) * **emails:** add missing HTML markup in the change-email-cancel template ([#3981](#3981)) ([040ae30](040ae30)) * **ga4:** fire login/registration activities via SSO ([#3965](#3965)) ([8c97515](8c97515)) * hide modal content gate when modal checkout is opened ([#3953](#3953)) ([a503973](a503973)) * **jetpack:** handle the related posts max age option ([#3964](#3964)) ([8aad2b8](8aad2b8)) * make sure fix duplcate fields apply filters ([#3971](#3971)) ([f361a4e](f361a4e)) * namespace Lite Site ([#3975](#3975)) ([e4665ae](e4665ae)) * prevent auto-publishing corrections when scheduling posts ([#4006](#4006)) ([7531832](7531832)) * sync correction status with parent post status ([#3978](#3978)) ([dcd5a12](dcd5a12)) ### Features * add compatibility to network in custom bylines ([#3972](#3972)) ([199a993](199a993)) * add icons repository and remove custom icons ([#3883](#3883)) ([e56d2e0](e56d2e0)) * **analytics:** "My Account" dashboard interactions ([#3949](#3949)) ([22e9590](22e9590)) * **donations:** update notice style and type ([#3962](#3962)) ([3f60ef3](3f60ef3)) * **email-change:** remove env constant requirement ([#3943](#3943)) ([4158bf1](4158bf1)) * **my-account:** apply Newspack UI styles to My Account w/ env constant ([#3951](#3951)) ([e4aa5a2](e4aa5a2)) * **my-account:** full-site takeover template and custom nav menu ([#3974](#3974)) ([5cf8403](5cf8403)) * **woocommerce:** log error notices ([#3952](#3952)) ([1654007](1654007))

matticbot · 2025-06-02T19:34:52Z

🎉 This PR is included in version 6.7.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

dkoo added 2 commits April 23, 2025 15:46

refactor: reorganize My Account files and code for modularity

5981a7e

feat: apply Newspack UI styles to My Account with env constant

1fe027c

dkoo added [Status] Needs Review The issue or pull request needs to be reviewed My Account Redesign labels Apr 25, 2025

dkoo self-assigned this Apr 25, 2025

dkoo requested a review from a team as a code owner April 25, 2025 00:12

feat: add variables module and use custom theme accent/contrast colors

9554c8b

dkoo requested a review from a team April 25, 2025 17:21

dkoo added 5 commits April 25, 2025 11:25

style: change inline table buttons to x-small

2583fd9

style: more controlled layout margins/padding for mobile

8f4cb3d

fix: no flex without nav sidebar

df0e34b

fix: apply box styles to messages

3784c81

fix: use notice styles, not box

ad961c9

miguelpeixe requested changes May 8, 2025

View reviewed changes

dkoo added 6 commits May 9, 2025 16:11

fix: merge conflicts, and omit unnecessary init functions

c6bd2e2

fix: remove unnecessary untils module

228fc89

style: hover background color for nav buttons

16822cd

refactor: move woocommerce files to plugins folder

ae456e8

refactor: no need to extend base class

2dd7f70

chore: remove unused use

a381101

dkoo requested a review from miguelpeixe May 9, 2025 22:48

miguelpeixe approved these changes May 12, 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 May 12, 2025

thomasguillot and others added 2 commits May 12, 2025 16:19

fix: line-height

336768d

style: update nav buttons to match --ghost styles

67c9b7d

dkoo requested a review from thomasguillot May 12, 2025 17:28

style: fix button styles in subscription tables

d1bc651

dkoo added the [Status] Needs Design Review label May 12, 2025

dkoo added 3 commits May 12, 2025 12:06

style: standardize spacing for elements after a .shop_table

ca89dc8

Merge branch 'trunk' into feat/my-account-newspack-ui

0a77aa2

style: make .delete buttons destructive

7b22f8b

thomasguillot approved these changes May 13, 2025

View reviewed changes

dkoo merged commit e4aa5a2 into trunk May 13, 2025
8 checks passed

dkoo deleted the feat/my-account-newspack-ui branch May 13, 2025 15:44

github-actions Bot added the needs-changelog label May 13, 2025

dkoo mentioned this pull request May 13, 2025

feat(my-account): full-site takeover template and custom nav menu #3974

Merged

6 tasks

adekbadek mentioned this pull request May 16, 2025

fix: add missing namespace #3980

Merged

6 tasks

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

dkoo removed the needs-changelog label May 30, 2025

matticbot added the released label Jun 2, 2025

Conversation

dkoo commented Apr 25, 2025 • 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!

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

Uh oh!

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dkoo commented May 9, 2025

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

dkoo commented May 12, 2025

Uh oh!

thomasguillot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented May 13, 2025

Uh oh!

matticbot commented May 23, 2025

Uh oh!

matticbot commented Jun 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dkoo commented Apr 25, 2025 •

edited

Loading

dkoo commented Apr 25, 2025 •

edited

Loading