Comments (14)
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.
from gutenberg.
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.
from gutenberg.
Here's the Sketch template that I've been using:
https://cloudup.com/cI8629wLDOS
from gutenberg.
Great! Looking forward!
from gutenberg.
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: #44
from gutenberg.
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.
from gutenberg.
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:
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:
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.
from gutenberg.
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.
from gutenberg.
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.
from gutenberg.
unless these toolbars were sticky.
They could be :)
from gutenberg.
AH! Bummer. I just realised that for the image block there should be more contextual tools. Example:
https://adobe.ly/2lneay5
from gutenberg.
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.
from gutenberg.
@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?
from gutenberg.
Closing this for now. I've bookmarked the amazing mockups here to revisit when we start a feature plugin.
from gutenberg.
Related Issues (20)
- Indent/Outdent toolbar buttons: show shortcut in tooltip HOT 2
- E2E: Eliminate side effects via DB snapshots
- Could not removeFilter (Javascript) HOT 1
- Code editor mode only allows template (not content) editing when editing a "Page" with the site editor
- Allow customization of post-template block markup
- Add tooltip to hover for color presets HOT 1
- Data Views: Persistent layout option for templates (and others) in site editor
- Nav Block: Add Support for Separator Block & Borders
- Using the delete key inside the "Rename" modal deletes the current block HOT 2
- [DataViews] Reordering Items? HOT 2
- Patterns Explorer: Improve pagination layout when 'Show button text labels' preference is enabled
- Add more collapsed navigation icon options HOT 2
- Scroll Bar present in styles colors preset panel HOT 3
- Global styles panel header buttons text overlaps when 'Show button text labels' is enabled
- Improve implementation of the 'Show button text labels' preference HOT 2
- Interactivity: Warn texts should be eliminated from production builds HOT 1
- Aspect ratio preset names are not translatable
- ``render_block_data`` hook maybe conflicting with global styles
- New Block: Generic Date/Time Block HOT 2
- Gutenberg Tabs crashing on Edit with React error - unable to edit tabs or content HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gutenberg.