Add class name for inserter menu items to allow basic styling

blocks/api/index.js

@@ -16,6 +16,7 @@ export {
 	default as serialize,
 	getBlockContent,
 	getBlockDefaultClassName,
+	getBlockMenuDefaultClassName,
 	getSaveElement,
 } from './serializer';
 export { isValidBlock } from './validation';

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.

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 }