Add block description component

blocks/block-description/index.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export default function BlockDescription( { children } ) {
+	return (
+		<div className="components-block-description">
+			{ children }
+		</div>
+	);
+}

blocks/block-description/style.scss

@@ -0,0 +1,12 @@
+.components-block-description {
+	&:not(:last-child):after {
+		content: '';
+		display: block;
+		border-bottom: 1px solid $light-gray-500;
+		margin: 1.5em 0;
+	}
+
+	p {
+		font-style: italic;
+	}
+}

blocks/block-description/test/index.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import BlockDescription from '../';
+
+describe( 'BlockDescription', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render a <p> element with some content', () => {
+			const blockDescription = shallow( <BlockDescription><p>Hello World</p></BlockDescription> );
+			expect( blockDescription.hasClass( 'components-block-description' ) ).to.be.true();
+			expect( blockDescription.type() ).to.equal( 'div' );
+			expect( blockDescription.text() ).to.equal( 'Hello World' );
+		} );
+	} );
+} );

blocks/index.js

@@ -15,5 +15,6 @@ import './library';
 export * from './api';
 export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as BlockControls } from './block-controls';
+export { default as BlockDescription } from './block-description';
 export { default as Editable } from './editable';
 export { default as MediaUploadButton } from './media-upload-button';