Blocks: Add a delete button

editor/block-right-menu/index.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+import { IconButton } from 'components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function BlockRightMenu( { onDelete } ) {
+	return (
+		<div className="editor-block-right-menu">
+			<IconButton
+				className="editor-block-right-menu__control"
+				onClick={ onDelete }
+				icon="trash"
+				label={ __( 'Delete the block' ) }
+			/>
+		</div>
+	);
+}
+
+export default connect(
+	undefined,
+	( dispatch, ownProps ) => ( {
+		onDelete() {
+			dispatch( {
+				type: 'REMOVE_BLOCKS',
+				uids: [ ownProps.uid ],
+			} );
+		},
+	} )
+)( BlockRightMenu );

editor/block-right-menu/style.scss

@@ -0,0 +1,28 @@
+.editor-block-right-menu {
+	position: absolute;
+	top: 10px;
+	right: 0;
+}
+
+.editor-block-right-menu__control {
+	display: block;
+	padding: 0;
+	border: none;
+	outline: none;
+	background: none;
+	color: $dark-gray-300;
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+
+	&[aria-disabled="true"] {
+		cursor: default;
+		color: $light-gray-300;
+		pointer-events: none;
+	}
+
+	.dashicon {
+		display: block;
+	}
+}

editor/modes/visual-editor/block.js

@@ -18,6 +18,7 @@ import { getBlockType } from 'blocks';
  * Internal dependencies
  */
 import BlockMover from '../../block-mover';
+import BlockRightMenu from '../../block-right-menu';
 import BlockSwitcher from '../../block-switcher';
 import {
 	focusBlock,
@@ -266,6 +267,7 @@ class VisualEditorBlock extends Component {
 				{ ...wrapperProps }
 			>
 				{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
+				{ ( showUI || isHovered ) && <BlockRightMenu uid={ block.uid } /> }
 				{ showUI &&
 					<CSSTransitionGroup
 						transitionName={ { appear: 'is-appearing', appearActive: 'is-appearing-active' } }