React 18

.yarnrc.yml

@@ -1,121 +1,58 @@
+### Basic Yarn settings. ###
 compressionLevel: 0
-
+nodeLinker: node-modules
 enableGlobalCache: true
+preferAggregateCacheInfo: true
+yarnPath: .yarn/releases/yarn-3.2.3.cjs
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
 
+### Log filters to discard irrelevant warnings. ###
 logFilters:
+# The fsevents warning is useless, so discard it:
   - level: discard
     pattern: "fsevents@*/* The * architecture is incompatible with this module, link skipped."
+
+# Newspack blocks has many transitive dependencies without React 18 explicitly supported, so we need to ignore those.
   - level: discard
-    pattern: "@automattic/wpcom-editing-toolkit@workspace:apps/editing-toolkit provides react (pc86c0) with version 17.0.2, which doesn't satisfy what @automattic/newspack-blocks and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/wpcom-editing-toolkit@workspace:apps/editing-toolkit provides react-dom (p9837d) with version 17.0.2, which doesn't satisfy what @automattic/newspack-blocks and some of its descendants request"
-  - level: discard
-    pattern: "calypso@workspace:client provides react (p44ec6) with version 17.0.2, which doesn't satisfy what react-live and some of its descendants request"
-  - level: discard
-    pattern: "calypso@workspace:client provides react-dom (p2ead7) with version 17.0.2, which doesn't satisfy what react-live and some of its descendants request"
-  - level: discard
-    pattern: "wp-calypso@workspace:. provides react (*) with version 17.0.2, which doesn't satisfy what @types/wordpress__block-editor and some of its descendants request"
-  - level: discard
-    pattern: "wp-calypso@workspace:. provides react-dom (*) with version 17.0.2, which doesn't satisfy what @types/wordpress__block-editor and some of its descendants request"
-  - level: discard
-    pattern: "calypso@workspace:client provides react (*) with version 17.0.2, which doesn't satisfy what @automattic/design-preview and some of its descendants request"
-  - level: discard
-    pattern: "calypso@workspace:client provides react-dom (*) with version 17.0.2, which doesn't satisfy what @automattic/design-preview and some of its descendants request"
-  - level: discard
-    pattern: "calypso@workspace:client provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "calypso@workspace:client provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/o2-blocks@workspace:apps/o2-blocks provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/o2-blocks@workspace:apps/o2-blocks provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/wpcom-block-editor@workspace:apps/wpcom-block-editor provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/wpcom-block-editor@workspace:apps/wpcom-block-editor provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/wpcom-editing-toolkit@workspace:apps/editing-toolkit provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/wpcom-editing-toolkit@workspace:apps/editing-toolkit provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "wp-calypso@workspace:. provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "calypso@workspace:client provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/o2-blocks@workspace:apps/o2-blocks provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/search@workspace:packages/search *provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "happy-blocks@workspace:apps/happy-blocks provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "happy-blocks@workspace:apps/happy-blocks provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "happy-blocks@workspace:apps/happy-blocks provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "happy-blocks@workspace:apps/happy-blocks provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/wpcom-block-editor@workspace:apps/wpcom-block-editor provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/wpcom-editing-toolkit@workspace:apps/editing-toolkit provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/tour-kit@workspace:packages/tour-kit *provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "wp-calypso@workspace:. provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "calypso@workspace:client provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/domain-picker@workspace:packages/domain-picker *provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/o2-blocks@workspace:apps/o2-blocks provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/onboarding@workspace:packages/onboarding *provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/page-pattern-modal@workspace:packages/page-pattern-modal *provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/page-pattern-modal@workspace:packages/page-pattern-modal *provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/page-pattern-modal@workspace:packages/page-pattern-modal *provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/search@workspace:packages/search *provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/social-previews@workspace:packages/social-previews *provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/wpcom-block-editor@workspace:apps/wpcom-block-editor provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/wpcom-editing-toolkit@workspace:apps/editing-toolkit provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/tour-kit@workspace:packages/tour-kit *provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "calypso@workspace:client provides react (pf0c51) with version 17.0.2, which doesn't satisfy what @automattic/components and some of its descendants request"
-  - level: discard
-    pattern: "wp-calypso@workspace:. provides react (p08767) with version 17.0.2, which doesn't satisfy what @automattic/components and some of its descendants request"
-  - level: discard
-    pattern: "calypso@workspace:client provides react-dom (p69c5d) with version 17.0.2, which doesn't satisfy what @automattic/components and some of its descendants request"
-  - level: discard
-    pattern: "wp-calypso@workspace:. provides react-dom (pff688) with version 17.0.2, which doesn't satisfy what @automattic/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/wpcom-editing-toolkit@workspace:apps/editing-toolkit provides eslint (pcb2ba) with version 8.6.0, which doesn't satisfy what @wordpress/eslint-plugin and some of its descendants request"
-  - level: discard
-    pattern: "wp-calypso@workspace:. provides eslint (p3918c) with version 8.6.0, which doesn't satisfy what @wordpress/eslint-plugin and some of its descendants request"
-  - level: discard
-    pattern: "@react-spring/core@npm:9.3.0 * lists build scripts, but its build has been explicitly disabled through configuration."
-  - level: discard
-    pattern: "@automattic/global-styles@workspace:packages/global-styles provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/global-styles@workspace:packages/global-styles provides react (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/global-styles@workspace:packages/global-styles provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/block-editor and some of its descendants request"
-  - level: discard
-    pattern: "@automattic/global-styles@workspace:packages/global-styles provides react-dom (*) with version 17.0.2, which doesn't satisfy what @wordpress/components and some of its descendants request"
-  - level: discard
-    pattern: "@wordpress/data-controls@npm:2.27.0 doesn't provide react (p90380), requested by @wordpress/data"
+    pattern: "@automattic/wpcom-editing-toolkit@workspace:apps/editing-toolkit provides +(react|react-dom) (*) with version 18.2.0, which doesn't satisfy what @automattic/newspack-blocks and some of its descendants request"
+
+# WordPress packages often have transitive dependencies with incorrect react-related peer dependencies.
+# This matcher discards those log messages, while allowing non-react or non-wordpress related violations
+# to be handled separately. (For example, npm packages can be handled via packageExtensions.)
+#
+# WordPress will need to update/change the following packages to versions which include React 18 support,
+# and then we'll need to update to those WordPress package versions before we can remove this.
+# - react-autosize-textarea@npm:7.1.0
+# - reakit-system@npm:0.15.2
+# - reakit-utils@npm:0.15.2
+# - reakit-warning@npm:0.6.2
+# - reakit@npm:1.3.11
+#
+# The matcher works like so:
+# 1. Match any workspace package, such as @automattic/global-styles@workspace, calypso@workspace, happy-blocks@workspace
+# 2. Match any path within the workspace, such as @workspace:packages/page-pattern-modal [cd6b3], @workspace::apps/editing-toolkit, @workspace:client, or @workspace:.
+# 3. Match a react or react-dom on the current version which a workspace package provides.
+# 4. Match only violations coming from within @wordpress packages.
+  - level: discard
+    pattern: "**@workspace:+(client|*/*|.) provides +(react|react-dom) (*) with version 18.2.0, which doesn't satisfy what +(@wordpress/*|@types/wordpress__*) and some of its descendants request"
+
+# TODO: Remove this once Reakit can be removed (or once Reakit includes React 18 as a peer dependency.)
   - level: discard
