Fix List View not updating when switching editor modes (#67379)

* Add back the editorTool dependency to getEnabledClientIdsTree * Add e2e test * Switch to getEditorMode selector ---- Co-authored-by: talldan <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]>
WordPress · Dec 5, 2024 · 7908b8f · 7908b8f
1 parent 944bdb2
commit 7908b8f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 4 deletions.
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
@@ -109,16 +109,16 @@ function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
  *
  * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
  */
-export const getEnabledClientIdsTree = createSelector(
-	getEnabledClientIdsTreeUnmemoized,
-	( state ) => [
+export const getEnabledClientIdsTree = createRegistrySelector( ( select ) =>
+	createSelector( getEnabledClientIdsTreeUnmemoized, ( state ) => [
 		state.blocks.order,
 		state.derivedBlockEditingModes,
 		state.derivedNavModeBlockEditingModes,
 		state.blockEditingModes,
 		state.settings.templateLock,
 		state.blockListSettings,
-	]
+		select( STORE_NAME ).__unstableGetEditorMode( state ),
+	] )
 );
 
 /**

diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js
@@ -121,4 +121,59 @@ test.describe( 'Write/Design mode', () => {
 			editorSettings.getByRole( 'button', { name: 'Content' } )
 		).toBeVisible();
 	} );
+
+	test( 'hides the blocks that cannot be interacted with in List View', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.setContent( '' );
+
+		// Insert a section with a nested block and an editable block.
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {},
+			innerBlocks: [
+				{
+					name: 'core/group',
+					attributes: {
+						metadata: {
+							name: 'Non-content block',
+						},
+					},
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: {
+								content: 'Something',
+							},
+						},
+					],
+				},
+			],
+		} );
+
+		// Select the inner paragraph block so that List View is expanded.
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} )
+			.click();
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+		const nonContentBlock = listView.getByRole( 'link', {
+			name: 'Non-content block',
+		} );
+
+		await expect( nonContentBlock ).toBeVisible();
+
+		// Switch to write mode.
+		await editor.switchEditorTool( 'Write' );
+
+		await expect( nonContentBlock ).toBeHidden();
+	} );
 } );