Add delete button

[ellatrix]

It is currently not possible to delete a block without having to select the contents. A delete button has been added to the single instance TinyMCE prototype. It will replace the contents with an empty slot and set the selection there.

https://wordpress.github.io/gutenberg/tinymce-single/

[mapk]

This feels close to me.

But rather than displaying an empty block, I think it should remove the block altogether like the action below currently does. Highlighting the text and clicking 'delete' on the keyboard removes the entire block and positions the cursor in the next block down. This feels right in relation to what should happen when I delete a block using the delete icon.

[ellatrix]

Yeah I agree. I made it like that because it was slightly easier the implement, and didn't know where to put the cursor. Should it go to the end of the previous block, or the start of the next block? What if there is no previous block, or no start block? (That one is easy I guess. :D)

[mapk]

After looking at these more... it's almost as if these two deletion actions should be swapped.

1. If I delete a block using the delete icon, the whole block should delete while placing the cursor in the next block down (this feels right to me). If there is no block below, place cursor in block above? If no other block... don't position cursor anywhere.

2. If I delete all the content within a block by highlighting it and hitting the delete button on my keyboard, then it should leave the empty block in place with the cursor positioned inside it. This way, I'm just deleting text (or whatever) and am ready to rewrite it.

so...

Delete icon is deleting the block.
Deleting the content within a block only deletes the content, not the block.

[ellatrix]

If there is no other block, we'll have to create an empty slot and put the caret in it, otherwise you can't interact any longer.

[jasmussen]

I feel like this particular interaction is too early to optimize for.

You are in a writing context, and the backspace is natural to any such interaction. We should make sure backspace works for deleting blocks. Only when we have tried that, and felt in our bones that it's not enough, we can add a trash button, and yes, the trash button if shown next to the block level controls should remove the entire block, and probably not put the cursor anywhere, since you're in a "layout mode" at that point.

[melchoyce]

What should happen when you're in a new empty paragraph block, and you hit delete/backspace on your keyboard?

It currently mostly works as I expect, but there's a couple extra characters that seem to exist. Taking a video.

[melchoyce]

Note the couple extra characters between the paragraph block and the image block.

[jasmussen]

Note the couple extra characters between the paragraph block and the image block.

This is a UI prototype limitation of contenteditable. Something something the p is deleted, but the empty linebreak remains. This is where TinyMCE will help.

[melchoyce]

Good to know. :)

[ellatrix]

Just in order to test the UI and API a bit more I added a table block. This seems to be a good case where a delete button would be good to have, as all fields are text fields and backspace means deleting a character. There is no way to delete the block.

[notnownikki]

We're quite likely to need a delete control in the form of a button or something clickable for embed blocks too, where you're embedding a video, or tweet, or something like that.

[jasmussen]

Though I'm increasingly conceding that this button seems necessary (though I'd lean towards an X icon over a trashcan in any case), I still think we should try without this button for starters, and require people to backspace.

That being said, I do sort of expect we'll need this thing at some point regardless for mobile. Probably not for text, as backspace seems the most obvious desktop and mobile here, but for the bigger blocks.

[notnownikki]

How do you propose we delete an embedded video or tweet, where there is no tinymce editor?

[jasmussen]

How do you propose we delete an embedded video or tweet, where there is no tinymce editor?

You'd still be able to select the block and press backspace, no?

I was perhaps unclear in the past comment, I don't mean to say I'm down on the button or that we can't ever add it. For embeds, images, galleries, cover images and all complex block, I do anticipate we'll likely need such a button. But it's not a high priority, I would say, as we have something that works, unless I'm missing something.

[notnownikki]

You'd still be able to, but how will the user know that works? Embed blocks present themselves very differently from other editable blocks. For a long time now, browsers have used backspace to go back in the browsing history. Users are comfortable with pressing backspace to delete content if they see a cursor blinking away on the screen, but if they just focus the tweet block, they don't know what behaviour backspace will have when they press it. If focusing the tweet returns them to the form with the input box, and they delete the url, there's no user experience I'm aware of that says "pressing backspace in a form's text input will get rid of the form".

