Implemnet block insertion

Author: kean

ios/Sources/GutenbergKit/Sources/EditorViewController.swift

@@ -240,11 +240,17 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
     // MARK: - Internal (Block Inserter)
 
     private func showBlockInserter(blocks: [EditorBlock]) {
-        present(UIHostingController(rootView: NavigationView {
-            BlockInserterView(blocks: blocks) {
-                print("did select:", $0)
+        // Capture the selected block ID before showing the inserter
+        // (the editor will lose focus when the modal appears)
+        Task { @MainActor in
+            let selectedBlockID = await getSelectedBlockID()
+            let inserterView = NavigationView {
+                BlockInserterView(blocks: blocks) { [weak self] block in
+                    self?.insertBlock(block.name, selectedBlockID: selectedBlockID)
+                }
             }
-        }), animated: true)
+            present(UIHostingController(rootView: inserterView), animated: true)
+        }
     }
 
     private func openMediaLibrary(_ config: OpenMediaLibraryAction) {
@@ -263,6 +269,25 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
         evaluate("editor.appendTextAtCursor(decodeURIComponent('\(escapedText)'));")
     }
 
+    /// Gets the currently selected block client ID.
+    ///
+    /// - returns: The selected block client ID, or nil if no block is selected.
+    private func getSelectedBlockID() async -> String? {
+        try? await webView.evaluateJavaScript("editor.getSelectedBlockClientId();") as? String
+    }
+
+    /// Inserts a block with the given name at the current insertion point.
+    ///
+    /// - parameter blockName: The name of the block to insert (e.g., "core/paragraph").
+    /// - parameter selectedBlockID: Optional pre-captured selected block ID.
+    private func insertBlock(_ blockName: String, selectedBlockID: String? = nil) {
+        if let selectedBlockID {
+            evaluate("editor.insertBlock('\(blockName)', '\(selectedBlockID)');")
+        } else {
+            evaluate("editor.insertBlock('\(blockName)');")
+        }
+    }
+
     // MARK: - GutenbergEditorControllerDelegate
 
     fileprivate func controller(_ controller: GutenbergEditorController, didReceiveMessage message: EditorJSMessage) {

src/components/editor-toolbar/index.jsx

@@ -81,13 +81,11 @@ const EditorToolbar = ( { className } ) => {
 	const classes = clsx( 'gutenberg-kit-editor-toolbar', className );
 
 	const addBlockButton = enableNativeBlockInserter ? (
-		<ToolbarButton
+		<Button
 			title={ __( 'Add block' ) }
 			icon={ plus }
-			onClick={ () => {
-				if ( isInserterOpened ) {
-					setIsInserterOpened( false );
-				}
+			onTouchEnd={ ( e ) => {
+				e.preventDefault();
 				showBlockInserter();
 			} }
 			className="gutenberg-kit-add-block-button"

src/components/editor/use-host-bridge.js

@@ -5,7 +5,7 @@ import { useEffect, useCallback, useRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
-import { parse, serialize, getBlockType } from '@wordpress/blocks';
+import { parse, serialize, getBlockType, createBlock } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { insert, create, toHTMLString } from '@wordpress/rich-text';
 
@@ -21,12 +21,15 @@ export function useHostBridge( post, editorRef ) {
 	const { undo, redo, switchEditorMode } = useDispatch( editorStore );
 	const { getEditedPostAttribute, getEditedPostContent } =
 		useSelect( editorStore );
-	const { updateBlock, selectionChange } = useDispatch( blockEditorStore );
+	const { updateBlock, selectionChange, insertBlock, replaceBlock } =
+		useDispatch( blockEditorStore );
 	const {
 		getSelectedBlockClientId,
 		getBlock,
 		getSelectionStart,
 		getSelectionEnd,
+		getBlockRootClientId,
+		getBlockIndex,
 	} = useSelect( blockEditorStore );
 
 	const editContent = useCallback(
@@ -118,6 +121,44 @@ export function useHostBridge( post, editorRef ) {
 			}
 		};
 
+		window.editor.getSelectedBlockClientId = () => {
+			return getSelectedBlockClientId();
+		};
+
+		window.editor.insertBlock = (
+			blockName,
+			selectedBlockClientId = null
+		) => {
+			const targetBlockClientId =
+				selectedBlockClientId || getSelectedBlockClientId();
+			const block = createBlock( blockName );
+
+			if ( targetBlockClientId ) {
+				const selectedBlock = getBlock( targetBlockClientId );
+
+				// If the selected block is an empty paragraph, replace it
+				const isParagraph = selectedBlock?.name === 'core/paragraph';
+				const isEmpty =
+					! selectedBlock?.attributes?.content ||
+					selectedBlock.attributes.content.trim() === '';
+
+				if ( isParagraph && isEmpty ) {
+					replaceBlock( targetBlockClientId, block );
+				} else {
+					// Otherwise, insert after the currently selected block
+					const rootClientId =
+						getBlockRootClientId( targetBlockClientId );
+					const blockIndex = getBlockIndex( targetBlockClientId );
+					insertBlock( block, blockIndex + 1, rootClientId, true );
+				}
+			} else {
+				// No selection, insert at the current position
+				insertBlock( block, undefined, undefined, true );
+			}
+
+			return true;
+		};
+
 		window.editor.appendTextAtCursor = ( text ) => {
 			const selectedBlockClientId = getSelectedBlockClientId();
 
@@ -185,6 +226,8 @@ export function useHostBridge( post, editorRef ) {
 			delete window.editor.redo;
 			delete window.editor.switchEditorMode;
 			delete window.editor.dismissTopModal;
+			delete window.editor.getSelectedBlockClientId;
+			delete window.editor.insertBlock;
 			delete window.editor.appendTextAtCursor;
 		};
 	}, [
@@ -199,8 +242,12 @@ export function useHostBridge( post, editorRef ) {
 		getBlock,
 		getSelectionStart,
 		getSelectionEnd,
+		getBlockRootClientId,
+		getBlockIndex,
 		updateBlock,
 		selectionChange,
+		insertBlock,
+		replaceBlock,
 	] );
 }