Merge branch 'trunk' into rnmobile/release_1.78.0

# Conflicts:
#	packages/block-editor/src/components/media-upload/index.native.js
#	packages/react-native-aztec/package.json
#	packages/react-native-bridge/package.json
#	packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js
#	packages/react-native-editor/__device-tests__/helpers/utils.js
#	packages/react-native-editor/__device-tests__/pages/editor-page.js
#	packages/react-native-editor/ios/Podfile.lock
#	packages/react-native-editor/package.json

packages/block-editor/src/components/media-upload/index.native.js

@@ -127,7 +127,7 @@ export class MediaUpload extends Component {
 			id: URL_MEDIA_SOURCE,
 			value: URL_MEDIA_SOURCE,
 			label: __( 'Insert from URL' ),
-			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE ],
+			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
 			icon: globe,
 		};
 

packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js

@@ -7,14 +7,7 @@ import testData from './helpers/test-data';
 
 describe( 'Gutenberg Editor Image Block tests', () => {
 	it( 'should be able to add an image block', async () => {
-		await editorPage.addNewBlock( blockNames.image );
-		await editorPage.closePicker();
-
-		const imageBlock = await editorPage.getBlockAtPosition(
-			blockNames.image
-		);
-
-		// Can only add image from media library on iOS
+		// iOS only test - Can only add image from media library on iOS
 		if ( ! isAndroid() ) {
 			await editorPage.addNewBlock( blockNames.image );
 			await editorPage.closePicker();

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

@@ -321,10 +321,10 @@ const longPressMiddleOfElement = async ( driver, element ) => {
 
 	const x = location.x + size.width / 2;
 	const y = location.y + size.height / 2;
-	action.press( { x, y } );
-	// Setting to wait a bit longer because this is failing more frequently on the CI
-	action.wait( 5000 );
-	action.release();
+	const action = new wd.TouchAction( driver )
+		.longPress( { x, y } )
+		.wait( 5000 ) // Setting to wait a bit longer because this is failing more frequently on the CI
+		.release();
 	await action.perform();
 };
 
@@ -516,13 +516,15 @@ const waitForMediaLibrary = async ( driver ) => {
  * @param {string} driver
  * @param {string} elementLocator
  * @param {number} maxIteration - Default value is 25
+ * @param {string} elementToReturn - Options are allElements, lastElement, firstElement. Defaults to "firstElement"
  * @param {number} iteration - Default value is 0
  * @return {string} - Returns the first element found, empty string if not found
  */
 const waitForVisible = async (
 	driver,
 	elementLocator,
 	maxIteration = 25,
+	elementToReturn = 'firstElement',
 	iteration = 0
 ) => {
 	const timeout = 1000;
@@ -539,35 +541,47 @@ const waitForVisible = async (
 		await driver.sleep( timeout );
 	}
 
-	const element = await driver.elementsByXPath( elementLocator );
-	if ( element.length === 0 ) {
+	const elements = await driver.elementsByXPath( elementLocator );
+	if ( elements.length === 0 ) {
 		// if locator is not visible, try again
 		return waitForVisible(
 			driver,
 			elementLocator,
 			maxIteration,
+			elementToReturn,
 			iteration + 1
 		);
 	}
 
-	return element[ 0 ];
+	switch ( elementToReturn ) {
+		case 'allElements':
+			return elements;
+		case 'lastElement':
+			return elements[ elements.length - 1 ];
+		default:
+			// Default is to return first element
+			return elements[ 0 ];
+	}
 };
 
 /**
  * @param {string} driver
  * @param {string} elementLocator
  * @param {number} maxIteration - Default value is 25, can be adjusted to be less to wait for element to not be visible
+ * @param {string} elementToReturn - Options are allElements, lastElement, firstElement. Defaults to "firstElement"
  * @return {boolean} - Returns true if element is found, false otherwise
  */
 const isElementVisible = async (
 	driver,
 	elementLocator,
-	maxIteration = 25
+	maxIteration = 25,
+	elementToReturn = 'firstElement'
 ) => {
 	const element = await waitForVisible(
 		driver,
 		elementLocator,
-		maxIteration
+		maxIteration,
+		elementToReturn
 	);
 
 	// if there is no element, return false
@@ -582,12 +596,14 @@ const clickIfClickable = async (
 	driver,
 	elementLocator,
 	maxIteration = 25,
+	elementToReturn = 'firstElement',
 	iteration = 0
 ) => {
 	const element = await waitForVisible(
 		driver,
 		elementLocator,
 		maxIteration,
+		elementToReturn,
 		iteration
 	);
 
@@ -606,6 +622,7 @@ const clickIfClickable = async (
 			driver,
 			elementLocator,
 			maxIteration,
+			elementToReturn,
 			iteration + 1
 		);
 	}
@@ -618,17 +635,50 @@ const waitIfAndroid = async () => {
 	}
 };
 
+/**
+ * Content type definitions.
+ * Note: Android only supports plaintext.
+ *
+ * @typedef {"plaintext" | "image" | "url"} ClipboardContentType
+ */
+
+/**
+ * Helper to set content in the clipboard.
+ *
+ * @param {Object}               driver      Driver
+ * @param {string}               content     Content to set in the clipboard
+ * @param {ClipboardContentType} contentType Type of the content
+ */
+const setClipboard = async ( driver, content, contentType = 'plaintext' ) => {
+	const base64String = Buffer.from( content ).toString( 'base64' );
+	await driver.setClipboard( base64String, contentType );
+};
+
+/**
+ * Helper to clear the clipboard
+ *
+ * @param {Object}               driver      Driver
+ * @param {ClipboardContentType} contentType Type of the content
+ */
+const clearClipboard = async ( driver, contentType = 'plaintext' ) => {
+	await driver.setClipboard( '', contentType );
+};
+
 module.exports = {
 	backspace,
+	clearClipboard,
 	clickBeginningOfElement,
+	clickElementOutsideOfTextInput,
 	clickIfClickable,
 	clickMiddleOfElement,
 	doubleTap,
+	dragAndDropAfterElement,
 	isAndroid,
 	isEditorVisible,
 	isElementVisible,
 	isLocalEnvironment,
 	longPressMiddleOfElement,
+	setClipboard,
 	setupDriver,
 	stopDriver,
 	swipeDown,

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

@@ -7,6 +7,7 @@ const {
 	isEditorVisible,
 	isElementVisible,
 	longPressMiddleOfElement,
+	setClipboard,
 	setupDriver,
 	stopDriver,
 	swipeDown,
@@ -56,11 +57,7 @@ class EditorPage {
 		if ( ! isAndroid() ) {
 			const textBlockLocator = `(//XCUIElementTypeButton[contains(@name, "${ blockName } Block. Row ${ position }")])`;
 
-			const textBlock = await waitForVisible(
-				this.driver,
-				textBlockLocator
-			);
-			await textBlock.click();
+			await clickIfClickable( this.driver, textBlockLocator );
 		}
 
 		const blockLocator = isAndroid()
@@ -150,9 +147,12 @@ class EditorPage {
 
 	async getLastBlockVisible() {
 		const firstBlockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, " Block. Row ")]`;
-		await waitForVisible( this.driver, firstBlockLocator );
-		const elements = await this.driver.elementsByXPath( firstBlockLocator );
-		return elements[ elements.length - 1 ];
+		return await waitForVisible(
+			this.driver,
+			firstBlockLocator,
+			25,
+			'lastElement'
+		);
 	}
 
 	async hasBlockAtPosition( position = 1, blockName = '' ) {
@@ -242,12 +242,10 @@ class EditorPage {
 			// Sometimes double tap is not enough for paste menu to appear, so we also long press.
 			await longPressMiddleOfElement( this.driver, htmlContentView );
 
-			const pasteButton = await waitForVisible(
+			await clickIfClickable(
 				this.driver,
 				'//XCUIElementTypeMenuItem[@name="Paste"]'
 			);
-
-			await pasteButton.click();
 		}
 
 		await toggleHtmlMode( this.driver, false );
@@ -499,6 +497,15 @@ class EditorPage {
 	// Paragraph Block functions
 	// =========================
 
+	async getParagraphBlockWrapperAtPosition( position = 1 ) {
+		// iOS needs a click to get the text element
+		const blockLocator = isAndroid()
+			? `//android.view.ViewGroup[contains(@content-desc, "Paragraph Block. Row ${ position }")]`
+			: `(//XCUIElementTypeButton[contains(@name, "Paragraph Block. Row ${ position }")])`;
+
+		return await waitForVisible( this.driver, blockLocator );
+	}
+
 	async sendTextToParagraphBlock( position, text, clear ) {
 		const paragraphs = text.split( '\n' );
 		for ( let i = 0; i < paragraphs.length; i++ ) {
@@ -689,42 +696,32 @@ class EditorPage {
 
 		const elementName = isAndroid() ? '//*' : '//XCUIElementTypeOther';
 
-		const locator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Hide search heading")]`;
-		const hideSearchHeadingToggle = await waitForVisible(
+		const hideSearchHeadingToggleLocator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Hide search heading")]`;
+		return await clickIfClickable(
 			this.driver,
-			locator
+			hideSearchHeadingToggleLocator
 		);
-
-		return await hideSearchHeadingToggle.click();
 	}
 
 	async changeSearchButtonPositionSetting( block, buttonPosition ) {
 		await this.openBlockSettings( block );
 
 		const elementName = isAndroid() ? '//*' : '//XCUIElementTypeButton';
 
-		const locator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Button position")]`;
-		let optionMenuButton = await waitForVisible( this.driver, locator );
-		await optionMenuButton.click();
+		const optionMenuLocator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Button position")]`;
+		await clickIfClickable( this.driver, optionMenuLocator );
 
 		const optionMenuButtonLocator = `${ elementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ buttonPosition }")]`;
-		optionMenuButton = await waitForVisible(
-			this.driver,
-			optionMenuButtonLocator
-		);
-
-		return await optionMenuButton.click();
+		return await clickIfClickable( this.driver, optionMenuButtonLocator );
 	}
 
 	async toggleSearchIconOnlySetting( block ) {
 		await this.openBlockSettings( block );
 
 		const elementName = isAndroid() ? '//*' : '//XCUIElementTypeOther';
 
-		const locator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Use icon button")]`;
-		const useIconButton = await waitForVisible( this.driver, locator );
-
-		return await useIconButton.click();
+		const useIconButtonLocator = `${ elementName }[starts-with(@${ this.accessibilityIdXPathAttrib }, "Use icon button")]`;
+		return await clickIfClickable( this.driver, useIconButtonLocator );
 	}
 
 	async isSearchSettingsVisible() {
@@ -771,6 +768,29 @@ class EditorPage {
 	async sauceJobStatus( allPassed ) {
 		await this.driver.sauceJobStatus( allPassed );
 	}
+
+	// =========================
+	// Shortcode Block functions
+	// =========================
+
+	async getShortBlockTextInputAtPosition( blockName, position = 1 ) {
+		// iOS needs a click to get the text element
+		if ( ! isAndroid() ) {
+			const textBlockLocator = `(//XCUIElementTypeButton[contains(@name, "Shortcode Block. Row ${ position }")])`;
+
+			const textBlock = await waitForVisible(
+				this.driver,
+				textBlockLocator
+			);
+			await textBlock.click();
+		}
+
+		const blockLocator = isAndroid()
+			? `//android.view.ViewGroup[@content-desc="Shortcode Block. Row ${ position }"]/android.view.ViewGroup/android.view.ViewGroup/android.widget.EditText`
+			: `//XCUIElementTypeButton[contains(@name, "Shortcode Block. Row ${ position }")]//XCUIElementTypeTextView`;
+
+		return await waitForVisible( this.driver, blockLocator );
+	}
 }
 
 const blockNames = {
@@ -790,6 +810,7 @@ const blockNames = {
 	separator: 'Separator',
 	spacer: 'Spacer',
 	verse: 'Verse',
+	shortcode: 'Shortcode',
 };
 
 module.exports = { initializeEditorPage, blockNames };