Merge trunk

RELEASE-NOTES.txt

@@ -1,5 +1,9 @@
 Unreleased
 ---
+* [**] [internal] Upgrade React Native to version 0.73.3 [https://github.com/wordpress-mobile/gutenberg-mobile/pull/6590]
+
+1.114.0
+---
 * [**] Introduce VideoPress v5 support, to fix issues using video block with dotcom and Jetpack sites [https://github.com/wordpress-mobile/gutenberg-mobile/pull/6634]
 * [*] Prevent crash when autoscrolling to blocks [https://github.com/WordPress/gutenberg/pull/59110]
 * [*] Remove opacity change when images are being uploaded [https://github.com/WordPress/gutenberg/pull/59264]

WPiOS Integration.md

@@ -36,10 +36,10 @@ LOCAL_GUTENBERG=../../xyz/gutenberg-mobile bundle exec pod install
 
 Assuming that there is no open WPiOS PR:
 
-1. Open `Podfile` in WPiOS project
-2. Find the line where gutenberg reference is set like: `gutenberg :tag => 'vX.YY.Z'`
+1. Open `Gutenberg/config.yml` from the root of WPiOS directory
+2. Find the line where gutenberg reference is set: `tag: v1.110.0`
 3. Find latest commit hash of the `gutenberg-mobile` PR
-4. Replace the gutenberg reference with the commit hash: `gutenberg :commit => '123456789'`
+4. Remove the line referencing the tag (e.g., `tag: v1.110.0`) and add a line referencing the commit: `commit: 123456789`
 5. Run `bundle exec pod install` inside WPiOS
 6. Switch to the relevant branch in `gutenberg-mobile`and start the metro server with `npm run start:reset`
 7. Launch the WPiOS workspace (`.xcworkspace`) in Xcode and run the app
@@ -58,7 +58,7 @@ Assuming that there is no open WPiOS PR:
 14. Merge the `gutenberg-mobile` PR (make sure the bundles are up-to-date before merging)
 15. Tag the merge commit bumping the latest tag's minor version and adding an `-alphaQ` to the end like: `v1.50.0 -> v1.51.0-alpha1`
 16. If there's already an alpha, the alpha version could be increased like: `v1.51.0-alpha1` -> `v1.51.0-alpha2`
-17. Open the `Podfile` again and update the gutenberg reference to use the new alpha tag: `gutenberg :tag => 'v1.51.0-alpha2'`
+17. Open the `Gutenberg/config.yml` again and update the gutenberg reference to use the new alpha tag: `tag: v1.51.0-alpha2`
 18. Run `bundle exec pod install`
 19. Commit and push the changes to `Podfile` and `Podfile.lock` 
 

__device-tests__/gutenberg-editor-functionality-test-4-visual.test.js

@@ -60,10 +60,11 @@ describe( 'Gutenberg Editor - Test Suite 4', () => {
 
 			// Visual test check
 			const screenshot = await takeScreenshot();
-			expect( screenshot ).toMatchImageSnapshot();
 
 			// Clean up test
 			await toggleDarkMode( editorPage.driver, false );
+
+			expect( screenshot ).toMatchImageSnapshot();
 		} );
 	} );
 
@@ -233,10 +234,11 @@ describe( 'Gutenberg Editor - Test Suite 4', () => {
 			} else {
 				screenshot = await takeScreenshot();
 			}
-			expect( screenshot ).toMatchImageSnapshot();
 
 			// Clean up test
 			await toggleDarkMode( editorPage.driver, false );
+
+			expect( screenshot ).toMatchImageSnapshot();
 		} );
 	} );
 
@@ -342,10 +344,11 @@ describe( 'Gutenberg Editor - Test Suite 4', () => {
 
 			// Visual test check
 			const screenshot = await takeScreenshot();
-			expect( screenshot ).toMatchImageSnapshot();
 
 			// Clean up test
 			await toggleDarkMode( editorPage.driver, false );
+
+			expect( screenshot ).toMatchImageSnapshot();
 		} );
 	} );
 } );

__device-tests__/gutenberg-editor-gallery-visual.test.js

@@ -2,7 +2,8 @@
  * Internal dependencies
  */
 const { blockNames } = editorPage;