…

On Tue, May 9, 2017 at 10:39 AM, Joen Asmussen ***@***.***> wrote: How do you propose we delete an embedded video or tweet, where there is no tinymce editor? You'd still be able to select the block and press backspace, no? I was perhaps unclear in the past comment, I don't mean to say I'm down on the button or that we can't ever add it. For embeds, images, galleries, cover images and all complex block, I *do* anticipate we'll likely need such a button. But it's not a high priority, I would say, as we have something that works, unless I'm missing something. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#130 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADKSstiWWNYH_q4V0C-eb-9OKXjN9JV-ks5r4DQ4gaJpZM4MKZWL> .

[jasmussen]

Solid, solid points. I'm swayed for everything but the text blocks.

[youknowriad]

Is this decided? Could we have a design?

[jasmussen]

Is this decided? Could we have a design?

I'm still slightly unsure. I mean — for all the reasons mentioned it seems that we might end up needing one. But it feels also to me like it's an easy feature to add later on, correct? And if/when we do it could look like this:

Can we try having also the "delete" button removing any block selected?

[youknowriad]

But it feels also to me like it's an easy feature to add later on, correct?

Right, it's an easy to add feature. Maybe a "delete" button makes sense somewhere close to the block mover.

[jasmussen]

Maybe a "delete" button makes sense somewhere close to the block mover.

Could work for sure.

My reluctance to adding this feature isn't that I want us to not have it — I still believe it's where we'll end up. But I'm reluctant to optimize for this soon, because if we add the button, it's there forever. But if we don't add it, once we can start blogging with this plugin, dogfooding it, (which is any day now) we'll be able to know for sure whether we absolutely need this button. I think that answer will present itself rather quickly.

Some of the alternatives I've looked at have this feature, others don't. The big kicker that Nicola mentioned previously is that it's very critical for the user experience that you know what you've selected — i.e. the block — at which point pressing the delete button or the backspace button would feel like a natural editor way of removing said piece. However since we have more complex blocks with input fields that take your literal focus, those keys will behave differently therefor mandating an explicit button.

[GaryJones]

As a new user (of about 5 minutes), the current reliance on backspace only is definitely not intuitive. Screen reader users may well get further disorientated when they press backspace one-too-many times (by not knowing how many characters are left in a text block) and find the whole block is gone.

Feedback on @jasmussen's mockup: I like it, as it keeps the controls for the block separate from the controls for the content inside the block. However, the bin / trash can icon is being used for the post (to move it into a trash area from where it can be retrieved), but here it's removing the block completely with no chance of recovery.

As an alternative to the recent mockup what about a Delete Block button in the post settings, like there was in one of the general editor mockups regarding moving posts to trash?

[jasmussen]

As an alternative to the recent mockup what about a Delete Block button in the post settings, like there was in one of the general editor mockups regarding moving posts to trash?

Post Settings can be toggled off, for a more immersive experience, and you should probably still have an affordance for deleting a block without that one enabled.

[mrjarbenne]

I need to agree with @GaryJones. When adding a new block, I fumbled around for quite a while looking for a means of deleting the block. Particularly if you accidentally select the incorrect block type (eg: I didn't mean to click on smugmug), and want to get rid of it, there doesn't seem to be a means of deleting that block. In this instance, clicking delete on the keyboard is taking me back in my browser, away from the new post view. This seems to occur if the embed block is the first block in the post, rather than having a text block introducing the post.

[jwold]

Just to add my thoughts here, I agree that adding some visual way to delete blocks is important.

1. I like the mockup Joen created and feel that an actual delete icon is necessary next to the block. I keep looking for it and miss it not being there. If it's moved into post settings it'd be easy to miss.
2. Yes, this does add extra UI to the interface, and I thought I'd be ok with just using the keyboard. But the more I play around with the interface, the more I feel we should probably build it in.