From aaaf421598d0beb805f3747be1bb5cafc2d494f4 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Mon, 8 May 2023 14:49:15 -0400 Subject: [PATCH 01/19] test: Await overlooked asynchronous task The test helper executes asynchronous updates to the layout. If this is not awaited, test failures can occur in certain circumstances. --- .../src/components/block-list/test/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/test/index.native.js b/packages/block-editor/src/components/block-list/test/index.native.js index dee27b963d1626..e8d6c8388f1306 100644 --- a/packages/block-editor/src/components/block-list/test/index.native.js +++ b/packages/block-editor/src/components/block-list/test/index.native.js @@ -52,7 +52,7 @@ describe( 'BlockList', () => { await addBlock( screen, 'Social Icons' ); const socialLinksBlock = await getBlock( screen, 'Social Icons' ); fireEvent.press( socialLinksBlock ); - triggerBlockListLayout( socialLinksBlock ); + await triggerBlockListLayout( socialLinksBlock ); // Act fireEvent.press( @@ -82,7 +82,7 @@ describe( 'BlockList', () => { await initializeEditor(); await addBlock( screen, 'Group' ); const groupBlock = await getBlock( screen, 'Group' ); - triggerBlockListLayout( groupBlock ); + await triggerBlockListLayout( groupBlock ); // Assert expect( From 517d99f9274226afe24a290908fd62b7676d8c43 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Mon, 8 May 2023 15:16:42 -0400 Subject: [PATCH 02/19] feat: Combine BlockList and BlockListCompact Reduce code duplication between the separate components, e.g. item render, footer, end-of-list block appender button, empty list placeholder. --- .../block-list/block-list-compact.native.js | 63 ---- .../src/components/block-list/index.native.js | 278 ++++++++++-------- .../components/inner-blocks/index.native.js | 6 +- 3 files changed, 150 insertions(+), 197 deletions(-) delete mode 100644 packages/block-editor/src/components/block-list/block-list-compact.native.js diff --git a/packages/block-editor/src/components/block-list/block-list-compact.native.js b/packages/block-editor/src/components/block-list/block-list-compact.native.js deleted file mode 100644 index ad9d0c7301eed3..00000000000000 --- a/packages/block-editor/src/components/block-list/block-list-compact.native.js +++ /dev/null @@ -1,63 +0,0 @@ -/** - * External dependencies - */ -import { View } from 'react-native'; - -/** - * WordPress dependencies - */ -import { store as blockEditorStore } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import styles from './style.scss'; -import BlockListBlock from './block'; - -/** - * NOTE: This is a component currently used by the List block (V2) - * It only passes the needed props for this block, if other blocks will use it - * make sure you pass other props that might be required coming from: - * components/inner-blocks/index.native.js - */ - -function BlockListCompact( props ) { - const { - marginHorizontal = styles.defaultBlock.marginLeft, - marginVertical = styles.defaultBlock.marginTop, - rootClientId, - } = props; - const { blockClientIds } = useSelect( - ( select ) => { - const { getBlockOrder } = select( blockEditorStore ); - const blockOrder = getBlockOrder( rootClientId ); - - return { - blockClientIds: blockOrder, - }; - }, - [ rootClientId ] - ); - - const containerStyle = { - marginVertical: -marginVertical, - marginHorizontal: -marginHorizontal, - }; - - return ( - - { blockClientIds.map( ( currentClientId ) => ( - - ) ) } - - ); -} - -export default BlockListCompact; 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 48f839b156d455..953f2cc469ba7d 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -26,7 +26,6 @@ import BlockListItem from './block-list-item'; import BlockListItemCell from './block-list-item-cell'; import { BlockListProvider, - BlockListConsumer, DEFAULT_BLOCK_LIST_CONTEXT, } from './block-list-context'; import { BlockDraggableWrapper } from '../block-draggable'; @@ -190,114 +189,6 @@ export default function BlockList( { } }; - const renderList = ( extraProps = {} ) => { - const { parentScrollRef, onScroll } = extraProps; - - const { blockToolbar, headerToolbar, floatingToolbar } = styles; - - const containerStyle = { - flex: isRootList ? 1 : 0, - // We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks. - marginVertical: isRootList ? 0 : -marginVertical, - marginHorizontal: isRootList ? 0 : -marginHorizontal, - }; - - const isContentStretch = contentResizeMode === 'stretch'; - const isMultiBlocks = blockClientIds.length > 1; - const { isWider } = alignmentHelpers; - const extraScrollHeight = - headerToolbar.height + - blockToolbar.height + - ( isFloatingToolbarVisible ? floatingToolbar.height : 0 ); - - const scrollViewStyle = [ - { flex: isRootList ? 1 : 0 }, - ! isRootList && styles.overflowVisible, - ]; - - return ( - - { - scrollViewRef.current = parentScrollRef || ref; - } } - extraScrollHeight={ extraScrollHeight } - keyboardShouldPersistTaps="always" - scrollViewStyle={ scrollViewStyle } - extraData={ getExtraData() } - scrollEnabled={ isRootList } - contentContainerStyle={ [ - horizontal && styles.horizontalContentContainer, - isWider( blockWidth, 'medium' ) && - ( isContentStretch && isMultiBlocks - ? styles.horizontalContentContainerStretch - : styles.horizontalContentContainerCenter ), - ] } - style={ getStyles( - isRootList, - isStackedHorizontally, - horizontalAlignment - ) } - data={ blockClientIds } - keyExtractor={ identity } - listKey={ - rootClientId ? `list-${ rootClientId }` : 'list-root' - } - renderItem={ renderItem } - CellRendererComponent={ BlockListItemCell } - shouldPreventAutomaticScroll={ - shouldFlatListPreventAutomaticScroll - } - title={ title } - ListHeaderComponent={ header } - ListEmptyComponent={ - ! isReadOnly && ( - - ) - } - ListFooterComponent={ -