Update installing styles

WordPress · Jan 21, 2021 · dbb67fa · dbb67fa
1 parent 0b63df0
commit dbb67fa
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 84 deletions.
diff --git a/packages/block-directory/src/components/block-ratings/style.scss b/packages/block-directory/src/components/block-ratings/style.scss
@@ -1,5 +1,6 @@
 .block-directory-block-ratings {
 	display: flex;
+
 	> div {
 		line-height: 1;
 		display: flex;

diff --git a/packages/block-directory/src/components/downloadable-block-icon/style.scss b/packages/block-directory/src/components/downloadable-block-icon/style.scss
@@ -2,8 +2,5 @@
 	min-width: $button-size * 1.5;
 	width: $button-size * 1.5;
 	height: $button-size * 1.5;
-
-	> img {
-		width: 100%;
-	}
+	vertical-align: middle;
 }
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
@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
+import { getBlockType } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -21,6 +22,8 @@ import { store as blockDirectoryStore } from '../../store';
 
 function DownloadableBlockListItem( { composite, item, onClick } ) {
 	const { author, description, icon, rating, ratingCount, title } = item;
+	// getBlockType returns a block object if this block exists, or null if not.
+	const isInstalled = !! getBlockType( item.name );
 
 	const { isInstalling, isInstallable } = useSelect(
 		( select ) => {
@@ -38,59 +41,61 @@ function DownloadableBlockListItem( { composite, item, onClick } ) {
 		[ item ]
 	);
 
+	let statusText = '';
+	if ( isInstalled ) {
+		statusText = __( 'Installed!' );
+	} else if ( isInstalling ) {
+		statusText = __( 'Installing…' );
+	}
+
 	return (
-		<div className="block-directory-downloadable-block-list-item">
-			<CompositeItem
-				role="option"
-				as={ Button }
-				{ ...composite }
-				className="block-directory-downloadable-block-list-item__item"
-				onClick={ ( event ) => {
-					event.preventDefault();
-					onClick();
-				} }
-				isBusy={ isInstalling }
-				disabled={ isInstalling || ! isInstallable }
-			>
+		<CompositeItem
+			role="option"
+			as={ Button }
+			{ ...composite }
+			className="block-directory-downloadable-block-list-item"
+			onClick={ ( event ) => {
+				event.preventDefault();
+				onClick();
+			} }
+			isBusy={ isInstalling }
+			disabled={ isInstalling || ! isInstallable }
+		>
+			<div className="block-directory-downloadable-block-list-item__icon">
+				{ isInstalling && (
+					<span className="block-directory-downloadable-block-list-item__spinner">
+						<Spinner />
+					</span>
+				) }
 				<DownloadableBlockIcon icon={ icon } title={ title } />
-				<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
+			</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: (
-									<span className="block-directory-downloadable-block-list-item__author" />
-								),
-							}
-						) }
-					</span>
-					<BlockRatings
-						rating={ rating }
-						ratingCount={ ratingCount }
-					/>
+						}
+					) }
 				</span>
+				<BlockRatings rating={ rating } ratingCount={ ratingCount } />
 				<span className="block-directory-downloadable-block-list-item__desc">
-					{ decodeEntities( description ) }
+					{ !! statusText
+						? statusText
+						: decodeEntities( description ) }
 				</span>
-				{ isInstalling && (
-					<span className="block-directory-downloadable-block-list-item__spinner">
-						<Spinner />
-						<VisuallyHidden>
-							{ sprintf(
-								/* translators: %s: block title. */
-								__( 'Installing %s' ),
-								title
-							) }
-						</VisuallyHidden>
-					</span>
+				{ isInstallable && ! ( isInstalled || isInstalling ) && (
+					<VisuallyHidden>{ __( 'Install block' ) }</VisuallyHidden>
 				) }
-			</CompositeItem>
-		</div>
+			</span>
+		</CompositeItem>
 	);
 }
 

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,12 +1,4 @@
 .block-directory-downloadable-block-list-item {
-	width: 100%;
-
-	.block-directory-downloadable-block-icon {
-		margin-right: $grid-unit-20;
-	}
-}
-
-.block-directory-downloadable-block-list-item__item {
 	padding: $grid-unit-20;
 	width: 100%;
 	height: auto;
@@ -19,21 +11,26 @@
 	}
 
 	&.is-busy {
-		position: relative;
 		background: transparent;
+	}
+}
 
-		.block-directory-downloadable-block-list-item__spinner {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-			width: 75%;
-			padding-right: $grid-unit-20;
-			display: flex;
-			align-items: center;
-			justify-content: flex-end;
-		}
+.block-directory-downloadable-block-list-item__icon {
+	position: relative;
+	margin-right: $grid-unit-20;
+	border: 1px solid $gray-300;
+	align-self: flex-start;
+
+	.block-directory-downloadable-block-list-item__spinner {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background: rgba(255, 255, 255, 0.75);
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 }
 

diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/inserter-panel.js b/packages/block-directory/src/components/downloadable-blocks-panel/inserter-panel.js
@@ -2,26 +2,28 @@
  * WordPress dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useDebounce } from '@wordpress/compose';
+import { useEffect } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
 
 function DownloadableBlocksInserterPanel( {
 	children,
 	downloadableItems,
 	hasLocalBlocks,
 } ) {
-	const debouncedSpeak = useDebounce( speak, 500 );
-	debouncedSpeak(
-		sprintf(
-			/* translators: %d: number of available blocks. */
-			_n(
-				'%d additional block is available to install.',
-				'%d additional blocks are available to install.',
-				downloadableItems.length
-			),
-			downloadableItems.length
-		)
-	);
+	const count = downloadableItems.length;
+	useEffect( () => {
+		speak(
+			sprintf(
+				/* translators: %d: number of available blocks. */
+				_n(
+					'%d additional block is available to install.',
+					'%d additional blocks are available to install.',
+					count
+				),
+				count
+			)
+		);
+	}, [ count ] );
 
 	return (
 		<>