Mobile Release v1.34.0

packages/block-library/src/button/edit.native.js

@@ -372,6 +372,7 @@ class ButtonEdit extends Component {
 						__unstableMobileNoFocusOnMount={ ! isSelected }
 						selectionColor={ textColor }
 						onBlur={ () => {
+							this.onToggleButtonFocus( false );
 							this.onSetMaxWidth();
 						} }
 						onReplace={ onReplace }

packages/components/src/mobile/keyboard-avoiding-view/index.ios.js

@@ -3,76 +3,18 @@
  */
 import {
 	KeyboardAvoidingView as IOSKeyboardAvoidingView,
-	Animated,
-	Keyboard,
 	Dimensions,
 } from 'react-native';
 
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, useRef } from '@wordpress/element';
-
-const AnimatedKeyboardAvoidingView = Animated.createAnimatedComponent(
-	IOSKeyboardAvoidingView
-);
-
-const MIN_HEIGHT = 44;
-
-export const KeyboardAvoidingView = ( {
-	parentHeight,
-	style,
-	withAnimatedHeight = false,
-	...otherProps
-} ) => {
-	const [ keyboardHeight, setKeyboardHeight ] = useState( 0 );
-	const animatedHeight = useRef( new Animated.Value( MIN_HEIGHT ) ).current;
-
+export const KeyboardAvoidingView = ( { parentHeight, ...otherProps } ) => {
 	const { height: fullHeight } = Dimensions.get( 'window' );
 	const keyboardVerticalOffset = fullHeight - parentHeight;
 
-	useEffect( () => {
-		Keyboard.addListener( 'keyboardWillShow', onKeyboardWillShow );
-		Keyboard.addListener( 'keyboardWillHide', onKeyboardWillHide );
-		return () => {
-			Keyboard.removeListener( 'keyboardWillShow', onKeyboardWillShow );
-			Keyboard.removeListener( 'keyboardWillHide', onKeyboardWillHide );
-		};
-	}, [] );
-
-	useEffect( () => {
-		animate();
-	}, [ keyboardHeight ] );
-
-	function onKeyboardWillShow( { endCoordinates } ) {
-		setKeyboardHeight( endCoordinates.height );
-	}
-
-	function onKeyboardWillHide() {
-		setKeyboardHeight( 0 );
-	}
-
-	const paddedKeyboardHeight =
-		keyboardHeight + MIN_HEIGHT - ( style.bottom || 0 );
-
-	function animate() {
-		Animated.timing( animatedHeight, {
-			toValue: keyboardHeight ? paddedKeyboardHeight : MIN_HEIGHT,
-			duration: keyboardHeight ? 0 : 150,
-			useNativeDriver: false,
-		} ).start();
-	}
-
 	return (
-		<AnimatedKeyboardAvoidingView
+		<IOSKeyboardAvoidingView
 			{ ...otherProps }
 			behavior="padding"
 			keyboardVerticalOffset={ keyboardVerticalOffset }
-			style={
-				withAnimatedHeight
-					? [ style, { height: animatedHeight } ]
-					: style
-			}
 		/>
 	);
 };

packages/edit-post/src/components/layout/index.native.js

@@ -129,7 +129,7 @@ class Layout extends Component {
 				) }
 				onLayout={ this.onRootViewLayout }
 			>
