Move icon into its own component and user it in compact list.

packages/block-directory/src/components/downloadable-block-compact-list-item/index.js

@@ -1,17 +1,29 @@
 /**
  * WordPress dependencies
  */
-import { BlockIcon } from '@wordpress/block-editor';
+import { sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+import DownloadableBlockIcon from '../downloadable-block-icon';
 
 function DownloadableBlockCompactListItem( { item } ) {
-	const { icon, title } = item;
+	const { icon, title, author } = item;
 
 	return (
 		<li className="block-directory-downloadable-block-compact-list-item">
-			<BlockIcon icon={ icon } showColors />
+			<DownloadableBlockIcon icon={ icon } title={ title } />
 
-			<div className="block-directory-downloadable-block-compact-list-item__title">
-				{ title }
+			<div className="block-directory-downloadable-block-compact-list-item__details">
+				<div className="block-directory-downloadable-block-compact-list-item__title">
+					{ title }
+				</div>
+				<div className="block-directory-downloadable-block-compact-list-item__author">
+					{ /* translators: %s: Name of the block author. */
+					sprintf( 'By %s', author ) }
+				</div>
 			</div>
 		</li>
 	);

packages/block-directory/src/components/downloadable-block-compact-list-item/style.scss

@@ -2,13 +2,22 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	margin-bottom: 12px;
+	margin-bottom: $grid-unit-20;
 }
 
 .block-directory-downloadable-block-compact-list-item:last-child {
 	margin-bottom: 0;
 }
 
-.block-directory-downloadable-block-compact-list-item__title {
+.block-directory-downloadable-block-compact-list-item__details {
 	margin-left: 8px;
 }
+
+.block-directory-downloadable-block-compact-list-item__title {
+	font-weight: 500;
+}
+
+.block-directory-downloadable-block-compact-list-item__author {
+	color: $dark-gray-500;
+	font-size: 11px;
+}

packages/block-directory/src/components/downloadable-block-compact-list/index.js

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { getBlockTypes } from '@wordpress/blocks';
-
 /**
  * Internal dependencies
  */
@@ -13,24 +8,14 @@ function DownloadableBlockCompactList( { items } ) {
 		return null;
 	}
 
-	const blockTypes = getBlockTypes();
-
 	return (
 		<ul className="downloadable-block-compact-list">
-			{ items.map( ( block ) => {
-				const [ blockDetails ] = blockTypes.filter(
-					( b ) => b.name === block.name
-				);
-
-				if ( blockDetails ) {
-					return (
-						<DownloadableBlockCompactListItem
-							item={ blockDetails }
-						/>
-					);
-				}
-				return null;
-			} ) }
+			{ items.map( ( block ) => (
+				<DownloadableBlockCompactListItem
+					key={ block.id }
+					item={ block }
+				/>
+			) ) }
 		</ul>
 	);
 }

packages/block-directory/src/components/downloadable-block-header/index.js

@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { BlockIcon } from '@wordpress/block-editor';
 import BlockRatings from '../block-ratings';
+import DownloadableBlockIcon from '../downloadable-block-icon';
 
 export function DownloadableBlockHeader( {
 	icon,
@@ -21,20 +21,7 @@ export function DownloadableBlockHeader( {
 } ) {
 	return (
 		<div className="block-directory-downloadable-block-header__row">
-			{ icon.match( /\.(jpeg|jpg|gif|png)(?:\?.*)?$/ ) !== null ? (
-				<img
-					src={ icon }
-					alt={ sprintf(
-						// translators: %s: Name of the plugin e.g: "Akismet".
-						__( '%s block icon' ),
-						title
-					) }
-				/>
-			) : (
-				<span>
-					<BlockIcon icon={ icon } showColors />
-				</span>
-			) }
+			<DownloadableBlockIcon icon={ icon } title={ title } />
 
 			<div className="block-directory-downloadable-block-header__column">
 				<span

packages/block-directory/src/components/downloadable-block-header/style.scss

@@ -2,18 +2,6 @@
 	display: flex;
 	flex-grow: 1;
 
-	.block-editor-block-icon {
-		width: $button-size;
-		height: $button-size;
-		font-size: $button-size;
-		background-color: $light-gray-300;
-	}
-
-	img {
-		width: $button-size;
-		height: $button-size;
-	}
-
 	.block-directory-downloadable-block-header__column {
 		display: flex;
 		flex-direction: column;

packages/block-directory/src/components/downloadable-block-icon/index.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { BlockIcon } from '@wordpress/block-editor';
+
+function DownloadableBlockIcon( { icon, title } ) {
+	return (
+		<div className="block-directory-downloadable-block-icon">
+			{ icon.match( /\.(jpeg|jpg|gif|png)(?:\?.*)?$/ ) !== null ? (
+				<img
+					src={ icon }
+					alt={ sprintf(
+						// translators: %s: Name of the plugin e.g: "Akismet".
+						__( '%s block icon' ),
+						title
+					) }
+				/>
+			) : (
+				<BlockIcon icon={ icon } showColors />
+			) }
+		</div>
+	);
+}
+
+export default DownloadableBlockIcon;

packages/block-directory/src/components/downloadable-block-icon/style.scss

@@ -0,0 +1,11 @@
+.block-directory-downloadable-block-icon {
+	width: $button-size;
+	height: $button-size;
+
+	.block-editor-block-icon {
+		width: $button-size;
+		height: $button-size;
+		font-size: $button-size;
+		background-color: $light-gray-300;
+	}
+}

packages/block-directory/src/components/downloadable-block-icon/test/index.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { BlockIcon } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import DownloadableBlockIcon from '../index';
+
+const getContainer = ( { icon, title } ) => {
+	return shallow( <DownloadableBlockIcon icon={ icon } title={ title } /> );
+};
+
+const IMAGE_URL = 'https://ps.w.org/listicles/assets/icon-128x128.png';
+const ICON_SLUG = 'default';
+
+describe( 'Downloadable Block Icon', () => {
+	describe( 'icon rendering', () => {
+		test( 'should render an <img> tag', () => {
+			const wrapper = getContainer( {
+				icon: IMAGE_URL,
+				title: 'Block Name',
+			} );
+			expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual( IMAGE_URL );
+		} );
+
+		test( 'should render an <img> tag if icon URL has query string', () => {
+			const iconURLwithQueryString =
+				IMAGE_URL + '?rev=2011672&test=234234';
+			const wrapper = getContainer( {
+				icon: iconURLwithQueryString,
+				title: 'Block Name',
+			} );
+			expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual(
+				iconURLwithQueryString
+			);
+		} );
+
+		test( 'should render a <BlockIcon/> component', () => {
+			const wrapper = getContainer( {
+				icon: ICON_SLUG,
+				title: 'Block Name',
+			} );
+			expect( wrapper.find( BlockIcon ) ).toHaveLength( 1 );
+		} );
+	} );
+} );

packages/block-directory/src/plugins/downloadable-block-pre-publish-panel/index.js

@@ -18,10 +18,7 @@ import { PluginPrePublishPanel } from '@wordpress/edit-post';
  */
 import DownloadableBlockCompactList from '../../components/downloadable-block-compact-list';
 
-const DownloadableBlockPrePublishPanel = ( {
-	usedNewBlocks,
-	unusedNewBlocks,
-} ) => {
+const DownloadableBlockPrePublishPanel = ( { usedNewBlocks } ) => {
 	if ( ! usedNewBlocks.length ) {
 		return null;
 	}
@@ -43,19 +40,6 @@ const DownloadableBlockPrePublishPanel = ( {
 				{ __( 'The following blocks have been added to your site:' ) }
 			</p>
 			<DownloadableBlockCompactList items={ usedNewBlocks } />
-			{ unusedNewBlocks.length > 0 && (
-				<p className="downloadable-block-pre-publish-panel__subcopy">
-					{ sprintf(
-						// translators: %d: number of unused blocks (number).
-						_n(
-							'Removing %d unused block',
-							'Removing %d unused blocks',
-							unusedNewBlocks.length
-						),
-						unusedNewBlocks.length
-					) }
-				</p>
-			) }
 		</PluginPrePublishPanel>
 	);
 };
@@ -78,7 +62,6 @@ export default compose( [
 				blockToUninstall,
 				'name'
 			),
-			unusedNewBlocks: blockToUninstall,
 		};
 	} ),
 ] )( DownloadableBlockPrePublishPanel );

packages/block-directory/src/store/actions.js

@@ -72,24 +72,24 @@ export function* downloadBlock( item, onSuccess, onError ) {
 /**
  * Action triggered to install a block plugin.
  *
- * @param {string} item The block item returned by search.
+ * @param {string} block The block item returned by search.
  * @param {Function} onSuccess The callback function when the action has succeeded.
  * @param {Function} onError The callback function when the action has failed.
  *
  */
-export function* installBlock( { id, name }, onSuccess, onError ) {
+export function* installBlock( block, onSuccess, onError ) {
 	try {
 		const response = yield apiFetch( {
 			path: '__experimental/block-directory/install',
 			data: {
-				slug: id,
+				slug: block.id,
 			},
 			method: 'POST',
 		} );
 		if ( response.success === false ) {
 			throw new Error( response.errorMessage );
 		}
-		yield addInstalledBlockType( { id, name } );
+		yield addInstalledBlockType( block );
 		onSuccess();
 	} catch ( error ) {
 		onError( error );

packages/block-directory/src/style.scss

@@ -8,4 +8,5 @@
 @import "./components/downloadable-block-notice/style.scss";
 @import "./components/downloadable-block-compact-list/style.scss";
 @import "./components/downloadable-block-compact-list-item/style.scss";
+@import "./components/downloadable-block-icon/style.scss";
 @import "./plugins/downloadable-block-pre-publish-panel/style.scss";