Upgrade React packages to v18 (#45235)

* Upgrade React packages to v18

* Upgrade framer-motion to get React 18 support and updated types

* React Native: upgrade to 0.69.4

* React Native: upgrade libraries

* LinkControl: fix unit tests

* Components: fix unit tests

* Block Editor: fix unit tests

* NUX: fix unit tests

* useSelect: fix unit tests (partially)

* LinkSettings test: fix finding blocks by label text

* BlockDraggable test: fix finding blocks by label text

* React Native test helpers: fix getting blocks

* Block Library tests: fix finding blocks by label text

* ToggleGroupControl: fix unit test by waiting for tooltip

* File Block: update snapshots to account for empty children

* Embed native tests: improve mocked API response

* Embed native tests: wait for rich preview to appear

* Format Library: fix finding blocks by label text

* Edit Post: fix finding blocks by label text

* Update native snapshots

* useNestedSettingsUpdate: deoptimize/unbatch dispatching the updateBlockListSettings actions

* Color Palette: wait for dropdown to appear

* Add custom Jest matcher: toBePositionedPopover

* Use toBePositionedPopover matcher in tests

* Mobile - Update tests

* Mobile - Update gitignore

* Mobile - Update ruby config

* [Mobile] - React Native 0.69.4 Upgrade - Android (#43486)

* Mobile - React Native 0.69.4 upgrade, base Android changes

* Mobile - Remove RNGestureHandlerEnabledRootView since its now deprecated

* Mobile - Update bundle android script

* [Mobile] - React Native 0.69.4 Upgrade - iOS

* Mobile - Check for a local bundle running with metro and use a jsbundle as a fallback

* Remove duplicated import of Gesture handler

* Remove deprecated initialization for Reanimated

* Update Podfile.lock after updating dependencies

* Remove React peer deps from packages that don't need them

* Add changelog entries about React 18 upgrade

* Extract useIsScreenReaderEnabled hook, set state only if enabled=true

* Mobile - Update Podfile.lock

Co-authored-by: Marin Atanasov <[email protected]>
Co-authored-by: Gerardo <[email protected]>
Co-authored-by: Derek Blank <[email protected]>

package.json

@@ -112,10 +112,10 @@
 		"@storybook/builder-webpack5": "6.5.7",
 		"@storybook/manager-webpack5": "6.5.7",
 		"@storybook/react": "6.5.7",
-		"@testing-library/jest-dom": "5.16.4",
-		"@testing-library/react": "12.1.5",
-		"@testing-library/react-native": "9.1.0",
-		"@testing-library/user-event": "14.2.0",
+		"@testing-library/jest-dom": "5.16.5",
+		"@testing-library/react": "13.4.0",
+		"@testing-library/react-native": "11.3.0",
+		"@testing-library/user-event": "14.4.3",
 		"@types/classnames": "2.3.1",
 		"@types/eslint": "7.28.0",
 		"@types/estree": "0.0.50",
@@ -126,7 +126,9 @@
 		"@types/npm-package-arg": "6.1.1",
 		"@types/prettier": "2.4.4",
 		"@types/qs": "6.9.7",
+		"@types/react": "18.0.21",
 		"@types/react-dates": "21.8.3",
+		"@types/react-dom": "18.0.6",
 		"@types/requestidlecallback": "0.3.4",
 		"@types/semver": "7.3.8",
 		"@types/sprintf-js": "1.1.2",
@@ -204,8 +206,8 @@
 		"lint-staged": "10.0.1",
 		"lodash": "4.17.21",
 		"make-dir": "3.0.0",
-		"metro-react-native-babel-preset": "0.66.2",
-		"metro-react-native-babel-transformer": "0.66.2",
+		"metro-react-native-babel-preset": "0.70.3",
+		"metro-react-native-babel-transformer": "0.70.3",
 		"mkdirp": "0.5.1",
 		"nock": "12.0.3",
 		"node-fetch": "2.6.1",
@@ -216,12 +218,12 @@
 		"postcss-loader": "6.2.1",
 		"prettier": "npm:[email protected]",
 		"progress": "2.0.3",
-		"react": "17.0.2",
-		"react-dom": "17.0.2",
-		"react-native": "0.66.2",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-native": "0.69.4",
 		"react-native-url-polyfill": "1.1.2",
 		"react-refresh": "0.10.0",
-		"react-test-renderer": "17.0.2",
+		"react-test-renderer": "18.2.0",
 		"redux": "4.1.2",
 		"resize-observer-polyfill": "1.5.1",
 		"rimraf": "3.0.2",

packages/annotations/package.json

@@ -33,9 +33,6 @@
 		"rememo": "^4.0.0",
 		"uuid": "^8.3.0"
 	},
-	"peerDependencies": {
-		"react": "^17.0.0"
-	},
 	"publishConfig": {
 		"access": "public"
 	}

packages/block-directory/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 3.20.0 (2022-11-16)
 
 ## 3.19.0 (2022-11-02)

packages/block-directory/package.json

@@ -47,8 +47,8 @@
 		"change-case": "^4.1.2"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"

packages/block-editor/CHANGELOG.md

@@ -2,7 +2,11 @@
 
 ## Unreleased
 
-### Enhancement
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
+### Enhancements
 
 - `URLInput`: the `renderSuggestions` callback prop now receives `currentInputValue` as a new parameter ([45806](https://github.com/WordPress/gutenberg/pull/45806)).
 

packages/block-editor/package.json

@@ -74,8 +74,8 @@
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"

packages/block-editor/src/components/block-draggable/index.native.js

@@ -285,6 +285,58 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 	);
 };
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
+function useIsEditingText() {
+	const [ isEditingText, setIsEditingText ] = useState( () =>
+		RCTAztecView.InputState.isFocused()
+	);
+
+	useEffect( () => {
+		const onFocusChangeAztec = ( { isFocused } ) => {
+			setIsEditingText( isFocused );
+		};
+
+		RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );
+
+		return () => {
+			RCTAztecView.InputState.removeFocusChangeListener(
+				onFocusChangeAztec
+			);
+		};
+	}, [] );
+
+	return isEditingText;
+}
+
 /**
  * Block draggable component
  *
@@ -308,9 +360,8 @@ const BlockDraggable = ( {
 	testID,
 } ) => {
 	const wasBeingDragged = useRef( false );
-	const [ isEditingText, setIsEditingText ] = useState( false );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isEditingText = useIsEditingText();
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	const draggingAnimation = {
 		opacity: useSharedValue( 1 ),
@@ -365,43 +416,6 @@ const BlockDraggable = ( {
 		wasBeingDragged.current = isBeingDragged;
 	}, [ isBeingDragged ] );
 
-	const onFocusChangeAztec = useCallback( ( { isFocused } ) => {
-		setIsEditingText( isFocused );
-	}, [] );
-
-	useEffect( () => {
-		let mounted = true;
-
-		const isAnyAztecInputFocused = RCTAztecView.InputState.isFocused();
-		if ( isAnyAztecInputFocused ) {
-			setIsEditingText( isAnyAztecInputFocused );
-		}
-
-		RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );
-
-		const screenReaderChangedListener = AccessibilityInfo.addEventListener(
-			'screenReaderChanged',
-			setIsScreenReaderEnabled
-		);
-		AccessibilityInfo.isScreenReaderEnabled().then(
-			( screenReaderEnabled ) => {
-				if ( mounted ) {
-					setIsScreenReaderEnabled( screenReaderEnabled );
-				}
-			}
-		);
-
-		return () => {
-			mounted = false;
-
-			RCTAztecView.InputState.removeFocusChangeListener(
-				onFocusChangeAztec
-			);
-
-			screenReaderChangedListener.remove();
-		};
-	}, [] );
-
 	const onLongPressDraggable = useCallback( () => {
 		// Ensure that no text input is focused when starting the dragging gesture in order to prevent conflicts with text editing.
 		RCTAztecView.InputState.blurCurrentFocusedElement();

packages/block-editor/src/components/block-draggable/test/helpers.native.js

@@ -53,14 +53,14 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 	const initialHtml = blocks.map( ( block ) => block.html ).join( '\n' );
 
 	const screen = await initializeEditor( { initialHtml } );
-	const { getByLabelText } = screen;
+	const { getAllByLabelText } = screen;
 
 	const waitPromises = [];
 	blocks.forEach( ( block, index ) => {
 		const a11yLabel = new RegExp(
 			`${ block.name } Block\\. Row ${ index + 1 }`
 		);
-		const element = getByLabelText( a11yLabel );
+		const [ element ] = getAllByLabelText( a11yLabel );
 		// "onLayout" event will populate the blocks layouts data.
 		fireEvent( element, 'layout', {
 			nativeEvent: { layout: block.layout },
@@ -91,13 +91,11 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 				const nestedA11yLabel = new RegExp(
 					`${ nestedBlock.name } Block\\. Row ${ nestedIndex + 1 }`
 				);
-				fireEvent(
-					within( element ).getByLabelText( nestedA11yLabel ),
-					'layout',
-					{
-						nativeEvent: { layout: nestedBlock.layout },
-					}
-				);
+				const [ nestedElement ] =
+					within( element ).getAllByLabelText( nestedA11yLabel );
+				fireEvent( nestedElement, 'layout', {
+					nativeEvent: { layout: nestedBlock.layout },
+				} );
 			} );
 		}
 	} );