Gutenberg: Popup Toolbar: Show Also When Selecting Text With Keyboard

[ahmadawais]

Hey, guys!
The prototype is looking great, I did some testing (macOS with Chrome) and here's what I think about it.

• Selecting text (with the keyboard) doesn't bring up the toolbar on macOS with Chrome — it appears when I click or click-drag-select.

---

>

• Selecting the text on Andriod with Chrome gives you the option of copy/paste and the toolbar kinda gets stays hidden behind it.

---

>

- When I Select-All and delete everything, the text becomes weirder.

>

- When I want to align the text, toolbar appears and the align icons are hidden behind it.

>

• I was not able to align the text. I think the align controls should be kept in the same toolbar instead of having the user go through three different ones?

---

>

• Image handling is pretty intuitive!

That's all for now :)

[jasmussen]

Excellent catches all around! Thanks for testing!

Most of these are the result of this simply being a UI prototype (see #51), and not intended to be fully functional. Mobile, for example, hasn't been a concern yet, and we are keenly aware that the popup toolbar won't work there.

[ahmadawais]

Great! Looking forward!

[jasmussen]

I took the liberty of renaming this incredibly useful ticket to focus on the selection popup when using keyboard controls.

The mobile aspects we've created a separate ticket for here: https://github.com/WordPress/gutenberg/issues/44

[jasmussen]

Solid observation by @JDGrimes here:

I was expecting the text style popover to appear when inserting my cursor in a line of text, not only on selection. Maybe it is just me, but I guess my expectation was that it would by default apply to the word the cursor was in. Or if a set of words was already italic, for example, that it would appear when inserting the cursor there and you could modify the styling of that set of words.

This could speak in favor of having a permanently docked inline toolbar, instead of the popup. Could look like this:

👆 in that mockup, the first group of formatting controls are block level, the second would be inline level.

[JDGrimes]

This could speak in favor of having a permanently docked inline toolbar, instead of the popup.

That's an interesting idea. Really long blocks would require scrolling to apply inline formatting then though, unless these toolbars were sticky.

[jasmussen]

unless these toolbars were sticky.

They could be :)

[JohnPixle]

This could speak in favor of having a permanently docked inline toolbar, instead of the popup.

_That's an interesting idea. Really long blocks would require scrolling to apply inline formatting then though, unless these toolbars were sticky._

Could not resist a quick design session around this as I found the idea of a docked toolbar interesting and handy in many occasions. This dock approach might also address the issue described at #78 with fullwidth images (check the image block example below)

Some notes:

• Please disregard UI colors for now, did not have much time to look into this, just wanted to explore the layout.
• The contextual inline toolbar can either be invisible until text is selected. Not 100% sure about this but it could be an option. The block controllers can be visible all the time.
• Check the full width image block toolbar at the last example. The last button is inversed, user can click on it and revert to the non-fullwidth image.

I have mixed feelings about this approach, but I think it's worth considering. Also allows for toolbars to be sticky in case of very long text blocks.

[JohnPixle]

AH! Bummer. I just realised that for the image block there should be more contextual tools. Example:
https://adobe.ly/2lneay5

[jasmussen]

I can't tell you how happy I am to see these mockups. Thanks so much for doing this, it's _incredibly_ useful to see multiple approaches here.

Since the feedback on the UI prototype this wednesday, I have furthered some mockups also, and they go in much the same direction as yours (which is extra heartening — good ideas tend to have gravity).

The latest mockups are in this PR that's about to be merged: https://github.com/WordPress/gutenberg/pull/84/files

Specifically this mockup tackles the same docked toolbar:

https://raw.githubusercontent.com/WordPress/gutenberg/5e50c86e0c5c53cd2245e92537e8931cdc0cb317/mockups/Formatting%2C%20Click.png

Changes:

• Use the lighter chrome, as that was suggested as feeling friendlier
• Dock them to the top of the toolbar, like yours, group in _block level_ and _inline level_
• Use light gray block outlines when a block is selected, like yours

🎉

Would _love_ your thoughts on this. It's really useful to spar on these.

AH! Bummer. I just realised that for the image block there should be more contextual tools.

Excellent observation, I've been thinking about this as well. Here's the latest image block mockup I've made:

https://raw.githubusercontent.com/WordPress/gutenberg/5e50c86e0c5c53cd2245e92537e8931cdc0cb317/mockups/Image.png

In that mockup, I treat the docked toolbar as a "Quick access" group of controls. At the end is a cog that opens... _someting_ that still needs a little noodling. Right now I'm thinking it's a docked, scrollable "inspector"-like sidebar, which can show all the advanced options you might have for an image, and there is a lot to take in here, including:

• Alt text
• Size
• Link to
• Parallax scrolling
• Featured image?
• Fixed position?

And any other options a plugin might add. See also this block list.

[JohnPixle]

Thanks for your input and for the time you put into it. I will go through it thoroughly, but meanwhile I worked on refining some of yesterday's work.

Colors and typo need work. I would happilly align the mockup's styling to the actual prototype's in order to have a common reference. I will check your styles and re-iterate later. For this one my intention was to reveal potential structural issues that might arise from such a dock approach, and also to suggest elements that might trigger further discussion

Among others the mockup below shows:

• An exploration on a quick flow for adding a text link
• Added more contextual controls for the image. Also, an option to create a caption. (One question -at least for me - is how a user will end up using this photo. What is the flow for creating a blank image block and adding an image? Media gallery popup?)
• I explored the potential implications of dropdown menus in the toolbars, for the case of Headings.
• I included an of how horizontal expansion might work.
• I noticed how much weight the last block at the mockup has, which is a short heading block, surounded by a relatively heavy UI. This might me an assumption and not so obtrusive in real life, just noting though.

I think you can click on the image for the full size.

[jasmussen]

Some really solid ideas here, thanks @JohnPixle! Great job tackling the link head on. I particularly like your work with headings, the extra image block controls, and the horizontal block style for a fullbleed image. 🌟🌟🌟🌟🌟 effort.

Would you like a copy of the Sketch template I've been working in? It has a bunch of smart icon symbols that are easy to use.

[JohnPixle]

@jasmussen great idea, would be extremely useful. Thanks for considering this :) Feel free to share a link to it or whatever works best for you, and i'll get my hands on it.

For the mockups I've been using a mix of dashicons and gridicons. Any recommendations on iconography, or are there any plans for a custom Gutenberg icon set in the roadmap?

[jasmussen]

Here's the Sketch template that I've been using:

https://cloudup.com/cI8629wLDOS

[jasmussen]

Closing this for now. I've bookmarked the amazing mockups here to revisit when we start a feature plugin.