GutenbergKit

An experimental Gutenberg block editor for native iOS and Android apps relying upon web technologies.

Development

Preqrequisites

In order to build GutenbergKit, the following tools must be installed on your development machine:

• Node.js - Required for building the web app; recommend using Node Version Manager.
• Xcode - Required if building iOS demo app.
• Android Studio - Required if building Android demo app.

Web App

Install the GutenbergKit dependencies and start the development server by running the following command in your terminal:

make dev-server

Once finished, the web app can now be accessed in your browser by visiting the URL logged in your terminal. However, it is recommended to use a native host app for testing the changes made to the editor for a more realistic experience. A demo app is included in the GutenbergKit package, along with instructions on how to use it below.

Demo App

This demo app is useful for quickly testing changes made to the editor. By default, the demo app uses a production build of the web app bundled with the GutenbergKit package—i.e., the output of the project's make build command. During development, however, it is more useful to run the web app with a server and provide the server URL as an environment variable for the demo app, so that changes are displayed in the app immediately.

iOS

1. Start the development server by running make dev-server.
2. Launch Xcode and open the ios/Demo-iOS/Gutenberg.xcodeproj project.
3. Select the Gutenberg target.
4. Navigate to Product → Scheme → Edit Scheme.
5. Add an environment variable named GUTENBERG_EDITOR_URL with the URL of the development server.
6. Run the app.

Example Xcode environment variable

Android

1. Start the development server by running make dev-server.
2. Launch Android Studio and open the android project.
3. Modify the android/local.properties file to include an environment variable named GUTENBERG_EDITOR_URL with the URL of the development server.
4. Run the app.

Example Android local.properties

GUTENBERG_EDITOR_URL=http://<YOUR_LOCAL_IP>:5173/

Testing

To run the JavaScript tests, run the following command in your terminal:

make test-js

To run the Swift tests, run the following command in your terminal:

make test-swift

To run the Android tests, run the following command in your terminal:

make test-android

Production

To build GutenbergKit for production run the following command in your terminal:

make build

Once finished, the Swift and Kotlin packages are ready to publish. Consuming iOS or Android host apps can then include the GutenbergKit package as a dependency.

Remote Editor

By default, GutenbergKit utilizes local @wordpress modules. This approach is similar to most modern web applications, where the @wordpress modules are bundled with the application. To enable support for non-core blocks, GutenbergKit can be configured to use remote @wordpress modules, where the @wordpress modules and plugin-provided editor assets are fetched from a site's remote server. At this time, this functionality is partially implemented and may not work as expected.

The make build command builds both the local and remote editors by default. To load the remote editor, you must enable the plugins configuration option within the Demo app.

Additionally, a make dev-server-remote command is available for serving the latest remote editor changes through a development server. To load the development server in the Demo app, add an environment variable named GUTENBERG_EDITOR_REMOTE_URL with the URL of the development server plus /remote.html—i.e., http://<YOUR_LOCAL_IP>:5173/remote.html.

Tip

The remote editor redirects to the local editor when loading fails. If you need to debug the failure, temporarily remove the window.location redirect in src/remote.jsx and src/utils/remote-editor.js.