From 9c0a740814bee866532283ec8eb6638e7b3c3882 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 29 Nov 2024 16:35:30 +0100
Subject: [PATCH] Refactor global styles sidebar wrapper preview menu

---
 .../sidebar-global-styles-wrapper/index.js    | 65 ++++++++++---------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
index 980f20c49821b0..0cf16b65e464fa 100644
--- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -28,36 +28,43 @@ const GlobalStylesPageActions = ( {
 	setIsStyleBookOpened,
 } ) => {
 	return (
-		<Menu
-			trigger={
-				<Button __next40pxDefaultSize variant="tertiary" size="compact">
-					{ __( 'Preview' ) }
-				</Button>
-			}
-		>
-			<Menu.RadioItem
-				value
-				checked={ isStyleBookOpened }
-				name="styles-preview-actions"
-				onChange={ () => setIsStyleBookOpened( true ) }
-				defaultChecked
-			>
-				<Menu.ItemLabel>{ __( 'Style book' ) }</Menu.ItemLabel>
-				<Menu.ItemHelpText>
-					{ __( 'Preview blocks and styles.' ) }
-				</Menu.ItemHelpText>
-			</Menu.RadioItem>
-			<Menu.RadioItem
-				value={ false }
-				checked={ ! isStyleBookOpened }
-				name="styles-preview-actions"
-				onChange={ () => setIsStyleBookOpened( false ) }
+		<Menu>
+			<Menu.TriggerButton
+				render={
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						size="compact"
+					/>
+				}
 			>
-				<Menu.ItemLabel>{ __( 'Site' ) }</Menu.ItemLabel>
-				<Menu.ItemHelpText>
-					{ __( 'Preview your site.' ) }
-				</Menu.ItemHelpText>
-			</Menu.RadioItem>
+				{ __( 'Preview' ) }
+			</Menu.TriggerButton>
+			<Menu.Popover>
+				<Menu.RadioItem
+					value
+					checked={ isStyleBookOpened }
+					name="styles-preview-actions"
+					onChange={ () => setIsStyleBookOpened( true ) }
+					defaultChecked
+				>
+					<Menu.ItemLabel>{ __( 'Style book' ) }</Menu.ItemLabel>
+					<Menu.ItemHelpText>
+						{ __( 'Preview blocks and styles.' ) }
+					</Menu.ItemHelpText>
+				</Menu.RadioItem>
+				<Menu.RadioItem
+					value={ false }
+					checked={ ! isStyleBookOpened }
+					name="styles-preview-actions"
+					onChange={ () => setIsStyleBookOpened( false ) }
+				>
+					<Menu.ItemLabel>{ __( 'Site' ) }</Menu.ItemLabel>
+					<Menu.ItemHelpText>
+						{ __( 'Preview your site.' ) }
+					</Menu.ItemHelpText>
+				</Menu.RadioItem>
+			</Menu.Popover>
 		</Menu>
 	);
 };