Skip to content

Add native block inserter #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: trunk
Choose a base branch
from
Open

Add native block inserter #162

wants to merge 6 commits into from

Conversation

kean
Copy link
Contributor

@kean kean commented Aug 1, 2025

What?

Implements a native iOS block inserter UI to replace the web-based block inserter in the editor.

Why?

< see the respective P2 post >

How?

  • Added a new native SwiftUI-based block inserter (BlockInserterView) that provides a searchable,
    categorized view of available blocks with first-class media support and native API integration
  • Implemented a search engine (SearchEngine) that supports fuzzy matching and scoring for block
    discovery
  • Created a bridge between JavaScript and native iOS code to handle block insertion requests
  • The native inserter supports media selection through the iOS photo picker and file importer

Testing Instructions

Important

  • Enable enableNativeBlockInserter (enabled in demo)
  • Enable the local dev server (I haven't recompiled the app)

Integration PR in wpios: wordpress-mobile/WordPress-iOS#24708

  1. Open the GutenbergKit iOS demo app and enable the local server
  2. Enable the native block inserter by setting enableNativeBlockInserter: true in the editor
    configuration
  3. Tap the "+" button in the editor toolbar
  4. Verify the native block inserter sheet appears with categorized blocks
  5. Search for blocks using the search bar and verify fuzzy matching works
  6. Select different block types and verify they are inserted into the editor
  7. Test media blocks (Image, Video, Audio) by selecting from photo library
  8. Test file blocks by importing files
  9. Verify that disabling enableNativeBlockInserter reverts to the web-based inserter

Missing

  • Icons: I've used native SF symbols because there is no good way to render SVG on iOS. Ideally, we probably want to render the icons from Gutenberg. I'd consider it a nice-to-have as most users only interact with a handful of blocks.
  • Patterns: I haven't added support for patterns, but I hope we can render them in the same way as blocks. Maybe without the HTML previews. Alternative options: add "Patterns" to the "More" menu and close the native sheet and invoke the bridge to open patterns inside the web view.
  • Media: I've connected all the media pickers, added a new gbk-local URL scheme to allow the WKWebView to access the uploaded files from disk, and added basic image/gallery/block/insertion. I didn't add the code to trigger the actual upload – couldn't figure it out.
  • Resize image before upload according to the app's settings? I want full-size on my blog...
  • Figure out how to handle context-specific blocks like core/list-item – do not show them?
  • Consider showing it as a popover on iPad
  • When the block is inserter, and the selected block is an empty paragraph, replace the paragraph with a new block
  • Find a better way to reorder blocks/groups to ensure we present blocks that are more often used on mobile first

Screenshot

inserter-01 inserter-02 inserter-03 inserter-04

Demo

demo.mov

@kean kean force-pushed the task/native-block-inserter branch from b2f92e3 to 1dac78c Compare August 1, 2025 17:59
@@ -5,7 +5,7 @@ import PackageDescription

let package = Package(
name: "GutenbergKit",
platforms: [.iOS(.v15), .macOS(.v14)],
platforms: [.iOS(.v16), .macOS(.v14)],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used some iOS 16 APIs. The apps require iOS 16, so we are good.

@@ -39,6 +41,11 @@ struct ContentView: View {
}
}
}
.fullScreenCover(isPresented: $isShowingDefaultEditor) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed it to show modally as in the app.

/// Enable native block inserter UI.
public var enableNativeBlockInserter = false
/// Auto-focus the editor when it loads.
public var autoFocusOnLoad = true
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noting that I enabled it by default. It auto-focuses the editor as you open it.

@@ -43,6 +43,22 @@ $min-touch-target-size: 46px;
color: wordpress.$white;
}

// Style the add block button with rounded black background
.gutenberg-kit-editor-toolbar .gutenberg-kit-add-block-button {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I took the library to make it a bit less dramatic. The new button harmonizes better with the rest of the controls. There is no functional reason for it to be black. It's already in a toolbar as the first item – you ca't miss it.

// Continuously update the saved insertion point whenever selection changes
useEffect( () => {
// Only update if we have a selected block OR if we're clearing selection but already have a saved point
if ( selectedBlockClientId !== null ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code was generated. I didn't review it and I need help verifying it. I think the insertion ends up being off by one.

@kean kean requested a review from dcalhoun August 1, 2025 18:03
@kean kean removed the request for review from dcalhoun August 3, 2025 22:08
@kean kean marked this pull request as draft August 3, 2025 22:08
@kean kean marked this pull request as ready for review August 4, 2025 12:23
@kean kean requested a review from dcalhoun August 4, 2025 12:27
@dcalhoun dcalhoun self-assigned this Aug 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants