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

Try: Wider vanilla column width. #26357

Merged
merged 1 commit into from
Nov 9, 2020
Merged

Try: Wider vanilla column width. #26357

merged 1 commit into from
Nov 9, 2020

Conversation

jasmussen
Copy link
Contributor

One commont point of frustration that's been voiced with the block editor, is the thin main column of text to write in. This one:

before

When the initial width was decided upon, it was chosen for readability and to emphasize wide and full-wide images. But most modern themes today, provide an editor style that customizes this default width, and if by updating the vanilla styles we can improve the writing experience for older themes, that seems like a good small win. This PR changes that width to 840px, which still allows for visible wide and fullwide images:

after

I'd love to do more with the default style, such as improve the font. But starting with the main column width feels like a good first step.

@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. labels Oct 21, 2020
@jasmussen jasmussen self-assigned this Oct 21, 2020
@jasmussen
Copy link
Contributor Author

jasmussen commented Oct 21, 2020

You are SO FAST Ari! 😂 (That's my way of saying thank you: I really appreciate it.)

It's a really small PR as you can see, so I'm happy to merge. @kjellr can you give me a sanity check as well? The 580px value has been there for quite a while now, could this change break anything for themes that might rely on that value? Such as themes that perhaps don't provide their own value here?

@github-actions
Copy link

github-actions bot commented Oct 21, 2020

Size Change: +8 B (0%)

Total Size: 1.21 MB

Filename Size Change
build/block-library/editor-rtl.css 8.96 kB +3 B (0%)
build/block-library/editor.css 8.96 kB +4 B (0%)
build/block-library/style-rtl.css 8.03 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.78 kB 0 B
build/api-fetch/index.js 3.45 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 133 kB 0 B
build/block-editor/style-rtl.css 11.2 kB 0 B
build/block-editor/style.css 11.2 kB 0 B
build/block-library/index.js 147 kB 0 B
build/block-library/style.css 8.03 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 172 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.8 kB 0 B
build/core-data/index.js 12.5 kB 0 B
build/data-controls/index.js 771 B 0 B
build/data/index.js 8.8 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.46 kB 0 B
build/edit-navigation/index.js 11.2 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.41 kB 0 B
build/edit-post/style.css 6.39 kB 0 B
build/edit-site/index.js 22.6 kB 0 B
build/edit-site/style-rtl.css 3.91 kB 0 B
build/edit-site/style.css 3.91 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.12 kB 0 B
build/edit-widgets/style.css 3.12 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 42.8 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.63 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 712 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.34 kB 0 B
build/notices/index.js 1.78 kB 0 B
build/nux/index.js 3.42 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13.4 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@jasmussen jasmussen force-pushed the try/wider-default-width branch from 0a191e9 to 2537933 Compare October 22, 2020 07:09
@kjellr
Copy link
Contributor

kjellr commented Oct 22, 2020

Just judging be the screenshot:

It looks like the line length becomes quite long when it's switched to 840px. The general "rule" about line length is that it should be between 45-75 characters per line. I'm only eyeballing the screenshot, but it looks closer to 110+ characters. I think widening it is probably fine theme-wise, but maybe not that wide?

Can you point me to an example of the criticism the current content width has received? I'm curious what the preference and point of reference might be (are they comparing it to Microsoft Word for example?).

@jasmussen jasmussen force-pushed the try/wider-default-width branch from 2537933 to e60337c Compare October 23, 2020 06:40
@jasmussen
Copy link
Contributor Author

It looks like the line length becomes quite long when it's switched to 840px. The general "rule" about line length is that it should be between 45-75 characters per line. I'm only eyeballing the screenshot, but it looks closer to 110+ characters. I think widening it is probably fine theme-wise, but maybe not that wide?

Two instincts drive me to make that default column a bit wider than perhaps common practices like the one you mention, suggest:

  1. Most themes provide editor styles now, that customize this width just for that, readability. So when a theme does not style the editor, I feel like we might as well tip the sales in favor of writeability — and perhaps this is a personal thing, but I find a bigger box — not too wide, mind you, but bigger — easier to write in.
  2. The editor is now used in a variety of places outside of WordPress, including P2 and things like asblocks.com. While both of those interfaces can and should style the default style themselves, it feels like it highlights that the block editor is optimized for desktops viewpoints inside WordPress. Relaxing the width, I feel, makes this less biased.

Can you point me to an example of the criticism the current content width has received? I'm curious what the preference and point of reference might be (are they comparing it to Microsoft Word for example?).

I could swear there were a bunch in the forums, especially in the early days when few themes styled the editor. Because of the age, it's pretty hard to dig them up, but I found a few:

Also feedback from this one person who used the editor in daily work to debug code:

the narrow centered column kills me, because I am frequently talking about code, or headers, or things that are very long and not-paragraphs.
And even when I've tried code blocks, it still very much centers and doesn't use available space.

That last bit about code blocks could/should be vastly improved by #25973 landing, but all of this is why I decided to go slightly wider, to hopefully find the goldilocks balance between both reading and writing.

If we try this, I'd be happy to follow up with a reduction PR if it causes trouble?

@aristath
Copy link
Member

Also worth noting, a lot of themes change the root font-size so the default 580px is too narrow when using a 20+ font-size.
If the reason for the editor's width is readability, then maybe we should just consider using some other unit instead of px? Something like 70ch would make a lot more sense and it would be easier to handle, it would be something we can work with.

@jasmussen
Copy link
Contributor Author

That's an interesting though, Ari. I might follow up with a "try" PR that does that. And/or changes the font and font size.

To the extent that the vanilla styles are no longer meant to represent the Gutenberg experience, but is rather a fallback for when the theme doesn't override it, I think there's some low-hanging fruit we can pick to improve that experience.

@jasmussen jasmussen force-pushed the try/wider-default-width branch 3 times, most recently from fca6957 to 98ed6f7 Compare October 30, 2020 08:12
@jasmussen jasmussen force-pushed the try/wider-default-width branch 2 times, most recently from 8e54111 to 5e21d1b Compare November 4, 2020 12:24
@jasmussen jasmussen force-pushed the try/wider-default-width branch from 5e21d1b to 49e2dc1 Compare November 9, 2020 09:33
@jasmussen jasmussen merged commit 5ec609a into master Nov 9, 2020
@jasmussen jasmussen deleted the try/wider-default-width branch November 9, 2020 10:20
@github-actions github-actions bot added this to the Gutenberg 9.4 milestone Nov 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants