Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not able to insert a new block after paragraph block via mouse action #7006

Closed
bph opened this issue May 29, 2018 · 17 comments
Closed

Not able to insert a new block after paragraph block via mouse action #7006

bph opened this issue May 29, 2018 · 17 comments
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Design Feedback Needs general design feedback.

Comments

@bph
Copy link
Contributor

bph commented May 29, 2018

Describe the bug
When a paragraph is the last block in a post, I am not able to add a new block with the mouse. And the 'new block' section doesn't appear. I am able to add a block hitting enter on the previous block. But that would require a control switch. I was just using my mouse to format the previous block, and then wanted to add a different block below.

It was awkward enough that I think it was differently handled in previous versions.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Add New Block
  2. Add two paragraph blocks
  3. select the bottom one and select different formatting options with the mouse
  4. Use your mouse and try to add a new block underneath the bottom paragraph block.

Expected behavior
When clicking in the space below the paragraph, have the new block tool appear. (I am aware that it might interfere with the typing flow with block controls staying away)

Screenshots
Made you a video: http://recordit.co/aQ9HBLLZ2t

Desktop (please complete the following information):

  • OS: MacOS
  • Browser Google Chrome
  • Version 66.0.3359.181

Additional context

  • Gutenberg 2.9
@maddisondesigns
Copy link

Not sure if it's related, but I also had issues adding blocks when the content gets near the bottom of the browser window. #6819

I can also replicate the exact issue you mentioned above when the content isn't near the browser edge.

@danielbachhuber
Copy link
Member

danielbachhuber commented Jun 27, 2018

Hi @bph,

I believe this is a deliberate design decision. Here's my visual representation of the problem:

image

image

Flagging Needs Design Feedback to verify this is a deliberate decision. If so, we can close.

