Skip to content

Account: Clean-up profile settings #103464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 16, 2025
Merged

Account: Clean-up profile settings #103464

merged 1 commit into from
May 16, 2025

Conversation

matt-west
Copy link
Contributor

@matt-west matt-west commented May 15, 2025

Related to DOTCOM-12845

Proposed Changes

  • Removed unnecessary field notes on display name and web address. The field labels and page description already make it clear that this information will be public.
  • Moved public profile URL to the bottom of the page, switched to an ExternalLink, and dropped the unnecessary label. (This is not a form field that's editable.)
  • Improved copy for Gravatar explanation, eliminating the widowed link in the current implementation.

We have some additional ideas for improving the overall layout of this page, but those will be tackled as part of the hosting dashboard redesign.

I also fixed some translation issues for English (UK) where we have inconsistent capitalization. These are not included as part of this PR.

Before After
Screenshot 2025-05-15 at 14 13 58 Screenshot 2025-05-15 at 14 13 56

Why are these changes being made?

Related to Code Blue reports in DOTCOM-12845.

Testing Instructions

  • Checkout this branch.
  • Run the app using yarn start
  • Visit /me and verify that all the changes are visible.

- Removed unnecessary field notes on display name and web address.
- Moved public profile URL to the bottom of the page.
- Improved copy for Gravatar explanation.

Related to DOTCOM-12845
@matticbot
Copy link
Contributor

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~60 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
site-blocks                 -406 B  (-0.1%)      -60 B  (-0.0%)
security                    -406 B  (-0.1%)      -60 B  (-0.0%)
purchases                   -406 B  (-0.0%)      -60 B  (-0.0%)
privacy                     -406 B  (-0.1%)      -60 B  (-0.0%)
notification-settings       -406 B  (-0.1%)      -60 B  (-0.0%)
me                          -406 B  (-0.1%)      -60 B  (-0.0%)
help                        -406 B  (-0.1%)      -60 B  (-0.0%)
developer                   -406 B  (-0.1%)      -60 B  (-0.0%)
account-close               -406 B  (-0.1%)      -60 B  (-0.0%)
account                     -406 B  (-0.1%)      -60 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

@matt-west matt-west self-assigned this May 15, 2025
@matt-west matt-west marked this pull request as ready for review May 15, 2025 13:21
@matt-west matt-west requested a review from fushar May 15, 2025 13:21
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 15, 2025
@matt-west matt-west requested a review from jasmussen May 15, 2025 13:21
@matt-west matt-west mentioned this pull request May 15, 2025
3 tasks
@jasmussen
Copy link
Member

Nice, looks good, close ot landing. Could use a glance from @michaelpick. One thing stood out:

Screenshot 2025-05-15 at 15 27 39

I've recently understood from the ExternalLink component that the ↗ should not be underlined. Not a blocker for this PR since this is an existing issue, but it's especially the gap between the link and the ↗ arrow that stands out to me.

@matt-west
Copy link
Contributor Author

the ExternalLink component that the ↗ should not be underlined.

This is bugging me too. I'll fix it in a separate PR.

@@ -24,6 +24,10 @@
}
}

.profile__settings .profile__public-url {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'd be nice if we could avoid local CSS like this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1. Some utility classes would be helpful for cases like this. AFAIK we don’t currently have any though.

@crisbusquets
Copy link
Contributor

I've reviewed the Calypso Live link, and it works for me, @matt-west. Thanks for working on it 💪

@fushar
Copy link
Contributor

fushar commented May 15, 2025

cc: @Automattic/loop for the changes in the Public profile field.

<p className="profile__public-url">
{ this.props.translate( 'View your public profile at {{a}}{{url/}}{{/a}}.', {
components: {
a: <ExternalLink href={ relativeProfileUrl } />,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this expected to change this to an external link? Now it requires a full page reload even though technically the page is still within Calypso.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep. The profile page should open in a new tab so that state of the profile settings page is maintained.

We have a prompt if the user leaves the page with unsaved settings, but we’re then forcing them to choose whether to save changes before they can see the profile. I should think most people click this link out of curiosity and don’t deliberately come here to access their profile.

@matt-west matt-west merged commit 20bb487 into trunk May 16, 2025
18 checks passed
@matt-west matt-west deleted the update/profile-page-copy branch May 16, 2025 08:54
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 16, 2025
@a8ci18n
Copy link

a8ci18n commented May 16, 2025

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17480870

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @matt-west for including a screenshot in the description! This is really helpful for our translators.

@a8ci18n
Copy link

a8ci18n commented May 18, 2025

Translation for this Pull Request has now been finished.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants