Repeatedly we heard that deleting blocks is not straight forward, i.e. this quotation from Marcel Boer

Could delete buttons always be visible? Currently deleting text blocks is really quite tricky. You have to click just outside of the text box, which is very narrow margin, to be able to delete it. If you click too far ‘inside’ the block, you switch to the text editor and you cannot delete the block.

This ticket is about improving the current delete pattern.

1. Position & Size

We would like to change the position and size of the button.

• Position of the button is outside the focus box on the right side and the height is the same as a one-line input field (27x27px).
• If the input field has multiple lines the delete button remains aligned at the top position (it doesn’t move).
• The bg color of the delete button is same as the bg of an input field which is being edited (#EDF3F5). In this way there is a clear connection between the edit mode and the delete button.

1a. Deleting a one-line input field

The delete icon is aligned with the input field.

1b. Deleting a multiple line input field

The delete icon remains at the top position.

1c. Deleting a form block

Within a form block (such as an image/video/embed block) the delete icon should show up the moment you click into a input field within the block, aligned at the top border.

2. Mechanics

Currently the mechanics works as such that you first press esc key and then delete by mouse click on the icon or press either Del or Backspace key. This mechanic should not be changed. But additionally we would like to enable deleting a block also in edit mode, meaning that the delete icon already shows up when editing a block so you don’t necessarily need to press esc first. This ensures that user can in any case delete a block especially if he doesn’t know about the „key esc mode“.