hey @iamthomasbishop could you go over the screenshots one last time? Especially the iPhone X ones, I applied safe area margins as an addition to already existing margins, I am not sure how they look actually. Thanks!

@pinarol - Thanks for wrangling this!
Do you think it's possible to use our BottomSheet component for the inserter?

import { BottomSheet } from '@wordpress/editor';
https://github.com/WordPress/gutenberg/tree/master/packages/editor/src/components/mobile/bottom-sheet

This component has the style an behavior used in the Image block (and hopefully soon in the Links Settings too)
It also should (hopefully) work well with SafeAreas by default, and soon will be constrained to a maximum width.

@etoledom will try that, thanks!

Let's wait till my BottomSheet update gets finished to review, I'll update the screenshots also. Currently labeling as not ready to review.

Switching to BottomSheet turned out to be more troublesome than expected so @etoledom and I decided to ship that on a separate PR not to block this one. Removing the 'not ready to review' label. Let's keep on reviewing.

This is looking really great, nice work @pinarol! This looks so close to the BottomSheet component that I just assumed it was using it 😄 I would also prefer that we use it if it's not a huge pain, because we get a bunch of wins as @etoledom mentioned in terms of sizing and constraints.

A couple super tiny details that I'm curious about:

1. What is the current value of the border-radius on block buttons? IIRC the preferred value is 8, they currently (to my eye) look ~2-4? 🕵️‍♂️

2. How much margin is defined at the bottom of the list of block-types? It looks pretty good on the examples without the home indicator/safe area, but on instances where we account for the safe area, we might not need so much space. To my eye (guessing), it looks like ~24 margin at the bottom of the list, whereas we might only need ~8-16.

One more question: Where are we getting the block-type icons from? Are they dynamic, in that do they pull from somewhere or are we "hard-coding" them? Just curious as icons are/will be shifting a little bit over the next few months.

hey @iamthomasbishop 👋
We will be refactoring this to use the BottomSheet component but first it needs to be updated to be more reusable with different paddings and also it needs to provide its width to outside components (that is also related with the other PR that is not merged yet). And a few other technical problems raised in the way. But I am positive this week we'll make it.

1. What is the current value of the border-radius on block buttons

It is 4, updating this as 8.

2. How much margin is defined at the bottom of the list of block-types?

Normally without the safe area 12+6 = 18. 6 is the default bottom padding for each button item, 12 is the bottom padding of the container.

But safe area brings an additional +34 in portrait mode and +21 in landscape mode.

Here are some screenshots when I remove the extra 12 padding:

Here are some screenshots when I remove that 18 padding completely:

Which one do you prefer?

Where are we getting the block-type icons from?

I am re-using what was already defined for common usage between web and mobile. I didn't hard code them so I think we'll be getting updates automatically.

Which one do you prefer?

I prefer the last example (remove margin completely).

I am re-using what was already defined for common usage between web and mobile.

Perfect! 😄