Block Patterns List: Fix visual title and tooltip inconsistencies

packages/block-editor/src/components/block-patterns-list/README.md

@@ -61,6 +61,14 @@ The aria label for the block patterns list.
 -   Required: No
 -   Default: `Block Patterns`
 
+#### showTitlesAsTooltip
+
+Whether to render the title of each pattern as a tooltip. User-defined patterns always show their visual title regardless of this prop.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

packages/block-editor/src/components/block-patterns-list/index.js

@@ -39,14 +39,14 @@ function BlockPattern( {
 	pattern,
 	onClick,
 	onHover,
-	showTitle = true,
-	showTooltip,
+	showTitlesAsTooltip,
 	category,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
+	const isUserPattern = pattern.type === INSERTER_PATTERN_TYPES.user;
 
 	// When we have a selected category and the pattern is draggable, we need to update the
 	// pattern's categories in metadata to only contain the selected category, and pass this to
@@ -94,10 +94,7 @@ function BlockPattern( {
 					} }
 				>
 					<WithToolTip
-						showTooltip={
-							showTooltip &&
-							! pattern.type !== INSERTER_PATTERN_TYPES.user
-						}
+						showTooltip={ showTitlesAsTooltip && ! isUserPattern }
 						title={ pattern.title }
 					>
 						<Composite.Item
@@ -142,29 +139,22 @@ function BlockPattern( {
 									viewportWidth={ viewportWidth }
 								/>
 							</BlockPreview.Async>
-
-							{ showTitle && (
+							{ ( ! showTitlesAsTooltip || isUserPattern ) && (
 								<HStack
 									className="block-editor-patterns__pattern-details"
 									spacing={ 2 }
 								>
-									{ pattern.type ===
-										INSERTER_PATTERN_TYPES.user &&
-										! pattern.syncStatus && (
-											<div className="block-editor-patterns__pattern-icon-wrapper">
-												<Icon
-													className="block-editor-patterns__pattern-icon"
-													icon={ symbol }
-												/>
-											</div>
-										) }
-									{ ( ! showTooltip ||
-										pattern.type ===
-											INSERTER_PATTERN_TYPES.user ) && (
-										<div className="block-editor-block-patterns-list__item-title">
-											{ pattern.title }
+									{ isUserPattern && ! pattern.syncStatus && (
+										<div className="block-editor-patterns__pattern-icon-wrapper">
+											<Icon
+												className="block-editor-patterns__pattern-icon"
+												icon={ symbol }
+											/>
 										</div>
 									) }
+									<div className="block-editor-block-patterns-list__item-title">
+										{ pattern.title }
+									</div>
 								</HStack>
 							) }
 
@@ -196,7 +186,6 @@ function BlockPatternsList(
 		orientation,
 		label = __( 'Block patterns' ),
 		category,
-		showTitle = true,
 		showTitlesAsTooltip,
 		pagingProps,
 	},
@@ -230,8 +219,7 @@ function BlockPatternsList(
 					onClick={ onClickPattern }
 					onHover={ onHover }
 					isDraggable={ isDraggable }
-					showTitle={ showTitle }
-					showTooltip={ showTitlesAsTooltip }
+					showTitlesAsTooltip={ showTitlesAsTooltip }
 					category={ category }
 				/>
 			) ) }

packages/block-editor/src/components/block-patterns-list/stories/index.story.js

@@ -31,7 +31,6 @@ export const Default = {
 		blockPatterns: patterns,
 		isDraggable: false,
 		label: 'Block patterns story',
-		showTitle: true,
 		showTitlesAsTooltip: false,
 	},
 	argTypes: {
@@ -40,18 +39,11 @@ export const Default = {
 			description:
 				'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns`.',
 		},
-		showTitle: {
-			description: 'Whether to render the title of each pattern.',
-			table: {
-				defaultValue: { summary: true },
-				type: { summary: 'boolean' },
-			},
-		},
 		onClickPattern: { type: 'function' },
 		onHover: { type: 'function' },
 		showTitlesAsTooltip: {
 			description:
-				'Whether to render the title of each pattern as a tooltip. If enabled, it takes precedence over `showTitle` prop.',
+				'Whether to render the title of each pattern as a tooltip. If enabled',
 		},
 		orientation: {
 			description: 'Orientation for the underlying composite widget.',

packages/block-editor/src/components/block-toolbar/change-design.js

@@ -118,7 +118,7 @@ export default function ChangeDesign( { clientId } ) {
 					<BlockPatternsList
 						blockPatterns={ sameCategoryPatternsWithSingleWrapper }
 						onClickPattern={ onClickPattern }
-						showTitle={ false }
+						showTitlesAsTooltip
 					/>
 				</DropdownContentWrapper>
 			) }

packages/block-editor/src/components/inserter/block-patterns-tab/index.js

@@ -79,7 +79,6 @@ function BlockPatternsTab( {
 								onInsert={ onInsert }
 								rootClientId={ rootClientId }
 								category={ category }
-								showTitlesAsTooltip={ false }
 							/>
 						</div>
 					) }

packages/block-library/src/template-part/edit/index.js

@@ -95,7 +95,7 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) {
 				label={ __( 'Templates' ) }
 				blockPatterns={ blockPatterns }
 				onClickPattern={ onSelect }
-				showTitle={ false }
+				showTitlesAsTooltip
 			/>
 		</PanelBody>
 	);