From 0ace0bbca5044e76d764bf1f637fc334c045d6c7 Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Thu, 30 Apr 2026 14:01:45 +0100 Subject: [PATCH 01/18] fix(my-account): align newsletter row button widths --- src/my-account-v2-demo/style.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/my-account-v2-demo/style.scss b/src/my-account-v2-demo/style.scss index 6699932a60..e8fb9933e9 100644 --- a/src/my-account-v2-demo/style.scss +++ b/src/my-account-v2-demo/style.scss @@ -29,6 +29,15 @@ line-height: var(--newspack-ui-line-height-m); } + // Sign up / Unsubscribe row buttons share the same width so the right + // edge stays steady as rows toggle between subscribed states (and so + // the loading-state spinner doesn't reveal a wider label after the + // flip). Targets only per-row buttons, not the bottom "Unsubscribe + // from all" CTA which sits in a different context. + .newspack-my-account-v2-demo-newsletters [data-list-id] > .newspack-ui__button { + min-width: 8rem; + } + // Phase 9 — Delete account modal action list. Three rows of // label and description on the left, Manage button on the right, // separated by hairlines. No newspack-ui primitive matches this From ad8d1f1edf37adec85c2cf76bb94975c48a674fb Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Thu, 30 Apr 2026 14:01:54 +0100 Subject: [PATCH 02/18] fix(my-account): add gap to sidebar nav footer items --- src/my-account-v2-demo/style.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/my-account-v2-demo/style.scss b/src/my-account-v2-demo/style.scss index e8fb9933e9..d35c55be50 100644 --- a/src/my-account-v2-demo/style.scss +++ b/src/my-account-v2-demo/style.scss @@ -94,6 +94,16 @@ } } + // Sidebar nav footer (secondary links + Sign out) renders as a stack + // with spacer-1 between items. v1's `_navigation.scss` controls the + // outer footer block but doesn't gap the children, so the v2-demo + // secondary links sit too tight against the Sign out row. + .newspack-my-account__navigation-footer ul { + display: flex; + flex-direction: column; + gap: var(--newspack-ui-spacer-1); + } + // Email-send icon at the top of the success step. Black filled // circle, white icon — matches Figma frame 4865:92398. .newspack-my-account-v2-demo-account-settings__success-icon { From 3840ea5eb74c79b8bcb9d60a9490d524c130718e Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Thu, 30 Apr 2026 14:01:58 +0100 Subject: [PATCH 03/18] fix(my-account): narrow delete-account success modal to small --- src/my-account-v2-demo/account-settings.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/my-account-v2-demo/account-settings.js b/src/my-account-v2-demo/account-settings.js index 03fd693601..4b10a97dd8 100644 --- a/src/my-account-v2-demo/account-settings.js +++ b/src/my-account-v2-demo/account-settings.js @@ -28,7 +28,9 @@ function openModal( modal ) { } /** - * Switch the modal to its success ("check inbox") step. + * Switch the modal to its success ("check inbox") step. The success step + * narrows the inner modal to --small; init keeps the default width because + * its alternatives list needs the room. * * @param {HTMLElement} modal Modal container element. */ @@ -36,6 +38,7 @@ function showSuccessStep( modal ) { modal.querySelectorAll( '[data-step]' ).forEach( step => { step.hidden = step.dataset.step !== 'success'; } ); + modal.querySelector( '.newspack-ui__modal' )?.classList.add( 'newspack-ui__modal--small' ); } /** @@ -49,6 +52,7 @@ function resetModal( modal ) { modal.querySelectorAll( '[data-step]' ).forEach( step => { step.hidden = step.dataset.step !== 'init'; } ); + modal.querySelector( '.newspack-ui__modal' )?.classList.remove( 'newspack-ui__modal--small' ); } /** From d6834dba7dcccf6fd143165be1778f8e736800f4 Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Thu, 30 Apr 2026 14:11:40 +0100 Subject: [PATCH 04/18] fix(my-account): tighten newsletter section header gap --- .../my-account/templates/my-account-v2-demo/newsletters.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/newsletters.php b/includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/newsletters.php index 5990ef2c96..ac6d9d4567 100644 --- a/includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/newsletters.php +++ b/includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/newsletters.php @@ -27,7 +27,7 @@ class="newspack-my-account-v2-demo-newsletters newspack-ui__stack newspack-ui__s >
-
+

@@ -68,7 +68,7 @@ class="newspack-my-account-v2-demo-newsletters newspack-ui__stack newspack-ui__s class="newspack-my-account-v2-demo-newsletters__unsubscribe-all newspack-ui__stack newspack-ui__stack--horizontal newspack-ui__stack--gap-5 newspack-ui__stack--align-center newspack-ui__stack--justify-between" data-section-id="unsubscribe-all" > -
+

From b6f197666b6f80827809b3fbeadb6545169b05d6 Mon Sep 17 00:00:00 2001 From: Thomas Guillot Date: Thu, 30 Apr 2026 14:26:20 +0100 Subject: [PATCH 05/18] fix(my-account): anchor donations billing history to bottom --- .../my-account-v2-demo/donations.php | 20 ++++++++++--------- src/my-account-v2-demo/style.scss | 10 ++++++++++ 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/donations.php b/includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/donations.php index 6884f46509..f502c45a41 100644 --- a/includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/donations.php +++ b/includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/donations.php @@ -143,17 +143,18 @@ static function ( $a, $b ) { }; ?>