Skip to content

List View: avoid re-rendering all items on block focus. Enable persistent List View in the widget editor. #35706

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gwwar merged 17 commits into from
Oct 22, 2021
Merged

List View: avoid re-rendering all items on block focus. Enable persistent List View in the widget editor. #35706

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
87c1c99
List View: add e2e utils for list view open and close
gwwar Oct 15, 2021
96ef0be
remove onClick in branch
gwwar Oct 15, 2021
ae8ab8e
removed unused terminated levels
gwwar Oct 15, 2021
153d4fb
use callback for toggle expand/collapse
gwwar Oct 15, 2021
3ec0b03
update path to be a string to avoid ref changes
gwwar Oct 15, 2021
79bb704
List View: experimental change to move selection querying to List Vie…
gwwar Oct 16, 2021
ff6d656
List View: simplify useListViewClientIds and remove showOnlyCurrentHi…
gwwar Oct 18, 2021
2e0ba25
List View: move nested AsyncModeProvider call to ListViewBlock
gwwar Oct 18, 2021
7a88277
List View: make available flags present in JSDoc
gwwar Oct 18, 2021
aa4475a
List View: remove unneeded is-last-of-selected-branch logic
gwwar Oct 18, 2021
5c40c7e
List View: tidy comments in branch.js
gwwar Oct 18, 2021
f32d9ee
Edit Widgets: use list view sidebar instead of dropdown
gwwar Oct 18, 2021
d073b8f
Edit Widgets: make sure global inserter closes on toggle
gwwar Oct 19, 2021
85bca37
Edit Widgets: fix E2Es and add simple list view test
gwwar Oct 19, 2021
4e3a906
Edit Widgets: do not show actions in list view for widget areas
gwwar Oct 20, 2021
efe9c33
add related changelogs to block-editor and edit-widgets
gwwar Oct 22, 2021
28f60b5
add detail to the performance change
gwwar Oct 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
List View: move nested AsyncModeProvider call to ListViewBlock
  • Loading branch information
@gwwar
gwwar committed Oct 22, 2021
commit 2e0ba25a4b21c7be4bc1daab75bd49ee8477babf
171 changes: 87 additions & 84 deletions packages/block-editor/src/components/list-view/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from '@wordpress/components';
import { moreVertical } from '@wordpress/icons';
import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { useDispatch, useSelect, AsyncModeProvider } from '@wordpress/data';

/**
* Internal dependencies
Expand Down Expand Up @@ -151,92 +151,95 @@ export default function ListViewBlock( {
} );

return (
<ListViewLeaf
className={ classes }
onMouseEnter={ onMouseEnter }
onMouseLeave={ onMouseLeave }
onFocus={ onMouseEnter }
onBlur={ onMouseLeave }
level={ level }
position={ position }
rowCount={ rowCount }
path={ path }
id={ `list-view-block-${ clientId }` }
data-block={ clientId }
isExpanded={ isExpanded }
>
<TreeGridCell
className="block-editor-list-view-block__contents-cell"
colSpan={ hasRenderedMovers ? undefined : 2 }
ref={ cellRef }
<AsyncModeProvider value={ ! isSelected }>
<ListViewLeaf
className={ classes }
onMouseEnter={ onMouseEnter }
onMouseLeave={ onMouseLeave }
onFocus={ onMouseEnter }
onBlur={ onMouseLeave }
level={ level }
position={ position }
rowCount={ rowCount }
path={ path }
id={ `list-view-block-${ clientId }` }
data-block={ clientId }
isExpanded={ isExpanded }
>
{ ( { ref, tabIndex, onFocus } ) => (
<div className="block-editor-list-view-block__contents-container">
<ListViewBlockContents
block={ block }
onClick={ selectEditorBlock }
onToggleExpanded={ toggleExpanded }
isSelected={ isSelected }
position={ position }
siblingBlockCount={ siblingBlockCount }
level={ level }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
</div>
) }
</TreeGridCell>
{ hasRenderedMovers && (
<>
<TreeGridCell
className={ moverCellClassName }
withoutGridItem
>
<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockMoverUpButton
orientation="vertical"
clientIds={ [ clientId ] }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
) }
</TreeGridItem>
<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockMoverDownButton
orientation="vertical"
clientIds={ [ clientId ] }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
) }
</TreeGridItem>
</TreeGridCell>
</>
) }

{ withExperimentalFeatures && (
<TreeGridCell className={ listViewBlockSettingsClassName }>
<TreeGridCell
className="block-editor-list-view-block__contents-cell"
colSpan={ hasRenderedMovers ? undefined : 2 }
ref={ cellRef }
>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockSettingsDropdown
clientIds={ [ clientId ] }
icon={ moreVertical }
toggleProps={ {
ref,
className: 'block-editor-list-view-block__menu',
tabIndex,
onFocus,
} }
disableOpenOnArrowDown
__experimentalSelectBlock={ selectEditorBlock }
/>
<div className="block-editor-list-view-block__contents-container">
<ListViewBlockContents
block={ block }
onClick={ selectEditorBlock }
onToggleExpanded={ toggleExpanded }
isSelected={ isSelected }
position={ position }
siblingBlockCount={ siblingBlockCount }
level={ level }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
</div>
) }
</TreeGridCell>
) }
</ListViewLeaf>
{ hasRenderedMovers && (
<>
<TreeGridCell
className={ moverCellClassName }
withoutGridItem
>
<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockMoverUpButton
orientation="vertical"
clientIds={ [ clientId ] }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
) }
</TreeGridItem>
<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockMoverDownButton
orientation="vertical"
clientIds={ [ clientId ] }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
) }
</TreeGridItem>
</TreeGridCell>
</>
) }

{ withExperimentalFeatures && (
<TreeGridCell className={ listViewBlockSettingsClassName }>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockSettingsDropdown
clientIds={ [ clientId ] }
icon={ moreVertical }
toggleProps={ {
ref,
className:
'block-editor-list-view-block__menu',
tabIndex,
onFocus,
} }
disableOpenOnArrowDown
__experimentalSelectBlock={ selectEditorBlock }
/>
) }
</TreeGridCell>
) }
</ListViewLeaf>
</AsyncModeProvider>
);
}
18 changes: 12 additions & 6 deletions packages/block-editor/src/components/list-view/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,12 +97,18 @@ function ListView(
},
[ setExpandedState ]
);
const expandRow = ( row ) => {
expand( row?.dataset?.block );
};
const collapseRow = ( row ) => {
collapse( row?.dataset?.block );
};
const expandRow = useCallback(
( row ) => {
expand( row?.dataset?.block );
},
[ expand ]
);
const collapseRow = useCallback(
( row ) => {
collapse( row?.dataset?.block );
},
[ collapse ]
);

const contextValue = useMemo(
() => ( {
Expand Down