From e706d67c7482e752a4adaae3e0b0449234e19902 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 6 Sep 2024 14:21:45 +0400
Subject: [PATCH] Block Editor: Use the tooltip from a button in
 'ButtonBlockAppender' (#65113)

* Block Editor: Use the tooltip from a button in 'ButtonBlockAppender'
* Remove visually hidden element

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../components/button-block-appender/index.js | 41 ++++++++-----------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
index 9cd745ac5eb3d..c4a6854c6d6cc 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Button, Tooltip, VisuallyHidden } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { forwardRef, useRef } from '@wordpress/element';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Icon, plus } from '@wordpress/icons';
@@ -43,22 +43,22 @@ function ButtonBlockAppender(
 				blockTitle,
 				hasSingleBlockType,
 			} ) => {
-				let label;
-				if ( hasSingleBlockType ) {
-					label = sprintf(
-						// translators: %s: the name of the block when there is only one
-						_x( 'Add %s', 'directly add the only allowed block' ),
-						blockTitle
-					);
-				} else {
-					label = _x(
-						'Add block',
-						'Generic label for block inserter button'
-					);
-				}
 				const isToggleButton = ! hasSingleBlockType;
+				const label = hasSingleBlockType
+					? sprintf(
+							// translators: %s: the name of the block when there is only one
+							_x(
+								'Add %s',
+								'directly add the only allowed block'
+							),
+							blockTitle
+					  )
+					: _x(
+							'Add block',
+							'Generic label for block inserter button'
+					  );
 
-				let inserterButton = (
+				return (
 					<Button
 						// TODO: Switch to `true` (40px size) if possible
 						__next40pxDefaultSize={ false }
@@ -76,20 +76,11 @@ function ButtonBlockAppender(
 						// eslint-disable-next-line no-restricted-syntax
 						disabled={ disabled }
 						label={ label }
+						showTooltip
 					>
-						{ ! hasSingleBlockType && (
-							<VisuallyHidden as="span">{ label }</VisuallyHidden>
-						) }
 						<Icon icon={ plus } />
 					</Button>
 				);
-
-				if ( isToggleButton || hasSingleBlockType ) {
-					inserterButton = (
-						<Tooltip text={ label }>{ inserterButton }</Tooltip>
-					);
-				}
-				return inserterButton;
 			} }
 			isAppender
 		/>