Add native block inserter

[kean]

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

Demo

demo.mov

[kean]

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

[kean]

Changed it to show modally as in the app.

[kean]

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

[kean]

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.

[kean]

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]

Hey, @dcalhoun, what you think is the best way to programmatically insert image/video/file blocks and trigger the upload? I got the following working: insert the block at the cursor position, focus it, attach images. I failed to get the uploads working.

[dcalhoun]

From researching quickly, there is a mediaUpload setting available in the block editor store. It provides a utility for uploading media. It appears most media blocks (image, video, etc) rely upon this utility via the media placeholder component.

I was able to successfully upload an arbitrary image file with this utility. Here is a diff of an arbitrary example in GutenbergKit:

diff --git a/src/components/visual-editor/index.jsx b/src/components/visual-editor/index.jsx
index b4b7f9f..89ca661 100644
--- a/src/components/visual-editor/index.jsx
+++ b/src/components/visual-editor/index.jsx
@@ -13,9 +13,10 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as editorStore, PostTitle } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, dispatch, select } from '@wordpress/data';
 import { store as editPostStore } from '@wordpress/edit-post';
 import '@wordpress/format-library';
+import { store as mediaStore } from '@wordpress/upload-media';
 
 /**
  * Internal dependencies
@@ -142,6 +143,19 @@ function VisualEditor( { hideTitle } ) {
 							) }
 						</>
 					) }
+				<form
+					onSubmit={ ( e ) => {
+						e.preventDefault();
+						const formData = new FormData( e.target );
+						const files = formData.getAll( 'files' );
+						select( blockEditorStore )
+							.getSettings()
+							.mediaUpload( { filesList: files } );
+					} }
+				>
+					<input type="file" name="files" multiple />
+					<button type="submit">Upload</button>
+				</form>
 				{ ! hideTitle && (
 					<div className={ titleClasses }>
 						<PostTitle ref={ editorPostTitleRef } />

I'm not sure what the url value of mediaItems resembles within the insertMediaFromFiles, but presumably we could leverage the mediaItems data to upload the files with mediaUpload?