Wrong editor size. Why not improve?

[PeopleInside]

Describe the bug
In different Wordpress website i see a wrong view of Gutenber editor.
Why the editor is so small in the center of the screen?

Seems much better if the CSS

.wp-block {
    max-width: 610px;
}

is changed with:

.wp-block {
	max-width: 98%;
}

To Reproduce
Steps to reproduce the behavior:

1. Go to the editor
2. The editor is small in the center of the screen.

Expected behavior
Editor take the size of the screen and the page.

Screenshots

With my CSS edit much better:

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows
• Browser [e.g. chrome, safari] Firefox last stable
• Version [e.g. 22] 65.02

Additional context

• Please add the version of Gutenberg you are using in the description. I don't know is default Wordpress editor now

Wordpress support topic: https://wordpress.org/support/topic/many-issues-on-this-new-default-editor-really-worried-about-the-future/

[youknowriad]

This is left to the theme. The theme can tweak the width of the editor to match the frontend. See how you can add editor styles defining the width here:

https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#changing-the-width-of-the-editor

[PeopleInside]

Hi @youknowriad , i am really surprised from your reply but also from the Gutenberg editor that is now standard on WordPress. How this could be happened?

I believe the issue is not in the theme as i see this issue in two completely different website: one is mine with a theme and one is not mine with a completely different theme.

So sorry but i cannot believe the issue is the theme also i tried to add the CSS inside the style file of the theme but this doens't solve. For solve the issue i need install a plugin for add CSS on the admin side.

The issue is Gutenberg, why your editor is by default so small at the center of the screen?

Also this ( #14421 ) is a theme issue? U.U

[youknowriad]

I think #14421 is a different issue but I think there's some context that's needed here to understand the full picture:

• One of the goal of Gutenberg is to allow "frontend-like" experience. It means the backend should look like the frontend and in order to achieve this goal we ask theme developers to provide editor styles (loaded in the backend) to mimic this (you can read more about the editor styles in the docs shared above).
• Gutenberg provides "defaults" when the theme doesn't provide editor styles and part of these defaults is the "width".
• Gutenberg allows themes to opt-in into "full/wide" alignements which means the default width should not be "full" width because otherwise the user won't see any difference between "wide", "full" or "normal" width in the editor.

@jasmussen would you like to add some context here?

[youknowriad]

So sorry but i cannot believe the issue is the theme also i tried to add the CSS inside the style file of the theme but this doens'

The CSS should be added to the editor styles and not the style loaded in the frontend.

Editor styles documentation https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#editor-styles

[PeopleInside]

@youknowriad My webiste is peopleinside.it where i use customizr theme.
As from what i know this theme has not a theme for the admin side means maybe the default settings for Gutenberg are used. This settings are wrong because of the view i am reporting.

I am pretty sure this issue is dependent by Gutenberg because i have access to another website where i am just an editor. This website use a completely different theme but the look of Gutenberg editor is the same.

If the classic editor is active the issue is resolved.

I don't understand how i can see Gutenberg is working not good and you created a guide to customize the CSS for have a better look...

Also.. why in the guide is not suggested to use percentage % that adapt to the screen?

So i'm seeing this issue in different websites with different themes. The issue is not present on the Classic editor.

[jasmussen]

Hi there, and thanks for the ping Riad.

There are two things going on here. The first off is the default editor style. This is what you are seeing in the screenshot — a white background, a serif text, and a centered main text column. **This is the editor style you see when the theme itself does not provide an editor style. **

Why is it not full width? For two reasons.

1. The block editor now supports "wide" and "full wide" blocks, such as images. These blocks extend beyond the center column of text to both sides.

2. The optimal readability of text is around 50 to 60 characters per line. With the default 16px font size, the 610px default main column widht is optimized towards that.

Here's what wide and full wide images looks like:

These new features are styleable by the theme. Here's how that same thing looks like in Twenty Nineteen:

As you can see, Twenty Nineteen not only changes how the wide and fullwide blocks are sized, but it even does creative things with floats.

These features are created both to enable richer layouts, and to make possible a more WYSIWYG experience for themes that provide an editor style.

In that vein, this is an intentional change.

You could build a plugin or add CSS to a browser extension (such as Greasemonkey) that adds CSS to make the editing canvas full wide if that's what you prefer. From the support page, something like this should work:

/* Main column width */
.wp-block,
.wp-block[data-align="wide"],
.wp-block[data-align="full"] {
    max-width: none;
}

Alternately, the theme you're using can be updated to provide an editor style that makes the editor match the theme itself.

[PeopleInside]

Thank you for the reply. I continue to be surprise this will be the default WordPress editor.
Maybe is me that are not understanding but...

So for have a great look of the editor i need install a browser plugin? This is the response?
Or just some theme will work fine with the Gutenberg editor because all other themes like the two i have seen has the default Gutenberg aspect who is terrible if you want to edit a page with text.

OK now i have the confirm the Gutenberg is not a positive change on my opinion and again i am not alone on thinking this. In my website after the Wordpress update... is terrible to edit page with this look of Gutenberg and i need going into code , CSS and now you suggest to use a browser plugin for fix the editor size issue... All this sound be crazy to me.

I need now have an additional plugin for have a look of the editor that take the page size instead of have small text all centered on the page.

Seems there are no settings in Gutenberg for let user choose what kind of experience want have with the editor, the new one that regard Gutenberg or the previous one where an editor should respect the size of the page. How this new look can be a real look i cannot understand.

I am very disappointed about force user to have Gutenberg as default editor and number seems give reason to me. https://wordpress.org/support/plugin/gutenberg/reviews/

Maybe we need really consider a CMS with a different editor, i am very sad to see this change in Wordpress a CMS that i love!

Seems my issue has no solution the solution is install plugin on browser, on the site for have a full screen editor that take the size of the page. Also Firefox seems have issue opening sometime Gutenberg editor it be frozen for some minutes.

I try to love and understand Gutenberg but more i try more i see there is a wall.
After the Wordpress Update to 5.0 with Gutenberg now i need additional plugins for fix size and other editor issues.

[aristath]

@PeopleInside Gutenberg was in the making for more than 2 years... All theme developers knew that this was coming in WordPress core and it was their responsibility to update their themes and make them better for the new editing experience.
If you are not satisfied what what you currently have perhaps you should contact your theme developer so that they may improve their themes?

[PeopleInside]

@aristath
No issues with classic editor, many issues with Gutenberg. This editor should be as plugin not as forced editor for everyone and the sad news is the Classic Editor will be end his support on 2020.

I believe you are one of the fan of Gutenberg.
The issue is not the theme the issue is the editor, the theme has not a backend for Wordpress is using the default Gutenberg theme this is wrong and is not the only one issue.