From c18dbb1ce41cf6cdf76515ebfde3683c8dbb389b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <albarin@users.noreply.github.com>
Date: Fri, 14 Jun 2024 10:21:44 +0200
Subject: [PATCH] [CYS] Show tooltips in delete and shuffle buttons (#48465)

* Show tooltips in delete and shuffle buttons

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../assembler-hub/toolbar/delete.tsx          | 25 ++++++-----
 .../assembler-hub/toolbar/shuffle.tsx         | 42 ++++++++-----------
 .../assembler-hub/toolbar/style.scss          |  4 ++
 ...48465-48438-tooltip-shuffle-delete-buttons |  4 ++
 4 files changed, 37 insertions(+), 38 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/48465-48438-tooltip-shuffle-delete-buttons

diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/delete.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/delete.tsx
index af3798401dd..fe76522101a 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/delete.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/delete.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Button, ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { trash } from '@wordpress/icons';
@@ -22,18 +22,17 @@ export default function Delete( {
 
 	return (
 		<ToolbarGroup>
-			<ToolbarButton>
-				<Button
-					label={ __( 'Remove', 'woocommerce' ) }
-					icon={ trash }
-					onClick={ () => {
-						removeBlock( clientId );
-						if ( nextBlockClientId ) {
-							selectBlock( nextBlockClientId );
-						}
-					} }
-				/>
-			</ToolbarButton>
+			<ToolbarButton
+				showTooltip={ true }
+				label={ __( 'Remove', 'woocommerce' ) }
+				icon={ trash }
+				onClick={ () => {
+					removeBlock( clientId );
+					if ( nextBlockClientId ) {
+						selectBlock( nextBlockClientId );
+					}
+				} }
+			/>
 		</ToolbarGroup>
 	);
 }
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/shuffle.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/shuffle.tsx
index aac8dbf2508..aa21483b08f 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/shuffle.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/shuffle.tsx
@@ -7,13 +7,7 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	Path,
-	SVG,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { Path, SVG, ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import {
 	unlock,
 	// @ts-expect-error No types for this exist yet.
@@ -108,24 +102,22 @@ export default function Shuffle( { clientId }: { clientId: string } ) {
 
 	return (
 		<ToolbarGroup>
-			<ToolbarButton>
-				<Button
-					label={ __( 'Shuffle', 'woocommerce' ) }
-					icon={ shuffleIcon }
-					onClick={ () => {
-						const nextPattern = getNextPattern();
-						// @ts-expect-error - attributes is marked as readonly.
-						nextPattern.blocks[ 0 ].attributes = {
-							...nextPattern.blocks[ 0 ].attributes,
-							metadata: {
-								...nextPattern.blocks[ 0 ].attributes.metadata,
-								categories,
-							},
-						};
-						replaceBlocks( clientId, nextPattern.blocks );
-					} }
-				/>
-			</ToolbarButton>
+			<ToolbarButton
+				label={ __( 'Shuffle', 'woocommerce' ) }
+				icon={ shuffleIcon }
+				onClick={ () => {
+					const nextPattern = getNextPattern();
+					// @ts-expect-error - attributes is marked as readonly.
+					nextPattern.blocks[ 0 ].attributes = {
+						...nextPattern.blocks[ 0 ].attributes,
+						metadata: {
+							...nextPattern.blocks[ 0 ].attributes.metadata,
+							categories,
+						},
+					};
+					replaceBlocks( clientId, nextPattern.blocks );
+				} }
+			/>
 		</ToolbarGroup>
 	);
 }
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/style.scss b/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/style.scss
index 9bbc1a7f0d7..8babfc98f47 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/style.scss
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/style.scss
@@ -2,4 +2,8 @@
 	.block-editor-block-mover__drag-handle {
 		display: none;
 	}
+
+	.block-editor-block-mover {
+		padding: 0;
+	}
 }
diff --git a/plugins/woocommerce/changelog/48465-48438-tooltip-shuffle-delete-buttons b/plugins/woocommerce/changelog/48465-48438-tooltip-shuffle-delete-buttons
new file mode 100644
index 00000000000..c541f105d6a
--- /dev/null
+++ b/plugins/woocommerce/changelog/48465-48438-tooltip-shuffle-delete-buttons
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+CYS - Show tooltips on the Shuffle and Delete buttons in the assembler toolbar.
\ No newline at end of file