Docs: Consolidate React Native documentation (#36685)

* Reorganize React Native documentation

Organizes all React Native documentation under a new folder at:

	Contributors Guide → Code → React Native

* Update links to new react-native locations

* Update docs/contributors/code/testing-overview.md

Co-authored-by: Alex Lende <[email protected]>

* Rename OSX to macOS

* Update manifest.json

Co-authored-by: Alex Lende <[email protected]>

docs/contributors/code/README.md

@@ -23,5 +23,5 @@ Browse [the issues list](https://github.com/wordpress/gutenberg/issues) to find
 - [Accessibility Testing](/docs/contributors/accessibility-testing.md) documents the process of testing accessibility in Gutenberg.
 - [Managing Packages](/docs/contributors/code/managing-packages.md) documents the process for managing the npm packages.
 - [Gutenberg Release Process](/docs/contributors/code/release.md) - a checklist for the different types of releases for the Gutenberg project.
-- [React Native mobile Gutenberg](/docs/contributors/code/native-mobile.md) - a guide on the React Native based mobile Gutenberg editor.
-- [React Native Integration Test Guide](/docs/contributors/code/native-mobile-integration-test-guide.md) - a guide on creating integration tests for the Gutenberg Mobile editor.
+- [React Native mobile editor](/docs/contributors/code/react-native/README.md) - a guide on contributing to the React Native mobile editor.
+- [React Native Integration Test Guide](/docs/contributors/code/react-native/integration-test-guide.md) - a guide on creating integration tests for the mobile editor.

docs/contributors/code/native-mobile.md → docs/contributors/code/react-native/README.md

@@ -1,6 +1,6 @@
-# React Native based mobile Gutenberg
+# React Native mobile editor
 
-Intertwined with the web codepaths, the Gutenberg repo also includes the [React Native](https://facebook.github.io/react-native/) based mobile tree.
+The Gutenberg repository includes the source for the [React Native](https://facebook.github.io/react-native/) based editor for mobile.
 
 ## Mind the mobile
 
@@ -12,7 +12,7 @@ The majority of the code shared with native mobile is in the very same JavaScrip
 
 ## Running Gutenberg Mobile on Android and iOS
 
-For instructions on how to run the **Gutenberg Mobile Demo App** on Android or iOS, see [Getting Started for the React Native based Mobile Gutenberg](/docs/contributors/code/getting-started-native-mobile.md)
+For instructions on how to run the **Gutenberg Mobile Demo App** on Android or iOS, see [Getting Started for the React Native based Mobile Gutenberg](/docs/contributors/code/react-native/getting-started-react-native.md)
 
 Also, the mobile client is packaged and released via the [official WordPress apps](https://wordpress.org/mobile/). Even though the build pipeline is slightly different then the mobile demo apps and lives in its own repo for now ([here's the native mobile repo](https://github.com/wordpress-mobile/gutenberg-mobile)), the source code itself is taken directly from this repo and the "web" side codepaths.
 
@@ -21,11 +21,11 @@ Also, the mobile client is packaged and released via the [official WordPress app
 If you encounter a failed Android/iOS test on your pull request, we recommend the following steps:
 
 1. Re-running the failed GitHub Action job ([guide for how to re-run](https://docs.github.com/en/actions/configuring-and-managing-workflows/managing-a-workflow-run#viewing-your-workflow-history)) - This should fix failed tests the majority of the time. Cases where you need to re-run tests for a pass should go down in the near future as flakiness in tests is actively being worked on. See the following GitHub issue for updated info on known failures: https://github.com/WordPress/gutenberg/issues/23949
-2. You can check if the test is failing locally by following the steps to run the E2E test on your machine from the [mobile getting started guide](/docs/contributors/code/getting-started-native-mobile.md#ui-tests), with even more relevant info in the [relevant directory README.md](https://github.com/WordPress/gutenberg/tree/HEAD/packages/react-native-editor/__device-tests__#running-the-tests-locally)
+2. You can check if the test is failing locally by following the steps to run the E2E test on your machine from the [mobile getting started guide](/docs/contributors/code/react-native/getting-started-react-native.md#ui-tests), with even more relevant info in the [relevant directory README.md](https://github.com/WordPress/gutenberg/tree/HEAD/packages/react-native-editor/__device-tests__#running-the-tests-locally)
 3. In addition to reading the logs from the E2E test, you can download a video recording from the Artifacts section of the GitHub job that may have additional useful information.
 4. Check if any changes in your PR would require corresponding changes to `.native.js` versions of files.
 5. Lastly, if you're stuck on a failing mobile test, feel free to reach out to contributors on Slack in the #mobile or #core-editor chats in the WordPress Core Slack, [free to join](https://make.wordpress.org/chat/).
 
 ## Debugging the native mobile unit tests
 
-Follow the instructions in [Native mobile testing](/docs/contributors/code/testing-overview.md#native-mobile-testing) to locally debug the native mobile unit tests when needed.
+Follow the instructions in [Native mobile testing](/docs/contributors/code/react-native/integration-test-guide.md) to locally debug the native mobile unit tests when needed.

docs/how-to-guides/native-mobile/osx-setup-guide.md → docs/contributors/code/react-native/osx-setup-guide.md

@@ -1,10 +1,10 @@
-# A first-time setup guide to native mobile development (OSX)
+# Setup guide for React Native development (macOS)
 
-Are you interested in contributing to native mobile development? This
+Are you interested in contributing to the native mobile editor? This
 guide is a detailed walk through designed to get you up and running!
 
 Note that the following instructions here are primarily focused on the
-OSX environment. For other environments, [the React Native quickstart documentation](https://reactnative.dev/docs/environment-setup)
+macOS environment. For other environments, [the React Native quickstart documentation](https://reactnative.dev/docs/environment-setup)
 has helpful pointers and steps for getting set up.
 
 ## Install Xcode
@@ -15,8 +15,9 @@ the XCode to both compile the iOS app and use the phone simulator app.
 Once it has been installed from the App Store, open it by visiting `Applications > Xcode`
 
 After opening the application:
-* Accept the license agreement.
-* Verify that `Xcode > Preferences > Locations > Command Line Tools` points at the current Xcode version.
+
+- Accept the license agreement.
+- Verify that `Xcode > Preferences > Locations > Command Line Tools` points at the current Xcode version.
 
 <img src="https://developer.wordpress.org/files/2021/10/xcode-command-line-tools.png" width="500" alt="Screenshot of XCode command line tools settings.">
 
@@ -41,17 +42,21 @@ Some good options are [nvm](https://github.com/nvm-sh/nvm) or [volta](https://vo
 Pick one and follow the install instructions noted on their website.
 
 Then run:
+
 ```sh
 nvm install lts/*
 nvm alias default lts/* #sets this as the default when opening a new terminal
 nvm use #switches to the project settings
 ```
+
 Or
+
 ```sh
 volta install node #defaults to installing lts
 ```
 
 Then install dependencies from your Gutenberg checkout folder:
+
 ```
 npm ci
 ```
@@ -95,6 +100,7 @@ npm run native start:reset #starts metro
 ```
 
 In another terminal type:
+
 ```
 npm run native ios
 ```
@@ -145,13 +151,16 @@ export PATH=$PATH:$ANDROID_HOME/emulator
 export PATH=$PATH:$ANDROID_HOME/tools
 export PATH=$PATH:$ANDROID_HOME/tools/bin
 export PATH=$PATH:$ANDROID_HOME/platform-tools
-````
+```
 
 Save then source, or open a new terminal to pick up changes.
+
 ```sh
 source ~/.zshrc
 ```
+
 or
+
 ```sh
 source ~/.bash_profile
 ```
@@ -230,7 +239,7 @@ If all things go well, it should look like:
 
 ### Android Integration Tests
 
-**Create a new virtual device()** that matches the device specified in [packages/react-native-editor/__device-tests__/helpers/caps.js](https://github.com/WordPress/gutenberg/blob/trunk/packages/react-native-editor/__device-tests__/helpers/caps.js#L30) At the time of this writing, this would be a Pixel 3 XL image, using Android 9 (API 28).
+**Create a new virtual device()** that matches the device specified in [packages/react-native-editor/**device-tests**/helpers/caps.js](https://github.com/WordPress/gutenberg/blob/trunk/packages/react-native-editor/__device-tests__/helpers/caps.js#L30) At the time of this writing, this would be a Pixel 3 XL image, using Android 9 (API 28).
 
 Start the virtual device first. Go back to the AVD by clicking on the phone icon, then click the green play button.
 

docs/contributors/code/testing-overview.md

@@ -397,11 +397,11 @@ To locally run the tests in debug mode, follow these steps:
 
 ### Native mobile end-to-end tests
 
-Contributors to Gutenberg will note that PRs include continuous integration E2E tests running the native mobile E2E tests on Android and iOS. For troubleshooting failed tests, check our guide on [native mobile tests in continuous integration](/docs/contributors/code/native-mobile.md#native-mobile-e2e-tests-in-continuous-integration). More information on running these tests locally can be found in [here](/packages/react-native-editor/__device-tests__/README.md).
+Contributors to Gutenberg will note that PRs include continuous integration E2E tests running the native mobile E2E tests on Android and iOS. For troubleshooting failed tests, check our guide on [native mobile tests in continuous integration](/docs/contributors/code/react-native/integration-test-guide.md). More information on running these tests locally can be found in [here](/packages/react-native-editor/__device-tests__/README.md).
 
 ### Native mobile integration tests
 
-There is an ongoing effort to add integration tests to the native mobile project using the [`react-native-testing-library`](https://testing-library.com/docs/react-native-testing-library/intro/) library. A guide to writing integration tests can be found [here](/docs/contributors/code/native-mobile-integration-test-guide.md).
+There is an ongoing effort to add integration tests to the native mobile project using the [`react-native-testing-library`](https://testing-library.com/docs/react-native-testing-library/intro/) library. A guide to writing integration tests can be found [here](/docs/contributors/code/react-native/integration-test-guide.md).
 
 ## End-to-end Testing
 

docs/manifest.json

@@ -335,12 +335,6 @@
  "markdown_source": "../docs/how-to-guides/metabox/meta-block-5-finishing.md",
  "parent": "metabox"
  },
- {
- "title": "A first-time setup guide to native mobile development (OSX)",
- "slug": "osx-setup-guide",
- "markdown_source": "../docs/how-to-guides/native-mobile/osx-setup-guide.md",
- "parent": "how-to-guides"
- },
  {
  "title": "Notices",
  "slug": "notices",
@@ -2040,22 +2034,28 @@
  "parent": "code"
  },
  {
- "title": "React Native based mobile Gutenberg",
- "slug": "native-mobile",
- "markdown_source": "../docs/contributors/code/native-mobile.md",
+ "title": "React Native mobile editor",
+ "slug": "react-native",
+ "markdown_source": "../docs/contributors/code/react-native/README.md",
  "parent": "code"
  },
  {
- "title": "React Native Integration Test Guide",
- "slug": "native-mobile-integration-test-guide",
- "markdown_source": "../docs/contributors/code/native-mobile-integration-test-guide.md",
- "parent": "code"
+ "title": "Getting Started for the React Native based Mobile Gutenberg",
+ "slug": "getting-started-react-native",
+ "markdown_source": "../docs/contributors/code/react-native/getting-started-react-native.md",
+ "parent": "react-native"
  },
  {
- "title": "Getting Started for the React Native based Mobile Gutenberg",
- "slug": "getting-started-native-mobile",
- "markdown_source": "../docs/contributors/code/getting-started-native-mobile.md",
- "parent": "code"
+ "title": "Setup guide for React Native development (macOS)",
+ "slug": "osx-setup-guide",
+ "markdown_source": "../docs/contributors/code/react-native/osx-setup-guide.md",
+ "parent": "react-native"
+ },
+ {
+ "title": "React Native Integration Test Guide",
+ "slug": "integration-test-guide",
+ "markdown_source": "../docs/contributors/code/react-native/integration-test-guide.md",
+ "parent": "react-native"
  },
  {
  "title": "Design Contributions",

docs/toc.json

@@ -109,7 +109,7 @@
  ]
  },
  {
- "docs/how-to-guides/javascript/README.md": [
+  "docs/how-to-guides/javascript/README.md": [
  {
  "docs/how-to-guides/javascript/plugins-background.md": []
  },
@@ -144,7 +144,6 @@
  }
  ]
  },
- { "docs/how-to-guides/native-mobile/osx-setup-guide.md": [] },
  { "docs/how-to-guides/notices/README.md": [] },
  {
  "docs/how-to-guides/sidebar-tutorial/plugin-sidebar-0.md": [
@@ -318,12 +317,18 @@
  { "docs/contributors/code/scripts.md": [] },
  { "docs/contributors/code/managing-packages.md": [] },
  { "docs/contributors/code/release.md": [] },
- { "docs/contributors/code/native-mobile.md": [] },
  {
- "docs/contributors/code/native-mobile-integration-test-guide.md": []
- },
- {
- "docs/contributors/code/getting-started-native-mobile.md": []
+ "docs/contributors/code/react-native/README.md": [
+ {
+ "docs/contributors/code/react-native/getting-started-react-native.md": []
+ },
+ {
+ "docs/contributors/code/react-native/osx-setup-guide.md": []
+ },
+ {
+ "docs/contributors/code/react-native/integration-test-guide.md": []
+ }
+ ]
  }
  ]
  },

packages/react-native-editor/README.md

@@ -4,7 +4,7 @@ This package provides a demo application to simplify the environment setup requi
 
 ## Getting Started
 
-Please review [Getting Started for the React Native based Mobile Gutenberg](/docs/contributors/code/getting-started-native-mobile.md) to learn how to set up and run this demo application.
+Please review [Getting Started for the React Native based Mobile Gutenberg](/docs/contributors/code/react-native/getting-started-react-native.md) to learn how to set up and run this demo application.
 
 ## License