diff --git a/editor/block-right-menu/index.js b/editor/block-right-menu/index.js new file mode 100644 index 00000000000000..5c9522cf01fa15 --- /dev/null +++ b/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 ( +
+ +
+ ); +} + +export default connect( + undefined, + ( dispatch, ownProps ) => ( { + onDelete() { + dispatch( { + type: 'REMOVE_BLOCKS', + uids: [ ownProps.uid ], + } ); + }, + } ) +)( BlockRightMenu ); diff --git a/editor/block-right-menu/style.scss b/editor/block-right-menu/style.scss new file mode 100644 index 00000000000000..2cb194be281208 --- /dev/null +++ b/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; + } +} diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index ef2fdc1bd15860..1bcd34b210a868 100644 --- a/editor/modes/visual-editor/block.js +++ b/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 ) && } + { ( showUI || isHovered ) && } { showUI &&