Feature: React 19 Upgrade

package.json

@@ -32,6 +32,7 @@
     "dev:primitives": "turbo run dev --parallel  --filter=./test-projects/wp-nextjs-universal-blocks --filter=./packages/core --filter=./packages/next --filter=./packages/block-primitives --filter=./test-projects/component-library --filter=./wp/10up-theme",
     "dev:component-library": "turbo run dev --parallel --filter=./projects/component-library --filter=./wp/10up-theme",
     "prepare": "husky install",
+    "postinstall": "node scripts/fix-nested-types.js",
     "typedoc": "typedoc",
     "typedoc:watch": "typedoc --watch",
     "version": "changeset version && ./scripts/version-plugin.sh",
@@ -61,8 +62,18 @@
     "turbo": "^2.0.11"
   },
   "overrides": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "typescript": "5.9.3",
+    "next": "15.5.20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "webpack": "5.105.2",
+    "webpack-dev-server": "5.2.1",
+    "@10up/block-components": {
+      "react": "19.2.7",
+      "react-dom": "19.2.7"
+    }
   },
   "nextBundleAnalysis": {
     "buildOutputDirectory": "./projects/wp-nextjs/.next",

packages/block-primitives/package.json

@@ -71,27 +71,29 @@
     "@types/wordpress__block-editor": "^11.5.12"
   },
   "devDependencies": {
-    "@jest/globals": "29.0.3",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/react": "^14.2.1",
+    "@jest/globals": "^29.7.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
     "dts-bundle-generator": "^9.5.1",
-    "@10up/block-components": "^1.19.3",
+    "@10up/block-components": "^1.22.3",
     "@types/jest": "^29.0.3",
     "jest": "^29.0.3",
     "ts-jest": "^29.0.1",
     "typescript": "^5.4.2",
     "whatwg-fetch": "^3.6.2",
     "@wordpress/blob": "^3.53.0",
-    "@wordpress/block-editor": "^12.21.0"
+    "@wordpress/block-editor": "^16.0.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
   },
   "peerDependencies": {
     "react": ">= 17.0.2",
     "next": ">= 14.0.0",
-    "@wordpress/block-editor": "^12.21.0",
-    "@wordpress/data": "^9.23.0",
-    "@wordpress/components": "^27.1.0",
-    "@10up/block-components": "^1.19.3",
+    "@wordpress/block-editor": "^16.0.0",
+    "@wordpress/data": "^10.0.0",
+    "@wordpress/components": "^37.0.0",
+    "@10up/block-components": "^1.22.3",
     "@wordpress/blob": "^3.53.0"
   },
   "peerDependenciesMeta": {

packages/block-primitives/src/block-editor/__tests__/rich-text.tsx

@@ -1,7 +1,25 @@
+import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { jest } from '@jest/globals';
 
+// @wordpress/element (pulled in transitively via @wordpress/block-editor, imported
+// below via a dynamic import so this registration runs first) still statically
+// imports several legacy root APIs from 'react-dom' that React 19 removed entirely:
+// findDOMNode, render, hydrate, and unmountComponentAtNode. Nothing this file
+// exercises actually calls them at runtime, but the static imports themselves fail
+// to resolve under Node's strict ESM loader without them. This patches them back in
+// for the test environment only, using unstable_mockModule (not jest.mock) since a
+// dynamic `await import()` is required for a runtime mock to actually intercept an
+// ES module import.
+jest.unstable_mockModule('react-dom', async () => ({
+	...(await jest.requireActual<typeof import('react-dom')>('react-dom')),
+	findDOMNode: () => null,
+	render: () => null,
+	hydrate: () => null,
+	unmountComponentAtNode: () => false,
+}));
+
 let attributes = {};
 const setAttributes = jest.fn((newAttributes: Record<string, any>) => {
 	attributes = { ...attributes, ...newAttributes };

packages/block-primitives/src/block-editor/hooks/useBlockPrimitiveProps.ts

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-// @ts-expect-error
 import { useBlockEditContext } from '@wordpress/block-editor';
 import { select, dispatch } from '@wordpress/data';
 

packages/block-primitives/src/block-editor/image.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 // @ts-expect-error
 import { BlockControls, MediaReplaceFlow } from '@wordpress/block-editor';
 import { Placeholder, Spinner, ToolbarGroup } from '@wordpress/components';

packages/block-primitives/src/block-editor/inner-blocks.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { InnerBlocks as GutenbergInnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { InnerBlocksProps } from '#shared/types.js';
 

packages/block-primitives/src/block-editor/link.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { Link as LinkBlockComponent } from '@10up/block-components';
 import { useBlockProps } from '@wordpress/block-editor';
 import { LinkPrimitiveValue, LinkProps } from '#shared/types.js';

packages/block-primitives/src/block-editor/rich-text.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { RichText as GutenbergRichText } from '@wordpress/block-editor';
 import { RichTextPrimitive } from '#shared/types.js';
 import { useBlockPrimitiveProps } from './hooks/useBlockPrimitiveProps.js';

packages/block-primitives/src/primitives/__tests__/rich-text.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { render } from '@testing-library/react';
 import { RichText } from '../rich-text.js';
 

packages/block-primitives/src/primitives/image.tsx

@@ -1,6 +1,6 @@
 // @ts-expect-error
 import NextImage from 'next/image';
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { ImagePrimitive } from '../shared/types.js';
 import { RawImage } from '../shared/raw-image.js';
 

packages/block-primitives/src/primitives/inner-blocks.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { InnerBlocksProps } from '#shared/types.js';
 
 // prop spread
-export const InnerBlocks: React.FC<InnerBlocksProps> = ({ children, className }) => {
+export const InnerBlocks: React.FC<InnerBlocksProps> = ({ children = null, className }) => {
 	return <div className={className}>{children}</div>;
 };

packages/block-primitives/src/primitives/link.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 // @ts-expect-error
 import NextLink from 'next/link';
 import { removeSourceUrl } from '@headstartwp/core';

packages/block-primitives/src/primitives/rich-text.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { RichTextPrimitive } from '#shared/types.ts';
 
 export const RichText = <T extends keyof HTMLElementTagNameMap>({

packages/block-primitives/src/shared/raw-image.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ImagePrimitive } from './types.js';
 
 export const RawImage = ({ value, size }: ImagePrimitive) => {

packages/block-primitives/src/shared/types.ts

@@ -1,6 +1,12 @@
+import type { ComponentPropsWithoutRef } from 'react';
 import { HeadlessConfig } from '@headstartwp/core';
 import type { RichText, InnerBlocks } from '@wordpress/block-editor';
-import type { DropdownProps } from '@wordpress/components/build-types/dropdown/types.d.ts';
+import type { Popover } from '@wordpress/components';
+
+// @wordpress/components no longer exposes its internal build-types/dropdown/types.d.ts
+// via package.json "exports", so this mirrors DropdownProps['popoverProps'] from the
+// component's own public props instead of importing the private module directly.
+type DropdownPopoverProps = Omit<ComponentPropsWithoutRef<typeof Popover>, 'children'>;
 
 export type Attributes = Record<string, any>;
 export type SetAttributes = (attributes: Attributes) => void;
@@ -24,7 +30,7 @@ export type MediaReplaceFlow = {
 	multiple?: boolean;
 	addToGallery?: boolean;
 	handleUpload?: boolean;
-	popoverProps?: DropdownProps['popoverProps'];
+	popoverProps?: DropdownPopoverProps;
 };
 
 /**

packages/block-primitives/tsconfig.json

@@ -6,7 +6,20 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "target": "ES2017",
-    "declaration": true
+    "declaration": true,
+    // This package's compiled output gets bundled directly into WordPress
+    // block-editor builds (via wp/10up-theme's webpack config), where React
+    // itself is externalized to WordPress core's globally-provided copy via
+    // @wordpress/dependency-extraction-webpack-plugin. That plugin only knows
+    // to externalize the bare `react`/`react-dom` specifiers, not
+    // `react/jsx-runtime` — so the root tsconfig's "react-jsx" (automatic)
+    // transform causes this package's dist output to bundle its own local
+    // copy of React's jsx-runtime, which creates elements WordPress's
+    // globally-provided React reconciler doesn't recognize as valid (a real,
+    // silent dual-React-instance conflict, not a false alarm). The classic
+    // transform compiles JSX to plain `React.createElement` calls instead,
+    // which correctly resolve through the externalized global React consistently.
+    "jsx": "react"
   },
   "exclude": ["node_modules", "dist", "src/**/__tests__/*.ts"],
   "include": ["src"]

packages/core/package.json

@@ -63,7 +63,7 @@
 	},
 	"devDependencies": {
 		"@testing-library/dom": "^10.3.1",
-		"@testing-library/react": "^16.0.0",
+		"@testing-library/react": "^16.3.0",
 		"@types/jest": "^29.0.3",
 		"@types/node-fetch": "^2.5.3",
 		"expect-type": "^0.15.0",
@@ -73,8 +73,8 @@
 		"typescript": "^5.5.3",
 		"isomorphic-fetch": "^3.0.0",
 		"tsc-esm-fix": "^2.20.27",
-		"@types/react": "^18",
-		"@types/react-dom": "^18"
+		"@types/react": "^19",
+		"@types/react-dom": "^19"
 	},
 	"dependencies": {
 		"@justinribeiro/lite-youtube": "^1.3.1",

packages/core/src/react/blocks/YoutubeLiteBlock.tsx

@@ -19,7 +19,7 @@ interface LiteYoutube {
 	params: string;
 }
 
-declare global {
+declare module 'react' {
 	namespace JSX {
 		interface IntrinsicElements {
 			['lite-youtube']: Partial<LiteYoutube>;

packages/core/src/react/components/Menu.tsx

@@ -2,7 +2,7 @@
 
 /* eslint-disable react/no-unused-prop-types */
 /* eslint-disable @typescript-eslint/no-use-before-define, react/require-default-props */
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import type { MenuItemEntity } from '../../data';
 import { removeSourceUrl } from '../../utils/removeSourceUrl';
 
@@ -14,19 +14,19 @@ export type ItemWrapperProps = PropsWithChildren<{
 	depth: number;
 	item: MenuItemEntity;
 }>;
-export type ItemWrapper = (props: ItemWrapperProps) => JSX.Element;
+export type ItemWrapper = (props: ItemWrapperProps) => ReactElement;
 
 export type MenuWrapperProps = PropsWithChildren<{
 	className: string;
 	depth: number;
 }>;
-export type MenuWrapper = (props: MenuWrapperProps) => JSX.Element;
+export type MenuWrapper = (props: MenuWrapperProps) => ReactElement;
 
 export type LinkWrapperProps = PropsWithChildren<{
 	href: string;
 	depth: number;
 }>;
-export type LinkWrapper = (props: LinkWrapperProps) => JSX.Element;
+export type LinkWrapper = (props: LinkWrapperProps) => ReactElement;
 
 export type MenuItemsProp = {
 	items: MenuItemEntity[];

packages/core/src/react/utils/__tests__/parseSeo.ts

@@ -7,28 +7,57 @@ describe('parseSeo', () => {
 		);
 		expect(result).toMatchInlineSnapshot(`
       [
-        <title>
-          Title
-        </title>,
-        <meta
-          content="Content"
-          name="Name"
-          property="Property"
-        />,
-        <link
-          href=""
-          hrefLang="Hreflang"
-          rel="Rel"
-        />,
-        <script
-          className="Class"
-          dangerouslySetInnerHTML={
-            {
+        {
+          "$$typeof": Symbol(react.transitional.element),
+          "_owner": null,
+          "_store": {},
+          "key": "0",
+          "props": {
+            "children": "Title",
+          },
+          "type": "title",
+        },
+        {
+          "$$typeof": Symbol(react.transitional.element),
+          "_owner": null,
+          "_store": {},
+          "key": "1",
+          "props": {
+            "children": null,
+            "content": "Content",
+            "name": "Name",
+            "property": "Property",
+          },
+          "type": "meta",
+        },
+        {
+          "$$typeof": Symbol(react.transitional.element),
+          "_owner": null,
+          "_store": {},
+          "key": "2",
+          "props": {
+            "children": null,
+            "href": "",
+            "hrefLang": "Hreflang",
+            "rel": "Rel",
+          },
+          "type": "link",
+        },
+        {
+          "$$typeof": Symbol(react.transitional.element),
+          "_owner": null,
+          "_store": {},
+          "key": "3",
+          "props": {
+            "children": null,
+            "className": "Class",
+            "dangerouslySetInnerHTML": {
               "__html": "{}",
-            }
-          }
-          type="Type"
-        />,
+            },
+            "type": "Type",
+          },
+          "type": "script",
+        },
       ]
     `);
 	});

packages/epio-search/package.json

@@ -47,10 +47,10 @@
 		"wp-types": "^4.67.0"
 	},
 	"devDependencies": {
-		"@types/react": "^18",
+		"@types/react": "^19",
 		"copyfiles": "^2.4.1",
 		"typescript-plugin-css-modules": "^5.1.0",
-		"@testing-library/react": "^16.0.0",
+		"@testing-library/react": "^16.3.0",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/jest-dom": "^6.6.3"
 	},

packages/epio-search/src/components/autosuggest-field/autosuggest-field-item.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useCallback } from 'react';
+import { useEffect, useRef, useCallback, ReactElement } from 'react';
 import { EPPost } from '../../types';
 import styles from './styles.module.css';
 import { useElasticPress } from '../provider/ep-provider';
@@ -17,7 +17,7 @@ export default function AutosuggestFieldItem({
 	focus,
 	index,
 	setFocus,
-}: AutosuggestFieldItemProps): JSX.Element {
+}: AutosuggestFieldItemProps): ReactElement {
 	const ref = useRef<HTMLLIElement>(null);
 	const { onNavigation } = useElasticPress();
 

packages/epio-search/src/components/autosuggest-field/index.tsx

@@ -4,7 +4,7 @@
  * ElasticPress autosuggest field
  */
 
-import { useEffect } from 'react';
+import { useEffect, ReactElement } from 'react';
 import { useElasticPress } from '../provider/ep-provider';
 import { useRoveFocus } from '../../hooks/use-rove-focus';
 import SearchField from '../search-field';
@@ -25,7 +25,7 @@ export default function AutosuggestField({
 	onItemRender = (item) => item,
 	collapsed = false,
 	...rest
-}: AutosuggestFieldProps): JSX.Element {
+}: AutosuggestFieldProps): ReactElement {
 	const { results } = useElasticPress();
 	const size = results.items ? results.items.length : 0;
 	const { focus, setFocus, isCollapsed, setIsCollapsed } = useRoveFocus(size, collapsed);