hide inline preview when style book is open

packages/components/src/tab-panel/index.tsx

@@ -78,6 +78,7 @@ export function TabPanel( {
 	tabs,
 	selectOnMove = true,
 	initialTabName,
+	selectedTabName,
 	orientation = 'horizontal',
 	activeClass = 'is-active',
 	onSelect,
@@ -110,6 +111,12 @@ export function TabPanel( {
 		}
 	}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );
 
+	useEffect( () => {
+		if ( selectedTabName ) {
+			setSelected( selectedTabName );
+		}
+	}, [ selectedTabName ] );
+
 	return (
 		<div className={ className }>
 			<NavigableMenu

packages/components/src/tab-panel/types.ts

@@ -55,6 +55,10 @@ export type TabPanelProps = {
 	 * If this prop is not set, the first tab will be selected by default.
 	 */
 	initialTabName?: string;
+	/**
+	 * The name of the tab to be selected.
+	 */
+	selectedTabName?: string;
 	/**
 	 * The function called when a tab has been selected.
 	 * It is passed the `tabName` as an argument.

packages/edit-site/src/components/global-styles/block-preview-panel.js

@@ -6,17 +6,23 @@ import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import { useHasStyleBook } from '../style-book';
+
 const BlockPreviewPanel = ( { name } ) => {
 	const [
 		containerResizeListener,
 		{ width: containerWidth, height: containerHeight },
 	] = useResizeObserver();
+	const hasStyleBook = useHasStyleBook();
 	const blockExample = getBlockType( name )?.example;
 	const blocks = blockExample && getBlockFromExample( name, blockExample );
 	const viewportWidth = blockExample?.viewportWidth || containerWidth;
 	const minHeight = containerHeight;
 
-	return ! blockExample ? null : (
+	return ! blockExample || hasStyleBook ? null : (
 		<Spacer marginX={ 4 } marginBottom={ 4 }>
 			<div className="edit-site-global-styles__block-preview-panel">
 				{ containerResizeListener }

packages/edit-site/src/components/global-styles/ui.js

@@ -7,6 +7,7 @@ import {
 	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
 import { getBlockTypes } from '@wordpress/blocks';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -127,17 +128,18 @@ function ContextScreens( { name } ) {
 function GlobalStylesStyleBook( { onClose } ) {
 	const navigator = useNavigator();
 	const { path } = navigator.location;
+	const [ selectedBlockPath, setSelectedBlockPath ] = useState( '' );
+
+	useEffect( () => {
+		const pathPrefix = /^\/blocks\//g;
+		setSelectedBlockPath(
+			decodeURIComponent( path ).replace( pathPrefix, '' )
+		);
+	}, [ path ] );
+
 	return (
 		<StyleBook
-			isSelected={ ( blockName ) =>
-				// Match '/blocks/core%2Fbutton' and
-				// '/blocks/core%2Fbutton/typography', but not
-				// '/blocks/core%2Fbuttons'.
-				path === `/blocks/${ encodeURIComponent( blockName ) }` ||
-				path.startsWith(
-					`/blocks/${ encodeURIComponent( blockName ) }/`
-				)
-			}
+			selectedBlockPath={ selectedBlockPath }
 			onSelect={ ( blockName ) => {
 				// Clear navigator history by going back to the root.
 				const depth = path.match( /\//g ).length;

packages/edit-site/src/components/style-book/index.js

@@ -79,7 +79,7 @@ function getExamples() {
 	return [ headingsExample, ...otherExamples ];
 }
 
-function StyleBook( { isSelected, onSelect, onClose } ) {
+function StyleBook( { selectedBlockPath, onSelect, onClose } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useStyle( 'color.text' );
 	const [ backgroundColor ] = useStyle( 'color.background' );
@@ -99,6 +99,30 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 				} ) ),
 		[ examples ]
 	);
+
+	// Match 'core/button' and
+	// 'core/button/typography', but not
+	// 'core/buttons'.
+	const isSelected = ( blockName ) =>
+		selectedBlockPath === blockName ||
+		selectedBlockPath.startsWith( `${ blockName }/` );
+
+	const selectedTab = useMemo(
+		() =>
+			(
+				getCategories()
+					.filter( ( category ) =>
+						examples.some(
+							( example ) =>
+								example.category === category.slug &&
+								isSelected( example.name )
+						)
+					)
+					.shift() || {}
+			).slug,
+		[ examples, isSelected ]
+	);
+
 	return (
 		<StyleBookFill>
 			<section
@@ -121,6 +145,7 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 				<TabPanel
 					className="edit-site-style-book__tab-panel"
 					tabs={ tabs }
+					selectedTabName={ selectedTab }
 				>
 					{ ( tab ) => (
 						<Examples