Mobile Release v1.120.0

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

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	View,
-	Text,
-	TouchableWithoutFeedback,
-	TouchableOpacity,
-} from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -25,6 +20,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
+import { requestUnsupportedBlockFallback } from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -48,11 +44,40 @@ export class UnsupportedBlockEdit extends Component {
 	}
 
 	toggleSheet() {
+		const { attributes, block, clientId } = this.props;
+		const { originalName } = attributes;
+		const title = this.getTitle();
+		const blockContent = serialize( block ? [ block ] : [] );
+
+		if ( this.canEditUnsupportedBlock() ) {
+			requestUnsupportedBlockFallback(
+				blockContent,
+				clientId,
+				originalName,
+				title
+			);
+			return;
+		}
+
 		this.setState( {
 			showHelp: ! this.state.showHelp,
 		} );
 	}
 
+	canEditUnsupportedBlock() {
+		const {
+			canEnableUnsupportedBlockEditor,
+			isEditableInUnsupportedBlockEditor,
+			isUnsupportedBlockEditorSupported,
+		} = this.props;
+
+		return (
+			! canEnableUnsupportedBlockEditor &&
+			isUnsupportedBlockEditorSupported &&
+			isEditableInUnsupportedBlockEditor
+		);
+	}
+
 	closeSheet() {
 		this.setState( {
 			showHelp: false,
@@ -171,7 +196,8 @@ export class UnsupportedBlockEdit extends Component {
 
 	render() {
 		const { originalName } = this.props.attributes;
-		const { getStylesFromColorScheme, preferredColorScheme } = this.props;
+		const { isSelected, getStylesFromColorScheme, preferredColorScheme } =
+			this.props;
 		const blockType = coreBlocks[ originalName ];
 
 		const title = this.getTitle();
@@ -186,7 +212,11 @@ export class UnsupportedBlockEdit extends Component {
 		);
 
 		const subtitle = (
-			<Text style={ subTitleStyle }>{ __( 'Unsupported' ) }</Text>
+			<Text style={ subTitleStyle }>
+				{ this.canEditUnsupportedBlock()
+					? __( 'Tap to edit' )
+					: __( 'Unsupported' ) }
+			</Text>
 		);
 
 		const icon = blockType
@@ -198,8 +228,9 @@ export class UnsupportedBlockEdit extends Component {
 		);
 		const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme;
 		return (
-			<TouchableWithoutFeedback
-				disabled={ ! this.props.isSelected }
+			<TouchableOpacity
+				disabled={ ! isSelected }
+				activeOpacity={ 0.5 }
 				accessibilityLabel={ __( 'Help button' ) }
 				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
@@ -211,7 +242,8 @@ export class UnsupportedBlockEdit extends Component {
 						styles.unsupportedBlockDark
 					) }
 				>
-					{ this.renderHelpIcon() }
+					{ ! this.canEditUnsupportedBlock() &&
+						this.renderHelpIcon() }
 					<View style={ styles.unsupportedBlockHeader }>
 						<Icon
 							className={ iconClassName }
@@ -223,7 +255,7 @@ export class UnsupportedBlockEdit extends Component {
 					{ subtitle }
 					{ this.renderSheet( title, originalName ) }
 				</View>
-			</TouchableWithoutFeedback>
+			</TouchableOpacity>
 		);
 	}
 }

packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap

@@ -14,7 +14,16 @@ exports[`Missing block renders without crashing 1`] = `
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
+  collapsable={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -23,72 +32,79 @@ exports[`Missing block renders without crashing 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "opacity": 1,
+    }
+  }
 >
-  <View
-    accessibilityHint="Tap here to show help"
-    accessibilityLabel="Help button"
-    accessibilityRole="button"
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
+  <View>
+    <View
+      accessibilityHint="Tap here to show help"
+      accessibilityLabel="Help button"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
       }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
       }
-    }
-  >
-    <Svg
-      height={24}
-      label="Help icon"
-      style={{}}
-      viewBox="0 0 24 24"
-      width={24}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      Path
-    </Svg>
-  </View>
-  <View>
-    <Svg
-      fill="white"
-      height={24}
-      style={{}}
-      viewBox="0 0 24 24"
-      width={24}
-      xmlns="http://www.w3.org/2000/svg"
     >
-      Path
-    </Svg>
+      <Svg
+        height={24}
+        label="Help icon"
+        style={{}}
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        Path
+      </Svg>
+    </View>
+    <View>
+      <Svg
+        fill="white"
+        height={24}
+        style={{}}
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        Path
+      </Svg>
+      <Text>
+        missing/block/title
+      </Text>
+    </View>
     <Text>
-      missing/block/title
+      Unsupported
     </Text>
   </View>
-  <Text>
-    Unsupported
-  </Text>
 </View>
 `;

packages/blocks/src/api/raw-handling/image-corrector.native.js

@@ -10,7 +10,10 @@ export default function imageCorrector( node ) {
 		return;
 	}
 
-	if ( node.src.indexOf( 'file:' ) === 0 ) {
+	// For local files makes sure the path doesn't end with an invalid extension.
+	// This scenario often happens with content from MS Word and similar text apps.
+	// We still need to support local files pasted from the users Media library.
+	if ( node.src.startsWith( 'file:' ) && node.src.slice( -1 ) === '/' ) {
 		node.setAttribute( 'src', '' );
 	}
 

packages/edit-post/src/test/__snapshots__/editor.native.js.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Editor adds empty image block when pasting unsupported HTML local image path 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Editor adds image block when pasting HTML local image path 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="file:///path/to/file.png" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
 exports[`Editor appends media correctly for allowed types 1`] = `
 "<!-- wp:image -->
 <figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt=""/></figure>

packages/edit-post/src/test/editor.native.js

@@ -9,8 +9,10 @@ import {
 	getEditorHtml,
 	getEditorTitle,
 	initializeEditor,
+	pasteIntoRichText,
 	screen,
 	setupCoreBlocks,
+	within,
 } from 'test/helpers';
 import { BackHandler } from 'react-native';
 
@@ -98,6 +100,38 @@ describe( 'Editor', () => {
 		} );
 	} );
 
+	it( 'adds empty image block when pasting unsupported HTML local image path', async () => {
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+
+		pasteIntoRichText( paragraphTextInput, {
+			text: '<div><img src="file:LOW-RES.png"></div>',
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'adds image block when pasting HTML local image path', async () => {
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+
+		pasteIntoRichText( paragraphTextInput, {
+			files: [ 'file:///path/to/file.png' ],
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'appends media correctly for allowed types', async () => {
 		// Arrange
 		requestMediaImport

packages/react-native-aztec/package.json

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