feat(my-account): block theme styles

[rbcorrales]

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 implements some adjustments to the My Account v1 pages to make the styles similar when using the block theme. Some of the changes:

• Add base styles for tables, links, and headings on My Account pages, gathered from the classic theme.
• Move the order-details-customer.php WooCommerce template override from the classic theme to the plugin, for showing consistent order details display regardless of theme.
• Style Woo notice banners on My Account pages to match the classic theme appearance.

Currently known differences:

• Field labels from the add payment modal have a different size and color. This needs more investigation, as these styles are coming from Stripe CSS.
• Similarly, when loading the modal checkout for resubscribing, it only shows the express checkout buttons but not Stripe's field for adding a card.
• Some spacing on headings looks slightly different (and not consistently across levels) because the classic theme was setting 1rem = 20px, but in the block theme, that sometimes equals 16px.

---

Feedback requested:

• Do we want to keep overriding the order details template? The changes are minimal and mostly reflected as heading changes from "Billing address" to "Your Information," along with some other conditional renders (a diff between /woocommerce/templates/order/order-details-customer.php and /newspack-theme/newspack-theme/woocommerce/order/order-details-customer.php will show the differences).
• I'm not super convinced about some of the overrides we're doing here for My Account here (like fonts and spacing) in a specific fashion. Some possible alternatives:
  • Move them to the top level in newspack-plugin styles, given that I assume other parts are going to need it.
  • Move them to a top-level on the block theme, however this could cause visual differences if using a different block theme in the future.
  • Accept some of the differences and don't style the elements that much in favor of future flexibility.

---

Closes NPPD-1124.

How to test the changes in this Pull Request:

1. Enable My Account v1 by setting NEWSPACK_MY_ACCOUNT_VERSION to 1.0.0 or higher.
2. Load all my account pages in separate tabs, including subsections, like when viewing order details or subscriptions.
3. Checkout this branch.
4. Load all my account pages again and compare them. There shouldn't be significant visual changes.
5. Switch to the block theme.
6. Compare the pages again. They should look similar (with the exception of the known differences).
7. Verify that the functionality keeps working as expected and that Woo notices look similar.

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

Adjusts My Account v1 styling so pages look consistent under block themes, and moves a WooCommerce template override into the plugin for more predictable rendering.

Changes:

• Adds baseline My Account v1 styles for tables, headings, and links.
• Styles WooCommerce notice banners (including block notice banners) to match the classic theme look.
• Introduces a plugin-level override for WooCommerce’s order/order-details-customer.php template when My Account v1 is enabled.

Reviewed changes

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

Show a summary per file

File	Description
src/newspack-ui/scss/elements/woocommerce/_overrides.scss	Extends Newspack UI notice styling to WC block notice banners.
src/newspack-ui/scss/elements/_notices.scss	Adjusts notice padding-left to win against competing styles.
src/my-account/v1/style.scss	Adds base table/link/heading styles for My Account v1 pages.
src/my-account/v1/_variables.scss	Adds a heading font stack CSS variable for My Account.
src/my-account/v1/_components.scss	Adds My Account-specific styling for WC block notice banners.
includes/plugins/woocommerce/my-account/templates/v1/order-details-customer.php	New WooCommerce template override for consistent “order customer details” display.
includes/plugins/woocommerce/my-account/class-my-account-ui-v1.php	Registers the new WooCommerce template override via wc_get_template.

---

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

[laurelfulford]

I'm not going to disclose how long I spent before I realized I needed that Block Theme PR for this to look right, and instead say that I think this is looking good overall! 😆

I added some feedback but a lot of it is subjective, and I'm definitely open to push back!

Do we want to keep overriding the order details template?

I kind of hate that we end up with whole template part just to add/change some headers conditionally. The biggest differences seem to be adding the Your Information header, and not showing the “Billing address" header unless the "Shipping address" is also visible.

Personally my vote would be to keep things as simple as possible and ditch it, but I’ll defer to @thomasguillot on this one in case he has strong feelings about it from a UX perspective.

With the template:

Without the template part (and also without some styles):

I'm not super convinced about some of the overrides we're doing here for My Account here (like fonts and spacing) in a specific fashion.

I’m all for simplifying this! We had to do a weird dance with the classic theme to make sure styles there still worked while layering new Woo styles on top of them for really specific cases, but I’d love if we could untangle that where possible.

For now, I think we can live with some spacing/font mismatches between My Account between the classic vs block theme. As we work through certain sections, I think the ideal outcome would be nice clean styles in the Newspack Plugin for My Account/Newspack UI, and anything funky/weird we’re doing for the Classic Theme (like tweaking sizing/spacing just for the 20px font base) should be moved there 🙂

[rbcorrales]

@laurelfulford thanks for the review. I'm glad we agree on some of these customizations!

I'm all in favor of simplifying things, so I've removed all the elements you mentioned that I wasn't particularly happy to include in the first place (I was mostly trying to determine how complex it would be to achieve an almost pixel-perfect version of the current theme, but secretly hoping you asked for removal! 😆).

I'd rather get rid of the order template override too. Just waiting on @thomasguillot confirmation on that.

[laurelfulford]

Thanks @rbcorrales! 🙌 I added one more suggestion about the table styles, and then I think that's it for me!

I was mostly trying to determine how complex it would be to achieve an almost pixel-perfect version of the current theme, but secretly hoping you asked for removal!

I think if we want to match anything, we'll want to dig up the mockups that were used to add these styles to the Classic theme and go off of them, and mostly ignore how it looks in the current theme since little things always get lost in translation/due to weird 6 year old theme styles 🙂

The closest I found was the My Account i5 mockups, which are stylistically similar but content-wise very different. I think they may have been used as inspiration to style the default My Account content and that there isn't a mockup of the pages exactly as they are, as this is just one phase of work. (@thomasguillot if you can verify that, I'd appreciate it!).

[thomasguillot]

How come we need any CSS? All the styles for my account should come from Newspack Plugin/UI

[rbcorrales]

@thomasguillot Some of these CSS changes are already happening in Newspack UI.

Other styles are currently specific to my account (like the notices) because they're overriding new block theme styles from WooCommerce, and the markup has also changed. I could see these being moved to src/newspack-ui/scss/elements/woocommerce/_overrides.scss.

The other one specific to my account, is related to the table behavior, and I don't know how much it could affect the rest of the site if not scoped. Would it make sense to move that to /src/newspack-ui/scss/elements/woocommerce/_my-account.scss, since that one already has .woocommerce-account.newspack-my-account.newspack-ui?

[thomasguillot]

I see, thanks for the explanation @rbcorrales.

Other styles are currently specific to my account (like the notices) because they're overriding new block theme styles from WooCommerce, and the markup has also changed. I could see these being moved to src/newspack-ui/scss/elements/woocommerce/_overrides.scss.

Yeah let's do this.

The other one specific to my account, is related to the table behavior, and I don't know how much it could affect the rest of the site if not scoped. Would it make sense to move that to /src/newspack-ui/scss/elements/woocommerce/_my-account.scss, since that one already has .woocommerce-account.newspack-my-account.newspack-ui?

And let's do this as well.

[rbcorrales]

@thomasguillot the change to newspack-ui should be covered here: 78ec4ca. I did a rebase to solve some conflicts with trunk, so that's why all commits appear as new, but the only new one is the latest.

There's only one pending decision here: will we keep the order details template override, or can we remove it and live with that?

[thomasguillot]

There's only one pending decision here: will we keep the order details template override, or can we remove it and live with that?

I wonder how this affects @dkoo's work on My Account?

[rbcorrales]

Removed the order-details-customer.php template override via fd4b739.

Created NPPD-1200 for the Stripe styling differences so we keep track of that.