Inserter

[koke]

Add an insert button that shows a list of registered blocks, and adds the selected block after the currently focused block.

Requirements for alpha:

• The inserter button will be in the toolbar as the design shows (depends on Toolbar #55).
• The block picker should show the right icon for each block. (done in Inserter - block icons #129)
• After the block is inserted, switch focus to the newly inserted block.

Tasks

Integration with toolbar (2 weeks)

• add new + adder control placeholder (to be connected to the toolbar)
• extract and define adder <-> toolbar interface
• actually connect with toolbar

Other (1 week)

• UI pass (make it not only work but look as per the designs) -> Inserter UI #349 (Beta)

[mzorz]

Adding rough design draft for v1 here:

This is how I plan to approach this:

State management / basic flow

• Inserter - basic support for block addition #88 add basic support for model addition
• Inserter - use GB createBlock to generate new blocks #89 model addition: list item id generator / evaluate usages of IDs for list items in block manager properly using GB's createBlock API which already generates an ID
• Inserter - fix block manager state handling #95 unexpected fix BlockManager to use list state/props correctly superseded by Inserter - fix focus handling, awesomely spotted by @hypest #108
• Inserter - added direct insertion to block manager #96 Inserter - added direct insertion to block manager (take2) #110 make direct access inserter (insert anywhere, not just append to list)
• Adds export getBlockTypes to be used in react native WordPress/gutenberg#8457 obtain list of registered types
• Inserter - show Picker with registered blocks to choose from #105 add basic block types selection mechanism (obtain list of registered types, show Picker, attach new block after selected block type)
• Inserter - block icons #129 and React Native - SVG icons for Inserter WordPress/gutenberg#9294 add svg icons to block types in modal picker

Navigation / Bottom sheet work

• Feature: Inserter - 1st iteration with Picker #123 1st iteration with Picker (Inserter - basic support for block addition #88, Inserter - use GB createBlock to generate new blocks #89, Inserter - fix block manager state handling #95, Inserter - fix focus handling, awesomely spotted by @hypest #108, Inserter - added direct insertion to block manager #96 Inserter - added direct insertion to block manager (take2) #110, and Inserter - show Picker with registered blocks to choose from #105)
• Feature/inserter modal #124 2nd iteration with Modal and Dialog
• 3rd iteration build bottom sheet to get in the direction of a reusable native component (not in a separate repo yet, just a bottom sheet implementation in RN that can be used in both iOS and Android), along the lines of designs Bottom sheet component work will be disaggregated from Inserter actual work
• 4th iteration (which I expect to be a longer thing to come): separate the component in its own repo so it can be reused both in WP natively and make a RN wrapped component for use in Gutenberg.

I believe this iterative approach will lead us to better understand the needs in each phase, and we'll be better prepared for iteration #4 to actually create the component out of the things we've found out to be useful/needed in the other iterations

[hypest]

Headsup @mzorz , I went ahead and struck out iteration No4 in #58 (comment) as I think it should not block the feature completion and it can be performed at a future point in time.

[koke]

I updated the description for this one. @mzorz do you think I missed anything in the alpha requirements? Can you take a look at estimations since it looks like you already have a good idea of what needs to be done?

[mzorz]

Focus handling

While not directly related to the Inserter, it's of basic need that the focus state and UI representation gets handled right when inserting / moving blocks / switching focus.

• check focus handling in redux (state management) works as expected
• Inserting a new block doesn't make cursor immediately available on new block Inserter - cursor not following along focus when inserting a new block #113
  (may add issues/points here as we identify them)
• Tapping into RichText doesn't handle focus right Tapping into RichText doesn't move the cursor properly on Android #135

Integration with toolbar

• add new + adder control placeholder (to be connected to the toolbar)
• extract and define adder <-> toolbar interface
• actually connect with toolbar

Other (code)

• make createBlockAction actually create a block instead of carry a block model and insert it in the list (Inserter - basic support for block addition #88 (comment))
• after this one above (createBlockAction change), enhance the CREATE_BLOCK action tests to run through all registered blocks and create each one, verifying the expected block type has been created

Other (UI)

• UI pass (make it not only work but look as per the designs)

Estimations

My rough thoughts on this are:

• The Focus problems are a set of unknowns but I think we should be able to gain more information from that with a full week working on identifying (and hopefully solving) the most important of them. I'd give this a full sprint. (2 weeks)
• integration with the toolbar might be coded and tested in another sprint (maybe it's just a week, but might get into a bit of the next week as well). (2 weeks)
• Other (code + UI): another sprint to polish (2 weeks)
  cc @koke @hypest

[koke]

Thanks @mzorz.
I've reordered the focus handling so we look at focus on insert first (#113).
Maybe we can move focus on tap under #166 since it seems more related to that than the inserter?

[mzorz]

Maybe we can move focus on tap under #166 since it seems more related to that than the inserter?

Definitely feel free to move that there 👍

[koke]

I ended up grouping the focus issues in #196 and crossed them out of the list here

[koke]

I came across a couple good looking (native, iOS) libraries for the bottom sheet, so I'll leave them here in case they're useful in the future:

• FloatingPanel
• Panels

[koke]

Moved the task list and estimations to the description, please make sure to update it there as we make progress

[koke]

Moved the remaining UI pass to #349 for the Beta