Merge pull request #5969 from wordpress-mobile/update-media-placehold…

…ers-and-block-outline Update media placeholders and block outline
wordpress-mobile · Jul 19, 2023 · 412eab1 · 412eab1
2 parents 6f1d7e7 + 7b2ae77
commit 412eab1
Show file tree

Hide file tree

Showing 44 changed files with 118 additions and 8 deletions.
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -5,6 +5,7 @@ Unreleased
 * [**] Move the undo/redo buttons to the navigation bar [https://github.com/wordpress-mobile/gutenberg-mobile/pull/5889]
 * [**] Update Editor block inserter button styles and default text input placeholder/selection styles [https://github.com/wordpress-mobile/gutenberg-mobile/pull/5941]
 * [**] Update Editor toolbar icons and colors [https://github.com/wordpress-mobile/gutenberg-mobile/pull/5940]
+* [**] Update media placeholders and block outline [https://github.com/wordpress-mobile/gutenberg-mobile/pull/5969]
 
 1.99.1
 ---

diff --git a/__device-tests__/gutenberg-editor-unsupported-block-visual.test.js b/__device-tests__/gutenberg-editor-unsupported-block-visual.test.js
@@ -0,0 +1,109 @@
+/**
+ * Internal dependencies
+ */
+const { isAndroid, toggleDarkMode, isEditorVisible } = e2eUtils;
+import { takeScreenshot } from './utils';
+
+describe( 'Gutenberg Editor Visual test for Unsupported Block', () => {
+	it( 'should show the empty placeholder for the selected/unselected state', async () => {
+		await editorPage.setHtmlContent( e2eTestData.unsupportedBlockHtml );
+
+		let unsupportedBlock = await editorPage.getBlockAtPosition(
+			editorPage.blockNames.unsupported
+		);
+		await unsupportedBlock.click();
+
+		// Visual test check
+		let screenshot = await takeScreenshot();
+		expect( screenshot ).toMatchImageSnapshot();
+
+		// Select title to unfocus the block
+		const titleElement = await editorPage.getTitleElement();
+		await titleElement.click();
+
+		await editorPage.dismissKeyboard();
+
+		// Visual test check
+		screenshot = await takeScreenshot();
+		expect( screenshot ).toMatchImageSnapshot();
+
+		unsupportedBlock = await editorPage.getBlockAtPosition(
+			editorPage.blockNames.unsupported
+		);
+		await unsupportedBlock.click();
+		await editorPage.removeBlock();
+	} );
+
+	it( 'should show the empty placeholder for the selected/unselected state in dark mode', async () => {
+		await toggleDarkMode( editorPage.driver, true );
+
+		// The Android editor requires a restart to apply dark mode
+		if ( isAndroid() ) {
+			await editorPage.driver.resetApp();
+			await isEditorVisible( editorPage.driver );
+		}
+
+		await editorPage.setHtmlContent( e2eTestData.unsupportedBlockHtml );
+
+		let unsupportedBlock = await editorPage.getBlockAtPosition(
+			editorPage.blockNames.unsupported
+		);
+		await unsupportedBlock.click();
+
+		// Visual test check
+		let screenshot = await takeScreenshot();
+		expect( screenshot ).toMatchImageSnapshot();
+
+		// Select title to unfocus the block
+		const titleElement = await editorPage.getTitleElement();
+		await titleElement.click();
+
+		await editorPage.dismissKeyboard();
+
+		// Visual test check
+		screenshot = await takeScreenshot();
+		expect( screenshot ).toMatchImageSnapshot();
+
+		unsupportedBlock = await editorPage.getBlockAtPosition(
+			editorPage.blockNames.unsupported
+		);
+		await unsupportedBlock.click();
+		await editorPage.removeBlock();
+
+		await toggleDarkMode( editorPage.driver, false );
+
+		// The Android editor requires a restart to apply dark mode
+		if ( isAndroid() ) {
+			await editorPage.driver.resetApp();
+			await isEditorVisible( editorPage.driver );
+		}
+	} );
+
+	it( 'should be able to open the unsupported block web view editor', async () => {
+		await editorPage.setHtmlContent( e2eTestData.unsupportedBlockHtml );
+
+		const unsupportedBlock = await editorPage.getBlockAtPosition(
+			editorPage.blockNames.unsupported
+		);
+		await unsupportedBlock.click();
+
+		const helpButton = await editorPage.getUnsupportedBlockHelpButton();
+		await helpButton.click();
+
+		// Wait for the modal to show
+		await editorPage.driver.sleep( 3000 );
+
+		// Visual test check
+		const screenshot = await takeScreenshot();
+		expect( screenshot ).toMatchImageSnapshot();
+
+		// Disabled for now on Android see https://github.com/wordpress-mobile/gutenberg-mobile/issues/5321
+		if ( ! isAndroid() ) {
+			const editButton = await editorPage.getUnsupportedBlockBottomSheetEditButton();
+			await editButton.click();
+
+			const webView = await editorPage.getUnsupportedBlockWebView();
+			await expect( webView ).toBeTruthy();
+		}
+	} );
+} );
diff --git a/...l-test-for-gallery-block-should-be-able-to-render-a-gallery-correctly-1-ios.png b/...l-test-for-gallery-block-should-be-able-to-render-a-gallery-correctly-1-ios.png
diff --git a/...-gallery-block-should-be-able-to-render-the-placeholder-correctly-1-android.png b/...-gallery-block-should-be-able-to-render-the-placeholder-correctly-1-android.png
diff --git a/...-for-gallery-block-should-be-able-to-render-the-placeholder-correctly-1-ios.png b/...-for-gallery-block-should-be-able-to-render-the-placeholder-correctly-1-ios.png
diff --git a/...roup-block-should-show-the-empty-placeholder-for-the-unselected-state-1-ios.png b/...roup-block-should-show-the-empty-placeholder-for-the-unselected-state-1-ios.png
diff --git a/...r-test-suite-1-columns-block-allows-deep-nesting-to-at-least-3-levels-1-ios.png b/...r-test-suite-1-columns-block-allows-deep-nesting-to-at-least-3-levels-1-ios.png
diff --git a/...s-block-displays-correctly-in-portrait-and-landscape-orientations-1-android.png b/...s-block-displays-correctly-in-portrait-and-landscape-orientations-1-android.png
diff --git a/...lumns-block-displays-correctly-in-portrait-and-landscape-orientations-1-ios.png b/...lumns-block-displays-correctly-in-portrait-and-landscape-orientations-1-ios.png
diff --git a/...s-block-displays-correctly-in-portrait-and-landscape-orientations-2-android.png b/...s-block-displays-correctly-in-portrait-and-landscape-orientations-2-android.png
diff --git a/...lumns-block-displays-correctly-in-portrait-and-landscape-orientations-2-ios.png b/...lumns-block-displays-correctly-in-portrait-and-landscape-orientations-2-ios.png
diff --git a/...-test-suite-1-columns-block-displays-placeholders-when-unselected-1-android.png b/...-test-suite-1-columns-block-displays-placeholders-when-unselected-1-android.png
diff --git a/...itor-test-suite-1-columns-block-displays-placeholders-when-unselected-1-ios.png b/...itor-test-suite-1-columns-block-displays-placeholders-when-unselected-1-ios.png
diff --git a/...-test-suite-1-columns-block-displays-placeholders-when-unselected-2-android.png b/...-test-suite-1-columns-block-displays-placeholders-when-unselected-2-android.png
diff --git a/...itor-test-suite-1-columns-block-displays-placeholders-when-unselected-2-ios.png b/...itor-test-suite-1-columns-block-displays-placeholders-when-unselected-2-ios.png
diff --git a/...columns-block-displays-with-correct-colors-with-dark-mode-enabled-1-android.png b/...columns-block-displays-with-correct-colors-with-dark-mode-enabled-1-android.png
diff --git a/...e-1-columns-block-displays-with-correct-colors-with-dark-mode-enabled-1-ios.png b/...e-1-columns-block-displays-with-correct-colors-with-dark-mode-enabled-1-ios.png
diff --git a/...columns-block-displays-with-correct-colors-with-dark-mode-enabled-2-android.png b/...columns-block-displays-with-correct-colors-with-dark-mode-enabled-2-android.png
diff --git a/...e-1-columns-block-displays-with-correct-colors-with-dark-mode-enabled-2-ios.png b/...e-1-columns-block-displays-with-correct-colors-with-dark-mode-enabled-2-ios.png
diff --git a/...te-1-columns-block-mover-buttons-display-in-the-correct-positions-1-android.png b/...te-1-columns-block-mover-buttons-display-in-the-correct-positions-1-android.png
diff --git a/...-suite-1-columns-block-mover-buttons-display-in-the-correct-positions-1-ios.png b/...-suite-1-columns-block-mover-buttons-display-in-the-correct-positions-1-ios.png
diff --git a/...te-1-columns-block-mover-buttons-display-in-the-correct-positions-2-android.png b/...te-1-columns-block-mover-buttons-display-in-the-correct-positions-2-android.png
diff --git a/...-suite-1-columns-block-mover-buttons-display-in-the-correct-positions-2-ios.png b/...-suite-1-columns-block-mover-buttons-display-in-the-correct-positions-2-ios.png
diff --git a/...1-columns-block-sliders-display-proportionate-fill-level-previews-1-android.png b/...1-columns-block-sliders-display-proportionate-fill-level-previews-1-android.png
diff --git a/...ite-1-columns-block-sliders-display-proportionate-fill-level-previews-1-ios.png b/...ite-1-columns-block-sliders-display-proportionate-fill-level-previews-1-ios.png
diff --git a/...4-buttons-block-check-if-selection-caret-color-matches-font-color-1-android.png b/...4-buttons-block-check-if-selection-caret-color-matches-font-color-1-android.png
diff --git a/...ite-4-buttons-block-check-if-selection-caret-color-matches-font-color-1-ios.png b/...ite-4-buttons-block-check-if-selection-caret-color-matches-font-color-1-ios.png
diff --git a/...-test-js-gutenberg-editor-test-suite-4-buttons-block-edit-text-styles-1-ios.png b/...-test-js-gutenberg-editor-test-suite-4-buttons-block-edit-text-styles-1-ios.png
diff --git a/...or-test-suite-4-buttons-block-render-custom-text-and-background-color-1-ios.png b/...or-test-suite-4-buttons-block-render-custom-text-and-background-color-1-ios.png
diff --git a/...rg-editor-test-suite-4-buttons-block-render-gradient-background-color-1-ios.png b/...rg-editor-test-suite-4-buttons-block-render-gradient-background-color-1-ios.png
diff --git a/...uite-4-spacer-block-spacer-in-horizontal-layout-works-as-expected-1-android.png b/...uite-4-spacer-block-spacer-in-horizontal-layout-works-as-expected-1-android.png
diff --git a/...st-suite-4-spacer-block-spacer-in-horizontal-layout-works-as-expected-1-ios.png b/...st-suite-4-spacer-block-spacer-in-horizontal-layout-works-as-expected-1-ios.png
diff --git a/...lock-should-be-able-to-open-the-unsupported-block-web-view-editor-1-android.png b/...lock-should-be-able-to-open-the-unsupported-block-web-view-editor-1-android.png
diff --git a/...ed-block-should-be-able-to-open-the-unsupported-block-web-view-editor-1-ios.png b/...ed-block-should-be-able-to-open-the-unsupported-block-web-view-editor-1-ios.png
diff --git a/...ould-show-the-empty-placeholder-for-the-selected-unselected-state-1-android.png b/...ould-show-the-empty-placeholder-for-the-selected-unselected-state-1-android.png
diff --git a/...k-should-show-the-empty-placeholder-for-the-selected-unselected-state-1-ios.png b/...k-should-show-the-empty-placeholder-for-the-selected-unselected-state-1-ios.png
diff --git a/...ould-show-the-empty-placeholder-for-the-selected-unselected-state-2-android.png b/...ould-show-the-empty-placeholder-for-the-selected-unselected-state-2-android.png
diff --git a/...k-should-show-the-empty-placeholder-for-the-selected-unselected-state-2-ios.png b/...k-should-show-the-empty-placeholder-for-the-selected-unselected-state-2-ios.png
diff --git a/...-empty-placeholder-for-the-selected-unselected-state-in-dark-mode-1-android.png b/...-empty-placeholder-for-the-selected-unselected-state-in-dark-mode-1-android.png
diff --git a/...-the-empty-placeholder-for-the-selected-unselected-state-in-dark-mode-1-ios.png b/...-the-empty-placeholder-for-the-selected-unselected-state-in-dark-mode-1-ios.png
diff --git a/...-empty-placeholder-for-the-selected-unselected-state-in-dark-mode-2-android.png b/...-empty-placeholder-for-the-selected-unselected-state-in-dark-mode-2-android.png
diff --git a/...-the-empty-placeholder-for-the-selected-unselected-state-in-dark-mode-2-ios.png b/...-the-empty-placeholder-for-the-selected-unselected-state-in-dark-mode-2-ios.png
diff --git a/gutenberg b/gutenberg
diff --git a/src/test/videopress/upload.js b/src/test/videopress/upload.js
@@ -84,7 +84,7 @@ describe( 'VideoPress block - Uploads', () => {
 			initialHtml,
 		} );
 
-		fireEvent.press( getByText( 'ADD VIDEO' ) );
+		fireEvent.press( getByText( 'Add video' ) );
 
 		// Observe that media options picker is displayed
 		if ( Platform.isIOS ) {
@@ -143,7 +143,7 @@ describe( 'VideoPress block - Uploads', () => {
 		expect( block ).toBeVisible();
 
 		// Upload video from device
-		fireEvent.press( getByText( 'ADD VIDEO' ) );
+		fireEvent.press( getByText( 'Add video' ) );
 		selectOption( 'Choose from device' );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'video' ], false );
 
@@ -229,7 +229,7 @@ describe( 'VideoPress block - Uploads', () => {
 		expect( block ).toBeVisible();
 
 		// Add video from WordPress media library
-		fireEvent.press( getByText( 'ADD VIDEO' ) );
+		fireEvent.press( getByText( 'Add video' ) );
 		selectOption( 'WordPress Media Library' );
 		expectMediaPickerCall( 'SITE_MEDIA_LIBRARY', [ 'video' ], false );
 
@@ -296,7 +296,7 @@ describe( 'VideoPress block - Uploads', () => {
 		expect( block ).toBeVisible();
 
 		// Take a video and upload it
-		fireEvent.press( getByText( 'ADD VIDEO' ) );
+		fireEvent.press( getByText( 'Add video' ) );
 		selectOption( 'Take a Video' );
 		expectMediaPickerCall( 'DEVICE_CAMERA', [ 'video' ], false );
 
@@ -374,7 +374,7 @@ describe( 'VideoPress block - Uploads', () => {
 		expect( block ).toBeVisible();
 
 		// Insert video from URL
-		fireEvent.press( getByText( 'ADD VIDEO' ) );
+		fireEvent.press( getByText( 'Add video' ) );
 		selectOption( 'Insert from URL' );
 		expect( prompt ).toHaveBeenCalled();
 
@@ -514,7 +514,7 @@ describe( 'VideoPress block - Uploads', () => {
 		expect( block ).toBeVisible();
 
 		// Upload video from device
-		fireEvent.press( getByText( 'ADD VIDEO' ) );
+		fireEvent.press( getByText( 'Add video' ) );
 		selectOption( 'Choose from device' );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'video' ], false );
 
@@ -564,7 +564,7 @@ describe( 'VideoPress block - Uploads', () => {
 		expect( block ).toBeVisible();
 
 		// Upload video from device
-		fireEvent.press( getByText( 'ADD VIDEO' ) );
+		fireEvent.press( getByText( 'Add video' ) );
 		selectOption( 'Choose from device' );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'video' ], false );