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 index 485cde15fbf1fa..81795d37e87789 100644 --- 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={ () => ( { ( { listProps } ) => ( - + { ! showTabs || filterValue ? ( ) : ( { 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 ( ); diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 8fcb9c1cd04529..105af1f72b7d91 100644 --- 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 index 06ab3bc859036e..73396ec63a6e9a 100644 --- 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( { > { tabs.map( ( { component: TabComponent }, index ) => ( - + ); + 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 ( - { ! ( Platform.OS === 'android' && isFullScreen ) && ( + { showDragIndicator() && ( ) } { ! hideHeader && getHeader() } diff --git a/packages/components/src/search-control/index.native.js b/packages/components/src/search-control/index.native.js index 61241f77fb810b..6797c0c6a0bd95 100644 --- 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 index 1d774af4009000..f357c7a4e52fc9 100644 --- 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 index f083df3e248ff4..34884b11b51bcd 100644 --- 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 index 18f2b7490719ae..5cac32eddd4a72 100644 --- 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 {