From 90c77020c51cbb0c90482f049bd00ee2fceb3b29 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 10 Sep 2024 13:12:10 +0100 Subject: [PATCH 1/4] Show top level sections in List View --- .../src/components/list-view/branch.js | 10 +++- .../src/components/list-view/index.js | 55 ++++++++++++------- 2 files changed, 45 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js index ebd1d5a36f570..108cdf5541296 100644 --- a/packages/block-editor/src/components/list-view/branch.js +++ b/packages/block-editor/src/components/list-view/branch.js @@ -121,6 +121,8 @@ function ListViewBranch( props ) { blockIndexes, expandedState, draggedClientIds, + sectionBlockClientIds, + isZoomOutMode, } = useListViewContext(); if ( ! canParentExpand ) { @@ -174,8 +176,14 @@ function ListViewBranch( props ) { : `${ position }`; const hasNestedBlocks = !! innerBlocks?.length; + const isZoomOutSectionBlock = + isZoomOutMode && + sectionBlockClientIds?.includes( clientId ); + const shouldExpand = - hasNestedBlocks && shouldShowInnerBlocks + ! isZoomOutSectionBlock && + hasNestedBlocks && + shouldShowInnerBlocks ? expandedState[ clientId ] ?? isExpanded : undefined; diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 1493fa655a5aa..1b545fc951428 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -45,6 +45,8 @@ import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dro import { focusListItem } from './utils'; import useClipboardHandler from './use-clipboard-handler'; +import { unlock } from '../../lock-unlock'; + const expanded = ( state, action ) => { if ( action.type === 'clear' ) { return {}; @@ -119,24 +121,36 @@ function ListViewComponent( const blockIndexes = useListViewBlockIndexes( clientIdsTree ); const { getBlock } = useSelect( blockEditorStore ); - const { visibleBlockCount, shouldShowInnerBlocks } = useSelect( - ( select ) => { - const { - getGlobalBlockCount, - getClientIdsOfDescendants, - __unstableGetEditorMode, - } = select( blockEditorStore ); - const draggedBlockCount = - draggedClientIds?.length > 0 - ? getClientIdsOfDescendants( draggedClientIds ).length + 1 - : 0; - return { - visibleBlockCount: getGlobalBlockCount() - draggedBlockCount, - shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out', - }; - }, - [ draggedClientIds ] - ); + + const { sectionBlockClientIds, isZoomOutMode, visibleBlockCount } = + useSelect( + ( select ) => { + const { + getGlobalBlockCount, + getClientIdsOfDescendants, + __unstableGetEditorMode, + getSectionRootClientId, + getBlockOrder, + } = unlock( select( blockEditorStore ) ); + const draggedBlockCount = + draggedClientIds?.length > 0 + ? getClientIdsOfDescendants( draggedClientIds ).length + + 1 + : 0; + + const _isZoomOutMode = __unstableGetEditorMode() === 'zoom-out'; + + return { + visibleBlockCount: + getGlobalBlockCount() - draggedBlockCount, + sectionBlockClientIds: getBlockOrder( + getSectionRootClientId() + ), + isZoomOutMode: _isZoomOutMode, + }; + }, + [ draggedClientIds ] + ); const { updateBlockSelection } = useBlockSelection(); @@ -305,6 +319,8 @@ function ListViewComponent( setInsertedBlock, treeGridElementRef: elementRef, rootClientId, + sectionBlockClientIds, + isZoomOutMode, } ), [ blockDropPosition, @@ -322,6 +338,8 @@ function ListViewComponent( insertedBlock, setInsertedBlock, rootClientId, + sectionBlockClientIds, + isZoomOutMode, ] ); @@ -397,7 +415,6 @@ function ListViewComponent( fixedListWindow={ fixedListWindow } selectedClientIds={ selectedClientIds } isExpanded={ isExpanded } - shouldShowInnerBlocks={ shouldShowInnerBlocks } showAppender={ showAppender } /> From 98ba5ffb7da13d87e48f1703c3898ddfd74abe1e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 10 Sep 2024 14:22:28 +0100 Subject: [PATCH 2/4] Recompute enabled clientIds when editorMode changes --- packages/block-editor/src/store/private-selectors.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 7e323cee6581a..301a6b200ed25 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -114,6 +114,7 @@ export const getEnabledClientIdsTree = createSelector( state.blockEditingModes, state.settings.templateLock, state.blockListSettings, + state.editorMode, ] ); From 3fb66f4189a638eee191885aa803c40b5ba31bdf Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 11 Sep 2024 14:04:52 +0100 Subject: [PATCH 3/4] Revert initial changes --- .../src/components/list-view/branch.js | 10 +--- .../src/components/list-view/index.js | 55 +++++++------------ 2 files changed, 20 insertions(+), 45 deletions(-) diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js index 108cdf5541296..ebd1d5a36f570 100644 --- a/packages/block-editor/src/components/list-view/branch.js +++ b/packages/block-editor/src/components/list-view/branch.js @@ -121,8 +121,6 @@ function ListViewBranch( props ) { blockIndexes, expandedState, draggedClientIds, - sectionBlockClientIds, - isZoomOutMode, } = useListViewContext(); if ( ! canParentExpand ) { @@ -176,14 +174,8 @@ function ListViewBranch( props ) { : `${ position }`; const hasNestedBlocks = !! innerBlocks?.length; - const isZoomOutSectionBlock = - isZoomOutMode && - sectionBlockClientIds?.includes( clientId ); - const shouldExpand = - ! isZoomOutSectionBlock && - hasNestedBlocks && - shouldShowInnerBlocks + hasNestedBlocks && shouldShowInnerBlocks ? expandedState[ clientId ] ?? isExpanded : undefined; diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 1b545fc951428..1493fa655a5aa 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -45,8 +45,6 @@ import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dro import { focusListItem } from './utils'; import useClipboardHandler from './use-clipboard-handler'; -import { unlock } from '../../lock-unlock'; - const expanded = ( state, action ) => { if ( action.type === 'clear' ) { return {}; @@ -121,36 +119,24 @@ function ListViewComponent( const blockIndexes = useListViewBlockIndexes( clientIdsTree ); const { getBlock } = useSelect( blockEditorStore ); - - const { sectionBlockClientIds, isZoomOutMode, visibleBlockCount } = - useSelect( - ( select ) => { - const { - getGlobalBlockCount, - getClientIdsOfDescendants, - __unstableGetEditorMode, - getSectionRootClientId, - getBlockOrder, - } = unlock( select( blockEditorStore ) ); - const draggedBlockCount = - draggedClientIds?.length > 0 - ? getClientIdsOfDescendants( draggedClientIds ).length + - 1 - : 0; - - const _isZoomOutMode = __unstableGetEditorMode() === 'zoom-out'; - - return { - visibleBlockCount: - getGlobalBlockCount() - draggedBlockCount, - sectionBlockClientIds: getBlockOrder( - getSectionRootClientId() - ), - isZoomOutMode: _isZoomOutMode, - }; - }, - [ draggedClientIds ] - ); + const { visibleBlockCount, shouldShowInnerBlocks } = useSelect( + ( select ) => { + const { + getGlobalBlockCount, + getClientIdsOfDescendants, + __unstableGetEditorMode, + } = select( blockEditorStore ); + const draggedBlockCount = + draggedClientIds?.length > 0 + ? getClientIdsOfDescendants( draggedClientIds ).length + 1 + : 0; + return { + visibleBlockCount: getGlobalBlockCount() - draggedBlockCount, + shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out', + }; + }, + [ draggedClientIds ] + ); const { updateBlockSelection } = useBlockSelection(); @@ -319,8 +305,6 @@ function ListViewComponent( setInsertedBlock, treeGridElementRef: elementRef, rootClientId, - sectionBlockClientIds, - isZoomOutMode, } ), [ blockDropPosition, @@ -338,8 +322,6 @@ function ListViewComponent( insertedBlock, setInsertedBlock, rootClientId, - sectionBlockClientIds, - isZoomOutMode, ] ); @@ -415,6 +397,7 @@ function ListViewComponent( fixedListWindow={ fixedListWindow } selectedClientIds={ selectedClientIds } isExpanded={ isExpanded } + shouldShowInnerBlocks={ shouldShowInnerBlocks } showAppender={ showAppender } /> From 45e98a0e811a5c248bfcfd4e308274e6284947cc Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 11 Sep 2024 14:19:27 +0100 Subject: [PATCH 4/4] Avoid special conditional for Zoom Out mode --- .../block-editor/src/components/list-view/index.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 1493fa655a5aa..87599ea870913 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -119,20 +119,16 @@ function ListViewComponent( const blockIndexes = useListViewBlockIndexes( clientIdsTree ); const { getBlock } = useSelect( blockEditorStore ); - const { visibleBlockCount, shouldShowInnerBlocks } = useSelect( + const { visibleBlockCount } = useSelect( ( select ) => { - const { - getGlobalBlockCount, - getClientIdsOfDescendants, - __unstableGetEditorMode, - } = select( blockEditorStore ); + const { getGlobalBlockCount, getClientIdsOfDescendants } = + select( blockEditorStore ); const draggedBlockCount = draggedClientIds?.length > 0 ? getClientIdsOfDescendants( draggedClientIds ).length + 1 : 0; return { visibleBlockCount: getGlobalBlockCount() - draggedBlockCount, - shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out', }; }, [ draggedClientIds ] @@ -397,7 +393,6 @@ function ListViewComponent( fixedListWindow={ fixedListWindow } selectedClientIds={ selectedClientIds } isExpanded={ isExpanded } - shouldShowInnerBlocks={ shouldShowInnerBlocks } showAppender={ showAppender } />