From c4d698c0a32401a0d1db97f21dc2e463e956a406 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 2 Aug 2024 10:28:54 -0500
Subject: [PATCH] Use aspect ratio icon and zoom out tooltip

---
 .../pattern-category-previews.js              | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
index 65d6dd7b40c25..1955e0ff8bf55 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
@@ -16,9 +16,10 @@ import {
 	__experimentalText as Text,
 	FormToggle,
 	VisuallyHidden,
+	Tooltip,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Icon, fullscreen } from '@wordpress/icons';
+import { Icon, aspectRatio } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -139,6 +140,8 @@ export function PatternCategoryPreviews( {
 		[ setPatternSourceFilter, changePage ]
 	);
 
+	const zoomOutLabel = __( 'Zoom out' );
+
 	return (
 		<>
 			<VStack
@@ -146,21 +149,23 @@ export function PatternCategoryPreviews( {
 				className="block-editor-inserter__patterns-category-panel-header"
 			>
 				<HStack>
-					<HStack as="label" expanded={ false }>
-						<FormToggle
-							onChange={ () => {
-								if ( isZoomOut ) {
-									// TODO: We should set it back to what it was, not to edit.
-									__unstableSetEditorMode( 'edit' );
-								} else {
-									__unstableSetEditorMode( 'zoom-out' );
-								}
-							} }
-							checked={ isZoomOut }
-						/>
-						<VisuallyHidden>Full Screen View</VisuallyHidden>
-						<Icon icon={ fullscreen } size="24" />
-					</HStack>
+					<Tooltip text={ zoomOutLabel }>
+						<HStack as="label" expanded={ false }>
+							<FormToggle
+								onChange={ () => {
+									if ( isZoomOut ) {
+										// TODO: We should set it back to what it was, not to edit.
+										__unstableSetEditorMode( 'edit' );
+									} else {
+										__unstableSetEditorMode( 'zoom-out' );
+									}
+								} }
+								checked={ isZoomOut }
+							/>
+							<VisuallyHidden>{ zoomOutLabel }</VisuallyHidden>
+							<Icon icon={ aspectRatio } size="24" />
+						</HStack>
+					</Tooltip>
 					<PatternsFilter
 						patternSyncFilter={ patternSyncFilter }
 						patternSourceFilter={ patternSourceFilter }