WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.46k stars 4.18k forks source link

Consider adding default editor styles for themes that don't provide any. #30414

Open iandunn opened 3 years ago

iandunn commented 3 years ago

What problem does this address?

The default content styles have almost no left/right padding, and feel uncomfortably squished to me:

Screen Shot 2021-03-31 at 7 41 47 AM

It's not until the viewport is 1300px that you start to get some (implicit) padding, and not until 1370px that you get enough that it feels comfortable to me. Most people don't have monitors that large.

26357 increased the max-width to 840px, which feels uncomfortably long to me, but I can understand the tradeoffs there. I don't see a reason that the padding can't be increased, though.

What is your proposed solution?

Set the padding on tablet/desktop layouts to 40px (or similar), so that they're always comfortable, regardless of the viewport size.

Screen Shot 2021-03-31 at 7 48 51 AM

.editor-styles-wrapper {
-    padding: 10px;
+    padding: 10px 40px;
}

On mobile, maybe drop it down to 20px.

youknowriad commented 3 years ago

Which theme are you using here?

Going forward, we're embracing the fact that by default the editor should look exactly like the frontend (especially in FSE themes), this means that by default the padding is 8px and that the content width is 100% and as you style your theme you should be able to load the same styles in the editor to match the frontend.

For FSE themes or themes with theme.json file, if you want a small content area, you need to define a default layout. The release post of Gutenberg 10.3 (to be published very shortly) contains more details about this.

iandunn commented 3 years ago

It's a custom theme with no editor styles, and the front end looks fine.

Is it expected that all pre-FSE themes should define editor styles to override the default?

youknowriad commented 3 years ago

Is it expected that all pre-FSE themes should define editor styles to override the default?

I'd say it's not mandatory but it's one of the principles of Gutenberg to be as close as possible to the frontend. In that sense, it's recommended. That said, I feel we could make some improvements here and consider adding some nice default editor styles if the theme don't provide any.

mtias commented 3 years ago

@youknowriad I think if this setting is disabled we should load some nice abstracted styles for writing, etc.

image