Fix: Button Replace remaining 40px default size violations [Block Dir…

…ectory] (#65467) * fix: The button height for install button and keep as HTML. * Refactor downloadable list item to vanilla button * Remove unnecessary comment * Update package-lock.json --------- Co-authored-by: vipul0425 <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · Oct 6, 2024 · 1ee9fe8 · 1ee9fe8
1 parent da8770d
commit 1ee9fe8
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -1,24 +1,42 @@
 .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
 	// in scroll containers.
 	// 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;
+	&[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 +51,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
@@ -32,6 +32,3 @@
 	margin-top: 0;
 }
 
-.block-directory-downloadable-blocks-panel button {
-	margin-top: $grid-unit-05;
-}
diff --git 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
@@ -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 ) {