Add block inserter flag and initial infrastructure by kean · Pull Request #193 · wordpress-mobile/GutenbergKit

kean · 2025-10-09T14:56:49Z

What?

Add isNativeInserterEnabled flag to EditorConfiguration
Add the initial infrastructure to show the native inserter
Update the demo to show the editor as a modal sheet to match the way it's used in the app

Part of #162.

Testing Instructions

See recording

Screenshots or screencast

Screen.Recording.2025-10-09.at.10.56.08.AM.mov

kean · 2025-10-09T14:57:55Z

ios/Demo-iOS/Gutenberg.xcodeproj/xcshareddata/xcschemes/Gutenberg.xcscheme

            key = "GUTENBERG_EDITOR_URL"
            value = "http://localhost:5173/"
-            isEnabled = "NO">
+            isEnabled = "YES">


Since #191 (comment), should we enable GUTENBERG_EDITOR_URL by default? I keep doing this every time I work on the editor.

Sounds good to me. However, let's also enable the GUTENBERG_EDITOR_REMOTE_URL environment variable as well.

We should also update the README documentation to match the new default settings. The README recently changed. I suggest rebasing this atop the latest trunk branch and applying the following diff

diff --git a/README.md b/README.md index 977bcba..9993c75 100644 --- a/README.md +++ b/README.md @@ -26,17 +26,19 @@ Once finished, the web app can now be accessed in your browser by visiting the U ### 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. +This demo app is useful for quickly testing changes made to the editor. #### iOS +The iOS demo app loads the development server by default. + 1. Start the development server by running `make dev-server`. 1. Launch Xcode and open the `ios/Demo-iOS/Gutenberg.xcodeproj` project. 1. Select the `Gutenberg` target. -1. Navigate to _Product_ → _Scheme_ → _Edit Scheme_. -1. Add an environment variable named `GUTENBERG_EDITOR_URL` with the development server URL. 1. Run the app. +Alternatively, you can load a production build of the web app bundled with the GutenbergKit package by running `make build` and disabling the `GUTENBERG_EDITOR_URL` environment variable by navigating to _Product_ → _Scheme_ → _Edit Scheme_ in Xcode. + <details> <summary>Example Xcode environment variable</summary> @@ -46,6 +48,8 @@ This demo app is useful for quickly testing changes made to the editor. By defau #### Android +The Android demo app loads the production build of the web app bundled with the GutenbergKit package by default—i.e., the output of the project's `make build` command). It can be configured to load the development server by setting a `GUTENBERG_EDITOR_URL` environment variable in the `android/local.properties` file. + 1. Start the development server by running `make dev-server`. 1. Launch Android Studio and open the `android` project. 1. Modify the `android/local.properties` file to include an environment variable named `GUTENBERG_EDITOR_URL` with the development server URL.

Enabled, and I updated the README as well.

kean · 2025-10-09T14:58:25Z

ios/Demo-iOS/Sources/ContentView.swift

-        #warning("1. Update the siteURL and authHeader values below")
-        #warning("2. Install the Jetpack plugin to the site")
+        // Steps:
+        // 1. Update the siteURL and authHeader values below


These shouldn't be warnings.

kean · 2025-10-09T14:58:49Z

ios/Demo-iOS/Sources/EditorView.swift

    private let configuration: EditorConfiguration

    @State private var viewModel = EditorViewModel()
-    @State private var editorViewController: EditorViewController?


Follow-up to the previous PR

kean · 2025-10-09T15:01:28Z

src/components/editor-toolbar/style.scss

 }
