Comments (6)
This is addressed in the mockups. Relabelling the ticket to serve as a design task, hope that's okay β€οΈ
from gutenberg.
Here's a quick idea for showing fewer options, but with an arrow to expand to more:
And this video shows an idea to show a preview of the heading size (or whatever style) rather than a generic H1 icon:
from gutenberg.
The current mockups provide block level controls to change the type/size of heading, with "Heading" still being a single block:
Every level of heading, 1-6, are shown here so you can in only two clicks set the size of a heading (click block, click size). Alternate ideas explored included up/down arrows to bump or reduce the size of a heading, but these would require multiple clicks.
But the H1/H2/H3 ... buttons aren't very inviting, and feel very "techy". Is there a better way to solve this? A better icon design? Can we show 6 levels of sizes in six different icons? Should we only show sizes 1-3 (with sized icons) and show the rest in a dropdown?
Input welcome!
from gutenberg.
So in the spirit of exploration, here's a crazy idea:
The icons are a little fuzzy and unpolished, but this embraces the fact that H2 and H3 are technically separate blocks (as opposed to how we've seen it so far as a Heading block with the size being the defining difference).
Basically you pick the size of you heading here. Or you pick text, or quote or whatever it needs to be. The formatting toolbar is then contextual to the type.
from gutenberg.
Here's a more basic one, which is more akin to Shauns version above:
from gutenberg.
Closing in favor of #313
from gutenberg.
Related Issues (20)
- Font styles
- Wrong template displayed for hybrid themes in the post template editor HOT 1
- Popover component overlapping toolbar
- viewScriptModule is not included in build unless WP_EXPERIMENTAL_MODULES is set
- Support Disabling the Duplication of Template Parts HOT 3
- Gallery Image breaks in FireFox
- Latests Posts block: "Image alignment" control should use ToggleGroupControl
- Auto p corrupting paragraph blocks. HOT 2
- Add current term to Query Loop block filter for use on taxonomy archives HOT 1
- Media-text Block Customization mediaWidth Not Applying in theme.json File HOT 4
- DataViews - layout icon still shows with 1 layout, with empty context menu HOT 2
- Dataviews - isLoading property is ignored when data property is populated
- Dataviews - actions objects duplicate actions and only show on hover
- Global Styles - expose way to add more 'Elements' to the UI
- Collect code coverage for e2e tests (but also others)
- Metaboxes markup differs by post type and has duplicated id
- Nested Grid blocks - show only one grid visualizer at a time
- Embed blocks: adding captions via toolbar HOT 2
- [Flaky Test] should not render Block Settings sections
- Update `TimePicker` component design HOT 4
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.