Commit 6811d837fd5 for woocommerce
commit 6811d837fd5dd7d53406e3a1ff5d55383bb6b1da
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Fri Apr 10 19:17:14 2026 +0200
Fix customer account dropdown menu styling issues (#64073)
* Fix customer account dropdown chevron not rotating when open
The CSS selector `.is-dropdown-open` didn't match the class added by
the Interactivity API (`wc-block-customer-account--is-dropdown-open`).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Use body background color for customer account dropdown surface
Read the computed body background color at runtime and set it as the
dropdown surface color, matching the pattern used by mini-cart and cart
blocks.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Adjust dropdown item hover opacity from 8% to 10%
Aligns with the design feedback for a consistent 10% text-color
opacity across hover states.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Render customer account as button in editor when dropdown is enabled
Match the frontend behavior: use a <button> instead of <a> when
hasDropdownNavigation is true. Add the has-dropdown class to the
editor wrapper so toggle button styles apply. Disable link color
support to prevent global link styles from affecting the block.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Add changelog
* Fix typo in changelog entry
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Remove color.link=false from customer account block
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Address review feedback on customer account dropdown
Add explicit type="button" on the toggle to match the PHP backend, and
clarify the body background fallback comment.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Reference Mini Cart as precedent for body background fallback
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Refine body background fallback comment
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/myaccount-fixes b/plugins/woocommerce/changelog/myaccount-fixes
new file mode 100644
index 00000000000..cdf03ae5cdc
--- /dev/null
+++ b/plugins/woocommerce/changelog/myaccount-fixes
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Customer Account: visual fixes of newly added dropdown
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/block.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/block.tsx
index 27dc9205597..df07f705336 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/block.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/block.tsx
@@ -67,28 +67,44 @@ export const CustomerAccountBlock = ( {
}
: {};
- return (
- <a
- className="wc-block-customer-account__link"
- href={ getSetting(
- 'dashboardUrl',
- getSetting( 'wpLoginUrl', '/wp-login.php' )
- ) }
- { ...ariaAttributes }
- >
+ const content = (
+ <>
<AccountIcon
iconStyle={ iconStyle }
displayStyle={ displayStyle }
iconClass={ iconClass }
/>
<Label displayStyle={ displayStyle } />
- { hasDropdownNavigation && (
+ </>
+ );
+
+ if ( hasDropdownNavigation ) {
+ return (
+ <button
+ type="button"
+ className="wc-block-customer-account__toggle"
+ { ...ariaAttributes }
+ >
+ { content }
<Icon
className="wc-block-customer-account__caret"
icon={ caret }
size={ 10 }
/>
+ </button>
+ );
+ }
+
+ return (
+ <a
+ className="wc-block-customer-account__link"
+ href={ getSetting(
+ 'dashboardUrl',
+ getSetting( 'wpLoginUrl', '/wp-login.php' )
) }
+ { ...ariaAttributes }
+ >
+ { content }
</a>
);
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/edit.tsx
index 92afecb4876..1860080d647 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/edit.tsx
@@ -18,9 +18,11 @@ const Edit = ( {
attributes,
setAttributes,
}: BlockEditProps< Attributes > ) => {
- const { className } = attributes;
+ const { className, hasDropdownNavigation } = attributes;
const blockProps = useBlockProps( {
- className: clsx( 'wc-block-editor-customer-account', className ),
+ className: clsx( 'wc-block-editor-customer-account', className, {
+ 'wc-block-customer-account--has-dropdown': hasDropdownNavigation,
+ } ),
} );
return (
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/frontend.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/frontend.ts
index 2482485c0b4..18e45e4a477 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/frontend.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/frontend.ts
@@ -35,6 +35,16 @@ const focusTrigger = () => {
trigger?.focus();
};
+// Set the background color from body so it's reliable. Pattern used in other blocks too
+// e.g. Mini Cart (see mini-cart/utils/set-styles.ts).
+const getBodyBackgroundColor = (): string => {
+ const color = getComputedStyle( document.body ).backgroundColor;
+ if ( ! color || color === 'rgba(0, 0, 0, 0)' || color === 'transparent' ) {
+ return '#fff';
+ }
+ return color;
+};
+
const updateDropdownPosition = (
context: CustomerAccountContext,
wrapper: HTMLElement
@@ -113,6 +123,10 @@ const { actions: privateActions } = store(
const wrapper = getWrapper();
if ( wrapper ) {
updateDropdownPosition( context, wrapper );
+ wrapper.style.setProperty(
+ '--wc-customer-account-dropdown-surface',
+ getBodyBackgroundColor()
+ );
}
context.isDropdownOpen = true;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/style.scss
index 714f20a079c..45f01d87d09 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/style.scss
@@ -40,7 +40,7 @@
);
--wc-customer-account-dropdown-item-hover-bg: color-mix(
in srgb,
- currentColor 8%,
+ currentColor 10%,
transparent
);
}
@@ -89,7 +89,7 @@
font: inherit;
}
- &.is-dropdown-open .wc-block-customer-account__caret {
+ &.wc-block-customer-account--is-dropdown-open .wc-block-customer-account__caret {
transform: rotate(180deg);
}