Upgrade React to 19 and WordPress packages to React 19-compatible versions

apps/cli/package.json

@@ -35,7 +35,7 @@
 		"@php-wasm/universal": "3.1.34",
 		"@php-wasm/util": "3.1.34",
 		"@vscode/sudo-prompt": "^9.3.2",
-		"@wordpress/i18n": "^6.18.0",
+		"@wordpress/i18n": "^6.20.0",
 		"@wp-playground/blueprints": "3.1.34",
 		"@wp-playground/cli": "3.1.34",
 		"@wp-playground/common": "3.1.34",

apps/studio/package.json

@@ -34,7 +34,7 @@
 		"@sentry/electron": "^7.10.0",
 		"@studio/common": "file:../../tools/common",
 		"@vscode/sudo-prompt": "^9.3.1",
-		"@wordpress/i18n": "^6.18.0",
+		"@wordpress/i18n": "^6.20.0",
 		"atomically": "^2.1.0",
 		"compressible": "2.0.18",
 		"compression": "^1.8.1",
@@ -70,36 +70,36 @@
 		"@electron-forge/plugin-auto-unpack-natives": "^7.11.2",
 		"@inquirer/prompts": "^8.3.0",
 		"@reduxjs/toolkit": "^2.11.2",
-		"@rive-app/react-canvas": "^4.12.0",
+		"@rive-app/react-canvas": "^4.18.0",
 		"@sentry/react": "^10.43.0",
 		"@sentry/vite-plugin": "^5.1.1",
 		"@types/archiver": "^7.0.0",
 		"@types/follow-redirects": "^1.14.4",
 		"@types/fs-extra": "^11.0.4",
 		"@types/http-proxy": "^1.17.17",
-		"@types/react": "^18.3.27",
-		"@types/react-dom": "^18.3.7",
+		"@types/react": "^19.2.15",
+		"@types/react-dom": "^19.2.3",
 		"@types/semver": "^7.7.1",
 		"@types/shell-quote": "^1.7.5",
 		"@types/winreg": "^1.2.36",
 		"@types/yauzl": "^2.10.3",
 		"@vitejs/plugin-react": "^5.1.4",
-		"@wordpress/components": "^33.0.0",
-		"@wordpress/compose": "^7.36.0",
-		"@wordpress/dataviews": "^14.2.0",
-		"@wordpress/element": "^6.39.0",
-		"@wordpress/icons": "13.1.0",
-		"@wordpress/react-i18n": "^4.45.0",
+		"@wordpress/components": "^34.0.0",
+		"@wordpress/compose": "^8.0.0",
+		"@wordpress/dataviews": "^15.0.0",
+		"@wordpress/element": "^7.0.0",
+		"@wordpress/icons": "13.2.0",
+		"@wordpress/react-i18n": "^4.47.0",
 		"@wp-playground/blueprints": "3.1.34",
 		"cli-table3": "^0.6.5",
-		"date-fns": "^3.3.1",
+		"date-fns": "^4.1.0",
 		"electron": "41.4.0",
 		"electron-devtools-installer": "^4.0.0",
 		"electron-vite": "^5.0.0",
 		"patch-package": "^8.0.1",
 		"postcss": "^8.5.10",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
+		"react": "^19.2.6",
+		"react-dom": "^19.2.6",
 		"react-markdown": "^10.1.0",
 		"react-redux": "^9.2.0",
 		"rehype-raw": "^7.0.0",

apps/studio/src/components/ai-input.tsx

@@ -57,13 +57,13 @@ const UnforwardedAIInput = (
 		isAssistantThinking,
 		showTelexLink = true,
 	}: AIInputProps,
