BottomSheet centered with maximum width. #600
Conversation
etoledom
changed the title
|
This is looking great, @etoledom! Assuming the border-width issue and scrollable issues are being addressed separately, this one looks good to go. |
There was a problem hiding this comment.
Thanks for handling the inserter ui refactoring also! This looks great. Tested both with inserter ui and image settings ui, works pretty good on both safe area and normal screens on portrait/landscape modes. Left just a few tiny comments about deleting the unused items.
| import styles from './block-picker.scss'; | ||
| import { name as unsupportedBlockName } from '../block-types/unsupported-block'; | ||
| // Gutenberg imports | ||
| import { getBlockTypes } from '@wordpress/blocks'; | ||
|
|
||
| type PropsType = { | ||
| style?: StyleSheet, |
There was a problem hiding this comment.
looks like we don't need safeAreaBottomInset anymore
and we can also get rid of this at the bottom of the page:
BlockPicker.defaultProps = {
safeAreaBottomInset: 0,
};
| @@ -30,57 +36,46 @@ export default class BlockPicker extends Component<PropsType> { | |||
|
|
|||
| render() { | |||
| const numberOfColumns = this.calculateNumberOfColumns(); | |||
| const paddingBottom = this.paddingBottom(); | |||
| const bottomPadding = this.props.addExtraBottomPadding && styles.contentBottomPadding; | |||
There was a problem hiding this comment.
we can add addExtraBottomPadding to PropsType
|
Since this PR was so small, I took the opportunity to replace the BlockPicker Modal with the BottomSheet component, as a follow up of #608
|
|
Thank you! |
|
Looks great! One minor thing, but we can address it separately – the left/right sheet margins on the smaller portrait Android example are a bit narrow. Based on the screenshots I'm guessing we're using a static width for each block type which is fine for now, but we might want to adjust it to use percentages at some point to accommodate narrow screens. |
Yes, width is static. If the screen is thin enough, the number of columns will be reduced to 2. |
|
Awesome, thanks for the confirmation! |
Fixes: #572
This PR updates the gutenberg ref to test WordPress/gutenberg#13882
Note: Don't worry about the separators going out of the bottom sheet. That is resolved here: WordPress/gutenberg#13855
To test:
Please refer to that PR for testing.
cc @iamthomasbishop