Only use flexbox for fullscreen inserter

WordPress · Sep 2, 2021 · 12274c6 · 12274c6
1 parent 6ef8d95
commit 12274c6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -210,7 +210,7 @@ function InserterMenu( {
 				{ ( { listProps } ) => (
 					<TouchableHighlight
 						accessible={ false }
-						style={ styles[ 'inserter-menu__list-wrapper' ] }
+						style={ ! isIOS && { flex: 1 } }
 					>
 						{ ! showTabs || filterValue ? (
 							<InserterSearchResults
@@ -227,6 +227,7 @@ function InserterMenu( {
 								tabIndex={ tabIndex }
 								onSelect={ onSelectItem }
 								showReusableBlocks={ showReusableBlocks }
+								isFullScreen={ ! isIOS }
 							/>
 						) }
 					</TouchableHighlight>

diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
@@ -8,10 +8,6 @@
 	color: $blue-30;
 }
 
-.inserter-menu__list-wrapper {
-	flex: 1;
-}
-
 .inserter-menu__list {
 	padding-bottom: 20;
 	padding-top: 8;
@@ -55,12 +51,9 @@
 
 .inserter-tabs__wrapper {
 	overflow: hidden;
-	flex: 1;
 }
 
 .inserter-tabs__container {
 	height: 100%;
 	width: 100%;
-	flex: 1;
-	flex-direction: row;
 }
diff --git a/packages/block-editor/src/components/inserter/tabs.native.js b/packages/block-editor/src/components/inserter/tabs.native.js
@@ -31,6 +31,7 @@ function InserterTabs( {
 	rootClientId,
 	showReusableBlocks,
 	tabIndex,
+	isFullScreen,
 } ) {
 	const tabAnimation = useRef( new Animated.Value( 0 ) ).current;
 	const lastScrollEvents = useRef( [] ).current;
@@ -91,16 +92,28 @@ function InserterTabs( {
 			width: wrapperWidth * tabKeys.length,
 			transform: [ { translateX } ],
 		},
+		isFullScreen && { flex: 1, flexDirection: 'row' },
 	];
 
 	return (
 		<View
-			style={ styles[ 'inserter-tabs__wrapper' ] }
+			style={ [
+				styles[ 'inserter-tabs__wrapper' ],
+				isFullScreen && { flex: 1 },
+			] }
 			onLayout={ onWrapperLayout }
 		>
 			<Animated.View style={ containerStyle }>
 				{ tabs.map( ( { component: TabComponent }, index ) => (
-					<View key={ `tab-${ index }` }>
+					<View
+						key={ `tab-${ index }` }
+						style={
+							! isFullScreen && {
+								position: 'absolute',
+								left: index * wrapperWidth,
+							}
+						}
+					>
 						<TabComponent
 							rootClientId={ rootClientId }
 							onSelect={ onSelect }