Refactor global styles sidebar wrapper preview menu

WordPress · Nov 29, 2024 · 80fd097 · 80fd097
1 parent d9bd607
commit 80fd097
Showing 1 changed file with 36 additions and 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
@@ -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>
 	);
 };