Dashboard v2: Implement WP version settings #103560

fushar · 2025-05-20T15:25:19Z

Proposed Changes

This PR implements the WordPress version settings in dashboard v2.

Simple sites

Atomic sites

Staging sites

Testing Instructions

Go to /v2/sites.
Select a site.
Go to Settings.
Verify you can see and update the WordPress version as shown in the screenshot above. Test staging and non-staging sites.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-05-20T15:25:32Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-145350

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-145350&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-145350&env=a8c-for-agencies

matticbot · 2025-05-20T15:34:00Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug settings-wp-version on your sandbox.

matticbot · 2025-05-20T15:36:18Z

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

App Entrypoints (~8584 bytes removed 📉 [gzipped])

name                    parsed_size           gzip_size
entry-dashboard-dotcom      +3362 B  (+0.3%)     +356 B  (+0.1%)
entry-dashboard-a4a         +3362 B  (+0.3%)     +639 B  (+0.2%)
entry-subscriptions          +483 B  (+0.0%)      +96 B  (+0.0%)
entry-stepper                +483 B  (+0.0%)      +97 B  (+0.0%)
entry-reauth-required        +483 B  (+0.0%)      +96 B  (+0.0%)
entry-main                   +483 B  (+0.0%)      +88 B  (+0.0%)
entry-login                  +483 B  (+0.0%)      +96 B  (+0.0%)
entry-domains-landing        +483 B  (+0.1%)      +96 B  (+0.0%)
entry-browsehappy            +483 B  (+0.2%)      +96 B  (+0.2%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~148 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
site-settings       +455 B  (+0.0%)      +66 B  (+0.0%)
hosting             +455 B  (+0.0%)      +82 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.

client/dashboard/sites/settings-wp-version/utils.ts

client/dashboard/sites/settings-wp-version/index.tsx

ntsekouras · 2025-05-21T05:53:35Z

client/dashboard/data/index.ts

@@ -86,6 +86,26 @@ export const fetchPHPVersion = async ( id: string ): Promise< string | undefined
 	} );
 };

