Components: tab panel: don't render hidden content by default (#57046)

WordPress · Jan 4, 2024 · 8a22d90 · 8a22d90
1 parent 094e668
commit 8a22d90
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Experimental
+
+-   `TabPanel`: do not render hidden content ([#57046](https://github.com/WordPress/gutenberg/pull/57046)).
+
 ## 25.14.0 (2023-12-13)
 
 ### Enhancements

diff --git a/packages/components/src/tabs/tabpanel.tsx b/packages/components/src/tabs/tabpanel.tsx
@@ -32,6 +32,7 @@ export const TabPanel = forwardRef<
 	}
 	const { store, instanceId } = context;
 	const instancedTabId = `${ instanceId }-${ tabId }`;
+	const selectedId = store.useState( ( state ) => state.selectedId );
 
 	return (
 		<StyledTabPanel
@@ -41,7 +42,7 @@ export const TabPanel = forwardRef<
 			focusable={ focusable }
 			{ ...otherProps }
 		>
-			{ children }
+			{ selectedId === instancedTabId && children }
 		</StyledTabPanel>
 	);
 } );
diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
@@ -120,7 +120,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 			'//button[@role="tab"][contains(text(), "Block")]'
 		);
 		inactiveBlockInspectorTab.click();
-		const noBlocksElement = await page.$(
+		const noBlocksElement = page.waitForSelector(
 			'.block-editor-block-inspector__no-blocks'
 		);
 		expect( noBlocksElement ).not.toBeNull();