Skip to content

List View: make sure sidebar component updates after blocks are added, removed or inserted #34477

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

Closed
gwwar wants to merge 1 commit into from
Closed

List View: make sure sidebar component updates after blocks are added, removed or inserted #34477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion packages/block-editor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@
"redux-multi": "^0.1.12",
"rememo": "^3.0.0",
"tinycolor2": "^1.4.2",
"traverse": "^0.6.6"
"traverse": "^0.6.6",
"uuid": "^8.3.0"
},
"publishConfig": {
"access": "public"
Expand Down
5 changes: 4 additions & 1 deletion 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 @@ -47,6 +47,7 @@ const expanded = ( state, action ) => {
* @param {Function} props.onSelect Block selection callback.
* @param {boolean} props.showNestedBlocks Flag to enable displaying nested blocks.
* @param {boolean} props.showOnlyCurrentHierarchy Flag to limit the list to the current hierarchy of blocks.
* @param {string} props.blocksChangedUUID if blocks is not specified, used to help cache break clientIdsTree
* @param {boolean} props.__experimentalFeatures Flag to enable experimental features.
* @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
* @param {Object} ref Forwarded ref
Expand All @@ -58,14 +59,16 @@ function ListView(
onSelect = noop,
__experimentalFeatures,
__experimentalPersistentListViewFeatures,
blocksChangedUUID = '',
...props
},
ref
) {
const { clientIdsTree, selectedClientIds } = useListViewClientIds(
blocks,
showOnlyCurrentHierarchy,
__experimentalPersistentListViewFeatures
__experimentalPersistentListViewFeatures,
blocksChangedUUID
);
const { selectBlock } = useDispatch( blockEditorStore );
const selectEditorBlock = useCallback(
Expand Down
24 changes: 17 additions & 7 deletions packages/block-editor/src/components/list-view/use-list-view-client-ids.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import { isClientIdSelected } from './utils';
import { store as blockEditorStore } from '../../store';

const useListViewSelectedClientIds = (
__experimentalPersistentListViewFeatures
__experimentalPersistentListViewFeatures,
blocksChangedUUID
) =>
useSelect(
( select ) => {
Expand All @@ -26,13 +27,14 @@ const useListViewSelectedClientIds = (

return getSelectedBlockClientId();
},
[ __experimentalPersistentListViewFeatures ]
[ __experimentalPersistentListViewFeatures, blocksChangedUUID ]
);

const useListViewClientIdsTree = (
blocks,
selectedClientIds,
showOnlyCurrentHierarchy
showOnlyCurrentHierarchy,
blocksChangedUUID
) =>
useSelect(
( select ) => {
Expand Down Expand Up @@ -68,21 +70,29 @@ const useListViewClientIdsTree = (

return __unstableGetClientIdsTree();
},
[ blocks, selectedClientIds, showOnlyCurrentHierarchy ]
[
blocks,
selectedClientIds,
showOnlyCurrentHierarchy,
blocksChangedUUID,
]
);

export default function useListViewClientIds(
blocks,
showOnlyCurrentHierarchy,
__experimentalPersistentListViewFeatures
__experimentalPersistentListViewFeatures,
blocksChangedUUID
) {
const selectedClientIds = useListViewSelectedClientIds(
__experimentalPersistentListViewFeatures
__experimentalPersistentListViewFeatures,
blocksChangedUUID
);
const clientIdsTree = useListViewClientIdsTree(
blocks,
selectedClientIds,
showOnlyCurrentHierarchy
showOnlyCurrentHierarchy,
blocksChangedUUID
);
return { clientIdsTree, selectedClientIds };
}
22 changes: 22 additions & 0 deletions packages/block-editor/src/store/reducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
omitBy,
pickBy,
} from 'lodash';
import { v4 as uuid } from 'uuid';

/**
* WordPress dependencies
Expand Down Expand Up @@ -1194,6 +1195,26 @@ export function isTyping( state = false, action ) {
return state;
}

/**
* Reducer that returns a new uuid every time a block is added, removed or inserted.
*
* @param {string} state uuid string
* @param {Object} action Dispated action
*
* @return {string} Updated state
*/
export function __unstableBlocksChangedUUID( state = uuid(), action ) {
switch ( action.type ) {
case 'REPLACE_INNER_BLOCKS':
case 'INSERT_BLOCKS':
case 'REMOVE_BLOCKS':
case 'REPLACE_BLOCKS':
case 'RESET_BLOCKS':
return uuid();
Copy link
Contributor Author

@gwwar gwwar Sep 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that we don't necessarily need to use a uuid, it just seemed convenient. I'm open to whatever naming changes folks prefer too.

}
return state;
}

/**
* Reducer returning dragged block client id.
*
Expand Down Expand Up @@ -1799,4 +1820,5 @@ export default combineReducers( {
automaticChangeStatus,
highlightedBlock,
lastBlockInserted,
__unstableBlocksChangedUUID,
} );
11 changes: 11 additions & 0 deletions packages/block-editor/src/store/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2163,3 +2163,14 @@ export function wasBlockJustInserted( state, clientId, source ) {
lastBlockInserted.source === source
);
}

/**
* Returns a uuid which changes every time a block is added, removed or inserted
*
* @param {Object} state Block editor state.
*
* @return {string} uuid string
*/
export function __unstableGetBlocksChangedUUID( state ) {
return state.__unstableBlocksChangedUUID;
}
64 changes: 64 additions & 0 deletions packages/block-editor/src/store/test/reducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,25 @@ import {
blockListSettings,
lastBlockAttributesChange,
lastBlockInserted,
__unstableBlocksChangedUUID,
} from '../reducer';

jest.mock( 'uuid', () => {
const v4 = jest.requireActual( 'uuid' ).v4;
let lastCall = null;
return {
v4: jest.fn( () => {
lastCall = v4();
return lastCall;
} ),
getLastCall: () => {
return lastCall;
},
};
} );

const uuid = require( 'uuid' );

describe( 'state', () => {
describe( 'hasSameKeys()', () => {
it( 'returns false if two objects do not have the same keys', () => {
Expand Down Expand Up @@ -3039,4 +3056,51 @@ describe( 'state', () => {
expect( state ).toEqual( expectedState );
} );
} );
describe( '__unstableBlocksChangedUUID', () => {
it( 'should return a new uuid when blocks are reset', () => {
const initialState = 'initial-state-uuid';
const action = {
type: 'RESET_BLOCKS',
};
const state = __unstableBlocksChangedUUID( initialState, action );
expect( state ).toEqual( uuid.getLastCall() );
expect( state ).not.toEqual( initialState );
} );
it( 'should return a new uuid when inner blocks are replaced', () => {
const initialState = 'initial-state-uuid';
const action = {
type: 'REPLACE_INNER_BLOCKS',
};
const state = __unstableBlocksChangedUUID( initialState, action );
expect( state ).toEqual( uuid.getLastCall() );
expect( state ).not.toEqual( initialState );
} );
it( 'should return a new uuid when blocks are removed', () => {
const initialState = 'initial-state-uuid';
const action = {
type: 'REMOVE_BLOCKS',
};
const state = __unstableBlocksChangedUUID( initialState, action );
expect( state ).toEqual( uuid.getLastCall() );
expect( state ).not.toEqual( initialState );
} );
it( 'should return a new uuid when blocks are replaced', () => {
const initialState = 'initial-state-uuid';
const action = {
type: 'REPLACE_BLOCKS',
};
const state = __unstableBlocksChangedUUID( initialState, action );
expect( state ).toEqual( uuid.getLastCall() );
expect( state ).not.toEqual( initialState );
} );
it( 'should return a new uuid when blocks are inserted', () => {
const initialState = 'initial-state-uuid';
const action = {
type: 'INSERT_BLOCKS',
};
const state = __unstableBlocksChangedUUID( initialState, action );
expect( state ).toEqual( uuid.getLastCall() );
expect( state ).not.toEqual( initialState );
} );
} );
} );
14 changes: 12 additions & 2 deletions packages/edit-post/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ import {
store as editorStore,
} from '@wordpress/editor';
import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
import { BlockBreadcrumb } from '@wordpress/block-editor';
import {
BlockBreadcrumb,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { Button, ScrollLock, Popover } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { PluginArea } from '@wordpress/plugins';
Expand Down Expand Up @@ -70,6 +73,13 @@ function Layout( { styles } ) {
closeGeneralSidebar,
setIsInserterOpened,
} = useDispatch( editPostStore );
// Used to help determine if ListViewSidebar should update
const { blocksChangedUUID } = useSelect( ( select ) => {
const { __unstableGetBlocksChangedUUID } = select( blockEditorStore );
return {
blocksChangedUUID: __unstableGetBlocksChangedUUID(),
};
} );
const {
mode,
isFullscreenActive,
Expand Down Expand Up @@ -177,7 +187,7 @@ function Layout( { styles } ) {
if ( mode === 'visual' && isListViewOpened ) {
return (
<AsyncModeProvider value="true">
<ListViewSidebar />
<ListViewSidebar blocksChangedUUID={ blocksChangedUUID } />
</AsyncModeProvider>
);
}
Expand Down
6 changes: 5 additions & 1 deletion packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
useMergeRefs,
} from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { closeSmall } from '@wordpress/icons';
import { ESCAPE } from '@wordpress/keycodes';
Expand All @@ -22,7 +23,7 @@ import { ESCAPE } from '@wordpress/keycodes';
*/
import { store as editPostStore } from '../../store';

export default function ListViewSidebar() {
function ListViewSidebar( blocksChangedUUID ) {
const { setIsListViewOpened } = useDispatch( editPostStore );

const { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );
Expand Down Expand Up @@ -64,10 +65,13 @@ export default function ListViewSidebar() {
>
<ListView
onSelect={ selectEditorBlock }
blocksChangedUUID={ blocksChangedUUID }
showNestedBlocks
__experimentalPersistentListViewFeatures
/>
</div>
</div>
);
}

export default memo( ListViewSidebar );
15 changes: 13 additions & 2 deletions packages/edit-site/src/components/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ import {
Notice,
} from '@wordpress/components';
import { EntityProvider, store as coreStore } from '@wordpress/core-data';
import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
import {
BlockContextProvider,
BlockBreadcrumb,
store as blockEditorStore,
} from '@wordpress/block-editor';
import {
FullscreenMode,
InterfaceSkeleton,
Expand Down Expand Up @@ -48,6 +52,13 @@ const interfaceLabels = {
};

function Editor( { initialSettings, onError } ) {
// Used to help determine if ListViewSidebar should update
const { blocksChangedUUID } = useSelect( ( select ) => {
const { __unstableGetBlocksChangedUUID } = select( blockEditorStore );
return {
blocksChangedUUID: __unstableGetBlocksChangedUUID(),
};
} );
const {
isInserterOpen,
isListViewOpen,
Expand Down Expand Up @@ -170,7 +181,7 @@ function Editor( { initialSettings, onError } ) {
if ( isListViewOpen ) {
return (
<AsyncModeProvider value="true">
<ListViewSidebar />
<ListViewSidebar blocksChangedUUID={ blocksChangedUUID } />
</AsyncModeProvider>
);
}
Expand Down
6 changes: 5 additions & 1 deletion packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
useMergeRefs,
} from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { closeSmall } from '@wordpress/icons';
import { ESCAPE } from '@wordpress/keycodes';
Expand All @@ -22,7 +23,7 @@ import { ESCAPE } from '@wordpress/keycodes';
*/
import { store as editSiteStore } from '../../store';

export default function ListViewSidebar() {
function ListViewSidebar( blocksChangedUUID ) {
const { setIsListViewOpened } = useDispatch( editSiteStore );

const { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );
Expand Down Expand Up @@ -64,9 +65,12 @@ export default function ListViewSidebar() {
<ListView
onSelect={ selectEditorBlock }
showNestedBlocks
blocksChangedUUID={ blocksChangedUUID }
__experimentalPersistentListViewFeatures
/>
</div>
</div>
);
}

export default memo( ListViewSidebar );