Skip to content

Studio: Add a warning when pushing a site with an outdated WordPress version #2136

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.

Sign up for GitHub

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
katinthehatsite merged 14 commits into from
Dec 2, 2025
+56 −8
Merged

Studio: Add a warning when pushing a site with an outdated WordPress version #2136

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
23c4476
Add warning for when the site exceeds limits
Nov 26, 2025
31ec1c4
Fix tests
Nov 26, 2025
c0d8826
Linter fix
Nov 26, 2025
dec4152
Simplify solution
Nov 26, 2025
7557e22
Test cleanup
Nov 26, 2025
3c1002a
Reset against trunk
Nov 26, 2025
2f59d97
Make the code more dry
Nov 26, 2025
bc29a14
Merge branch 'trunk' of github.com:Automattic/studio into fix/add-not…
Nov 27, 2025
0378280
Fix unit tests
Nov 27, 2025
3b33266
Merge branch 'trunk' of github.com:Automattic/studio into fix/add-not…
Nov 28, 2025
e423be9
Ensure database field is not cut off
Nov 28, 2025
aa1cac9
Simplify code
Nov 28, 2025
511a111
Added blurred background
Nov 28, 2025
7a02489
Merge branch 'trunk' of github.com:Automattic/studio into fix/add-not…
Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/modules/preview-site/components/create-preview-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ export function CreatePreviewButton( { onClick, selectedSite, user }: CreatePrev
const isCurrentSiteArchiving = !! activeOperationsForCurrentSite;
const isOtherSiteArchiving = isAnySiteArchiving && ! isCurrentSiteArchiving;

const latestWpVersion = wpVersions.find( ( version ) => version.value === 'latest' )?.value;
const latestWpVersion = wpVersions.find(
( version ) => version.value !== 'latest' && ! version.isBeta && ! version.isDevelopment
Copy link
Contributor Author

@katinthehatsite katinthehatsite Nov 26, 2025

Choose a reason for hiding this comment

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

The tooltip on the Create preview button was broken for the semver comparison of versions so I am fixing it at the same time. Alternative fix, could be to add another prop to interface WordPressVersion with the actual version but it seemed like a bit of extra for this one edge case with latest. (that's what I initially tried)

The reason why this is broken: We need value: 'latest' for the dropdown selector, but we need the actual version number like '6.7.1' for semver comparisons. Before this fix, the version mismatch detection was completely broken because it was trying to compare '6.2' with the string 'latest'.

)?.value;
const shouldShowMismatchTooltip = hasVersionMismatch( {
wpVersion,
latestWpVersion,
Expand Down
41 changes: 39 additions & 2 deletions src/modules/sync/components/sync-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,20 @@ import Modal from 'src/components/modal';
import { Tooltip } from 'src/components/tooltip';
import { TreeView, TreeNode, updateNodeById } from 'src/components/tree-view';
import { SYNC_PUSH_SIZE_LIMIT_GB } from 'src/constants';
import { useGetWpVersion } from 'src/hooks/use-get-wp-version';
import { cx } from 'src/lib/cx';
import { getIpcApi } from 'src/lib/get-ipc-api';
import { getLocalizedLink } from 'src/lib/get-localized-link';
import { hasVersionMismatch } from 'src/modules/preview-site/lib/version-comparison';
import { SiteNameBox } from 'src/modules/sync/components/site-name-box';
import { useSelectedItemsPushSize } from 'src/modules/sync/hooks/use-selected-items-push-size';
import { useSyncDialogTexts } from 'src/modules/sync/hooks/use-sync-dialog-texts';
import { useTopLevelSyncTree } from 'src/modules/sync/hooks/use-top-level-sync-tree';
import { getSiteEnvironment } from 'src/modules/sync/lib/environment-utils';
import { useI18nLocale } from 'src/stores';
import { useI18nLocale, useRootSelector } from 'src/stores';
import { selectMinimumWordPressVersion } from 'src/stores/provider-constants-slice';
import { useLatestRewindId, useRemoteFileTree, useLocalFileTree } from 'src/stores/sync';
import { useGetWordPressVersions } from 'src/stores/wordpress-versions-api';
import { TreeViewLoadingSkeleton } from './tree-view-loading-skeleton';
import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';

Expand Down Expand Up @@ -149,6 +153,23 @@ export function SyncDialog( {
const { fetchChildren, rewindId, isLoadingRewindId, isErrorRewindId, isLoadingLocalFileTree } =
useDynamicTreeState( type, localSite.id, remoteSite.id, setTreeState );

const [ wpVersion ] = useGetWpVersion( localSite );
const minimumWordPressVersion = useRootSelector( selectMinimumWordPressVersion );
const { data: wpVersions = [] } = useGetWordPressVersions( {
minimumVersion: minimumWordPressVersion,
} );
// Find the first stable version (not 'latest', not beta, not development) to use for comparison
const latestWpVersion = wpVersions.find(
( version ) => version.value !== 'latest' && ! version.isBeta && ! version.isDevelopment
)?.value;
const shouldShowVersionMismatch =
type === 'push' &&
hasVersionMismatch( {
wpVersion,
latestWpVersion,
phpVersion: localSite.phpVersion,
} );

const localSiteName = <SiteNameBox siteName={ localSite.name } envType="studio" />;
const remoteSiteName = <SiteNameBox siteName={ remoteSite.name } envType={ siteEnv } />;

Expand Down Expand Up @@ -218,13 +239,20 @@ export function SyncDialog( {
onRequestClose();
};

// Calculate dynamic padding based on number of notices
const noticeCount = [ isPushSelectionOverLimit, shouldShowVersionMismatch ].filter(
Boolean
).length;
const footerPadding =
noticeCount === 0 ? 'pb-[70px]' : noticeCount === 1 ? 'pb-[140px]' : 'pb-[210px]';

return (
<Modal
className="w-3/5 min-w-[550px] max-h-[84vh] [&>div]:!p-0"
onRequestClose={ onRequestClose }
title={ syncTexts.title }
>
<div className={ isPushSelectionOverLimit ? 'pb-[140px]' : 'pb-[70px]' }>
<div className={ footerPadding }>
Copy link
Member

@sejas sejas Nov 27, 2025

Choose a reason for hiding this comment

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

Not a strong opinion, but we could declare the footer padding inside the class. Something like:

			<div
				className={ cx(
					noticeCount === 0 && 'pb-[70px]',
					noticeCount === 1 && 'pb-[140px]',
					noticeCount >= 2 && 'pb-[210px]'
				) }
			>

<div className="px-8 pb-6 pt-1">{ syncTexts.description }</div>
<div className="px-8">
<span className="sr-only">
Expand Down Expand Up @@ -334,6 +362,15 @@ export function SyncDialog( {
</p>
</Notice>
) }
{ shouldShowVersionMismatch && (
<Notice status="warning" isDismissible={ false } className="mb-4">
<p data-testid="push-version-mismatch-notice">
{ __(
'Your Studio site is using a different WordPress or PHP version than your WordPress.com site. The remote site will keep on using the newest supported versions.'
) }
</p>
</Notice>
) }
<div className="flex justify-between items-center">
<div>
{ createInterpolateElement( syncTexts.envSync, {
Expand Down