-    pattern: "@wordpress/notices@npm:3.27.0 doesn't provide react (pcdad4), requested by @wordpress/data"
+    pattern: "calypso@workspace:client provides +(react|react-dom) (*) with version 18.2.0, which doesn't satisfy what reakit and some of its descendants request"
+
+# TODO: Remove this once the react-easy-crop transitive dependency can be removed. (Likely after updating @wordpress/block-editor to a newer version.)
   - level: discard
-    pattern: "calypso@workspace:client provides @wordpress/data (pd64ed) with version 7.6.0, which doesn't satisfy what @automattic/subscription-manager requests"
+    pattern: "calypso@workspace:client provides +(react|react-dom) (*) with version 18.2.0, which doesn't satisfy what @automattic/block-renderer and some of its descendants request"
 
-nodeLinker: node-modules
+# React day picker version 7 does not include explicit react 18 support, but we can't update to v8 just yet.
+# TODO: Remove after updating to react-day-picker version 8.
+  - level: discard
+    pattern: "calypso@workspace:client provides react (*) with version 18.2.0, which doesn't satisfy what react-day-picker requests"
 
+### Package extensions to provide missing peer dependencies. ###
 packageExtensions:
   "@automattic/newspack-blocks@*":
     peerDependencies:
@@ -125,13 +62,19 @@ packageExtensions:
   "@signal-noise/stylelint-scales@2.0.3":
     peerDependencies:
       postcss: "*"
-  "@types/wordpress__components@14.0.10":
+  "@types/wordpress__components@23.0.1":
     peerDependencies:
       react: "*"
   "@types/wordpress__plugins@3.0.0":
     peerDependencies:
       react: "*"
-  "@wordpress/stylelint-config@21.10.0":
+  "@wordpress/data-controls@2.23.0":
+    peerDependencies:
+      react: "*"
+  "@wordpress/notices@3.23.0":
+    peerDependencies:
+      react: "*"
+  "@wordpress/stylelint-config@21.6.0":
     peerDependencies:
       postcss: "*"
   fake-indexeddb@3.1.7:
@@ -143,9 +86,6 @@ packageExtensions:
       moment: "*"
       react: "*"
       react-dom: "*"
-  react-with-styles@3.2.3:
-    peerDependencies:
-      react-dom: "*"
   reakit-warning@0.6.2:
     peerDependencies:
       react-dom: "*"
@@ -160,11 +100,3 @@ packageExtensions:
     peerDependencies:
       core-js-bundle: "*"
       regenerator-runtime: "*"
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-
-preferAggregateCacheInfo: true
-
-yarnPath: .yarn/releases/yarn-3.2.3.cjs

apps/blaze-dashboard/package.json

@@ -35,9 +35,9 @@
 		"moment": "^2.26.0",
 		"page": "^1.11.5",
 		"prop-types": "^15.8.1",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"react-redux": "^8.0.5",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-redux": "^8.0.7",
 		"redux": "^4.2.1",
 		"redux-thunk": "^2.4.2",
 		"wpcom": "workspace:^",

apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-patterns-plugin.tsx

@@ -76,7 +76,7 @@ export function PagePatternsPlugin( props: PagePatternsPluginProps ) {
 	);
 
 	const insertPattern = useCallback(
-		( title, blocks ) => {
+		( title: string | null, blocks: unknown[] ) => {
 			// Add filter to let the tracking library know we are inserting a template.
 			addFilter( INSERTING_HOOK_NAME, INSERTING_HOOK_NAMESPACE, () => true );
 

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/wp-edit-post-types.d.ts

@@ -1,3 +1,5 @@
 declare module '@wordpress/edit-post' {
-	export const __experimentalMainDashboardButton: React.ComponentType;
+	export const __experimentalMainDashboardButton: React.ComponentType< {
+		children?: React.ReactNode;
+	} >;
 }