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.
ellatrix
All 26 comments
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.
mapk
on 23 Feb 2017
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)
ellatrix
on 23 Feb 2017
After looking at these more... it's almost as if these two deletion actions should be swapped.
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.
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.
mapk
on 23 Feb 2017
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.
ellatrix
on 23 Feb 2017
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.
jasmussen
on 24 Feb 2017
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
on 2 Mar 2017
Note the couple extra characters between the paragraph block and the image block.
melchoyce
on 2 Mar 2017
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.
jasmussen
on 2 Mar 2017
Good to know. :)
melchoyce
on 2 Mar 2017
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.
ellatrix
on 13 Mar 2017
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.
notnownikki
on 8 May 2017
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.
jasmussen
on 9 May 2017
How do you propose we delete an embedded video or tweet, where there is no tinymce editor?
notnownikki
on 9 May 2017
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.
jasmussen
on 9 May 2017
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 notifications@github.com
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
https://github.com/WordPress/gutenberg/issues/130#issuecomment-300113730,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADKSstiWWNYH_q4V0C-eb-9OKXjN9JV-ks5r4DQ4gaJpZM4MKZWL
.
notnownikki
on 9 May 2017
Solid, solid points. I'm swayed for everything but the text blocks.
jasmussen
on 9 May 2017
Is this decided? Could we have a design?
youknowriad
on 15 May 2017
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?
jasmussen
on 15 May 2017
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.
youknowriad
on 15 May 2017
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.
jasmussen
on 15 May 2017
You'd still be able to select the block and press backspace, no?
Perhaps you can for the embed blocks, but the freeform block, for example, can't be selected without activating the text input, and backspace doesn't remove this block even when there's no text. To remove a freeform section I had to enter the Text editor to remove it.
kristarella
on 17 Jun 2017
New mockup!
We'll want to think a bit more about how this works on mobile, we might want them on the top quick toolbar.
That cog on the right is a shortcut to open advanced block settings, when they are available. It opens the sidebar, with the block selected, in other words.
jasmussen
on 18 Jun 2017
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?
GaryJones
on 19 Jun 2017
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.
jasmussen
on 19 Jun 2017
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.
mrjarbenne
on 19 Jun 2017
Just to add my thoughts here, I agree that adding some visual way to delete blocks is important.
- 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.
- 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.
jwold
on 21 Jun 2017
Related issues
BE-Webdesign
·
3Comments
nylen
·
3Comments
pfefferle
·
3Comments
spocke
·
3Comments
davidsword
·
3Comments
Most helpful comment
New mockup!
We'll want to think a bit more about how this works on mobile, we might want them on the top quick toolbar.
That cog on the right is a shortcut to open advanced block settings, when they are available. It opens the sidebar, with the block selected, in other words.