Build: Block Inserter #323
Comments
jasmussen
added
Framework
|
A first pass at implementing in the plugin was merged in #307. |
|
@timmyc I took the liberty of attaching you to this one, as you created some tickets about the inserter initially. Mind taking point on this one? ❤️ |
|
I realize it's a bit late as this is in development, but the current size of the picker seems small, especially as the number of available blocks increases. Would placing the block picker horizontally in a resizable area improve block findability for novice users?
This placement provides more real-estate for novices to explore / learn the available blocks, while still allowing advanced users access to search if they know what they want. |
|
That's a cool mockup, I like it! And it's not too late to think of good improvements. The inserter has been something that's always felt like it could use more iterations, so your work is welcome. I like the idea that it takes up the spot of a block, could lend itself to some of the animation finesse that @shaunandrews has also thought up. I like it! |
|
Is there a discussion about allowing the desktop toolbar to stay expanded while editing, or even on page load? I agree the little plus symbol is cleaner in appearance, but I have co-workers who use Google Sheets over Dropbox Paper simply because the toolbar is always exposed. Maybe a setting in Settings > Writing to check if you want the toolbar exposed permanently? I'm referring to this image |
|
Allowing the toolbar to be expanded makes sense, but focusing the user on the act of writing will help them stay on task so it should probably remain uncluttered. Separating the toolbar elements assists users in understanding the meaning of each icon:
Another option is showing the most recent (or most common) blocks users add to their pages. This helps surface options but may also keep users from becoming familiar with the interaction that allows in-post block additions.
The option above does, however, offer novice / intermediate users a way of adding basic blocks, and familarizes them with the "click-plus-to-insert" interface pattern. Eventually they should realize they have the same plus button in editor and graduate to adding new blocks inside the editor. Then moving from intermediate to advanced, they'll click plus and search for the blocks they want to find.. In this interaction I imagine users drag-and-drop the block from the toolbar to the place in the content area they want to see the new block. |
For now we're making the bet that an Editor bar with undo/redo/insert/post-settings/publish along with highly contextual block-first formatting tools can give us the best of both worlds those two worlds being feature rich and simple. If we find that this doesn't work in practice, it wouldn't be too hard for us to revisit this midstream. Love your mockups @inhll, great to have. Showing recents expandable like that is an idea worth revisiting if we find that it becomes necessary. As it stands, you'll be able to insert using the commandline (type |
Absolutely -- the current approach covers all the bases and can be amended if necessary! |
|
Riffing off the existing ideas, especially those from @inhll and @shaunandrews, here is a suggested flow for adding content to a page either at the bottom or between existing blocks. The active content area is outlined by a box. There is a centered plus sign to add new content. Both are in an accent color chosen from the official WordPress colors -- not the same color as text. Adding content puts the focus on a small set of popular content types while the rest of page is greyed out (similar to focus mode in writing apps.) The user chooses a type and is placed in a new content box with editing tools.
|
|
Really dig your work here, @mizejewski! Thank you for adding to the discussion, the animatics are extra helpful too. It feels like at the core of your concept is the idea that the inserter, especially between content, "makes a space for itself" where the block will be inserted. This is especially visible in the last animatic that shows the paragraph below the inserter being pushed down. I really dig this, because it subconsciously tells you where the block you insert will land. The splash of color is also nice! The plus that sits on the bottom of the block boundary seems a good established pattern to explore. We tried it, though, and it felt too heavy handed when we did. That doesn't mean it can't work, but I think it's worth maybe keeping it as an idea at this point that we can revisit when it becomes clear that it's necessary. Recent mockups puts an inserter at the top toolbar: Or you can use the inserter that sits at the end of the document, when it is focused: If you insert a linebreak between content in the text, you can click the inserter button that shows up on the side: This last one ties right into your (and Shaun's and others) idea that the inserter is horizontal, and chisels out a space for itself. A horizontal inserter seems to be an idea that keeps bubbling up, so there seems to be meat on that bone. CC: @melchoyce. (Also slick detail that the inserter on the side turns into a close cross — we should totally do that.) 🎉 In any case, there may be sufficient ways to insert blocks that we don't need the extra button that sits on the border. But we should definitely revisit if we find in testing that we do need that. Really nice work, thank you for doing this! 💖 |
|
From an implementation perspective, there's a question regarding:
After inserting the line break, where is the cursor focused, and how do we know to show the inserter option? Is it a new empty text block? A new empty freeform block? A new paragraph within the existing text block? A new "unassigned" block type? Seems like the default behavior for adding line breaks is to append a new empty text block. In which case, maybe it's the responsibility of the text block to display the inserter when it has an empty content state. Since it's on my mind, there could be a role for the Slot & Fill pattern idea in #507 in letting the text block's implementation fill the block mover slot with an inserter button. |
Solid question to bring up. I think we can flex on this, but I've always thought of the new line as being text, like anything else, per the "the newline is your commandline" idea. I.e. if you start the line with I'm aware that this is not quite how the inserter worked in the prototype, where the |
|
It makes sense to me that this is the responsibility of an empty text block. |
|
It should probably have its own issue, but I'm going to task myself with implementing the "empty block" inserter button. |
|
@aduth your empty block + inserter thoughts gave me some ideas for the inserter. Let me know your thoughts on these:
|
|
Some great stuff here. |
|
Weird outlier question: what if someone means to type |
Great question to be asking. If written on a new line, as the first character, it should invoke the inserter. But if you type something that isn't in the inserter, or simply add a space after the /, then the inserter disappears again. Slack-esque. That is — the above would be the preferred behavior, and not how it works in the prototypes. Incidentally this means that if you legitimately want to write one of the following phrases on a new line, you can't:
etc. But you can write, if you really want to, the following:
(note the trailing spaces) I say "can" as if it's built, when in fact it's not built, and it might even be possible that we won't get to it because it's not as high priority as the other things. But the above is how it would work when I walk through it. |
mtias
added
[Feature] Inserter
|
Closing this in favor of #833. The work done on the inserter so far has been impressive. Let's create atomic tasks for the rest. |
Add button to insert blocks.
Behavior
A plus shows up at the end of the post. Click it to invoke the inserter:
When you make a linebreak, the plus moves to the left:
This is also how you would insert content between two paragraphs:
You can also type
/on a newline to invoke the inserter, just like how it works in Slack and many chat apps:There will likely be a permanently visible "Insert" button in the toolbar:
See also #34 and #72 (comment) for alternate mockups for improving the look of the inserter.
The text was updated successfully, but these errors were encountered: