Add native block inserter #162
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kean
force-pushed
the
task/native-block-inserter
branch
from
b2f92e3 to
1dac78c
Compare
kean
commented
Aug 1, 2025
| @@ -5,7 +5,7 @@ import PackageDescription | |||
|
|
|||
| let package = Package( | |||
| name: "GutenbergKit", | |||
| platforms: [.iOS(.v15), .macOS(.v14)], | |||
| platforms: [.iOS(.v16), .macOS(.v14)], | |||
There was a problem hiding this comment.
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) { | |||
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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 { | |||
There was a problem hiding this comment.
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 ) { |
There was a problem hiding this comment.
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.
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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?
BlockInserterView) that provides a searchable,categorized view of available blocks with first-class media support and native API integration
SearchEngine) that supports fuzzy matching and scoring for blockdiscovery
Testing Instructions
Important
enableNativeBlockInserter(enabled in demo)Integration PR in wpios: wordpress-mobile/WordPress-iOS#24708
enableNativeBlockInserter: truein the editorconfiguration
Missing
gbk-localURL 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.core/list-item– do not show them?Screenshot
Demo
demo.mov