Add Cover block replace media e2e test

packages/block-library/src/cover/controls.native.js

@@ -240,6 +240,7 @@ function Controls( {
 				</>
 			) : (
 				<TextControl
+					accessibilityLabel={ __( 'Add image or video' ) }
 					label={ __( 'Add image or video' ) }
 					labelStyle={ addMediaButtonStyle }
 					leftAlign

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

@@ -50,6 +50,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import { useEffect, useState, useRef, useCallback } from '@wordpress/element';
 import { cover as icon, replace, image, warning } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
+import { store as editPostStore } from '@wordpress/edit-post';
 
 /**
  * Internal dependencies
@@ -575,13 +576,13 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch, { clientId } ) => {
-		const { openGeneralSidebar } = dispatch( 'core/edit-post' );
+		const { openGeneralSidebar } = dispatch( editPostStore );
 		const { selectBlock } = dispatch( blockEditorStore );
 
 		return {
 			openGeneralSidebar: () => openGeneralSidebar( 'edit-post/block' ),
 			closeSettingsBottomSheet() {
-				dispatch( 'core/edit-post' ).closeGeneralSidebar();
+				dispatch( editPostStore ).closeGeneralSidebar();
 			},
 			selectBlock: () => selectBlock( clientId ),
 		};

packages/react-native-editor/__device-tests__/gutenberg-editor-cover.test.js

@@ -29,4 +29,61 @@ describe( 'Gutenberg Editor Cover Block test', () => {
 		expect( coverBlock ).toBeTruthy();
 		await editorPage.removeBlockAtPosition( blockNames.cover );
 	} );
+
+	// Testing this for iOS on a device is valuable to ensure that it properly
+	// handles opening multiple modals, as only one can be open at a time
+	it( 'allows modifying media from within block settings', async () => {
+		await editorPage.setHtmlContent( testData.coverHeightWithRemUnit );
+
+		const coverBlock = await editorPage.getBlockAtPosition(
+			blockNames.cover
+		);
+		await coverBlock.click();
+
+		// Can only add image from media library on iOS
+		if ( ! isAndroid() ) {
+			// Open block settings
+			const settingsButton = await editorPage.driver.elementByAccessibilityId(
+				'Open Settings'
+			);
+			await settingsButton.click();
+
+			// Add initial media via button within bottom sheet
+			const mediaSection = await editorPage.driver.elementByAccessibilityId(
+				'Media Add image or video'
+			);
+			const addMediaButton = await mediaSection.elementByAccessibilityId(
+				'Add image or video'
+			);
+			await addMediaButton.click();
+			await editorPage.chooseMediaLibrary();
+
+			// Edit media within block settings
+			await settingsButton.click();
+			await editorPage.driver.sleep( 2000 ); // Await media load
+			const editImageButton = await editorPage.driver.elementsByAccessibilityId(
+				'Edit image'
+			);
+			await editImageButton[ editImageButton.length - 1 ].click();
+
+			// Replace image
+			const replaceButton = await editorPage.driver.elementByAccessibilityId(
+				'Replace'
+			);
+			await replaceButton.click();
+
+			// First modal should no longer be presented
+			const replaceButtons = await editorPage.driver.elementsByAccessibilityId(
+				'Replace'
+			);
+			// eslint-disable-next-line jest/no-conditional-expect
+			expect( replaceButtons.length ).toBe( 0 );
+
+			// Select different media
+			await editorPage.chooseMediaLibrary();
+		}
+
+		expect( coverBlock ).toBeTruthy();
+		await editorPage.removeBlockAtPosition( blockNames.cover );
+	} );
 } );