fix: Inline inserter opens native inserter #230
Conversation
There is no need to communicate the inserter state via the bridge for disabling native header navigation, as the native inserter already obscures these UI elements. There is no need to mark web content as inert, as the native insert already marks the entire WebView inert.
If we do not respect the `isInserterOpened` state, various editor UI elements cannot control the block inserter state. Align `NativeBlockInserterButton`'s API with core's `Inserter`.
| useModalize( isBlockInspectorShown ); | ||
|
|
||
| useModalDialogState( isInserterOpened, 'block-inserter' ); | ||
| useModalDialogState( | ||
| isInserterOpened && ! enableNativeBlockInserter, | ||
| 'block-inserter' | ||
| ); |
There was a problem hiding this comment.
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.
| <NativeBlockInserterButton | ||
| open={ isInserterOpened } | ||
| onToggle={ setIsInserterOpened } | ||
| /> |
There was a problem hiding this comment.
This API matches the Gutenberg Inserter a few lines beneath this.
| * @param {Array} items Array of media objects with IDs | ||
| * @return {boolean} True if insertion succeeded | ||
| */ | ||
| const insertMediaWithIds = ( items ) => { |
There was a problem hiding this comment.
Renamed to items to avoid duplicating the mediaArray name in the upper scope now that insertMediaWithIds is declared within insertMedia. It was relocated to simplify memoization.
| // Watch for controlled open state changes | ||
| useEffect( () => { | ||
| // Only trigger when transitioning from false to true | ||
| if ( open && ! prevOpen.current ) { | ||
| prepareAndShowInserter(); | ||
| } | ||
| }; | ||
| prevOpen.current = open; | ||
| }, [ open, prepareAndShowInserter ] ); |
There was a problem hiding this comment.
This is the crux of the change. Rather than onClick directly showing the inserter, the global isInserterOpen state now does so. This allows UI outside of this component's Button to open the native inserter.
| debug( `Pattern "${ patternName }" not found` ); | ||
| return false; | ||
| const prepareAndShowInserter = useCallback( () => { | ||
| const sections = preprocessBlockTypesForNativeInserter( |
There was a problem hiding this comment.
I used logging and the React Developer Tools to verify this complex logic is only run when opening the inserter.
kean
left a comment
kean
left a comment
There was a problem hiding this comment.
Thank you for address it. The code looks good.
As a potential future improvement, I would replacing the "quick inserter" itself with a native inserter (just show is as a small sheet the way it is shown now).
Agreed. That is what I meant by the following in the PR description:
|
What?
Ensure inline inserter's Browse all button opens the native block inserter.
It's worth noting the current outcome is not perfect. Namely, the quick inserter remains open after opening the native inserter. This occurs because the former relies upon losing focus for its dismissal. The native inserter does not change the WebView's focus state; thus, the quick inserter remains open.
Long term, I think the most ideal case is that we introduce a new filter hook to the Gutenberg project that allows replacing the inserter used throughout the UI. I.e., when tapping the quick inserter's inline button, it opens the native inserter directly rather than displaying the quick inserter. I captured this as a note in #106.
Why?
Fix CMM-973. The bug made inserting blocks into layout blocks difficult.
How?
isInserterOpenstore state, ensuring the state is correct throughout the UI.Testing Instructions
Accessibility Testing Instructions
Navigate the testing steps. Verify content is correct marked inert when the native inserter is opened.
Screenshots or screencast
Simulator.Screen.Recording.-.iPhone.17.-.2025-11-20.at.09.17.25.mov