From f838d0790169a6b3f9b02424d47ad07ea81be77c Mon Sep 17 00:00:00 2001
From: Daniel Walmsley <goldsounds@gmail.com>
Date: Fri, 18 May 2018 12:34:20 -0700
Subject: [PATCH] Add class name for inserter menu items to allow basic styling

---
 blocks/api/index.js                     |  1 +
 blocks/api/serializer.js                | 15 +++++++++++++++
 editor/components/inserter/item-list.js |  4 +++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/blocks/api/index.js b/blocks/api/index.js
index 897aba32f3176..bb7f20c0982d8 100644
--- a/blocks/api/index.js
+++ b/blocks/api/index.js
@@ -16,6 +16,7 @@ export {
 	default as serialize,
 	getBlockContent,
 	getBlockDefaultClassName,
+	getBlockMenuDefaultClassName,
 	getSaveElement,
 } from './serializer';
 export { isValidBlock } from './validation';
diff --git a/blocks/api/serializer.js b/blocks/api/serializer.js
index b206e472627e9..7e2293d9619ef 100644
--- a/blocks/api/serializer.js
+++ b/blocks/api/serializer.js
@@ -32,6 +32,21 @@ export function getBlockDefaultClassName( blockName ) {
 	return applyFilters( 'blocks.getBlockDefaultClassName', className, blockName );
 }
 
+/**
+ * Returns the block's default menu item classname from its name.
+ *
+ * @param {string} blockName The block name.
+ *
+ * @return {string} The block's default menu item class.
+ */
+export function getBlockMenuDefaultClassName( blockName ) {
+	// Generated HTML classes for blocks follow the `editor-block-list-item-{name}` nomenclature.
+	// Blocks provided by WordPress drop the prefixes 'core/' or 'core-' (used in 'core-embed/').
+	const className = 'editor-block-list-item-' + blockName.replace( /\//, '-' ).replace( /^core-/, '' );
+
+	return applyFilters( 'blocks.getBlockMenuDefaultClassName', className, blockName );
+}
+
 /**
  * Given a block type containing a save render implementation and attributes, returns the
  * enhanced element to be saved or string when raw HTML expected.
diff --git a/editor/components/inserter/item-list.js b/editor/components/inserter/item-list.js
index 3ec66b5deb5ab..7f73bf47e7d7a 100644
--- a/editor/components/inserter/item-list.js
+++ b/editor/components/inserter/item-list.js
@@ -2,12 +2,14 @@
  * External dependencies
  */
 import { isEqual } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
 import { NavigableMenu } from '@wordpress/components';
+import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -72,7 +74,7 @@ class ItemList extends Component {
 						<button
 							role="menuitem"
 							key={ item.id }
-							className="editor-inserter__item"
+							className={ classnames( 'editor-inserter__item', getBlockMenuDefaultClassName( item.id ) ) }
 							onClick={ () => onSelect( item ) }
 							tabIndex={ isCurrent || item.isDisabled ? null : '-1' }
 							disabled={ item.isDisabled }