Make the width of the editing field adjustable

[anelkata]

The first thing I noticed when switching to the interface is that the editing field for the post content is narrower than before. This affects the usability as it makes it harder for me as an author/editor to follow and revise the text I have entered, which I find very important for cohesion.

As the width of the editing field is probably a matter of personal preference, it would be nice if it was adjustable. I am thinking of some combination of these:

• larger default width.
• a default width that is a percentage of the available container width so that the field widens when hiding the sidebar.
• an individually adjustable max width setting to prevent going too wide and loosing usability on larger screens.
• an individually adjustable fixed width setting.

I hope you consider this! Otherwise I am loving the interface so far!

Anelia

[youknowriad]

Hi there and thanks for the report.

The content width is editable by themes/plugins by loading a custom CSS that's because Gutenberg is meant to be a WYSIWYG editor so in general it should probably be the responsibility of the themes to adjust the width to match the theme. Here's how https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#changing-the-width-of-the-editor

Let's consolidate on #5650 for content_width support. Thanks

[Zaparl]

Hello!

First of all forgive me if this is not the proper place. I'm not programmer and just a Wordpress user who has just upgraded to 5.0 so, my opinion here is not based in coding but usability.

Actually, the first thing I noticed was the narrow text field in the editor and I felt very uncomfortable since I use my desktop and a 24 inch monitor to do my work. So the first thing I did was to search in google for a way to customize it and I found this thread.

I see the purpose of WYSIWYG but that compromises one main question. One thing is editing and other thing is showing the result. In my case my web shows perfectly in whatever screen size the user uses (in my case the text without sidebar is 920px). But when editing it doesn't match the website width being very narrow (in my case 608px). Is that what you said it must be fixed by theme developers? On the other hand what I see in editor is not what I see in my website since I don't have styles, sidebar and all elements.

I mean... take it as a very respectful opinion to your hard work but in this case this needs a lot of "refurbish". If this should be WYSIWYG it is not doing a great job. If this should make editing easier it is not making it either. Look

This makes no sense to me. It is not showing the same as the web (which on the other hand I can do with preview button) and it is so narrow that makes me feel a bit dumb using my monitor to work better.

And I agree that CSS and plugins are not a very logic option since It is supposed that, like the Gutemberg intro said to me, I would use less plugins and all would be more intuitive. Also, I, like most of the users, am not a coder/developer and I suck at CSS.

I know this has supposed a hard work. I'm not angry. I fail a lot of times and I learn from that. Maybe you have to take a step back, see the big picture from the perspective of the average Wordpress user and not only from a developer point of view. Yes, there is CSS. Yes, there are the plugins. But then... what's the point of Gutemberg?

Keep on with the good job. I'm in love with Wordpress and I will be :)

[GlennMartin1]

@TheRealRequnix

Virtually all major themes already support Gutenberg.

Your say 90% of themes don't support Gutenberg... what's your source for that claim?

[GammaRay42]

Anelia

k, so im pretty sure the reason the post content editor is narrower is because we can't find the easy way to change it... where is the button to make it wide? I've seen pictures in tutorials where it is wide/normal. Where is the BUTTON?

[GammaRay42]

Hi there and thanks for the report.

The content width is editable by themes/plugins by loading a custom CSS that's because Gutenberg is meant to be a WYSIWYG editor so in general it should probably be the responsibility of the themes to adjust the width to match the theme. Here's how https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#changing-the-width-of-the-editor

Let's consolidate on #5650 for content_width support. Thanks

there is an easier way, WHERE IS IT? I've seen tutorials that have a normal width Gutenberg editor.

[GammaRay42]

Hello!

First of all forgive me if this is not the proper place. I'm not programmer and just a Wordpress user who has just upgraded to 5.0 so, my opinion here is not based in coding but usability.

Actually, the first thing I noticed was the narrow text field in the editor and I felt very uncomfortable since I use my desktop and a 24 inch monitor to do my work. So the first thing I did was to search in google for a way to customize it and I found this thread.

I see the purpose of WYSIWYG but that compromises one main question. One thing is editing and other thing is showing the result. In my case my web shows perfectly in whatever screen size the user uses (in my case the text without sidebar is 920px). But when editing it doesn't match the website width being very narrow (in my case 608px). Is that what you said it must be fixed by theme developers? On the other hand what I see in editor is not what I see in my website since I don't have styles, sidebar and all elements.

I mean... take it as a very respectful opinion to your hard work but in this case this needs a lot of "refurbish". If this should be WYSIWYG it is not doing a great job. If this should make editing easier it is not making it either. Look

This makes no sense to me. It is not showing the same as the web (which on the other hand I can do with preview button) and it is so narrow that makes me feel a bit dumb using my monitor to work better.

And I agree that CSS and plugins are not a very logic option since It is supposed that, like the Gutemberg intro said to me, I would use less plugins and all would be more intuitive. Also, I, like most of the users, am not a coder/developer and I suck at CSS.

I know this has supposed a hard work. I'm not angry. I fail a lot of times and I learn from that. Maybe you have to take a step back, see the big picture from the perspective of the average Wordpress user and not only from a developer point of view. Yes, there is CSS. Yes, there are the plugins. But then... what's the point of Gutemberg?

Keep on with the good job. I'm in love with Wordpress and I will be :)

CHECK it out... https://www.codeinwp.com/blog/wordpress-gutenberg-guide/ THERE IS A WAY! fill width Gutenberg editor for all of us that like big monitors.... WHERE is the button? the switch...?

[GammaRay42]

https://www.codeinwp.com/blog/wordpress-gutenberg-guide/ this does't address the problem but just shows the editor in full width or at least wider?

[anelkata]

@TheRealRequnix and @GammaRay42 especially.

OK, so after several attempts, today I found a plugin that does exactly what I hoped for - it adds a button.

It's called Kadence Blocks and it's free. Here is the link https://www.kadenceblocks.com.

I'm sure it's not the only one out there by now, but this one also solves some other problems I had with Gutenberg as adding column layouts, so I'm a happy camper and looking no further for now.

By the way, I am using a theme that does not explicitly support Gutenberg.

[ajonestoast98]

Hi Guys,

I have written a plugin for this exact issue and it can be downloaded from the WordPress plugin repository. The sidebar should just be resizable (by dragging the left corner) and it will save for the next time that you load the page.

See here: https://wordpress.org/plugins/resizable-editor-sidebar/