@danielbachhuber danielbachhuber added Needs Design Feedback Needs general design feedback. [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Jun 27, 2018
@chrisvanpatten
Copy link
Member

See also #7271, #7168 (specifically the discussion starting here), and #6834.

@bph
Copy link
Contributor Author

bph commented Jun 28, 2018

I guess, it wasn't really clear, in my video or in my description, or this is just a Firefox issue.
I get that when the paragraph is selected there is not inserter. My issue is that I can't add a block underneath the paragraph after I 'unselect' it. - in Firefox.
Here is another attempt to make this viewable. http://recordit.co/NyHe2BXNZ4

  • I add a paragraph
  • then I format it.
  • then I unselect it
  • then I try to add a block below it.
  • but I don't get the 'inserter' on any mouse over.

@chrisvanpatten
Copy link
Member

@bph This is the same in all browsers — the appender will only show up if your last block is not a paragraph block. #7271 has some discussion about changing this, see @karmatosed's comment here.

@paaljoachim
Copy link
Contributor

paaljoachim commented Jun 28, 2018

The inserter makes it very easy to just click the plus button and add a new block. The bottom block should then have an inserter at the bottom in addition to the top. Keeping it consistent with this kind of UI flow.

This means hovering over the top bar of a block shows the top inserter and because this is the bottom block one can then hover over the bottom bar and a the inserter should show up.

I just have to say that the top image shows existing inserter behavior and the bottom shows a suggestion as to how it can also be done on the bottom block.

block-inserter-button-bottom

The following image which shows the existing behavior, shows a "ghost" block area behavior (left inserter and the right icons). It takes away the user flow of giving the option directly to the user. As the area already exists even before the user even asked for it.

Comparisons:

gutenberg-preexisting-ui-block

New suggestion:

block-inserter-bottom-image

@karmatosed
Copy link
Member

karmatosed commented Jul 15, 2018

This is a design decisions and in this case more feedback from testing would be great to get here over making a change now. Thanks everyone for the ideas but let's progress as is and iterate should feedback lead us there. Noting we have #7271 also for exploration still.

@maddisondesigns
Copy link

@karmatosed Why does this need "more feedback from testing"? This is completely inconsistent with every other block. How is deliberately making the UI inconsistent, something that requires testing feedback? How do we explain this to a client? "To insert a new block, click the Block Inserter at the bottom of the page, unless your last Block is a Paragraph block because then there is no Block Inserter." This is just ridiculous!

@ZebulanStanphill
Copy link
Member

I agree with @maddisondesigns. This inconsistency is confusing. Of course, I would prefer if there were no automatic placeholders at all and instead the sibling inserter was usable after the last block in a post or <InnerBlocks/>, but keeping the automatic placeholders and making them appear for Paragraph blocks would at least make it consistent.

I know the automatic placeholders were removed for Paragraph blocks because it felt weird for people writing posts, but since that is the case, why not just do what @paaljoachim suggested? It solves multiple issues:

  • It provides an easy way to insert a block at the end of a context no matter what the last block is.
  • It is consistent with how you insert blocks between other blocks.
  • It does not get in the way of people trying to focus and write posts as it only appears on hover.
  • It does not take up any space on the page until intentionally used to insert a placeholder.

If you think the sibling inserter is not easily discovered the first time (hence the need for automatic placeholders), perhaps you could use the starter tips to show where to look for it. And if you are worried about discovering how to insert blocks after the last one in a page, then why hide it for the most common block, the Paragraph?

Speaking of which, I would prefer if the sibling inserter never inserted a placeholder in the first place and simply opened up the inserter menu directly. Placeholders could still be inserted using Enter, since it makes sense there: using Enter means you are are either trying to create a new Paragraph because you are writing or you want to use slash commands to insert other blocks. Right now the sibling inserter just works the same as pressing Enter, which I think is a mistake. You have to click twice to actually get to the menu to insert a specific block, and then of course you have to click again to actually insert the desired block so it takes a total of three clicks, when it could just be two. See also: #6834 and #7271.

@karmatosed
Copy link
Member

Regarding testing feedback, absolutely I stand by that, we all have our preferences but right now it's important to get feedback on what is in place design wise. That said I also pointed to that #7271 as being a good place to co-ordinate conversation, which I totally think works right? If it doesn't happy to reopen.

@maddisondesigns
Copy link

I'm all for testing feedback, but more importantly, and before user testing even takes place, the user interface needs to be consistent. Removing the Block inserter from under Paragraphs blocks only makes the UI the exact opposite. Proof of that is right here in this issue. It's been raised because someone (other than myself) thought it was a bug.

I think this issue should be reopened. #7271 is another UI issue altogether. Although it does touch on the fact that the Inserter disappears under Paragraph blocks, the initial issue raised was something else entirely. If this issue remains closed, guaranteed, what will happen is when #7271 also gets closed, this issue will simply be forgotten about.

@chrisvanpatten
Copy link
Member

I've been on record saying this before but inconsistencies in how appenders and inserters are displayed are easily my number one most frustrating aspect of using Gutenberg, and one of the big pieces of feedback I've heard from my clients as well.

@collinanderson
Copy link

collinanderson commented Jul 23, 2018

For feedback, I've personally found the lack of a plus sign after the last paragraph confusing, especially when adding images or other non-text blocks.

This a separate issue from #7271 (confusing plus button) which is not as big of a deal to me.

The bigger issue to me is that there's no plus button anywhere (except at the top of the page) for inserting a new block after the last paragraph. In every other case there's always a plus button somewhere.

So I think this should be re-opened.

@hedgefield
Copy link

I agree with the people above. It simply doesn't make sense to limit any form of the inserter to a specific usecase. The inline + works really well, and I pretty much exclusively use that to insert blocks exactly where I want them. Enters and slashes and the inserter at the top are nice fallbacks, but I and others here at the office working on Gutenberg prefer the inline inserter and are frustrated that it only shows up at the top, and not at the bottom of a block. For accessibility too, it doesn't make sense that the first action you land on when navigating through the content with a screen reader is insert new block.

There aren't a lot of UX things where I can't be convinced by different approaches or compromises, but this is one I feel strongly about we should at least try. It's a small change to enable it at least below the last block, and it would solve some issues, because looking back through every related post I get the impression a lot of people would appreciate this change.

@bph
Copy link
Contributor Author

bph commented Jul 31, 2018

I worked with a few (4) content creators, and they all stumbled over "why isn't there all of sudden no inserter on the bottom of the blocks anymore?" I tried to keep an open mind and use it as a teachable moment, to show them other methods to insert a block, but it did not make any sense to them why there is one for every block just not for the paragraph block.... I

@ZebulanStanphill
Copy link
Member

@karmatosed Can this please be reopened? Noting #8636 and #8887 as duplicates. I am not really sure that it makes sense for this to be lumped into #7271.

@hedgefield
Copy link

Another compelling user report in this WPtavern article, where the placeholder is completely misinterpreted https://wptavern.com/my-gutenberg-experience-part-three

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

No branches or pull requests

9 participants