Add prompt for drag and drop in Patterns tab in Zoom Out mode (#65115)

* Add prompt for drag and drop * Remove icon and update styles * Use components and tweak * Avoid muted variant
WordPress · Sep 9, 2024 · 2f92b59 · 2f92b59
1 parent 7376a63
commit 2f92b59
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 17 deletions.
diff --git a/...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
@@ -17,6 +17,7 @@ import {
 	__experimentalText as Text,
 	FlexBlock,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -32,6 +33,7 @@ import {
 	myPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
+import { store as blockEditorStore } from '../../../store';
 
 const noop = () => {};
 
@@ -42,6 +44,11 @@ export function PatternCategoryPreviews( {
 	category,
 	showTitlesAsTooltip,
 } ) {
+	const isZoomOutMode = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		[]
+	);
 	const [ allPatterns, , onClickPattern ] = usePatternsState(
 		onInsert,
 		rootClientId,
@@ -163,23 +170,39 @@ export function PatternCategoryPreviews( {
 					</Text>
 				) }
 			</VStack>
-
-			{ currentCategoryPatterns.length > 0 && (
-				<BlockPatternsList
-					ref={ scrollContainerRef }
-					shownPatterns={ pagingProps.categoryPatternsAsyncList }
-					blockPatterns={ pagingProps.categoryPatterns }
-					onClickPattern={ onClickPattern }
-					onHover={ onHover }
-					label={ category.label }
-					orientation="vertical"
-					category={ category.name }
-					isDraggable
-					showTitlesAsTooltip={ showTitlesAsTooltip }
-					patternFilter={ patternSourceFilter }
-					pagingProps={ pagingProps }
-				/>
-			) }
+			<VStack spacing={ 4 }>
+				{ currentCategoryPatterns.length > 0 && (
+					<>
+						{ isZoomOutMode && (
+							<Text
+								size="12"
+								as="p"
+								className="block-editor-inserter__help-text"
+							>
+								{ __(
+									'Drag and drop patterns into the canvas.'
+								) }
+							</Text>
+						) }
+						<BlockPatternsList
+							ref={ scrollContainerRef }
+							shownPatterns={
+								pagingProps.categoryPatternsAsyncList
+							}
+							blockPatterns={ pagingProps.categoryPatterns }
+							onClickPattern={ onClickPattern }
+							onHover={ onHover }
+							label={ category.label }
+							orientation="vertical"
+							category={ category.name }
+							isDraggable
+							showTitlesAsTooltip={ showTitlesAsTooltip }
+							patternFilter={ patternSourceFilter }
+							pagingProps={ pagingProps }
+						/>
+					</>
+				) }
+			</VStack>
 		</>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -709,3 +709,7 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 }
+
+.block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
+	padding: 0 $grid-unit-30;
+}