Gutenberg-mobile: 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 #55).
• The block picker should show the right icon for each block. (done in #129)
• After the block is inserted, switch focus to the newly inserted block.

Tasks

Integration with toolbar (2 weeks)

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

Other (1 week)

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

[mzorz]

Adding rough design draft for v1 here:

This is how I plan to approach this:

State management / basic flow

• [x] #88 add basic support for model addition
• [x] #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
• [x] ~#95 _unexpected_ fix BlockManager to use list state/props correctly~ superseded by #108
• [x] ~#96~ #110 make direct access inserter (insert anywhere, not just append to list)
• [x] https://github.com/WordPress/gutenberg/pull/8457 obtain list of registered types
• [x] #105 add basic block types selection mechanism (obtain list of registered types, show Picker, attach new block after selected block type)
• [x] #129 and https://github.com/WordPress/gutenberg/pull/9294 add svg icons to block types in modal picker

Navigation / Bottom sheet work

• [x] #123 1st iteration with Picker (#88, #89, ~#95~, #108, ~#96~ #110, and #105)
• [x] #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 https://github.com/wordpress-mobile/gutenberg-mobile/issues/58#issuecomment-409571383 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.

• [x] check focus handling in redux (state management) works as expected
• [ ] ~Inserting a new block doesn't make cursor immediately available on new block #113~
  _(may add issues/points here as we identify them)_
• [ ] ~Tapping into RichText doesn't handle focus right #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 (https://github.com/wordpress-mobile/gutenberg-mobile/pull/88#discussion_r209299767)
• [ ] 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