云策 WordPress 开发者社区

块编辑器开发文档

React Native 移动编辑器

查看官方原文 ↗
💡 云策文档标注

概述

本文档介绍了 Gutenberg 仓库中基于 React Native 的移动编辑器，重点强调了在代码重构时需手动更新原生移动文件以避免客户端崩溃，并提供了运行、测试和调试移动编辑器的指导。

关键要点

  • Gutenberg 仓库包含基于 React Native 的移动编辑器源代码，需注意代码重构时手动更新原生移动文件，如函数或属性重命名，因为缺乏自动化工具支持。
  • 共享代码通常位于相同的 JavaScript 模块和 SASS 样式文件中，平台特定代码使用 .native.js、.native.scss、.android.js 或 .ios.js 文件变体。
  • 移动客户端通过官方 WordPress 应用打包发布，源代码直接从此仓库获取，构建管道略有不同。
  • 在持续集成中遇到移动端到端测试失败时，建议重新运行 GitHub Action 作业、本地测试、检查日志和视频，或联系 Slack 社区寻求帮助。
  • 调试原生移动单元测试可参考 Native mobile testing 文档，国际化信息详见 React Native Internationalization Guide。

代码示例

// 示例：平台特定文件命名
// 通用文件：editor.js
// 移动端特定：editor.native.js
// Android 特定：editor.android.js
// iOS 特定：editor.ios.js

注意事项

  • 贡献者需在代码重构时手动更新原生移动文件，否则可能导致移动客户端崩溃，目前依赖 CI 测试作为保障但尚不完善。
  • 移动端到端测试失败时，优先重新运行 GitHub Action 作业，多数情况下可解决问题。
  • 如需帮助，可加入 WordPress Core Slack 的 #mobile 或 #core-editor 频道联系贡献者。
📄 原文内容

The Gutenberg repository includes the source for the React Native based editor for mobile.

Mind the mobile

Contributors need to ensure that they update any affected native mobile files during code refactorings because we cannot yet rely on automated tooling to do this for us. For example, renaming a function or a prop should also be performed in the native modules too, otherwise, the mobile client will break. We have added some mobile specific CI tests as safeguards in place in PRs, but we’re still far from done. Please bear with us and thank you in advance. ❤️🙇‍

Native mobile specific files

The majority of the code shared with native mobile is in the very same JavaScript module and SASS style files. In the cases where the code paths need to diverge, a .native.js or .native.scss variant of the file is created. In some cases, platform specific files can be also found for Android (.android.js) or iOS (.ios.js).

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

Also, the mobile client is packaged and released via the official WordPress apps. 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), the source code itself is taken directly from this repo and the “web” side codepaths.

Native mobile E2E tests in Continuous Integration

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) – This should fix failed tests the majority of the time.
  2. You can check if the test is failing locally by following the steps to run the E2E test on your machine from the E2E testing documentation.
  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.

Debugging the native mobile unit tests

Follow the instructions in Native mobile testing to locally debug the native mobile unit tests when needed.

Internationalization (i18n)

Further information about this topic can be found in the React Native Internationalization Guide.