+export const fetchWordPressVersion = async ( siteIdOrSlug: string ): Promise< string > => {
+	return wpcom.req.get( {
+		path: `/sites/${ siteIdOrSlug }/hosting/wp-version`,


I couldn't find any docs to this endpoint. Can you share if you have a link that I missed?

Does it just return latest or beta? Do we need these labels (in design spec or if we deem them useful)?

Can we get this info and the WP version from a single place?

There's a whole project for this feature: pesfPa-qt-p2.

Yes, the endpoint just return either latest or beta. Also, this is how it looks in dashboard v1:

I'm really hesitant to change the endpoint (it would break v1 or whatnot) or the core design of this feature for now... porting features to v2 and changing the functionalities should be different activities.

porting features to v2 and changing the functionalities should be different activities.

Agreed, but we should track what we can improve and/or simplify. I might be missing context, but I think we should consider getting WP info from a single endpoint (probably remove this one and update the calls of v1).

Additionally, not for this PR, we might want to revisit the design for this and add some help text about the options.

client/dashboard/sites/settings-wp-version/index.tsx

client/dashboard/sites/settings-wp-version/utils.ts

client/dashboard/utils/wp-version.ts

fushar · 2025-05-21T13:39:22Z

I just realized that @matt-west already provided the full Figma design of this setting, which I don't really conform to 🤦 marking this PR as draft for now...

fushar · 2025-05-22T10:28:08Z

This PR is ready for a re-review.

fushar · 2025-05-22T10:29:06Z

client/dashboard/app/router.tsx

+	path: 'settings/wordpress',
+	loader: async ( { params: { siteSlug } } ) => {
+		const site = await queryClient.ensureQueryData( siteQuery( siteSlug ) );
+		if ( canUpdateWordPressVersion( site ) ) {


@youknowriad @ellatrix not sure if this is a good pattern (business logic in the router file)... but I'm not sure what the alternative is.

Maybe it's fine to call API on component level 🤔

For me this is a good approach, it ensure the loader works properly. What happens if we call the API without the check? Does the endpoint fail?

Yeah, it fails and then the dashboard shows this instead

This also ties back to my suggestion to use beforeLoad to protect this route. Because if the route was protected using beforeLoad there won't be any need to do this check here.

I've been thinking and maybe the right approach is going to be this

{ path: 'parent', beforeLoad: async ({ context }) => { const sharedData = await fetchSharedData() return { context: { ...context, sharedData, }, } }, children: [ { path: 'child', beforeLoad: ({ context }) => { const sharedData = context.sharedData // use sharedData here }, } ] }

Data that is required to for the "check" is loaded in "beforeLoad" of the parent route and added to the context

beforeLoad of the child uses that context to "throw" before even "load" is called.

I would love for this to be explored separately as a follow-up.

I don't fully understand, in this case, the parent siteSettingsRoute would need to fetch everything needed for the setting child routes even though we only open one of them (e.g. WordPress version)?

I don't fully understand, in this case, the parent siteSettingsRoute would need to fetch everything needed for the setting child routes even though we only open one of them (e.g. WordPress version)?

Not really, all we need is the "site" object and the "site" object is already loaded as part of the parent route's loader.

arthur791004

Looks good on my side.

matt-west

I don’t think we should disable the SummaryButton for simple sites. Let users click through to the setting page where they’ll see the notice about all sites using the latest version of WordPress.

fushar · 2025-05-22T12:00:29Z

I don’t think we should disable the SummaryButton for simple sites. Let users click through to the setting page where they’ll see the notice about all sites using the latest version of WordPress.

Thanks, makes sense, @matt-west I've updated the PR, please check.

matt-west · 2025-05-22T12:19:20Z

Looks good. 👍 Thanks @fushar

a8ci18n · 2025-05-22T15:21:24Z

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

Some locales (Hebrew) 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 @fushar for including a screenshot in the description! This is really helpful for our translators.

arthur791004 reviewed May 21, 2025

View reviewed changes

client/dashboard/sites/settings-wp-version/utils.ts Outdated Show resolved Hide resolved

fushar force-pushed the settings-wp-version branch 4 times, most recently from 114c38f to 30f4fc6 Compare May 21, 2025 04:41

fushar marked this pull request as ready for review May 21, 2025 04:54

fushar requested review from youknowriad and a team as code owners May 21, 2025 04:54

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels May 21, 2025

fushar requested a review from matt-west May 21, 2025 04:54

ntsekouras reviewed May 21, 2025

View reviewed changes

client/dashboard/sites/settings-wp-version/index.tsx Outdated Show resolved Hide resolved

ntsekouras reviewed May 21, 2025

View reviewed changes

client/dashboard/sites/settings-wp-version/index.tsx Outdated Show resolved Hide resolved

youknowriad reviewed May 21, 2025

View reviewed changes

client/dashboard/sites/settings-wp-version/utils.ts Outdated Show resolved Hide resolved

youknowriad reviewed May 21, 2025

View reviewed changes

client/dashboard/utils/wp-version.ts Outdated Show resolved Hide resolved

fushar marked this pull request as draft May 21, 2025 13:39

Dashboard v2: Implement WP version settings

6c37b7a

fushar force-pushed the settings-wp-version branch from 30f4fc6 to 6c37b7a Compare May 22, 2025 10:13

fushar marked this pull request as ready for review May 22, 2025 10:27

fushar commented May 22, 2025

View reviewed changes

arthur791004 approved these changes May 22, 2025

View reviewed changes

matt-west reviewed May 22, 2025

View reviewed changes

Show notice on Simple sites

05fcba9

fushar merged commit 1753659 into trunk May 22, 2025
12 checks passed

fushar deleted the settings-wp-version branch May 22, 2025 13:51

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 22, 2025

fushar mentioned this pull request May 26, 2025

Hosting Dashboard: Implement Handling requests for nonexistent assets setting screen #103694

Merged

8 tasks

fushar mentioned this pull request Jun 18, 2025

Hosting dashboard: Truncate super long site names and URLs in sites list #104288

Merged

9 tasks

Dashboard v2: Implement WP version settings #103560

Dashboard v2: Implement WP version settings #103560

Uh oh!

Conversation

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

Uh oh!

Proposed Changes

Simple sites

Atomic sites

Staging sites

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented May 20, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fushar commented May 21, 2025

Uh oh!

fushar commented May 22, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arthur791004 left a comment

Choose a reason for hiding this comment

Uh oh!

matt-west left a comment

Choose a reason for hiding this comment

Uh oh!

fushar commented May 22, 2025

Uh oh!

matt-west commented May 22, 2025

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

fushar commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited by matticbot

Loading

matticbot commented May 20, 2025 •

edited

Loading

matticbot commented May 20, 2025 •

edited

Loading

arthur791004 May 22, 2025 •

edited

Loading

a8ci18n commented May 22, 2025 •

edited

Loading