feat(my-account): full-site takeover template and custom nav menu by dkoo · Pull Request #3974 · Automattic/newspack-plugin

dkoo · 2025-05-13T21:11:24Z

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 builds on the Newspack UI styles implemented in #3951. It implements a custom no-header/no-footer page template for My Account pages while logged in, as well as a custom template part, styles, and JS for the My Account nav menu.

Closes NPPD-107 and NPPD-106.

mobile, menu closed	mobile, menu open
mobile, horizontal orientation (menu and content are separately scrollable)	desktop

Some notes:

The custom no-header/no-footer page template is based on the no-header-footer.php template from Newspack Theme but implemented separately in this plugin so that it's not reliant on the Newspack Theme being active. I'm open to discussing alternative approaches, but this seemed cleanest to me.
The site logo shown in the desktop nav menu is the image chosen as the "Site icon" in the Customizer (also filterable via newspack_my_account_site_logo_url hook).
The designs include an area for custom links above the Sign Out link, but the UI to add custom links is out of scope of this project. They can be added in code via a newspack_my_account_navigation_footer_items filter hook.
(for @Automattic/newspack-design) Since this isn't the "true" full-screen takeover experience (where the My Account pages functions as an app overlay on the regular site), I took some liberty with adding a mobile "account" icon button on the right side of the fixed topbar element to toggle the menu open. Does the placement and behavior make sense?

How to test the changes in this Pull Request:

Check out this branch and rebuild assets
Make sure define( 'NEWSPACK_MY_ACCOUNT_VERSION', '1.0.0' ); is defined in wp-config.php
Add a site icon image in Customize > Site Identity
Log into My Account with a reader account and confirm that all My Account pages render without a site header/footer while logged in
Test look and behavior of the menu at various breakpoints and screen sizes
(Bonus) add some custom menu links using a filter and ensure that the links render above the "Sign out" link at the bottom of the menu sidebar:

add_filter(
	'newspack_my_account_navigation_footer_items',
	function() {
		return [
			[
				'url'   => 'https://automattic.com',
				'label' => __( 'Automattic', 'newspack-plugin' ),
			],
			[
				'url'   => 'https://newspack.com',
				'label' => __( 'Newspack', 'newspack-plugin' ),
			],
		];
	}
);

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?

thomasguillot · 2025-05-15T10:00:24Z

It looks broken if it's the Block Theme but I guess it's because right now the theme doesn't even support WC.

dkoo · 2025-05-15T17:10:22Z

@thomasguillot maybe we can tackle Block Theme support in a separate PR? We may need to tweak the page template to accommodate it, too.

dkoo · 2025-05-15T17:33:58Z

@thomasguillot e55fc8f fixes hover styles for the Sign Out button:

thomasguillot · 2025-05-16T08:51:58Z

maybe we can tackle Block Theme support in a separate PR?

Sounds good.

miguelpeixe

Nice! All works well in my testing. Left a couple of minor requests below.

github-actions · 2025-05-21T20:36:36Z

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:45:46Z

🎉 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:19Z

🎉 This PR is included in version 6.7.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

dkoo and others added 24 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

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

9554c8b

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

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

fix: line-height

336768d

style: update nav buttons to match --ghost styles

67c9b7d

style: fix button styles in subscription tables

d1bc651

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

feat: full-page takeover template + styles for My Account

410db23

feat: full-site takeover page template and custom nav bar

40fc099

feat: custom nav menu footer UI

4c6fbdc

fix: avoid overlap in menu header & footer items

c139d6f

dkoo requested a review from a team as a code owner May 13, 2025 21:11

dkoo self-assigned this May 13, 2025

dkoo added [Status] Needs Review The issue or pull request needs to be reviewed [Status] Needs Design Review labels May 13, 2025

dkoo requested a review from a team May 13, 2025 21:12

fix: conditionally show icon only if it exists

389d7dc

style: sign out button should inherit ghost styles

e55fc8f

style: fix button margins in pagination row

2b32f77

thomasguillot added [Status] Design Approved and removed [Status] Needs Design Review labels May 16, 2025

thomasguillot removed the request for review from a team May 16, 2025 08:52

dkoo added the My Account Redesign label May 21, 2025

miguelpeixe requested changes May 21, 2025

View reviewed changes

Comment thread includes/plugins/woocommerce/my-account/class-my-account-ui-v1.php Outdated

Comment thread includes/plugins/woocommerce/my-account/class-my-account-ui-v1.php Outdated

dkoo added 3 commits May 21, 2025 14:27

refactor: suppress ads and prompts in all My Account versions

bda9a9e

refactor: rename custom templates to remove unnecessary prefix

efc976c

refactor: rename custom templates to remove unnecessary prefix

9c9c2d9

dkoo requested a review from miguelpeixe May 21, 2025 20:34

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

dkoo merged commit 5cf8403 into trunk May 21, 2025
11 checks passed

dkoo deleted the feat/my-account-site-takeover branch May 21, 2025 20:36

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

dkoo removed the needs-changelog label May 21, 2025

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

naxoc mentioned this pull request May 26, 2025

fix: update path to verify template in WooCommerce My Account class #3992

Merged

6 tasks

matticbot added the released label Jun 2, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

feat(my-account): full-site takeover template and custom nav menu#3974
dkoo merged 34 commits into
trunkfrom
feat/my-account-site-takeover

dkoo commented May 13, 2025 •

edited

Loading

Uh oh!

thomasguillot commented May 15, 2025

Uh oh!

dkoo commented May 15, 2025

Uh oh!

dkoo commented May 15, 2025 •

edited

Loading

Uh oh!

thomasguillot commented May 16, 2025

Uh oh!

miguelpeixe left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 21, 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

Conversation

dkoo commented May 13, 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!

thomasguillot commented May 15, 2025

Uh oh!

dkoo commented May 15, 2025

Uh oh!

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

Uh oh!

Uh oh!

thomasguillot commented May 16, 2025

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 21, 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 May 13, 2025 •

edited

Loading

dkoo commented May 15, 2025 •

edited

Loading