From 0bf1e7978dfdc67296149caf24a0bd9967c1c9da Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Fri, 12 May 2023 08:05:18 -0400 Subject: [PATCH] perf: Reduce inner blocks tree depth (#50447) * 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. * 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. * wip: Gallery, Columns working; Buttons broken Partially fix multi-column layouts by passing existing styles to a wrapping view. All of the passed styles may not be necessary, need to investigate. Also, Buttons render broken, wrapping lines and overflowing the parent container. * test: Fix nested lists tests Nested lists now rely upon `BlockListItem`, which returns `null` if the `blockWidth` has not yet been set. In order for test queries for nested list items to succeed, we must trigger the `onLayout` callback for the nested block lists. `BlockListItem` is now used to expand capabilities for nested blocks, e.g. multi-column grid items. * wip: Fix Blocks button layout Fixes Buttons, but Columns remain broken. * refactor: Remove unused BlockList title prop * refactor: Separate inner block list styles The list is no longer shared, so we can merely set the appropriate styles on each list element. * refactor: Remove unused virtualized listKey Now that inner blocks do not use a virtualized list, a unique list key is no longer necessary. * refactor: Remove outdated inline comment The scroll ref is no longer passed to inner blocks as they do not use virtualized lists. * wip: Explore nest Columns fixes The relocated styles may need to be separate from the top-level block list element, as the styles may conflict with other styles. It does not fix Columns, however. * Mobile - BlockList - Fix layout issues for stacked horizontally blocks * fix: Revert Buttons alignment workaround This caused issues for non-Buttons inner block alignment. The original issue of Buttons inner blocks not rendering inline was addressed in 43c0b14918f8ed03037c01d94321922dc31a7fa3. * fix: Column width sums less than 100% correct align These styles caused columns to align to the center when their width sum did not equal or execeed 100%. Removing these styles did not appear to negatively impact other inner blocks or the use cases outlined in https://github.com/WordPress/gutenberg/pull/25621. * refactor: Inner blocks use clientId key This mirrors the approach for cells of top-level block lists. It is also likely more robust, providing better performance when reordering blocks. * refactor: Remove unnecessary key The inner blocks list now sets a key on a wrapping view, rather than via the `renderItem` function. Thus, this key is no superfluous. * fix: Prevent block list footer from stretching to parent height The parent flex styles were applied to the footer element. This wrapping view prevents those styles from erroneously stretching the provided footer element. * Mobile - List block - Remove usage of useCompactList and disables the option to render the appender for InnerBlocks * test: Update Android e2e Buttons block Xpath selector This Xpath selector became outdated with the block list refactor. * test: Delay query for block actions menu Appium reported this cached element had been removed from the DOM. Relocating the query seemingly resolved this issue. --------- Co-authored-by: Gerardo --- .../block-list/block-list-compact.native.js | 63 ---- .../src/components/block-list/index.native.js | 293 +++++++++--------- .../block-list/test/index.native.js | 4 +- .../components/inner-blocks/index.native.js | 6 +- .../src/list-item/edit.native.js | 2 +- packages/block-library/src/list/edit.js | 2 +- .../src/list/test/edit.native.js | 17 +- .../__device-tests__/pages/editor-page.js | 10 +- 8 files changed, 179 insertions(+), 218 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 ad9d0c7301eed..0000000000000 --- 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 48f839b156d45..587d03dd88254 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'; @@ -35,14 +34,7 @@ import { store as blockEditorStore } from '../../store'; const identity = ( x ) => x; const stylesMemo = {}; -const getStyles = ( - isRootList, - isStackedHorizontally, - horizontalAlignment -) => { - if ( isRootList ) { - return; - } +const getStyles = ( isStackedHorizontally, horizontalAlignment ) => { const styleName = `${ isStackedHorizontally }-${ horizontalAlignment }`; if ( stylesMemo[ styleName ] ) { return stylesMemo[ styleName ]; @@ -74,7 +66,6 @@ export default function BlockList( { renderAppender, renderFooterAppender, rootClientId, - title, withFooter = true, } ) { const { @@ -190,114 +181,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={ -