From f0e28f9898e5f92ca8a3c2eb51b2ed5881bd06ac Mon Sep 17 00:00:00 2001 From: jhnstn Date: Tue, 17 Aug 2021 15:08:39 -0400 Subject: [PATCH 01/13] Use flexbox for tab positioning --- .../src/components/inserter/style.native.scss | 7 +++---- .../block-editor/src/components/inserter/tabs.native.js | 8 +------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 8fcb9c1cd0452..b74e6bf03fb7d 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -51,13 +51,12 @@ .inserter-tabs__wrapper { overflow: hidden; + height: 100%; } .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 06ab3bc859036..73396ec63a6e9 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 ) => ( - + Date: Tue, 17 Aug 2021 17:29:03 -0400 Subject: [PATCH 02/13] Allow bottomsheet to scroll while fullscreen Changes cherry picked from https://github.com/WordPress/gutenberg/pull/34018/commits/c5aa56cd31b6abbd96cf1bc76d13b54189b078d3 --- .../components/src/mobile/bottom-sheet/index.native.js | 7 +++++-- .../components/src/mobile/bottom-sheet/styles.native.scss | 4 ++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 837d924e096a7..b481e67dd2f01 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -435,7 +435,7 @@ class BottomSheet extends Component { let listStyle = {}; if ( isFullScreen ) { - listStyle = { flexGrow: 1 }; + listStyle = { flexGrow: 1, flexShrink: 1 }; } else if ( isMaxHeightSet ) { listStyle = { maxHeight }; @@ -532,7 +532,10 @@ class BottomSheet extends Component { } } keyboardVerticalOffset={ -safeAreaBottomInset } > - + { ! ( Platform.OS === 'android' && isFullScreen ) && ( ) } diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index fcb17feedf0fc..df9e80b3ad38e 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -26,6 +26,10 @@ background-color: $gray-70; } +.header { + flex-shrink: 1; +} + .emptyHeader { margin-top: $grid-unit-20 * 0.5; } From 07c5e887950b35b3f9930690018150863d74cb17 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Wed, 21 Jul 2021 15:34:09 -0400 Subject: [PATCH 03/13] Fix input height --- .../components/src/search-control/platform-style.android.scss | 4 ---- .../components/src/search-control/platform-style.ios.scss | 3 --- packages/components/src/search-control/style.native.scss | 4 +--- 3 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/components/src/search-control/platform-style.android.scss b/packages/components/src/search-control/platform-style.android.scss index 1d774af400900..041e8e09c7438 100644 --- a/packages/components/src/search-control/platform-style.android.scss +++ b/packages/components/src/search-control/platform-style.android.scss @@ -1,7 +1,3 @@ -.search-control__container { - height: 40px; -} - .search-control__container--active { border-bottom-color: $light-gray-500; border-bottom-width: 1px; diff --git a/packages/components/src/search-control/platform-style.ios.scss b/packages/components/src/search-control/platform-style.ios.scss index f083df3e248ff..34884b11b51bc 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 18f2b7490719a..5cac32eddd4a7 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 { From f17e623b7b30116f4c299d47d9a378cce5b050e5 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Wed, 21 Jul 2021 16:50:15 -0400 Subject: [PATCH 04/13] Fix active search cut off --- .../components/src/search-control/platform-style.android.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/search-control/platform-style.android.scss b/packages/components/src/search-control/platform-style.android.scss index 041e8e09c7438..f357c7a4e52fc 100644 --- a/packages/components/src/search-control/platform-style.android.scss +++ b/packages/components/src/search-control/platform-style.android.scss @@ -1,6 +1,7 @@ .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; From 6c72230f78e7328212e519a1cc45a5386e428846 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Wed, 11 Aug 2021 16:43:13 -0400 Subject: [PATCH 05/13] Use fullscreen on Android only --- packages/block-editor/src/components/inserter/menu.native.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 198bb761329e3..0e429e1580538 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -41,6 +41,8 @@ function InserterMenu( { const [ showSearchForm, setShowSearchForm ] = useState( __DEV__ ); const [ tabIndex, setTabIndex ] = useState( 0 ); + const isIOS = Platform.OS === 'ios'; + const { showInsertionPoint, hideInsertionPoint, @@ -201,6 +203,7 @@ function InserterMenu( { hasNavigation setMinHeightToMaxHeight={ showSearchForm } contentStyle={ styles.list } + isFullScreen={ ! isIOS } > { ( { listProps } ) => ( From 1814a3a717bf2b48f731e864c9195acb04fbec2a Mon Sep 17 00:00:00 2001 From: jhnstn Date: Tue, 17 Aug 2021 17:52:59 -0400 Subject: [PATCH 06/13] Add prop to allow drag indicator on Android --- .../block-editor/src/components/inserter/menu.native.js | 3 ++- .../components/src/mobile/bottom-sheet/index.native.js | 9 ++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 0e429e1580538..041ed9b59597a 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -203,7 +203,8 @@ function InserterMenu( { hasNavigation setMinHeightToMaxHeight={ showSearchForm } contentStyle={ styles.list } - isFullScreen={ ! isIOS } + isFullScreen={ ! isIOS && showSearchForm } + allowDragIndicator={ true } > { ( { listProps } ) => ( diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index b481e67dd2f01..5bdbbdf48f0e6 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -394,6 +394,7 @@ class BottomSheet extends Component { children, withHeaderSeparator = false, hasNavigation, + allowDragIndicator = false, ...rest } = this.props; const { @@ -536,9 +537,11 @@ class BottomSheet extends Component { style={ styles.header } onLayout={ this.onHeaderLayout } > - { ! ( Platform.OS === 'android' && isFullScreen ) && ( - - ) } + { ( ! Platform.OS === 'android' || + allowDragIndicator ) && + isFullScreen && ( + + ) } { ! hideHeader && getHeader() } Date: Tue, 17 Aug 2021 17:53:48 -0400 Subject: [PATCH 07/13] Pass in initial number of items to render --- .../src/components/block-types-list/index.native.js | 10 ++++++++-- .../src/components/inserter/menu.native.js | 1 + .../src/components/inserter/search-results.native.js | 2 ++ 3 files changed, 11 insertions(+), 2 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 index 485cde15fbf1f..81795d37e8778 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={ () => ( ) : ( { @@ -46,6 +47,7 @@ function InserterSearchResults( { return ( ); From e39c07b960a06ab17ad28e40c0d3dd270453f543 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Wed, 18 Aug 2021 11:53:54 -0400 Subject: [PATCH 08/13] Update logic to show the drag indicator --- .../src/mobile/bottom-sheet/index.native.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 5bdbbdf48f0e6..27e16192705e7 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -394,7 +394,6 @@ class BottomSheet extends Component { children, withHeaderSeparator = false, hasNavigation, - allowDragIndicator = false, ...rest } = this.props; const { @@ -486,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 ( - { ( ! Platform.OS === 'android' || - allowDragIndicator ) && - isFullScreen && ( - - ) } + { showDragIndicator() && ( + + ) } { ! hideHeader && getHeader() } Date: Wed, 18 Aug 2021 11:53:28 -0500 Subject: [PATCH 09/13] 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. --- .../block-editor/src/components/inserter/menu.native.js | 7 +++++-- .../src/components/inserter/style.native.scss | 9 ++++++--- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 561fcdf077dc7..006fb26e67df2 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -202,13 +202,16 @@ function InserterMenu( { } hasNavigation setMinHeightToMaxHeight={ showSearchForm } - contentStyle={ styles.list } + contentStyle={ styles[ 'inserter-menu__list' ] } isFullScreen={ ! isIOS && showSearchForm } allowDragIndicator={ true } > { ( { listProps } ) => ( - + { ! showTabs || filterValue ? ( Date: Mon, 23 Aug 2021 17:42:17 -0400 Subject: [PATCH 10/13] Enable inserter block search --- packages/block-editor/src/components/inserter/menu.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 006fb26e67df2..82c8438421dcd 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -38,7 +38,7 @@ 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'; From 6897116b2fb47d031a945857c7f9a471ec02e5b8 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Tue, 24 Aug 2021 21:44:41 -0400 Subject: [PATCH 11/13] Fix revert issue --- .../src/components/inserter/style.native.scss | 7 +++---- .../block-editor/src/components/inserter/tabs.native.js | 8 +------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 3f6751ea99066..105af1f72b7d9 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -55,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 06ab3bc859036..73396ec63a6e9 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 ) => ( - + Date: Wed, 25 Aug 2021 10:38:25 -0400 Subject: [PATCH 12/13] Blur inserter search when keyboard closes (#34278) Co-authored-by: jhnstn --- .../src/search-control/index.native.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/components/src/search-control/index.native.js b/packages/components/src/search-control/index.native.js index 61241f77fb810..6797c0c6a0bd9 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, From 2734d2b6b4a42513f7be429682ebef92a3181030 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Wed, 25 Aug 2021 11:00:37 -0400 Subject: [PATCH 13/13] Filter embed blocks from Inserter search block list --- .../inserter/search-results.native.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/search-results.native.js b/packages/block-editor/src/components/inserter/search-results.native.js index 311fcd86843a3..a48109e5c12fe 100644 --- a/packages/block-editor/src/components/inserter/search-results.native.js +++ b/packages/block-editor/src/components/inserter/search-results.native.js @@ -12,6 +12,9 @@ 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, @@ -24,7 +27,19 @@ function InserterSearchResults( { 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 }; },