From a0995a9d7471adcc8df51fa1e3e8817d640b581e Mon Sep 17 00:00:00 2001
From: Vipul Gupta <vipulgup04@gmail.com>
Date: Thu, 19 Sep 2024 00:54:09 +0530
Subject: [PATCH 1/4] fix: The button height for install button and keep as
 HTML.

---
 .../block-directory/src/plugins/get-install-missing/index.js   | 3 +--
 .../src/plugins/get-install-missing/install-button.js          | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/block-directory/src/plugins/get-install-missing/index.js b/packages/block-directory/src/plugins/get-install-missing/index.js
index 8b192cbe8fdc49..43c051cb9aa371 100644
--- a/packages/block-directory/src/plugins/get-install-missing/index.js
+++ b/packages/block-directory/src/plugins/get-install-missing/index.js
@@ -101,8 +101,7 @@ const ModifiedWarning = ( { originalBlock, ...props } ) => {
 		);
 		actions.push(
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				key="convert"
 				onClick={ convertToHTML }
 				variant="tertiary"
diff --git a/packages/block-directory/src/plugins/get-install-missing/install-button.js b/packages/block-directory/src/plugins/get-install-missing/install-button.js
index 3b05b53a380b9a..ec4a48dd39bf53 100644
--- a/packages/block-directory/src/plugins/get-install-missing/install-button.js
+++ b/packages/block-directory/src/plugins/get-install-missing/install-button.js
@@ -22,8 +22,7 @@ export default function InstallButton( { attributes, block, clientId } ) {
 
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			onClick={ () =>
 				installBlockType( block ).then( ( success ) => {
 					if ( success ) {

From 5bd414a51e165ad1b25544dd5e4dc9a2ddf42ced Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 25 Sep 2024 11:17:53 +0200
Subject: [PATCH 2/4] Refactor downloadable list item to vanilla button

---
 packages/block-directory/package.json         |   3 +-
 .../downloadable-block-list-item/index.js     | 137 +++++++++---------
 .../downloadable-block-list-item/style.scss   |  35 +++--
 .../downloadable-blocks-panel/style.scss      |   3 -
 4 files changed, 97 insertions(+), 81 deletions(-)

diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index 39f239edfcb44a..3333d434bcd948 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -45,7 +45,8 @@
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/url": "file:../url",
-		"change-case": "^4.1.2"
+		"change-case": "^4.1.2",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/index.js b/packages/block-directory/src/components/downloadable-block-list-item/index.js
index ac587dc2d6d0cc..7a5f479174ab25 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/index.js
+++ b/packages/block-directory/src/components/downloadable-block-list-item/index.js
@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
-	Button,
+	Tooltip,
 	Spinner,
 	VisuallyHidden,
 	Composite,
@@ -89,77 +94,75 @@ function DownloadableBlockListItem( { item, onClick } ) {
 		statusText = __( 'Installing…' );
 	}
 
+	const itemLabel = getDownloadableBlockLabel( item, {
+		hasNotice,
+		isInstalled,
+		isInstalling,
+	} );
+
 	return (
-		<Composite.Item
-			render={
-				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
-					accessibleWhenDisabled
-					type="button"
-					role="option"
-					className="block-directory-downloadable-block-list-item"
-					isBusy={ isInstalling }
-					onClick={ ( event ) => {
-						event.preventDefault();
-						onClick();
-					} }
-					label={ getDownloadableBlockLabel( item, {
-						hasNotice,
-						isInstalled,
-						isInstalling,
-					} ) }
-					showTooltip
-					tooltipPosition="top center"
-				/>
-			}
-			disabled={ isInstalling || ! isInstallable }
-		>
-			<div className="block-directory-downloadable-block-list-item__icon">
-				<DownloadableBlockIcon icon={ icon } title={ title } />
-				{ isInstalling ? (
-					<span className="block-directory-downloadable-block-list-item__spinner">
-						<Spinner />
-					</span>
-				) : (
-					<BlockRatings rating={ rating } />
+		<Tooltip placement="top" text={ itemLabel }>
+			<Composite.Item
+				className={ clsx(
+					'block-directory-downloadable-block-list-item',
+					isInstalling && 'is-installing'
 				) }
-			</div>
-			<span className="block-directory-downloadable-block-list-item__details">
-				<span className="block-directory-downloadable-block-list-item__title">
-					{ createInterpolateElement(
-						sprintf(
-							/* translators: %1$s: block title, %2$s: author name. */
-							__( '%1$s <span>by %2$s</span>' ),
-							decodeEntities( title ),
-							author
-						),
-						{
-							span: (
-								<span className="block-directory-downloadable-block-list-item__author" />
+				accessibleWhenDisabled
+				disabled={ isInstalling || ! isInstallable }
+				onClick={ ( event ) => {
+					event.preventDefault();
+					onClick();
+				} }
+				aria-label={ itemLabel }
+				type="button"
+				role="option"
+			>
+				<div className="block-directory-downloadable-block-list-item__icon">
+					<DownloadableBlockIcon icon={ icon } title={ title } />
+					{ isInstalling ? (
+						<span className="block-directory-downloadable-block-list-item__spinner">
+							<Spinner />
+						</span>
+					) : (
+						<BlockRatings rating={ rating } />
+					) }
+				</div>
+				<span className="block-directory-downloadable-block-list-item__details">
+					<span className="block-directory-downloadable-block-list-item__title">
+						{ createInterpolateElement(
+							sprintf(
+								/* translators: %1$s: block title, %2$s: author name. */
+								__( '%1$s <span>by %2$s</span>' ),
+								decodeEntities( title ),
+								author
 							),
-						}
+							{
+								span: (
+									<span className="block-directory-downloadable-block-list-item__author" />
+								),
+							}
+						) }
+					</span>
+					{ hasNotice ? (
+						<DownloadableBlockNotice block={ item } />
+					) : (
+						<>
+							<span className="block-directory-downloadable-block-list-item__desc">
+								{ !! statusText
+									? statusText
+									: decodeEntities( description ) }
+							</span>
+							{ isInstallable &&
+								! ( isInstalled || isInstalling ) && (
+									<VisuallyHidden>
+										{ __( 'Install block' ) }
+									</VisuallyHidden>
+								) }
+						</>
 					) }
 				</span>
-				{ hasNotice ? (
-					<DownloadableBlockNotice block={ item } />
-				) : (
-					<>
-						<span className="block-directory-downloadable-block-list-item__desc">
-							{ !! statusText
-								? statusText
-								: decodeEntities( description ) }
-						</span>
-						{ isInstallable &&
-							! ( isInstalled || isInstalling ) && (
-								<VisuallyHidden>
-									{ __( 'Install block' ) }
-								</VisuallyHidden>
-							) }
-					</>
-				) }
-			</span>
-		</Composite.Item>
+			</Composite.Item>
+		</Tooltip>
 	);
 }
 
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
index 8f95297bd9ef0d..1b64298e12308c 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/style.scss
+++ b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
@@ -1,10 +1,21 @@
 .block-directory-downloadable-block-list-item {
-	padding: $grid-unit-15;
+	& + & {
+		margin-top: $grid-unit-05;
+	}
+
+	display: grid;
+	grid-template-columns: auto 1fr;
+
 	width: 100%;
 	height: auto;
+	padding: $grid-unit-15;
+	margin: 0;
+
+	appearance: none;
+	background: none;
+	border: 0;
 	text-align: left;
-	display: grid;
-	grid-template-columns: auto 1fr;
+	transition: box-shadow 0.1s linear;
 
 	// The item contains absolutely positioned items.
 	// Set `position: relative` on the parent to prevent overflow issues
@@ -12,13 +23,22 @@
 	// See: https://github.com/WordPress/gutenberg/issues/63384
 	position: relative;
 
+
+	&:not([aria-disabled="true"]) {
+		cursor: pointer;
+	}
+
 	&:hover {
 		@include button-style__focus();
 	}
 
-	&.is-busy {
-		background: transparent;
+	// Focus + hover.
+	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
+	&[data-focus-visible] {
+		@include button-style__focus();
+	}
 
+	&.is-installing {
 		.block-directory-downloadable-block-list-item__author {
 			border: 0;
 			clip: rect(1px, 1px, 1px, 1px);
@@ -33,11 +53,6 @@
 			word-wrap: normal !important;
 		}
 	}
-
-	&:disabled,
-	&[aria-disabled] {
-		opacity: 1;
-	}
 }
 
 .block-directory-downloadable-block-list-item__icon {
diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/style.scss b/packages/block-directory/src/components/downloadable-blocks-panel/style.scss
index ff3fdb9ea8e319..f4df5ad4abda53 100644
--- a/packages/block-directory/src/components/downloadable-blocks-panel/style.scss
+++ b/packages/block-directory/src/components/downloadable-blocks-panel/style.scss
@@ -32,6 +32,3 @@
 	margin-top: 0;
 }
 
-.block-directory-downloadable-blocks-panel button {
-	margin-top: $grid-unit-05;
-}

From 16fad15e87a5049bb232d69124159f7b9228ad96 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 25 Sep 2024 18:11:11 +0200
Subject: [PATCH 3/4] Remove unnecessary comment

---
 .../src/components/downloadable-block-list-item/style.scss      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
index 1b64298e12308c..fa5e5906cb1b9f 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/style.scss
+++ b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
@@ -32,8 +32,6 @@
 		@include button-style__focus();
 	}
 
-	// Focus + hover.
-	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&[data-focus-visible] {
 		@include button-style__focus();
 	}

From 90298938fc739e3bf89a49905877d5992c694cce Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 25 Sep 2024 18:11:27 +0200
Subject: [PATCH 4/4] Update package-lock.json

---
 package-lock.json | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f5293bdf00ca04..f158460bc6a74d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52730,7 +52730,8 @@
 				"@wordpress/plugins": "file:../plugins",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/url": "file:../url",
-				"change-case": "^4.1.2"
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -67940,7 +67941,8 @@
 				"@wordpress/plugins": "file:../plugins",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/url": "file:../url",
-				"change-case": "^4.1.2"
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1"
 			}
 		},
 		"@wordpress/block-editor": {