Commit 1990f5e315a for woocommerce
commit 1990f5e315a60eec0ab7d7d55123e9d6a5e767d1
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Fri Sep 18 13:09:53 2026 +0200
Customer Account block: display WP default avatar for logged-in users that don't have an avatar (#68832)
* Customer Account block: display WP default avatar for logged-in users that don't have an avatar
* Add changelog
* Improve avatar CSS
* Remove leftover CSS
* Update outdated comments
diff --git a/plugins/woocommerce/changelog/fix-customer-account-show-wp-default-avatar-when-user-has-none b/plugins/woocommerce/changelog/fix-customer-account-show-wp-default-avatar-when-user-has-none
new file mode 100644
index 00000000000..620b533da52
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-customer-account-show-wp-default-avatar-when-user-has-none
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Customer Account block: display WP default avatar for logged-in users that don't have an avatar
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 1fb0286a386..2c51fa94917 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
@@ -61,10 +61,6 @@
text-decoration: underline;
}
- :where(.wc-block-customer-account__visual) {
- position: relative;
- }
-
:where(.wc-block-customer-account__visual + .label) {
padding-left: em($gap-smallest);
}
@@ -77,17 +73,11 @@
}
:where(.wc-block-customer-account__avatar) {
- // SVG icons have some transparent spacing around the actual icon.
- // So we add some spacing around the avatar to simulate a similar size.
- $avatar_spacing: 4%;
-
border-radius: 50%;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: calc(100% - ($avatar_spacing * 2));
- height: auto;
+ display: block;
+ object-fit: cover;
+ width: em($grid-unit-30);
+ height: em($grid-unit-30);
}
}
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/CustomerAccount.php b/plugins/woocommerce/src/Blocks/BlockTypes/CustomerAccount.php
index 27feaa7faae..185f459f903 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/CustomerAccount.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/CustomerAccount.php
@@ -347,25 +347,23 @@ class CustomerAccount extends AbstractBlock {
}
/**
- * Render the user avatar and icon.
+ * Render the user avatar or icon.
*
* @param array $attributes Block attributes.
*
- * @return string Avatar and icon markup.
+ * @return string Avatar or icon markup.
*/
private function render_visual( $attributes ) {
if ( self::TEXT_ONLY === $attributes['displayStyle'] ) {
return '';
}
- $icon = $this->render_icon( $attributes );
$user_id = get_current_user_id();
if ( $user_id ) {
- // We use `blank` as the default so if the user has no avatar, the icon underneath is visible.
$avatar = get_avatar(
$user_id,
48,
- 'blank',
+ '',
'',
array(
'class' => 'wc-block-customer-account__avatar',
@@ -373,10 +371,16 @@ class CustomerAccount extends AbstractBlock {
);
if ( $avatar ) {
- return '<div class="wc-block-customer-account__visual">' . $icon . wp_kses_post( $avatar ) . '</div>';
+ return '<div class="wc-block-customer-account__visual">' . wp_kses_post( $avatar ) . '</div>';
}
}
- return '<div class="wc-block-customer-account__visual">' . $icon . '</div>';
+
+ $icon = $this->render_icon( $attributes );
+ if ( '' !== $icon ) {
+ return '<div class="wc-block-customer-account__visual">' . $icon . '</div>';
+ }
+
+ return '';
}
/**