From f055d530ddf6d0fdc2aeef919c6d314a41a516ca Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Fri, 23 Apr 2021 14:34:21 +0300 Subject: [PATCH 01/20] First stab at scrolling to the indicator Works but the placement of the code that scrolls is not proper. Should not be in the render function. --- .../block-list/block-list-item.native.js | 2 + .../src/components/block-list/index.native.js | 57 +++++++++++++++++-- .../keyboard-aware-flat-list/index.android.js | 2 +- 3 files changed, 55 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.js b/packages/block-editor/src/components/block-list/block-list-item.native.js index 206ac48892a99e..eb694a8636b1e8 100644 --- a/packages/block-editor/src/components/block-list/block-list-item.native.js +++ b/packages/block-editor/src/components/block-list/block-list-item.native.js @@ -117,6 +117,7 @@ export class BlockListItem extends Component { marginHorizontal, blockName, blockWidth, + onLayout, ...restProps } = this.props; const readableContentViewStyle = @@ -141,6 +142,7 @@ export class BlockListItem extends Component { { shouldShowInsertionPointBefore && ( diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index c60163cf9a3bee..0d6c7c78fe2d75 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -79,6 +79,7 @@ export class BlockList extends Component { this.getExtraData = this.getExtraData.bind( this ); this.onLayout = this.onLayout.bind( this ); + this.itemHeights = []; this.state = { blockWidth: this.props.blockWidth || 0, @@ -103,7 +104,7 @@ export class BlockList extends Component { } shouldFlatListPreventAutomaticScroll() { - return this.props.isBlockInsertionPointVisible; + return false; } shouldShowInnerBlockAppender() { @@ -166,7 +167,12 @@ export class BlockList extends Component { } render() { - const { isRootList } = this.props; + const { + isRootList, + isBlockInsertionPointVisible, + selectedBlockClientId, + blockClientIds, + } = this.props; // Use of Context to propagate the main scroll ref to its children e.g InnerBlocks const blockList = isRootList ? ( @@ -182,6 +188,17 @@ export class BlockList extends Component { ); + if ( isRootList && isBlockInsertionPointVisible ) { + const jumpToIndex = blockClientIds.findIndex( + ( el ) => el === selectedBlockClientId + ); + console.log( { + selectedBlockClientId, + jumpToIndex, + blockClientIds, + } ); + this.scrollViewRef.scrollToIndex( { index: jumpToIndex } ); + } return ( { + const ITEM_HEIGHT = 30; + // const ii = this.itemHeights; + const length = + this.itemHeights && + this.itemHeights.length > 0 && + this.itemHeights[ index ] + ? this.itemHeights[ index ] + : ITEM_HEIGHT; + const offset = + this.itemHeights && this.itemHeights.length > 0 + ? this.itemHeights.reduce( + ( acc, val, i ) => + val && val > 0 + ? acc + val + : acc + ITEM_HEIGHT, + 0 + ) + : ITEM_HEIGHT * index; + // console.log( { ii, index } ); + return { + length: length, + offset: offset, + index, + }; + } } shouldPreventAutomaticScroll={ this.shouldFlatListPreventAutomaticScroll } @@ -302,7 +345,7 @@ export class BlockList extends Component { ); } - renderItem( { item: clientId } ) { + renderItem( { item: clientId, index } ) { const { contentResizeMode, contentStyle, @@ -331,6 +374,10 @@ export class BlockList extends Component { this.shouldShowInnerBlockAppender } blockWidth={ blockWidth } + onLayout={ ( object ) => + ( this.itemHeights[ index ] = + object.nativeEvent.layout.height ) + } /> ); } @@ -396,8 +443,8 @@ export default compose( [ return { blockClientIds, blockCount, - isBlockInsertionPointVisible: - Platform.OS === 'ios' && isBlockInsertionPointVisible(), + isBlockInsertionPointVisible: isBlockInsertionPointVisible(), + selectedBlockClientId, isReadOnly, isRootList: rootClientId === undefined, isFloatingToolbarVisible, diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/index.android.js b/packages/components/src/mobile/keyboard-aware-flat-list/index.android.js index 0774c845ebcf54..3b8b13704e05aa 100644 --- a/packages/components/src/mobile/keyboard-aware-flat-list/index.android.js +++ b/packages/components/src/mobile/keyboard-aware-flat-list/index.android.js @@ -10,7 +10,7 @@ import KeyboardAvoidingView from '../keyboard-avoiding-view'; export const KeyboardAwareFlatList = ( props ) => ( - + ); From 9d6145c69d1ac94850b64b55a4eb7922107dec7b Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Fri, 23 Apr 2021 15:51:40 +0300 Subject: [PATCH 02/20] Use insertionPoint selector and scroll in componentDidUpdate --- .../src/components/block-list/index.native.js | 48 ++++++++++++------- 1 file changed, 31 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 0d6c7c78fe2d75..f60fce4788ada6 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -166,13 +166,32 @@ export class BlockList extends Component { } } - render() { + componentDidUpdate( prevProps ) { const { isRootList, isBlockInsertionPointVisible, - selectedBlockClientId, + insertionPoint, blockClientIds, } = this.props; + + // Typical usage (don't forget to compare props): + if ( + isBlockInsertionPointVisible !== + prevProps.isBlockInsertionPointVisible + ) { + if ( isRootList && isBlockInsertionPointVisible ) { + const jumpToIndex = insertionPoint.index - 1; // scrolling goes to the bottom of the item so, let's scroll to one above + if ( jumpToIndex < 0 ) { + this.scrollViewRef.scrollToOffset( { offset: 0 } ); + } else { + this.scrollViewRef.scrollToIndex( { index: jumpToIndex } ); + } + } + } + } + + render() { + const { isRootList } = this.props; // Use of Context to propagate the main scroll ref to its children e.g InnerBlocks const blockList = isRootList ? ( @@ -188,17 +207,6 @@ export class BlockList extends Component { ); - if ( isRootList && isBlockInsertionPointVisible ) { - const jumpToIndex = blockClientIds.findIndex( - ( el ) => el === selectedBlockClientId - ); - console.log( { - selectedBlockClientId, - jumpToIndex, - blockClientIds, - } ); - this.scrollViewRef.scrollToIndex( { index: jumpToIndex } ); - } return ( 0 ? this.itemHeights.reduce( ( acc, val, i ) => - val && val > 0 - ? acc + val - : acc + ITEM_HEIGHT, + i <= index + ? val && val > 0 + ? acc + val + : acc + ITEM_HEIGHT + : acc, 0 ) : ITEM_HEIGHT * index; - // console.log( { ii, index } ); return { length: length, offset: offset, @@ -418,6 +427,7 @@ export default compose( [ getBlockCount, getBlockOrder, getSelectedBlockClientId, + getBlockInsertionPoint, isBlockInsertionPointVisible, getSettings, } = select( blockEditorStore ); @@ -440,9 +450,13 @@ export default compose( [ const isFloatingToolbarVisible = !! selectedBlockClientId && hasRootInnerBlocks; + + const insertionPoint = getBlockInsertionPoint(); + return { blockClientIds, blockCount, + insertionPoint, isBlockInsertionPointVisible: isBlockInsertionPointVisible(), selectedBlockClientId, isReadOnly, From f6c62d9db6892c86f12ef10f65b963c26115d4e1 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Fri, 23 Apr 2021 16:13:11 +0300 Subject: [PATCH 03/20] Remove unneeded assignment --- packages/block-editor/src/components/block-list/index.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index f60fce4788ada6..8170386f679b29 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -171,7 +171,6 @@ export class BlockList extends Component { isRootList, isBlockInsertionPointVisible, insertionPoint, - blockClientIds, } = this.props; // Typical usage (don't forget to compare props): From a596571be099b6112ec97b5b8bf771fe0219f9be Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Fri, 23 Apr 2021 16:29:18 +0300 Subject: [PATCH 04/20] Slice array instead of conditional for limiting accumulation --- .../src/components/block-list/index.native.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 8170386f679b29..9a4eee33f43387 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -310,15 +310,15 @@ export class BlockList extends Component { : ITEM_HEIGHT; const offset = this.itemHeights && this.itemHeights.length > 0 - ? this.itemHeights.reduce( - ( acc, val, i ) => - i <= index - ? val && val > 0 + ? this.itemHeights + .slice( 0, index + 1 ) + .reduce( + ( acc, val, i ) => + val && val > 0 ? acc + val - : acc + ITEM_HEIGHT - : acc, - 0 - ) + : acc + ITEM_HEIGHT, + 0 + ) : ITEM_HEIGHT * index; return { length: length, From 76b2594d183d525124b9d87407a774d24cacead2 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Fri, 23 Apr 2021 17:58:02 +0300 Subject: [PATCH 05/20] Keep clientId list so block removals/additions can be correctly calculated --- .../src/components/block-list/index.native.js | 34 ++++++++----------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 9a4eee33f43387..cf7d3103bd71f4 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -300,26 +300,20 @@ export class BlockList extends Component { keyExtractor={ identity } renderItem={ this.renderItem } getItemLayout={ ( data, index ) => { + const heights = this.itemHeights; const ITEM_HEIGHT = 30; - // const ii = this.itemHeights; - const length = - this.itemHeights && - this.itemHeights.length > 0 && - this.itemHeights[ index ] - ? this.itemHeights[ index ] - : ITEM_HEIGHT; - const offset = - this.itemHeights && this.itemHeights.length > 0 - ? this.itemHeights - .slice( 0, index + 1 ) - .reduce( - ( acc, val, i ) => - val && val > 0 - ? acc + val - : acc + ITEM_HEIGHT, - 0 - ) - : ITEM_HEIGHT * index; + const length = heights[ data[ index ] ] + ? heights[ data[ index ] ] + : ITEM_HEIGHT; + const offset = data + .slice( 0, index + 1 ) + .reduce( + ( acc, id, i ) => + heights[ id ] && heights[ id ] > 0 + ? acc + heights[ id ] + : acc + ITEM_HEIGHT, + 0 + ); return { length: length, offset: offset, @@ -383,7 +377,7 @@ export class BlockList extends Component { } blockWidth={ blockWidth } onLayout={ ( object ) => - ( this.itemHeights[ index ] = + ( this.itemHeights[ clientId ] = object.nativeEvent.layout.height ) } /> From 371c5e6330017772316fbe535c064f243f6e614f Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Fri, 23 Apr 2021 17:59:02 +0300 Subject: [PATCH 06/20] Remove unneeded assignment --- packages/block-editor/src/components/block-list/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index cf7d3103bd71f4..61df89ec9b79cc 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -308,7 +308,7 @@ export class BlockList extends Component { const offset = data .slice( 0, index + 1 ) .reduce( - ( acc, id, i ) => + ( acc, id ) => heights[ id ] && heights[ id ] > 0 ? acc + heights[ id ] : acc + ITEM_HEIGHT, From 9400f23794394fd6140e79a29155f4aa8e6f0143 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Fri, 23 Apr 2021 19:09:06 +0300 Subject: [PATCH 07/20] Remove verbose property passing --- .../block-editor/src/components/block-list/index.native.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 61df89ec9b79cc..eb45595ad3ee38 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -315,8 +315,8 @@ export class BlockList extends Component { 0 ); return { - length: length, - offset: offset, + length, + offset, index, }; } } @@ -347,7 +347,7 @@ export class BlockList extends Component { ); } - renderItem( { item: clientId, index } ) { + renderItem( { item: clientId } ) { const { contentResizeMode, contentStyle, From 7862e894fc5f70bd495df35800f7a4f91d96b6c5 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Sat, 24 Apr 2021 02:59:29 +0300 Subject: [PATCH 08/20] Also scroll on iOS On iOS we use a ScrollView so, utilizing the scrollTo to specific offset. Computing the offset on the spot as the ScrollView doesn't keep an internal cache of item offsets. --- .../src/components/block-list/index.native.js | 39 +++++++++++++++++-- 1 file changed, 36 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index eb45595ad3ee38..fdb2b760bbfcc2 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -79,6 +79,8 @@ export class BlockList extends Component { this.getExtraData = this.getExtraData.bind( this ); this.onLayout = this.onLayout.bind( this ); + + this.offsetOfIndex = this.offsetOfIndex.bind( this ); this.itemHeights = []; this.state = { @@ -166,11 +168,27 @@ export class BlockList extends Component { } } + offsetOfIndex( heights, blockClientIds, index ) { + const ITEM_HEIGHT = 30; // just an kinda arbitrary default height, just to have it non zero. + const offset = blockClientIds + .slice( 0, index + 1 ) // only add up to the index we want (adding 1 to include the indexed item itself too) + .reduce( + // accumulate the heights of the items + ( acc, id ) => + heights[ id ] && heights[ id ] > 0 + ? acc + heights[ id ] + : acc + ITEM_HEIGHT, + 0 + ); + return offset; + } + componentDidUpdate( prevProps ) { const { isRootList, isBlockInsertionPointVisible, insertionPoint, + blockClientIds, } = this.props; // Typical usage (don't forget to compare props): @@ -180,10 +198,25 @@ export class BlockList extends Component { ) { if ( isRootList && isBlockInsertionPointVisible ) { const jumpToIndex = insertionPoint.index - 1; // scrolling goes to the bottom of the item so, let's scroll to one above - if ( jumpToIndex < 0 ) { - this.scrollViewRef.scrollToOffset( { offset: 0 } ); + if ( Platform.OS === 'android' ) { + if ( jumpToIndex < 0 ) { + this.scrollViewRef.scrollToOffset( { offset: 0 } ); + } else { + this.scrollViewRef.scrollToIndex( { + index: jumpToIndex, + } ); + } } else { - this.scrollViewRef.scrollToIndex( { index: jumpToIndex } ); + this.scrollViewRef.scrollTo( { + y: + jumpToIndex < 0 + ? 0 + : this.offsetOfIndex( + this.itemHeights, + blockClientIds, + jumpToIndex + ), + } ); } } } From 4da01c9da51aea60207a6b726c9f6686e13b841a Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Sat, 24 Apr 2021 03:43:53 +0300 Subject: [PATCH 09/20] Use scrollToOffset always on Android to simplify code --- .../src/components/block-list/index.native.js | 31 +++++++------------ 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index fdb2b760bbfcc2..81398749b15940 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -198,26 +198,17 @@ export class BlockList extends Component { ) { if ( isRootList && isBlockInsertionPointVisible ) { const jumpToIndex = insertionPoint.index - 1; // scrolling goes to the bottom of the item so, let's scroll to one above - if ( Platform.OS === 'android' ) { - if ( jumpToIndex < 0 ) { - this.scrollViewRef.scrollToOffset( { offset: 0 } ); - } else { - this.scrollViewRef.scrollToIndex( { - index: jumpToIndex, - } ); - } - } else { - this.scrollViewRef.scrollTo( { - y: - jumpToIndex < 0 - ? 0 - : this.offsetOfIndex( - this.itemHeights, - blockClientIds, - jumpToIndex - ), - } ); - } + const offset = + jumpToIndex < 0 + ? 0 + : this.offsetOfIndex( + this.itemHeights, + blockClientIds, + jumpToIndex + ); + Platform.OS === 'android' + ? this.scrollViewRef.scrollToOffset( { offset: offset } ) + : this.scrollViewRef.scrollTo( { y: offset } ); } } } From 40ccf72fc4175567d19d7ad4c06a9c588d36f791 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Sat, 24 Apr 2021 03:51:13 +0300 Subject: [PATCH 10/20] No need for getItemLayout anymore scrollToOffset doesn't require it. --- .../src/components/block-list/index.native.js | 21 ------------------- 1 file changed, 21 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 81398749b15940..236ec0e7c998c7 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -323,27 +323,6 @@ export class BlockList extends Component { data={ blockClientIds } keyExtractor={ identity } renderItem={ this.renderItem } - getItemLayout={ ( data, index ) => { - const heights = this.itemHeights; - const ITEM_HEIGHT = 30; - const length = heights[ data[ index ] ] - ? heights[ data[ index ] ] - : ITEM_HEIGHT; - const offset = data - .slice( 0, index + 1 ) - .reduce( - ( acc, id ) => - heights[ id ] && heights[ id ] > 0 - ? acc + heights[ id ] - : acc + ITEM_HEIGHT, - 0 - ); - return { - length, - offset, - index, - }; - } } shouldPreventAutomaticScroll={ this.shouldFlatListPreventAutomaticScroll } From 1bc5669391027d9459df3a5b790d56f914d4c7e3 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Sat, 24 Apr 2021 04:21:27 +0300 Subject: [PATCH 11/20] Fix innerblocks case to not scroll at all isRootList coming from the props is still true, but the insertion point can have a different (non empty) root when insider innerblocks. --- .../block-editor/src/components/block-list/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 236ec0e7c998c7..6b12821d9a6d0c 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -185,7 +185,6 @@ export class BlockList extends Component { componentDidUpdate( prevProps ) { const { - isRootList, isBlockInsertionPointVisible, insertionPoint, blockClientIds, @@ -196,7 +195,8 @@ export class BlockList extends Component { isBlockInsertionPointVisible !== prevProps.isBlockInsertionPointVisible ) { - if ( isRootList && isBlockInsertionPointVisible ) { + const insertionPointInRootList = insertionPoint.rootClientId === undefined; + if ( insertionPointInRootList && isBlockInsertionPointVisible ) { const jumpToIndex = insertionPoint.index - 1; // scrolling goes to the bottom of the item so, let's scroll to one above const offset = jumpToIndex < 0 From 68e511846e8e97e7b38d900de30c51e423c80510 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Sat, 24 Apr 2021 04:53:55 +0300 Subject: [PATCH 12/20] Set list footer height to a ratio of the list height This way, there's always enough room for the insertion point and the inserter to be visible when adding a new block at the end of the content. --- .../src/components/block-list/index.native.js | 15 ++++++++++++++- .../src/components/block-list/style.native.scss | 2 +- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 6b12821d9a6d0c..ef3179addb6dfd 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -80,6 +80,7 @@ export class BlockList extends Component { this.onLayout = this.onLayout.bind( this ); + this.listHeight = 0; this.offsetOfIndex = this.offsetOfIndex.bind( this ); this.itemHeights = []; @@ -158,6 +159,8 @@ export class BlockList extends Component { const { blockWidth } = this.state; const { isRootList, maxWidth } = this.props; + this.listHeight = layout.height; + const layoutWidth = Math.floor( layout.width ); if ( isRootList && blockWidth !== layoutWidth ) { this.setState( { @@ -396,6 +399,11 @@ export class BlockList extends Component { } = this.props; if ( ! isReadOnly && withFooter ) { + const footerHeight = Math.max( + ( this.listHeight * 3 ) / 4, // set the footer to 3 quarters of the list height to give room for the inserter and the insertion point + styles.blockListFooter.minHeight + ); + return ( <> - + ); diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss index 66436c6592358b..2e6c7a624c6f5f 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/packages/block-editor/src/components/block-list/style.native.scss @@ -61,7 +61,7 @@ } .blockListFooter { - height: 80px; + min-height: 80px; } .defaultBlock { From d8a925896d9d2feed1f2e80500b5519eb3b2e6a3 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Sat, 24 Apr 2021 05:12:43 +0300 Subject: [PATCH 13/20] Simplify property passing --- packages/block-editor/src/components/block-list/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index ef3179addb6dfd..c1dffc2763e8ff 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -210,7 +210,7 @@ export class BlockList extends Component { jumpToIndex ); Platform.OS === 'android' - ? this.scrollViewRef.scrollToOffset( { offset: offset } ) + ? this.scrollViewRef.scrollToOffset( { offset } ) : this.scrollViewRef.scrollTo( { y: offset } ); } } From 7ab5f0322276f35f8ac027caa1b112f7000e4796 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Sat, 24 Apr 2021 05:21:46 +0300 Subject: [PATCH 14/20] Rewrite to please the linter --- .../src/components/block-list/index.native.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index c1dffc2763e8ff..eb029fb3e813e9 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -198,7 +198,8 @@ export class BlockList extends Component { isBlockInsertionPointVisible !== prevProps.isBlockInsertionPointVisible ) { - const insertionPointInRootList = insertionPoint.rootClientId === undefined; + const insertionPointInRootList = + insertionPoint.rootClientId === undefined; if ( insertionPointInRootList && isBlockInsertionPointVisible ) { const jumpToIndex = insertionPoint.index - 1; // scrolling goes to the bottom of the item so, let's scroll to one above const offset = @@ -209,9 +210,11 @@ export class BlockList extends Component { blockClientIds, jumpToIndex ); - Platform.OS === 'android' - ? this.scrollViewRef.scrollToOffset( { offset } ) - : this.scrollViewRef.scrollTo( { y: offset } ); + if ( Platform.OS === 'android' ) { + this.scrollViewRef.scrollToOffset( { offset } ); + } else { + this.scrollViewRef.scrollTo( { y: offset } ); + } } } } From c2856b58bc3a19d04fd847be16e13dcb510a14ca Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Sun, 25 Apr 2021 05:20:09 +0300 Subject: [PATCH 15/20] Accessibility name included in parents so, grab the innermost --- .../react-native-editor/__device-tests__/pages/editor-page.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js index 83cfd9a21ac079..2a52a8d02cfd20 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -99,9 +99,9 @@ class EditorPage { } async getFirstBlockVisible() { - const firstBlockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, " Block. Row ")]`; + const firstBlockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, " Block. Row 1")]`; // notice the `1`, looking only for the first block but the "Block. Row 1" text is there in many of the parent components const elements = await this.driver.elementsByXPath( firstBlockLocator ); - return elements[ 0 ]; + return elements[ elements.length - 1 ]; // return the last found as it will be the innermost } async getLastBlockVisible() { From 718dee15d3ad36d78852e4a9d4946ae13937b0c8 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Fri, 4 Jun 2021 17:17:33 +0300 Subject: [PATCH 16/20] Remove shouldFlatListPreventAutomaticScroll, always scrolling now --- .../src/components/block-list/index.native.js | 10 ---------- .../src/mobile/keyboard-aware-flat-list/index.ios.js | 4 +--- 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index eb029fb3e813e9..ba9d5bf387346a 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -69,9 +69,6 @@ export class BlockList extends Component { ); this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this ); this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this ); - this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind( - this - ); this.shouldShowInnerBlockAppender = this.shouldShowInnerBlockAppender.bind( this ); @@ -106,10 +103,6 @@ export class BlockList extends Component { this.scrollViewRef = ref; } - shouldFlatListPreventAutomaticScroll() { - return false; - } - shouldShowInnerBlockAppender() { const { blockClientIds, renderAppender } = this.props; return renderAppender && blockClientIds.length > 0; @@ -329,9 +322,6 @@ export class BlockList extends Component { data={ blockClientIds } keyExtractor={ identity } renderItem={ this.renderItem } - shouldPreventAutomaticScroll={ - this.shouldFlatListPreventAutomaticScroll - } title={ title } ListHeaderComponent={ header } ListEmptyComponent={ ! isReadOnly && this.renderEmptyList } diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js index a37edf9fdd009b..0dd35fa087f9ac 100644 --- a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js +++ b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js @@ -14,7 +14,6 @@ const List = memo( FlatList, isEqual ); export const KeyboardAwareFlatList = ( { extraScrollHeight, - shouldPreventAutomaticScroll, innerRef, autoScroll, scrollViewStyle, @@ -41,8 +40,7 @@ export const KeyboardAwareFlatList = ( { setTimeout( () => { if ( ! this.keyboardWillShowIndicator && - this.latestContentOffsetY !== undefined && - ! shouldPreventAutomaticScroll() + this.latestContentOffsetY !== undefined ) { // Reset the content position if keyboard is still closed if ( this.scrollViewRef ) { From 1a3e8119f4dd2d77fa9fc4a583339d4d545812ca Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Wed, 16 Jun 2021 16:19:15 +0300 Subject: [PATCH 17/20] Add relevant entry to the changelog --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index ba64ae5fa2417e..0a0048ee3d40ea 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -13,6 +13,7 @@ For each user feature we should also add a importance categorization label to i - [*] Gallery block - Fix gallery images caption text formatting [#32351] - [*] Image block: "Set as featured" button within image block settings. (Android only) [#31705] - [***] Audio block now available on WP.com sites on the free plan. [#31966] +- [**] Scrolling to the new-block indicator when adding a block. [#31144] ## 1.54.0 - [***] Slash inserter [#29772] From 00ee6ad5d590b0b153479b4b982ca27aa2cc8fc6 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Wed, 16 Jun 2021 16:37:07 +0300 Subject: [PATCH 18/20] Add some informational inline comments --- .../src/components/block-list/index.native.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 7fe5422e723f37..d8f43258ecbbd7 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -152,6 +152,7 @@ export class BlockList extends Component { const { blockWidth } = this.state; const { isRootList, maxWidth } = this.props; + // update the known list height. Using it to compute how much empty space to reserve in the footer this.listHeight = layout.height; const layoutWidth = Math.floor( layout.width ); @@ -164,8 +165,11 @@ export class BlockList extends Component { } } + /** + * Computes the offset of a block in pixels, by adding up all the block heights before it. + */ offsetOfIndex( heights, blockClientIds, index ) { - const ITEM_HEIGHT = 30; // just an kinda arbitrary default height, just to have it non zero. + const ITEM_HEIGHT = 30; // just a kinda arbitrary default height, just to have it non zero. const offset = blockClientIds .slice( 0, index + 1 ) // only add up to the index we want (adding 1 to include the indexed item itself too) .reduce( @@ -186,7 +190,7 @@ export class BlockList extends Component { blockClientIds, } = this.props; - // Typical usage (don't forget to compare props): + // if we're now showing the new-block indicator, trigger a scroll to it if ( isBlockInsertionPointVisible !== prevProps.isBlockInsertionPointVisible @@ -376,9 +380,10 @@ export class BlockList extends Component { this.shouldShowInnerBlockAppender } blockWidth={ blockWidth } - onLayout={ ( object ) => - ( this.itemHeights[ clientId ] = - object.nativeEvent.layout.height ) + onLayout={ + ( object ) => + ( this.itemHeights[ clientId ] = + object.nativeEvent.layout.height ) // Capture the block height. We'll use the list of heights to compute offsets. } /> ); @@ -394,7 +399,7 @@ export class BlockList extends Component { if ( ! isReadOnly && withFooter ) { const footerHeight = Math.max( - ( this.listHeight * 3 ) / 4, // set the footer to 3 quarters of the list height to give room for the inserter and the insertion point + ( this.listHeight * 3 ) / 4, // set the footer to 3 quarters of the list height to give room for the inserter *plus* the insertion point styles.blockListFooter.minHeight ); From 6c6f56249660c95f9d9c61f0ab35614311dca0f5 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Wed, 16 Jun 2021 17:07:53 +0300 Subject: [PATCH 19/20] Fix lint issue --- packages/block-editor/src/components/block-list/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index d8f43258ecbbd7..4560a1ebcff164 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -165,6 +165,7 @@ export class BlockList extends Component { } } + /* eslint-disable jsdoc/require-param */ /** * Computes the offset of a block in pixels, by adding up all the block heights before it. */ From e096eb31a6e54a034ef944ce4684617dd9c62d98 Mon Sep 17 00:00:00 2001 From: Stefanos Togkoulidis Date: Wed, 16 Jun 2021 17:29:22 +0300 Subject: [PATCH 20/20] Need to re-enable the lint check at some point --- packages/block-editor/src/components/block-list/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 4560a1ebcff164..e2e8887ce25049 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -169,6 +169,7 @@ export class BlockList extends Component { /** * Computes the offset of a block in pixels, by adding up all the block heights before it. */ + /* eslint-enable jsdoc/require-param */ offsetOfIndex( heights, blockClientIds, index ) { const ITEM_HEIGHT = 30; // just a kinda arbitrary default height, just to have it non zero. const offset = blockClientIds