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

Improve block inserter #34

Closed
brickbones opened this issue Feb 9, 2017 · 8 comments
Closed

Improve block inserter #34

brickbones opened this issue Feb 9, 2017 · 8 comments
Labels
[Type] Enhancement A suggestion for improvement.

Comments

@brickbones
Copy link

If more options are available, changing the width of the .insert-block__menu feels like a better experience.

wp-c

@jasmussen
Copy link
Contributor

Interesting idea, thanks for sharing a mockup also 🌟

The design is definitely in need of further love. The most recent mockup looks like this:

insert

Maybe it does need to be bigger, I know @melchoyce has some thoughts on this as well. Probably prudent to keep in mind though: there are many (once all is said and done it's likely there will be 50+ outside of plugins alone), so we can't possibly show them all (which is why there are emoji-like tabs in that mockup). The balance we need to find is between showing a big friendly insert dialog that's keyboard accessible (type / on a new line to invoke it, then type to search or use arrow keys + enter to insert), and not overwhelming people with choice.

@jasmussen jasmussen added the [Type] Question Questions about the design or development of the editor. label Feb 10, 2017
@brickbones
Copy link
Author

Here is my idea a little bit more elaborated. I will include the emoji-like tabs and darker icons.

c-3

@karmatosed
Copy link
Member

I really like the idea this takes up more space. I feel the current implementation is a little small. I understand wanting it to be minimal and I'm not totally sold on it being full width either. I think exploring different sizes would be great. We probably also increase accessibility for users as we make larger.

@jasmussen
Copy link
Contributor

This inserter will likely undergo iterations as well, hence this ticket is valuable. I know that both @melchoyce and @folletto have thoughts on how to improve this.

@brickbones
Copy link
Author

Playing with different positions and sizes.
option-1
option-2
option-3
option-4

@folletto
Copy link
Contributor

This inserter will likely undergo iterations as well, hence this ticket is valuable. I know that both melchoyce and folletto have thoughts on how to improve this.

I've a couple of hypothesis, but more in general I'd try to explore a set like:

  1. Plus on the page: plus at the end (as is in the current prototype)
  2. Plus on the page: plus on the side, always present regardless of which line one is on
  3. Plus on the page: plus appearing on a blank line
  4. Plus in a fixed part of the screen: top bar
  5. Plus in a fixed part of the screen: inspector / sidebar
  6. Plus in a fixed part of the screen: floating palette in a fixed position (the page scrolls but the palette doesn't).

I lean more toward 4-5-6 because:

  • Would unclutter the page, moving it further away from text and giving more focus.
  • An insertion point is already present: the cursor. Solving the problem of "how to add in the middle".
  • Would open the possibility of options that don't cover text on wider screens.

@jasmussen jasmussen changed the title Wider block menu Improve block inserter Feb 23, 2017
@jasmussen
Copy link
Contributor

Took the liberty of renaming the ticket to be the canonical "inserter improvements" ticket.

@mtias mtias added [Type] Enhancement A suggestion for improvement. and removed [Type] Question Questions about the design or development of the editor. labels Mar 7, 2017
@jasmussen
Copy link
Contributor

jasmussen commented Mar 24, 2017

Please see also #323, as that will be the task ticket for the inserter. Edit: actually closing this one to keep all the conversation on a single ticket.

omarreiss added a commit that referenced this issue Jun 26, 2018
tests: Use the generic domain `example.com` in tests
hypest pushed a commit that referenced this issue Nov 2, 2018
…perty

iOS: Expose and wire onChange propType for Aztec.
ntwb added a commit that referenced this issue May 31, 2020
Removed all vendor prefix rules
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

5 participants