-import { takeScreenshot } from './utils';
+const { toggleDarkMode } = e2eUtils;
+import { takeScreenshot, takeScreenshotByElement } from './utils';
 
 describe( 'Gutenberg Editor Visual test for Gallery Block', () => {
 	it( 'should be able to render the placeholder correctly', async () => {
@@ -31,4 +32,22 @@ describe( 'Gutenberg Editor Visual test for Gallery Block', () => {
 		const screenshot = await takeScreenshot();
 		expect( screenshot ).toMatchImageSnapshot();
 	} );
+
+	it( 'should display correct colors for dark mode', async () => {
+		await toggleDarkMode( editorPage.driver, true );
+		await editorPage.initializeEditor( {
+			initialData: [ e2eTestData.galleryBlockTwoImages ].join( '\n\n' ),
+		} );
+
+		const block = await editorPage.selectBlock(
+			await editorPage.getBlockAtPosition( blockNames.gallery )
+		);
+		await editorPage.driver.pause( 5000 ); // Wait for images to load
+
+		const screenshot = await takeScreenshotByElement( block, {
+			padding: 7,
+		} );
+		await toggleDarkMode( editorPage.driver, false );
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
 } );

__device-tests__/gutenberg-editor-media-text-visual.test.js

@@ -0,0 +1,39 @@
+/**
+ * Internal dependencies
+ */
+const { blockNames } = editorPage;
+const { toggleDarkMode } = e2eUtils;
+import { takeScreenshotByElement } from './utils';
+
+const mediaTextBlock = `<!-- wp:media-text -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->`;
+
+describe( 'Gutenberg Editor Visual test for Media & Text Block', () => {
+	it( 'should display correct colors for dark mode', async () => {
+		await toggleDarkMode( editorPage.driver, true );
+		await editorPage.initializeEditor( {
+			initialData: mediaTextBlock,
+		} );
+
+		const tapOutsideMediaButton = {
+			offset: {
+				x: ( width ) => Math.floor( width * -0.5 + 20 ),
+				y: ( height ) => Math.floor( height * -0.5 + 20 ),
+			},
+		};
+
+		const block = await editorPage.selectBlock(
+			await editorPage.getBlockAtPosition( blockNames.mediaText ),
+			tapOutsideMediaButton
+		);
+
+		const screenshot = await takeScreenshotByElement( block, {
+			padding: 7,
+		} );
+		await toggleDarkMode( editorPage.driver, false );
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
+} );

__device-tests__/gutenberg-editor-quote-visual.test.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+const { blockNames } = editorPage;
+const { toggleDarkMode } = e2eUtils;
+import { takeScreenshotByElement } from './utils';
+
+const quoteBlock = `<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Hello, world!</p>
+<!-- /wp:paragraph --><cite>A person</cite></blockquote>
+<!-- /wp:quote -->`;
+
+describe( 'Gutenberg Editor Visual test for Quote Block', () => {
+	it( 'should display correct colors for dark mode', async () => {
+		await toggleDarkMode( editorPage.driver, true );
+		await editorPage.initializeEditor( {
+			initialData: quoteBlock,
+		} );
+
+		const block = await editorPage.getBlockAtPosition( blockNames.quote );
+		const screenshot = await takeScreenshotByElement( block, {
+			padding: 7,
+		} );
+		await toggleDarkMode( editorPage.driver, false );
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
+} );

__device-tests__/gutenberg-editor-shortcode-visual.test.js

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+const { blockNames } = editorPage;
+const { toggleDarkMode } = e2eUtils;
+import { takeScreenshotByElement } from './utils';
+
+const shortcodeBlock = `<!-- wp:shortcode /-->`;
+
+describe( 'Gutenberg Editor Visual test for Shortcode Block', () => {
+	it( 'should display correct colors for dark mode', async () => {
+		await toggleDarkMode( editorPage.driver, true );
+		await editorPage.initializeEditor( {
+			initialData: shortcodeBlock,
+		} );
+
+		const block = await editorPage.getBlockAtPosition(
+			blockNames.shortcode
+		);
+		const screenshot = await takeScreenshotByElement( block );
+		await toggleDarkMode( editorPage.driver, false );
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
+} );

bin/i18n-update.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-# 
+#
 # Handles the process of updating the i18n localizations of plugins, including Gutenberg.
 # The main goals of this command are:
 #
@@ -127,8 +127,19 @@ npm run build:gutenberg
 # - VideoPress package
 ./bin/run-jetpack-command.sh "-C projects/packages/videopress build"
 
-# Extract used strings for plugins
-METRO_CONFIG="metro.config.js" node gutenberg/packages/react-native-editor/bin/extract-used-strings "$USED_STRINGS_PATH" "${PLUGINS[@]}"
+# Extract used strings for plugins, adapt relative paths for changing directories
+PLUGINS_WITH_ADAPTED_PATHS=()
+for (( index=0; index<${#PLUGINS[@]}; index+=3 )); do
+  PLUGIN_NAME=${PLUGINS[index]}
+  PROJECT_SLUG=${PLUGINS[index+1]}
+  PLUGIN_FOLDER=${PLUGINS[index+2]}
+
+  ADJUSTED_PLUGIN_FOLDER="../../../$PLUGIN_FOLDER"
+  PLUGINS_WITH_ADAPTED_PATHS+=( "$PLUGIN_NAME" "$PROJECT_SLUG" "$ADJUSTED_PLUGIN_FOLDER" )
+done
+pushd gutenberg/packages/react-native-editor > /dev/null
+METRO_CONFIG="../../../metro.config.js" node bin/extract-used-strings "../../../$USED_STRINGS_PATH" "${PLUGINS_WITH_ADAPTED_PATHS[@]}"
+popd > /dev/null
 
 # Download translations of plugins (i.e. Jetpack)
 for (( index=0; index<${#PLUGINS[@]}; index+=3 )); do
@@ -145,4 +156,4 @@ echo -e "\n\033[1mGenerating localization strings files\033[0m"
 
 # Generate localization strings files
 ./bin/strings2android.js bundle/android/strings.xml "$USED_STRINGS_PATH"
-./bin/strings2swift.js bundle/ios/GutenbergNativeTranslations.swift "$USED_STRINGS_PATH"
+./bin/strings2swift.js bundle/ios/GutenbergNativeTranslations.swift "$USED_STRINGS_PATH"

bundle/android/strings.xml

@@ -33,6 +33,7 @@
     <string name="gutenberg_native_add_url" tools:ignore="UnusedResources">Add URL</string>
     <string name="gutenberg_native_add_video" tools:ignore="UnusedResources">Add video</string>
     <string name="gutenberg_native_address_settings" tools:ignore="UnusedResources">Address Settings</string>
+    <string name="gutenberg_native_alt_text" tools:ignore="UnusedResources">Alt Text</string>
     <string name="gutenberg_native_alternatively_you_can_convert_the_content_to_blocks" tools:ignore="UnusedResources">Alternatively, you can convert the content to blocks.</string>
     <string name="gutenberg_native_alternatively_you_can_detach_and_edit_this_block_separately_by_ta" tools:ignore="UnusedResources">Alternatively, you can detach and edit this block separately by tapping “Detach”.</string>
     <!-- translators: Alternative option included in a warning related to having blocks deeply nested. -->
@@ -48,7 +49,7 @@
     <!-- translators: displays audio file extension. e.g. MP3 audio file -->
     <string name="gutenberg_native_audio_file" tools:ignore="UnusedResources">audio file</string>
     <string name="gutenberg_native_audio_player" tools:ignore="UnusedResources">Audio Player</string>
-    <string name="gutenberg_native_autoplay_may_cause_usability_issues_for_some_users" tools:ignore="UnusedResources">Autoplay may cause usability issues for some users</string>
+    <string name="gutenberg_native_autoplay_may_cause_usability_issues_for_some_users" tools:ignore="UnusedResources">Autoplay may cause usability issues for some users.</string>
     <string name="gutenberg_native_block_cannot_be_rendered_because_it_is_deeply_nested_tap_here_for" tools:ignore="UnusedResources">Block cannot be rendered because it is deeply nested. Tap here for more details.</string>
     <!-- translators: displayed right after the block is copied. -->
     <string name="gutenberg_native_block_copied" tools:ignore="UnusedResources">Block copied</string>
@@ -314,6 +315,9 @@ translators: %s: Select control button label e.g. "Button width" -->
     <string name="gutenberg_native_replace_video" tools:ignore="UnusedResources">Replace video</string>
     <string name="gutenberg_native_retry" tools:ignore="UnusedResources">Retry</string>
     <string name="gutenberg_native_rich_text_editing" tools:ignore="UnusedResources">Rich text editing</string>
+    <!-- translators: Block name. %s: The localized block name
+translators: %s: Block name e.g. "Image block" -->
+    <string name="gutenberg_native_s_block" tools:ignore="UnusedResources">%s block</string>
     <!-- translators: displayed right after the classic block is converted to blocks. %s: The localized classic block name -->
     <string name="gutenberg_native_s_block_converted_to_blocks" tools:ignore="UnusedResources">\'%s\' block converted to blocks</string>
     <!-- translators: accessibility text for the media block empty state. %s: media type -->

bundle/ios/GutenbergNativeTranslations.swift

@@ -6,6 +6,7 @@ private func dummy() {
     _ = NSLocalizedString("%1$s transformed to %2$s", comment: "translators: 1: From block title, e.g. Paragraph. 2: To block title, e.g. Header.")
     _ = NSLocalizedString("%1$s. %2$s is %3$s %4$s.", comment: "translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels)")
     _ = NSLocalizedString("%1$s. Currently selected: %2$s", comment: "translators:  %1$s: Select control button label e.g. \"Button width\". %2$s: Select control option value e.g: \"Auto, 25%\".")
+    _ = NSLocalizedString("%s block", comment: "translators: Block name. %s: The localized block name\ntranslators: %s: Block name e.g. \"Image block\"")
     _ = NSLocalizedString("%s block options", comment: "translators: %s: block title e.g: \"Paragraph\".")
     _ = NSLocalizedString("%s block, newly available", comment: "translators: Newly available block name. %s: The localized block name")
     _ = NSLocalizedString("%s block. Empty", comment: "translators: accessibility text for the media block empty state. %s: media type")
@@ -43,6 +44,7 @@ private func dummy() {
     _ = NSLocalizedString("Add URL", comment: "")
     _ = NSLocalizedString("Add video", comment: "")
     _ = NSLocalizedString("Address Settings", comment: "")
+    _ = NSLocalizedString("Alt Text", comment: "")
     _ = NSLocalizedString("Alternatively, you can convert the content to blocks.", comment: "")
     _ = NSLocalizedString("Alternatively, you can detach and edit this block separately by tapping “Detach”.", comment: "")
     _ = NSLocalizedString("Alternatively, you can flatten the content by ungrouping the block.", comment: "translators: Alternative option included in a warning related to having blocks deeply nested.")
@@ -54,7 +56,7 @@ private func dummy() {
     _ = NSLocalizedString("Audio caption. Empty", comment: "translators: accessibility text. Empty Audio caption.")
     _ = NSLocalizedString("audio file", comment: "translators: displays audio file extension. e.g. MP3 audio file")
     _ = NSLocalizedString("Audio Player", comment: "")
-    _ = NSLocalizedString("Autoplay may cause usability issues for some users", comment: "")
+    _ = NSLocalizedString("Autoplay may cause usability issues for some users.", comment: "")
     _ = NSLocalizedString("Block cannot be rendered because it is deeply nested. Tap here for more details.", comment: "")
     _ = NSLocalizedString("Block copied", comment: "translators: displayed right after the block is copied.")
     _ = NSLocalizedString("Block cut", comment: "translators: displayed right after the block is cut.")

ios-xcframework/Podfile

@@ -20,7 +20,7 @@ def setup_rnreanimated_pod_from_fork
   puts "[Gutenberg] Set REACT_NATIVE_NODE_MODULES_DIR env var for RNReanimated to #{rn_node_modules}"
 
   # Use a custom RNReanimated version while we coordinate a fix upstream
-  pod 'RNReanimated', git: 'https://github.com/wordpress-mobile/react-native-reanimated', branch: 'wp-fork-2.17.0'
+  pod 'RNReanimated', git: 'https://github.com/wordpress-mobile/react-native-reanimated', branch: 'wp-fork-3.6.2'
 end
 
 def gutenberg_dependencies
@@ -78,12 +78,6 @@ end
 post_install do |installer|
   react_native_post_install(installer, REACT_NATIVE_PATH)
 
-  # The following workaround is needed to avoid the error `typedef redefinition with different types ('uint8_t' (aka 'unsigned char') vs 'enum clockid_t')`.
-  # This solution is referenced in https://github.com/facebook/react-native/issues/39568#issuecomment-1762890606.
-  # It will be needed until RCT-Folly version is bumped in React Native to version v2022.08.29.00 or above.
-  # Referece: https://github.com/facebook/folly/commit/4a2410fae65afb85e1fec6d922005054b05de59f
-  __apply_Xcode_12_5_M1_post_install_workaround(installer)
-
   installer.pods_project.targets.each do |target|
     # Work around issue with embedding the Hermes XCFramework
     #