Block Directory: Add list of installed blocks to pre-publish sidebar (#…

…22752)

* Block Directory: Pull block icon into a separate component

* Add a list of installed blocks to the pre-publish sidebar

* Update package-lock

* Rename panel

* Fix style import

* Fix lint issue

Co-authored-by: dufresnesteven <[email protected]>

packages/block-directory/package.json

@@ -32,6 +32,7 @@
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
 		"@wordpress/data-controls": "file:../data-controls",
+		"@wordpress/edit-post": "file:../edit-post",
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import DownloadableBlockIcon from '../downloadable-block-icon';
+
+export default function CompactList( { items } ) {
+	if ( ! items.length ) {
+		return null;
+	}
+
+	return (
+		<ul className="block-directory-compact-list">
+			{ items.map( ( { icon, id, title, author } ) => (
+				<li key={ id } className="block-directory-compact-list__item">
+					<DownloadableBlockIcon icon={ icon } title={ title } />
+
+					<div className="block-directory-compact-list__item-details">
+						<div className="block-directory-compact-list__item-title">
+							{ title }
+						</div>
+						<div className="block-directory-compact-list__item-author">
+							{ sprintf(
+								/* translators: %s: Name of the block author. */
+								__( 'By %s' ),
+								author
+							) }
+						</div>
+					</div>
+				</li>
+			) ) }
+		</ul>
+	);
+}

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

@@ -0,0 +1,28 @@
+.block-directory-compact-list {
+	margin: 0;
+	list-style: none;
+}
+
+.block-directory-compact-list__item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: $grid-unit-20;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.block-directory-compact-list__item-details {
+	margin-left: $grid-unit-10;
+}
+
+.block-directory-compact-list__item-title {
+	font-weight: 500;
+}
+
+.block-directory-compact-list__item-author {
+	color: $dark-gray-500;
+	font-size: 11px;
+}

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">
 				<h2 className="block-directory-downloadable-block-header__title">

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-header/test/fixtures/index.js

@@ -18,7 +18,3 @@ const pluginBase = {
 };
 
 export const pluginWithIcon = { ...pluginBase, icon: 'block-default' };
-export const pluginWithImg = {
-	...pluginBase,
-	icon: 'https://ps.w.org/listicles/assets/icon-128x128.png',
-};

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

@@ -6,14 +6,13 @@ import { shallow } from 'enzyme';
 /**
  * WordPress dependencies
  */
-import { BlockIcon } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { DownloadableBlockHeader } from '../index';
-import { pluginWithImg, pluginWithIcon } from './fixtures';
+import { pluginWithIcon } from './fixtures';
 
 const getContainer = (
 	{ icon, title, rating, ratingCount },
@@ -33,30 +32,6 @@ const getContainer = (
 };
 
 describe( 'DownloadableBlockHeader', () => {
-	describe( 'icon rendering', () => {
-		test( 'should render an <img> tag', () => {
-			const wrapper = getContainer( pluginWithImg );
-			expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual(
-				pluginWithImg.icon
-			);
-		} );
-
-		test( 'should render an <img> tag if icon URL has query string', () => {
-			const iconURLwithQueryString =
-				pluginWithImg.icon + '?rev=2011672&test=234234';
-			const plugin = { ...pluginWithImg, icon: iconURLwithQueryString };
-			const wrapper = getContainer( plugin );
-			expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual(
-				plugin.icon
-			);
-		} );
-
-		test( 'should render a <BlockIcon/> component', () => {
-			const wrapper = getContainer( pluginWithIcon );
-			expect( wrapper.find( BlockIcon ) ).toHaveLength( 1 );
-		} );
-	} );
-
 	describe( 'user interaction', () => {
 		test( 'should trigger the onClick function', () => {
 			const onClickMock = jest.fn();

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/__snapshots__/index.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Downloadable Block Icon icon rendering should render a <BlockIcon /> component 1`] = `
+<div
+  className="block-directory-downloadable-block-icon"
+>
+  <BlockIcon
+    icon="default"
+    showColors={true}
+  />
+</div>
+`;
+
+exports[`Downloadable Block Icon icon rendering should render an <img> tag 1`] = `
+<div
+  className="block-directory-downloadable-block-icon"
+>
+  <img
+    alt="Block Name block icon"
+    src="https://ps.w.org/listicles/assets/icon-128x128.png"
+  />
+</div>
+`;
+
+exports[`Downloadable Block Icon icon rendering should render an <img> tag if icon URL has query string 1`] = `
+<div
+  className="block-directory-downloadable-block-icon"
+>
+  <img
+    alt="Block Name block icon"
+    src="https://ps.w.org/listicles/assets/icon-128x128.png?rev=2011672&test=234234"
+  />
+</div>
+`;

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

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

packages/block-directory/src/plugins/index.js

@@ -7,9 +7,15 @@ import { registerPlugin } from '@wordpress/plugins';
  * Internal dependencies
  */
 import InserterMenuDownloadableBlocksPanel from './inserter-menu-downloadable-blocks-panel';
+import InstalledBlocksPrePublishPanel from './installed-blocks-pre-publish-panel';
 
 registerPlugin( 'block-directory', {
 	render() {
-		return <InserterMenuDownloadableBlocksPanel />;
+		return (
+			<>
+				<InserterMenuDownloadableBlocksPanel />
+				<InstalledBlocksPrePublishPanel />
+			</>
+		);
 	},
 } );

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

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { _n, sprintf } from '@wordpress/i18n';
+import { PluginPrePublishPanel } from '@wordpress/edit-post';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import CompactList from '../../components/compact-list';
+
+export default function InstalledBlocksPrePublishPanel() {
+	const newBlockTypes = useSelect( ( select ) =>
+		select( 'core/block-directory' ).getInstalledBlockTypes()
+	);
+
+	if ( ! newBlockTypes.length ) {
+		return null;
+	}
+
+	return (
+		<PluginPrePublishPanel
+			icon="block-default"
+			title={ sprintf(
+				// translators: %d: number of blocks (number).
+				_n(
+					'Added: %d block',
+					'Added: %d blocks',
+					newBlockTypes.length
+				),
+				newBlockTypes.length
+			) }
+			initialOpen={ true }
+		>
+			<p className="installed-blocks-pre-publish-panel__copy">
+				{ _n(
+					'The following block has been added to your site.',
+					'The following blocks have been added to your site.',
+					newBlockTypes.length
+				) }
+			</p>
+			<CompactList items={ newBlockTypes } />
+		</PluginPrePublishPanel>
+	);
+}

packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/style.scss

@@ -0,0 +1,3 @@
+.installed-blocks-pre-publish-panel__copy {
+	margin-top: 0;
+}