[RNMobile] Full screen block inserter menu for Android (#34129)

* Use flexbox for tab positioning * Allow bottomsheet to scroll while fullscreen Changes cherry picked from c5aa56c * Fix input height * Fix active search cut off * Use fullscreen on Android only * Add prop to allow drag indicator on Android * Pass in initial number of items to render * Update logic to show the drag indicator * Fix block inserter scroll view height (#34139) * Fix block inserter scroll view height Leverages flex layout properties rather than explicit height to ensure the scroll view coordinates its height with its sibling elements. * Rename Sass selectors for improved clarity Avoid referencing "tabs" as that is not relevant as this level of the UI. * Enable inserter block search * Fix revert issue * Blur inserter search when keyboard closes (#34278) Co-authored-by: jhnstn <jason@readysetandco.com> * Filter embed blocks from Inserter search block list Co-authored-by: jhnstn <jason@readysetandco.com> Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
WordPress · Aug 25, 2021 · 3cc2b17 · 3cc2b17
1 parent d694d78
commit 3cc2b17
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 34 deletions.
diff --git a/packages/block-editor/src/components/block-types-list/index.native.js b/packages/block-editor/src/components/block-types-list/index.native.js
@@ -22,7 +22,13 @@ import styles from './style.scss';
 
 const MIN_COL_NUM = 3;
 
-export default function BlockTypesList( { name, items, onSelect, listProps } ) {
+export default function BlockTypesList( {
+ name,
+ items,
+ onSelect,
+ listProps,
+ initialNumToRender = 3,
+} ) {
  const [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );
  const [ itemWidth, setItemWidth ] = useState();
  const [ maxWidth, setMaxWidth ] = useState();
@@ -81,7 +87,7 @@ export default function BlockTypesList( { name, items, onSelect, listProps } ) {
  keyboardShouldPersistTaps="always"
  numColumns={ numberOfColumns }
  data={ items }
- initialNumToRender={ 3 }
+ initialNumToRender={ initialNumToRender }
  ItemSeparatorComponent={ () => (
  <TouchableWithoutFeedback accessible={ false }>
  <View

diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -38,9 +38,11 @@ function InserterMenu( {
  const [ filterValue, setFilterValue ] = useState( '' );
  const [ showTabs, setShowTabs ] = useState( true );
  // eslint-disable-next-line no-undef
- const [ showSearchForm, setShowSearchForm ] = useState( __DEV__ );
+ const [ showSearchForm, setShowSearchForm ] = useState( true );
  const [ tabIndex, setTabIndex ] = useState( 0 );
 
+ const isIOS = Platform.OS === 'ios';
+
  const {
  showInsertionPoint,
  hideInsertionPoint,
@@ -200,17 +202,23 @@ function InserterMenu( {
  }
  hasNavigation
  setMinHeightToMaxHeight={ showSearchForm }
- contentStyle={ styles.list }
+ contentStyle={ styles[ 'inserter-menu__list' ] }
+ isFullScreen={ ! isIOS && showSearchForm }
+ allowDragIndicator={ true }
  >
  <BottomSheetConsumer>
  { ( { listProps } ) => (
- <TouchableHighlight accessible={ false }>
+ <TouchableHighlight
+ accessible={ false }
+ style={ styles[ 'inserter-menu__list-wrapper' ] }
+ >
  { ! showTabs || filterValue ? (
  <InserterSearchResults
  rootClientId={ rootClientId }
  filterValue={ filterValue }
  onSelect={ onSelectItem }
  listProps={ listProps }
+ isFullScreen={ ! isIOS && showSearchForm }
  />
  ) : (
  <InserterTabs

diff --git a/packages/block-editor/src/components/inserter/search-results.native.js b/packages/block-editor/src/components/inserter/search-results.native.js
@@ -12,18 +12,34 @@ import InserterNoResults from './no-results';
 import { store as blockEditorStore } from '../../store';
 import useBlockTypeImpressions from './hooks/use-block-type-impressions';
 
+const NON_BLOCK_CATEGORIES = [ 'reusable' ];
+const ALLOWED_EMBED_VARIATIONS = [ 'core/embed' ];
+
 function InserterSearchResults( {
  filterValue,
  onSelect,
  listProps,
  rootClientId,
+ isFullScreen,
 } ) {
  const { blockTypes } = useSelect(
  ( select ) => {
  const allItems = select( blockEditorStore ).getInserterItems(
  rootClientId
  );
- const filteredItems = searchItems( allItems, filterValue );
+
+ const blockItems = allItems.filter(
+ ( { id, category } ) =>
+ ! NON_BLOCK_CATEGORIES.includes( category ) &&
+ // We don't want to show all possible embed variations
+ // as different blocks in the inserter. We'll only show a
+ // few popular ones.
+ ( category !== 'embed' ||
+ ( category === 'embed' &&
+ ALLOWED_EMBED_VARIATIONS.includes( id ) ) )
+ );
+
+ const filteredItems = searchItems( blockItems, filterValue );
 
  return { blockTypes: filteredItems };
  },
@@ -46,6 +62,7 @@ function InserterSearchResults( {
  return (
  <BlockTypesList
  name="Blocks"
+ initialNumToRender={ isFullScreen ? 10 : 3 }
  { ...{ items, onSelect: handleSelect, listProps } }
  />
  );

diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
@@ -8,7 +8,11 @@
  color: $blue-30;
 }
 
-.list {
+.inserter-menu__list-wrapper {
+ flex: 1;
+}
+
+.inserter-menu__list {
  padding-bottom: 20;
  padding-top: 8;
 }
@@ -51,13 +55,12 @@
 
 .inserter-tabs__wrapper {
  overflow: hidden;
+ flex: 1;
 }
 
 .inserter-tabs__container {
  height: 100%;
  width: 100%;
-}
-
-.inserter-tabs__item {
- position: absolute;
+ 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
@@ -100,13 +100,7 @@ function InserterTabs( {
  >
  <Animated.View style={ containerStyle }>
  { tabs.map( ( { component: TabComponent }, index ) => (
- <View
- key={ `tab-${ index }` }
- style={ [
- styles[ 'inserter-tabs__item' ],
- { left: index * wrapperWidth },
- ] }
- >
+ <View key={ `tab-${ index }` }>
  <TabComponent
  rootClientId={ rootClientId }
  onSelect={ onSelect }

diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js
@@ -485,6 +485,16 @@ class BottomSheet extends Component {
  </>
  );
 
+ const showDragIndicator = () => {
+ // if iOS or not fullscreen show the drag indicator
+ if ( Platform.OS === 'ios' || ! this.state.isFullScreen ) {
+ return true;
+ }
+
+ // Otherwise check the allowDragIndicator
+ return this.props.allowDragIndicator;
+ };
+
  return (
  <Modal
  isVisible={ isVisible }
@@ -536,7 +546,7 @@ class BottomSheet extends Component {
  style={ styles.header }
  onLayout={ this.onHeaderLayout }
  >
- { ! ( Platform.OS === 'android' && isFullScreen ) && (
+ { showDragIndicator() && (
  <View style={ styles.dragIndicator } />
  ) }
  { ! hideHeader && getHeader() }

diff --git a/packages/components/src/search-control/index.native.js b/packages/components/src/search-control/index.native.js
@@ -8,6 +8,7 @@ import {
  TouchableOpacity,
  Platform,
  useColorScheme,
+ Keyboard,
 } from 'react-native';
 
 /**
@@ -116,12 +117,18 @@ function SearchControl( {
  setCurrentStyles( futureStyles );
  }, [ isActive, isDark ] );
 
- useEffect(
- () => () => {
+ useEffect( () => {
+ const keyboardHideSubscription = Keyboard.addListener(
+ 'keyboardDidHide',
+ () => {
+ onCancel();
+ }
+ );
+ return () => {
  clearTimeout( onCancelTimer.current );
- },
- []
- );
+  keyboardHideSubscription.remove();
+ };
+ }, [] );
 
  const {
  'search-control__container': containerStyle,

diff --git a/packages/components/src/search-control/platform-style.android.scss b/packages/components/src/search-control/platform-style.android.scss
@@ -1,10 +1,7 @@
-.search-control__container {
- height: 40px;
-}
-
 .search-control__container--active {
  border-bottom-color: $light-gray-500;
  border-bottom-width: 1px;
+ margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;

diff --git a/packages/components/src/search-control/platform-style.ios.scss b/packages/components/src/search-control/platform-style.ios.scss
@@ -1,6 +1,3 @@
-.search-control__container {
- height: 40px;
-}
 .search-control__container--active {
  margin-right: 0;
 }

diff --git a/packages/components/src/search-control/style.native.scss b/packages/components/src/search-control/style.native.scss
@@ -1,8 +1,6 @@
 .search-control__container {
- height: 46px;
+ height: 48px;
  margin: 0 16px $grid-unit-10;
- flex-direction: row;
- justify-content: space-between;
 }
 
 .search-control__inner-container {