-	inputRef: React.RefObject< HTMLTextAreaElement > | React.RefCallback< HTMLTextAreaElement > | null
+	inputRef: React.ForwardedRef< HTMLTextAreaElement >
 ) => {
 	const [ isTyping, setIsTyping ] = useState( false );
 	const [ thinkingDuration, setThinkingDuration ] = useState<
 		'short' | 'medium' | 'long' | 'veryLong'
 	>( 'short' );
-	const typingTimeout = useRef< NodeJS.Timeout >();
+	const typingTimeout = useRef< NodeJS.Timeout >( undefined );
 	const thinkingTimeout = useRef< NodeJS.Timeout[] >( [] );
 
 	const { RiveComponent } = useAiIcon( {

apps/studio/src/components/assistant-anchor.tsx

@@ -7,9 +7,9 @@ import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { addUrlParams, getHostnameFromUrl } from 'src/lib/url-utils';
 
-export default function Anchor( props: JSX.IntrinsicElements[ 'a' ] & ExtraProps ) {
+export default function Anchor( props: React.ComponentPropsWithRef< 'a' > & ExtraProps ) {
 	const { href } = props;
-	const { node, className, ...filteredProps } = props;
+	const { node, className, ref: _ref, ...filteredProps } = props;
 	const { selectedSite, startServer, loadingServer } = useSiteDetails();
 
 	return (

apps/studio/src/components/assistant-code-block.tsx

@@ -24,14 +24,23 @@ type ContextProps = {
 	instanceId: string;
 };
 
-export type CodeBlockProps = JSX.IntrinsicElements[ 'code' ] & ExtraProps;
+export type CodeBlockProps = React.ComponentPropsWithRef< 'code' > & ExtraProps;
 
 export default function createCodeComponent( contextProps: ContextProps ) {
 	return ( props: CodeBlockProps ) => <CodeBlock { ...contextProps } { ...props } />;
 }
 
 const LanguageBlock = ( props: ContextProps & CodeBlockProps ) => {
-	const { children, className, node, siteId, messageId, instanceId, ...htmlAttributes } = props;
+	const {
+		children,
+		className,
+		node,
+		siteId,
+		messageId,
+		instanceId,
+		ref: _ref,
+		...htmlAttributes
+	} = props;
 
 	const content = String( children ).trim();
 	const isValidWpCliCommand = useIsValidWpCliInline( content );
@@ -136,6 +145,7 @@ function FileBlock( props: ContextProps & CodeBlockProps & { isDirectory?: boole
 		messageId,
 		isDirectory,
 		instanceId,
+		ref: _ref,
 		...htmlAttributes
 	} = props;
 	const content = String( children ).trim();
@@ -188,7 +198,7 @@ function FileBlock( props: ContextProps & CodeBlockProps & { isDirectory?: boole
 function CodeBlock( props: ContextProps & CodeBlockProps ) {
 	const { children, className } = props;
 	const content = String( children ).trim();
-	const { node, siteId, messageId, instanceId, ...htmlAttributes } = props;
+	const { node, siteId, messageId, instanceId, ref: _ref, ...htmlAttributes } = props;
 
 	const isFilePath = ( content: string ) => {
 		const fileExtensions = [

apps/studio/src/components/buttons-section.tsx

@@ -1,10 +1,11 @@
+import { ReactElement } from 'react';
 import Button from 'src/components/button';
 import { cx } from 'src/lib/cx';
 
 export interface ButtonsSectionProps {
 	buttonsArray: Array< {
 		label: string;
-		icon: JSX.Element;
+		icon: ReactElement;
 		onClick: () => void;
 		className?: string;
 		disabled?: boolean;

apps/studio/src/components/content-tab-assistant.tsx

@@ -199,7 +199,7 @@ interface AuthenticatedViewProps {
 	isAssistantThinking: boolean;
 	siteId: string;
 	submitPrompt: ( messageToSend: string, isRetry?: boolean ) => void;
-	wrapperRef: React.RefObject< HTMLDivElement >;
+	wrapperRef: React.RefObject< HTMLDivElement | null >;
 }
 
 const AuthenticatedView = memo(

apps/studio/src/components/tooltip.tsx

@@ -1,10 +1,10 @@
 import { Icon, Popover } from '@wordpress/components';
-import { PropsWithChildren, useState, useEffect } from 'react';
+import { PropsWithChildren, ReactElement, useState, useEffect } from 'react';
 
 export interface TooltipProps
 	extends Pick< React.ComponentProps< typeof Popover >, 'placement' | 'className' > {
-	icon?: JSX.Element;
-	text?: string | JSX.Element;
+	icon?: ReactElement;
+	text?: string | ReactElement;
 	disabled?: boolean;
 }
 

apps/studio/src/hooks/use-site-details.tsx

@@ -381,7 +381,7 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 		setSites( sortSites( updatedSites ) );
 	}, [] );
 
-	const saveTimeoutRef = useRef< ReturnType< typeof setTimeout > >();
+	const saveTimeoutRef = useRef< ReturnType< typeof setTimeout > >( undefined );
 	const DEBOUNCE_SAVE_MS = 300;
 
 	const updateSitesSortOrder = useCallback( async ( sites: SiteDetails[] ) => {

apps/studio/src/modules/add-site/components/create-site-form.tsx

@@ -62,7 +62,7 @@ interface CreateSiteFormProps {
 	/** Called when form validity changes */
 	onValidityChange?: ( isValid: boolean ) => void;
 	/** Ref to form element for programmatic submission */
-	formRef?: RefObject< HTMLFormElement >;
+	formRef?: RefObject< HTMLFormElement | null >;
 }
 
 export const CreateSiteForm = ( {

apps/studio/src/modules/add-site/components/create-site.tsx

@@ -30,7 +30,7 @@ interface CreateSiteProps {
 	};
 	onSubmit: ( values: CreateSiteFormValues ) => void;
 	onValidityChange?: ( isValid: boolean ) => void;
-	formRef?: RefObject< HTMLFormElement >;
+	formRef?: RefObject< HTMLFormElement | null >;
 }
 
 export default function CreateSite( {

apps/studio/src/modules/sync/components/connect-button.tsx

@@ -1,12 +1,13 @@
 import { __ } from '@wordpress/i18n';
+import { ReactElement } from 'react';
 import Button, { ButtonVariant } from 'src/components/button';
 import offlineIcon from 'src/components/offline-icon';
 import { Tooltip } from 'src/components/tooltip';
 import { useOffline } from 'src/hooks/use-offline';
 
 interface ConnectButtonProps {
 	variant: ButtonVariant;
-	icon?: JSX.Element;
+	icon?: ReactElement;
 	connectSite?: () => void;
 	disabled?: boolean;
 	className?: string;

apps/studio/src/modules/sync/index.tsx

@@ -148,7 +148,7 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 		connectedSiteIds,
 		userId: user?.id,
 	} );
-	const syncSites = wpcomSitesData?.sites ?? [];
+	const _syncSites = wpcomSitesData?.sites ?? [];
 
 	const [ selectedRemoteSite, setSelectedRemoteSite ] = useState< SyncSite | null >( null );
 

apps/ui/package.json

@@ -17,30 +17,30 @@
 		"@tanstack/react-query": "^5.75.5",
 		"@tanstack/react-query-persist-client": "^5.96.2",
 		"@tanstack/react-router": "^1.120.14",
-		"@wordpress/api-fetch": "^7.45.0",
-		"@wordpress/components": "33.0.0",
-		"@wordpress/core-data": "^7.45.0",
-		"@wordpress/data": "^10.45.0",
-		"@wordpress/dataviews": "^14.2.0",
-		"@wordpress/html-entities": "^4.45.0",
-		"@wordpress/i18n": "^6.18.0",
-		"@wordpress/icons": "13.1.0",
-		"@wordpress/private-apis": "^1.10.0",
-		"@wordpress/react-i18n": "^4.45.0",
-		"@wordpress/rich-text": "7.45.0",
-		"@wordpress/theme": "0.12.0",
-		"@wordpress/ui": "0.12.0",
+		"@wordpress/api-fetch": "^7.47.0",
+		"@wordpress/components": "^34.0.0",
+		"@wordpress/core-data": "^7.47.0",
+		"@wordpress/data": "^10.47.0",
+		"@wordpress/dataviews": "^15.0.0",
+		"@wordpress/html-entities": "^4.47.0",
+		"@wordpress/i18n": "^6.20.0",
+		"@wordpress/icons": "13.2.0",
+		"@wordpress/private-apis": "^1.12.0",
+		"@wordpress/react-i18n": "^4.47.0",
+		"@wordpress/rich-text": "^7.47.0",
+		"@wordpress/theme": "^0.14.0",
+		"@wordpress/ui": "^0.14.0",
 		"@wp-playground/blueprints": "3.1.34",
 		"clsx": "^2.1.1",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
+		"react": "^19.2.6",
+		"react-dom": "^19.2.6",
 		"react-markdown": "^10.1.0",
 		"remark-gfm": "^4.0.1",
 		"tldraw": "3.13.1"
 	},
 	"devDependencies": {
-		"@types/react": "^18.3.27",
-		"@types/react-dom": "^18.3.7",
+		"@types/react": "^19.2.15",
+		"@types/react-dom": "^19.2.3",
 		"@vitejs/plugin-react": "^5.1.4",
 		"typescript": "~6.0.3",
 		"vite": "^7.3.3"

apps/ui/src/components/markdown/index.tsx

@@ -27,7 +27,7 @@ const baseComponents: Components = {
 	),
 	th: ( { children } ) => <th className={ styles.th }>{ children }</th>,
 	td: ( { children } ) => <td className={ styles.td }>{ children }</td>,
-	code: ( { className, children, ...props } ) => {
+	code: ( { className, children, ref: _ref, ...props } ) => {
 		// Inline code: no language class, no embedded newline.
 		const isInline = ! className && ! String( children ).includes( '\n' );
 		if ( isInline ) {

apps/ui/src/components/site-preview/index.tsx

@@ -226,7 +226,7 @@ function WebviewSurface( { url, reloadNonce, onAnnotationsDone }: WebviewSurface
 				ref={ ref }
 				src={ initialNav.url }
 				className={ styles.iframe }
-				allowpopups="true"
+				allowpopups={ true }
 				partition="persist:site-preview"
 			/>
 			{ ! ready ? (

apps/ui/src/ui-desks/components/button/index.tsx

@@ -97,7 +97,9 @@ export const Button = forwardRef< HTMLButtonElement, ButtonProps >( function But
 				>
 					{ content }
 				</Tooltip.Trigger>
-				<Tooltip.Popup side={ resolvedTooltipSide }>{ resolvedTooltipLabel }</Tooltip.Popup>
+				<Tooltip.Popup positioner={ <Tooltip.Positioner side={ resolvedTooltipSide } /> }>
+					{ resolvedTooltipLabel }
+				</Tooltip.Popup>
 			</Tooltip.Root>
 		</Tooltip.Provider>
 	);

apps/ui/src/ui-desks/widgets/site-preview/component/index.tsx

@@ -384,7 +384,7 @@ function WebviewSurface( {
 			className={ styles.frame }
 			src={ url }
 			title={ __( 'Site preview' ) }
-			allowpopups="true"
+			allowpopups={ true }
 			partition="persist:site-preview"
 		/>
 	);

apps/ui/src/ui-desks/widgets/site-shortcuts/component/index.tsx

@@ -37,7 +37,7 @@ import type {
 import type { ComponentProps, PointerEvent } from 'react';
 
 type SiteShortcutsWidgetComponentProps = DeskWidgetComponentProps< SiteShortcutsWidgetProps >;
-type ShortcutIcon = ComponentProps< typeof Icon >[ 'icon' ];
+type ShortcutIcon = NonNullable< ComponentProps< typeof Button >[ 'icon' ] >;
 
 interface SiteShortcutAction {
 	id: string;