Skip to content

fix: Inline inserter opens native inserter #230

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Nov 20, 2025
Merged

fix: Inline inserter opens native inserter #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a33910
perf: Native inserter disables unnecessary modalize and bridge syncing
dcalhoun Nov 19, 2025
e343851
fix: Inline inserter opens the native inserter
dcalhoun Nov 19, 2025
9a4cd49
refactor: Fix WordPress imports group
dcalhoun Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions ios/Sources/GutenbergKit/Sources/EditorViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import CryptoKit
import UIKit

@MainActor
public final class EditorViewController: UIViewController, GutenbergEditorControllerDelegate {
public final class EditorViewController: UIViewController, GutenbergEditorControllerDelegate, UIAdaptivePresentationControllerDelegate, UIPopoverPresentationControllerDelegate, UISheetPresentationControllerDelegate {
public let webView: WKWebView
let assetsLibrary: EditorAssetsLibrary

Expand Down Expand Up @@ -288,17 +288,22 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
patternCategories: data.patternCategories,
mediaPicker: mediaPicker,
presentationContext: context,
onSelection: { [weak self] in self?.didSelectBlockInserterItem($0) }
onSelection: { [weak self] in self?.didSelectBlockInserterItem($0) },
onClose: { [weak self] in self?.notifyInserterClosed() }
)
.environmentObject(htmlPreviewManager)
})

context.viewController = host

// Set presentation delegate to track dismissal
host.presentationController?.delegate = self

if let sourceRect = data.sourceRect {
host.modalPresentationStyle = .popover

if let popover = host.popoverPresentationController {
popover.delegate = self
popover.sourceView = webView
popover.sourceRect = CGRect(
x: sourceRect.x,
Expand All @@ -312,6 +317,7 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
}

if let sheet = host.popoverPresentationController?.adaptiveSheetPresentationController ?? host.sheetPresentationController {
sheet.delegate = self
sheet.detents = [.custom(identifier: .medium, resolver: { context in
context.containerTraitCollection.horizontalSizeClass == .compact ? 536 : 900
}), .large()]
Expand All @@ -323,6 +329,8 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
}

private func didSelectBlockInserterItem(_ selection: BlockInserterSelection) {
notifyInserterClosed()

switch selection {
case .block(let block):
insertBlockFromInserter(block.id)
Expand All @@ -335,6 +343,16 @@ public final class EditorViewController: UIViewController, GutenbergEditorContro
}
}

// MARK: - UIAdaptivePresentationControllerDelegate

public func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
notifyInserterClosed()
}

private func notifyInserterClosed() {
evaluate("window.blockInserter?.onClose?.()")
}

private func insertBlockFromInserter(_ blockID: String) {
evaluate("window.blockInserter.insertBlock('\(blockID)')")
}
Expand Down
9 changes: 8 additions & 1 deletion ios/Sources/GutenbergKit/Sources/Views/BlockInserter/BlockInserterView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ struct BlockInserterView: View {
let mediaPicker: MediaPickerController?
let presentationContext: MediaPickerPresentationContext
let onSelection: (BlockInserterSelection) -> Void
let onClose: () -> Void

@StateObject private var viewModel: BlockInserterViewModel
@StateObject private var iconCache = BlockIconCache()
Expand All @@ -40,14 +41,16 @@ struct BlockInserterView: View {
patternCategories: [PatternCategory],
mediaPicker: MediaPickerController?,
presentationContext: MediaPickerPresentationContext,
onSelection: @escaping (BlockInserterSelection) -> Void
onSelection: @escaping (BlockInserterSelection) -> Void,
onClose: @escaping () -> Void
) {
self.sections = sections
self.patterns = patterns
self.patternCategories = patternCategories
self.mediaPicker = mediaPicker
self.presentationContext = presentationContext
self.onSelection = onSelection
self.onClose = onClose

let viewModel = BlockInserterViewModel(sections: sections)
self._viewModel = StateObject(wrappedValue: viewModel)
Expand Down Expand Up @@ -141,6 +144,7 @@ struct BlockInserterView: View {
private var toolbar: some ToolbarContent {
ToolbarItem(placement: .cancellationAction) {
Button {
onClose()
dismiss()
} label: {
Image(systemName: "xmark")
Expand Down Expand Up @@ -325,6 +329,9 @@ private extension View {
presentationContext: MediaPickerPresentationContext(),
onSelection: { selection in
print("on selected: \(selection)")
},
onClose: {
print("on close")
}
)
}
Expand Down
12 changes: 9 additions & 3 deletions src/components/editor-toolbar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,13 @@ const EditorToolbar = ( { className } ) => {
}, [] );
const { setIsInserterOpened } = useDispatch( editorStore );

useModalize( isInserterOpened );
useModalize( isInserterOpened && ! enableNativeBlockInserter );
useModalize( isBlockInspectorShown );

useModalDialogState( isInserterOpened, 'block-inserter' );
useModalDialogState(
isInserterOpened && ! enableNativeBlockInserter,
'block-inserter'
);
Comment on lines 64 to +69
Copy link
Member Author

@dcalhoun dcalhoun Nov 20, 2025

Choose a reason for hiding this comment

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

These marked content outside of the block inserter modal dialog "inert," and thus inaccessible by screen readers. This is unnecessary for the native inserter, as the native UI handles this itself. The WebView is inaccessible to screen readers when the native inserter is open.

useModalDialogState( isBlockInspectorShown, 'block-inspector' );

function openSettings() {
Expand Down Expand Up @@ -95,7 +98,10 @@ const EditorToolbar = ( { className } ) => {
);

const addBlockButton = enableNativeBlockInserter ? (
<NativeBlockInserterButton />
<NativeBlockInserterButton
open={ isInserterOpened }
onToggle={ setIsInserterOpened }
/>
Comment on lines +101 to +104
Copy link
Member Author

@dcalhoun dcalhoun Nov 20, 2025

Choose a reason for hiding this comment

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

This API matches the Gutenberg Inserter a few lines beneath this.

) : (
<Inserter
popoverProps={ {
Expand Down
Loading