+
+// Style the add block button with rounded black background
+.gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {


I don't feel strongly about it, but ToolbarButton needed some design. I don't think it needs to stand out as much as it currently does (a single black spot on the entire screen).

I think this is fine for now. Eventually, we need to consideration Android design patterns.

kean · 2025-10-09T15:02:02Z

src/utils/bridge.js

+export function showBlockInserter() {
+	const blocks = getBlockTypes().map( ( blockType ) => {
+		return {
+			name: blockType.name,


Only passing the information we need to show the editor (except for the icons – we'll need to figure out how to manage those).

dcalhoun

Looks like a solid start. I left a few suggestions, but approving because this worked as expected for me.

dcalhoun · 2025-10-10T16:47:40Z

ios/Demo-iOS/Gutenberg.xcodeproj/xcshareddata/xcschemes/Gutenberg.xcscheme

            key = "GUTENBERG_EDITOR_URL"
            value = "http://localhost:5173/"
-            isEnabled = "NO">
+            isEnabled = "YES">


Sounds good to me. However, let's also enable the GUTENBERG_EDITOR_REMOTE_URL environment variable as well.

We should also update the README documentation to match the new default settings. The README recently changed. I suggest rebasing this atop the latest trunk branch and applying the following diff

diff --git a/README.md b/README.md index 977bcba..9993c75 100644 --- a/README.md +++ b/README.md @@ -26,17 +26,19 @@ Once finished, the web app can now be accessed in your browser by visiting the U ### 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. +This demo app is useful for quickly testing changes made to the editor. #### iOS +The iOS demo app loads the development server by default. + 1. Start the development server by running `make dev-server`. 1. Launch Xcode and open the `ios/Demo-iOS/Gutenberg.xcodeproj` project. 1. Select the `Gutenberg` target. -1. Navigate to _Product_ → _Scheme_ → _Edit Scheme_. -1. Add an environment variable named `GUTENBERG_EDITOR_URL` with the development server URL. 1. Run the app. +Alternatively, you can load a production build of the web app bundled with the GutenbergKit package by running `make build` and disabling the `GUTENBERG_EDITOR_URL` environment variable by navigating to _Product_ → _Scheme_ → _Edit Scheme_ in Xcode. + <details> <summary>Example Xcode environment variable</summary> @@ -46,6 +48,8 @@ This demo app is useful for quickly testing changes made to the editor. By defau #### Android +The Android demo app loads the production build of the web app bundled with the GutenbergKit package by default—i.e., the output of the project's `make build` command). It can be configured to load the development server by setting a `GUTENBERG_EDITOR_URL` environment variable in the `android/local.properties` file. + 1. Start the development server by running `make dev-server`. 1. Launch Android Studio and open the `android` project. 1. Modify the `android/local.properties` file to include an environment variable named `GUTENBERG_EDITOR_URL` with the development server URL.

dcalhoun · 2025-10-10T17:03:57Z

ios/Demo-iOS/Sources/ContentView.swift

-                    EditorView(configuration: .default)
-                } label: {
-                    Text("Bundled Editor")
+                Button("Show Editor") {


I suggest retaining "bundled" somewhere to differentiate from the remote editors and remain aligned with Android's demo app/project documentation.

Sounds good; done.

dcalhoun · 2025-10-10T17:15:14Z

src/components/editor-toolbar/index.jsx

+				if ( isInserterOpened ) {
+					setIsInserterOpened( false );
+				}


Is this achieving a specific outcome?

It hides the previously selected sheet. The web-based inserter does the same thing, so I implemented it for the new inserter as well.

<Inserter popoverProps={ { 'aria-modal': true, role: 'dialog', } } open={ isInserterOpened } onToggle={ setIsInserterOpened } />

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-10-20.at.11.00.23.mov

dcalhoun · 2025-10-10T17:16:42Z

src/components/editor-toolbar/style.scss

+		display: block;
+	}
+
+	// width: 50px;


This commented code should likely be removed.

dcalhoun · 2025-10-10T17:17:39Z

src/components/editor-toolbar/style.scss

 }
+
+// Style the add block button with rounded black background
+.gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {


I think this is fine for now. Eventually, we need to consideration Android design patterns.

dcalhoun · 2025-10-10T17:19:30Z

src/components/editor-toolbar/style.scss

+	svg {
+		background: #eae9ec;
+		border-radius: 18px;
+		color: wordpress.$black;
+		padding: 1px;
+		width: 32px;
+		height: 32px;
+		display: block;
+	}


I suggest we place this after the attributes declared for .gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button. I.e., move this after the current line 88.

dcalhoun · 2025-10-20T20:27:49Z

src/utils/bridge.js

 import { debug } from './logger';
 import { isDevMode } from './dev-mode';
 import { basicFetch } from './fetch';
+import { getBlockTypes } from '@wordpress/blocks';


While rebasing #197, I discovered this import is problematic for the "remote" editor, which currently fails to load. The import results in a reference to window.wp.blocks before this global is defined by scripts loaded from the remote site.

I'll create a PR addressing this, likely by splitting (or "chunking") this bridge method from the rest.

kean commented Oct 9, 2025

View reviewed changes

kean requested a review from dcalhoun October 9, 2025 15:02

dcalhoun approved these changes Oct 10, 2025

View reviewed changes

kean added 7 commits October 20, 2025 10:38

Add initial infrastructureto show native block inseter

064d944

Remove unused state

a36286a

Revert

45acafd

Add a way to configure the remote editor

85d95e2

Remove warnings

c14bdb6

Fix lint errors

492b480

Update README

7e9157d

kean force-pushed the task/block-inseter-flag branch from c0b3604 to 7e9157d Compare October 20, 2025 15:00

kean added 2 commits October 20, 2025 11:01

Enable GUTENBERG_EDITOR_REMOTE_URL

44fce46

Update CSS

f770ff3

kean enabled auto-merge (squash) October 20, 2025 15:04

kean merged commit 3b8a4ba into trunk Oct 20, 2025
11 checks passed

kean deleted the task/block-inseter-flag branch October 20, 2025 15:14

dcalhoun reviewed Oct 20, 2025

View reviewed changes

dcalhoun mentioned this pull request Oct 21, 2025

fix: Defer remote editor references to @wordpress modules #198

Merged

Conversation

kean commented Oct 9, 2025

What?

Testing Instructions

Screenshots or screencast

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kean Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dcalhoun left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dcalhoun Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kean Oct 9, 2025 •

edited

Loading

dcalhoun Oct 20, 2025 •

edited

Loading