-				<AutosaveMonitor />
+				<AutosaveMonitor disableIntervalChecks />
 				<View
 					style={ getStylesFromColorScheme(
 						styles.background,
@@ -153,7 +153,6 @@ class Layout extends Component {
 					<KeyboardAvoidingView
 						parentHeight={ this.state.rootViewHeight }
 						style={ toolbarKeyboardAvoidingViewStyle }
-						withAnimatedHeight
 					>
 						{ isTemplatePickerAvailable && (
 							<__experimentalPageTemplatePicker

packages/editor/src/components/autosave-monitor/index.js

@@ -12,10 +12,20 @@ export class AutosaveMonitor extends Component {
 	}
 
 	componentDidMount() {
-		this.setAutosaveTimer();
+		if ( ! this.props.disableIntervalChecks ) {
+			this.setAutosaveTimer();
+		}
 	}
 
 	componentDidUpdate( prevProps ) {
+		if (
+			this.props.disableIntervalChecks &&
+			this.props.editsReference !== prevProps.editsReference
+		) {
+			this.props.autosave();
+			return;
+		}
+
 		if ( ! this.props.isDirty && prevProps.isDirty ) {
 			this.needsAutosave = false;
 			return;

packages/editor/src/store/reducer.native.js

@@ -26,7 +26,7 @@ import {
 
 import { EDITOR_SETTINGS_DEFAULTS } from './defaults.js';
 
-EDITOR_SETTINGS_DEFAULTS.autosaveInterval = 0; // This is a way to override default behavior on mobile, and make it ping the native save at each keystroke
+EDITOR_SETTINGS_DEFAULTS.autosaveInterval = 1; // This is a way to override default behavior on mobile, and make it ping the native save every second as long as something changed
 
 export * from './reducer.js';
 

packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift

@@ -306,10 +306,12 @@ class RCTAztecView: Aztec.TextView {
     // MARK: - Edits
 
     open override func insertText(_ text: String) {
-        guard !interceptEnter(text), !interceptTriggersKeyCodes(text) else {
+        guard !interceptEnter(text) else {
             return
         }
 
+        interceptTriggersKeyCodes(text)
+
         super.insertText(text)
         updatePlaceholderVisibility()
     }
@@ -374,13 +376,13 @@ class RCTAztecView: Aztec.TextView {
         return true
     }
 
-    private func interceptTriggersKeyCodes(_ text: String) -> Bool {
+    private func interceptTriggersKeyCodes(_ text: String) {
         guard let keyCodes = triggerKeyCodes,
             keyCodes.count > 0,
             let onKeyDown = onKeyDown,
             text.count == 1
         else {
-            return false
+            return
         }
         for value in keyCodes {
             guard let keyString = value as? String,
@@ -393,9 +395,8 @@ class RCTAztecView: Aztec.TextView {
             var eventData = [AnyHashable:Any]()
             eventData = add(keyCode: keyCode, to: eventData)
             onKeyDown(eventData)
-            return true
+            return
         }
-        return false;
     }
 
     private func isNewLineBeforeSelectionAndNotEndOfContent() -> Bool {

packages/react-native-aztec/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress/react-native-aztec",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "description": "Aztec view for react-native.",
   "private": true,
   "author": "The WordPress Contributors",

packages/react-native-bridge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress/react-native-bridge",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "description": "Native bridge library used to integrate the block editor into a native App.",
   "private": true,
   "author": "The WordPress Contributors",

packages/react-native-editor/CHANGELOG.md

@@ -16,6 +16,10 @@ For each user feature we should also add a importance categorization label  to i
 * [***] Media editing support in Cover block.
 * [*] Fixed a bug on the Heading block, where a heading with a link and string formatting showed a white shadow in dark mode.
 
+## 1.33.1
+
+* Fixed a bug in the @-mentions feature where dismissing the @-mentions UI removed the @ character from the post.
+
 ## 1.33.0
 
 * [***] Media editing support in Media & Text block.

packages/react-native-editor/__device-tests__/helpers/utils.js

@@ -446,10 +446,19 @@ const swipeUp = async ( driver, element = undefined ) => {
 	const endX = startX;
 	const endY = startY + startY * -1 * 0.5;
 
+	await swipeFromTo( driver, { x: startX, y: startY }, { x: endX, y: endY } );
+};
+
+const defaultCoordinates = { x: 0, y: 0 };
+const swipeFromTo = async (
+	driver,
+	from = defaultCoordinates,
+	to = defaultCoordinates
+) => {
 	const action = await new wd.TouchAction( driver );
-	action.press( { x: startX, y: startY } );
+	action.press( from );
 	action.wait( 3000 );
-	action.moveTo( { x: endX, y: endY } );
+	action.moveTo( to );
 	action.release();
 	await action.perform();
 };
@@ -464,12 +473,7 @@ const swipeDown = async ( driver ) => {
 	const endX = startX;
 	const endY = startY - startY * -1 * 0.5;
 
-	const action = await new wd.TouchAction( driver );
-	action.press( { x: startX, y: startY } );
-	action.wait( 3000 );
-	action.moveTo( { x: endX, y: endY } );
-	action.release();
-	await action.perform();
+	await swipeFromTo( driver, { x: startX, y: startY }, { x: endX, y: endY } );
 };
 
 const toggleHtmlMode = async ( driver, toggleOn ) => {
@@ -526,6 +530,7 @@ module.exports = {
 	tapPasteAboveElement,
 	swipeDown,
 	swipeUp,
+	swipeFromTo,
 	stopDriver,
 	toggleHtmlMode,
 	toggleOrientation,

packages/react-native-editor/__device-tests__/pages/editor-page.js

@@ -7,6 +7,7 @@ import {
 	swipeDown,
 	typeString,
 	toggleHtmlMode,
+	swipeFromTo,
 } from '../helpers/utils';
 
 export default class EditorPage {
@@ -197,11 +198,17 @@ export default class EditorPage {
 	// Attempts to find the given block button in the block inserter control.
 	async findBlockButton( blockName ) {
 		if ( isAndroid() ) {
+			const size = await this.driver.getWindowSize();
+			const x = size.width / 2;
 			// Checks if the Block Button is available, and if not will scroll to the second half of the available buttons.
 			while (
 				! ( await this.driver.hasElementByAccessibilityId( blockName ) )
 			) {
-				await this.driver.pressKeycode( 20 ); // Press the Down arrow to force a scroll.
+				swipeFromTo(
+					this.driver,
+					{ x, y: size.height - 100 },
+					{ x, y: size.height - 450 }
+				);
 			}
 
 			return await this.driver.elementByAccessibilityId( blockName );

packages/react-native-editor/ios/Podfile.lock

@@ -21,7 +21,7 @@ PODS:
     - DoubleConversion
     - glog
   - glog (0.3.5)
-  - Gutenberg (1.33.0):
+  - Gutenberg (1.34.0):
     - React (= 0.61.5)
     - React-CoreModules (= 0.61.5)
     - React-RCTImage (= 0.61.5)
@@ -243,7 +243,7 @@ PODS:
     - React
   - RNSVG (9.13.6-gb):
     - React
-  - RNTAztecView (1.33.0):
+  - RNTAztecView (1.34.0):
     - React-Core
     - WordPress-Aztec-iOS (~> 1.19.3)
   - WordPress-Aztec-iOS (1.19.3)
@@ -377,7 +377,7 @@ SPEC CHECKSUMS:
   FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
-  Gutenberg: 26f1ba13f6edd966506ebc5dbeee727ccaaa6a68
+  Gutenberg: 9e8d8b1e223c84de3d48f45defb597b6c2362587
   RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
   RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
   React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
@@ -405,7 +405,7 @@ SPEC CHECKSUMS:
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
   ReactNativeDarkMode: f61376360c5d983907e5c316e8e1c853a8c2f348
   RNSVG: 68a534a5db06dcbdaebfd5079349191598caef7b
-  RNTAztecView: 8826fac3758dc309c31366d54ed819d177e7cbfa
+  RNTAztecView: b2a8bbc94328376f6cd7a238e826f5d49b20ae1a
   WordPress-Aztec-iOS: b7ac8b30f746992e85d9668453ac87c2cdcecf4f
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 

packages/react-native-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress/react-native-editor",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "description": "Mobile WordPress gutenberg editor.",
   "author": "The WordPress Contributors",
   "license": "GPL-2.0-or-later",