Option to set editor width

[viktor]

Context

A lot of people use bigger screens, I’m one of them. One of the problems I’ve always had with the editor is the width. On my screen, the editor width is at least a foot wide. It makes writing a bit hard when lines are so long. So my petition is to add an option to control editor width in the settings and set a default width using media queries for larger screens. Feedback is welcome. Maybe I’m the only one with that problem.

Possible implementation

Here’s what I think would work:

• By default, larger screens would get their editor max-width set to 50%. This might be achieved using the editor-style.css or something else.
• The default setting can be changed by the user under Settings > Writing. They can simply specify their desired width.
• Add a filter to allow developers to override or set their own editor width.
• Optional: Allow individual users to specify their own width in the user profile.
• Optional: Add a screen option (or maybe a toggle somewhere else) on the edit page to disable editor max-width and stretch content to full width.

Here’s a mock-up of what that might look like. It includes a side border indicating where the editor ends:

And the Writing settings mockup:

[Code_Potent]

In case this petition doesn’t get traction (or you just want to do it sooner,) you can add a rule to your theme’s editor-style.css file to achieve what you’re after.

body {
    max-width:800px;
    border-right:1px solid #ccc;
}

…which produces the following:

[viktor]

Thanks, that’s how I’ve done it in the past and how I got the screenshot mockup. I’ve also added padding, so there is a space between text and the border

[Mark]

My multi screen is 5000+ px wide, x 3000px high so almost all sites programmes etc. and many games, are unusable if opened full screen so I open everything in a window so the work area is what I want and can have several browsers emails open and visible. Edit in one window and display in another.

[viktor]

Thanks, I do it sometimes too. But I do like to have the whole thing open sometimes to help eliminate distractions from other apps.

[azurecurve]

I’m using two 4k screens (plus a 1080p screen for watching videos) so everything is windowed with multiple programs open per monitor.

[joyously]

I think you don’t need a setting for the width. You need to be using a theme with editor styles so that it more closely represents what the front end would look like. A good theme will adjust the font size and/or max-width for better legibility, but if it’s not happening in the editor, you might write differently (which you wouldn’t know until Preview).

If you make a new setting for width, then it would apply regardless of whether you had your window open full width or at some narrower window, and that’s much less flexible. It would also interfere with whatever the theme is doing.

[james]

If this is implemented then it should probably be a max-width in pixels instead of a percentage. I agree that setting an editor style which roughly corresponds to the front-end content area should generally be the responsibility of the theme, but I don’t think it would really break anything to add this setting either.

[smileBeda]

My personal opinion is that a theme shouldn’t interfere with the backend.
Just for the records, the whole point of Gutenberg is “Making the backend look like what I will get on the front end”
And we don’t want that, right?

Setting a max width for the editor is a good idea, as seen on large screens, a paragraph will simply extend until it breaks somewhere due to screen width.

And it is easy enough to do.

add_filter( 'wp_editor_settings',  'modify_editor', 10, 2 );
function modify_editor( $settings, $editor_id ) {
  $screen = get_current_screen();
  if ( 'content' === $editor_id && isset( $screen->post_type ) && 'your_post_type' === $screen->post_type ) {
    $settings['editor_css']   = '<style>#postdivrich {max-width: 500px;}</style>';
  }
  return $settings;
}

Something like above will set your entire editor width, inclusive toolbar, so the ugly looking “inner” width setting is instead a “nice” looking real width of the entire editor.

IMO, the entire backend should use a container, actually, because on super wide screens, the Admin experience might become a bit too wide anyway.
But that is another discussion.

With above filter, we could implement such setting in the Users preference, and check fo current user instead of current post screen, for example, or anything else we like to check.
Results of above example:

[viktor]

If this doesn’t make it into core, that’s a good candidate for a snippet repository.

[smileBeda]

You mean the cool CodeMirror instance with custom Highlight Mode for ShortCodes or the max-width?

Just kidding.
You’ve my vote for this going to core. It is a justified setting, just like Disable the visual editor when writing setting.

[viktor]

The CodeMirror would actually make a good plugin. I’ve had the need to replace visual/text editor with a code editor to simplify some work. But that’s off topic

[timkaye]

I don’t have any great objections to a max-width property being set here in pixels, with some appropriate padding. But it does make me think: “Why stop there?”

I have a CSS file for the admin on every site in which I change both the font size and family. (I hate the defaults for both.) Are we going to include such options too? If not, why not? And, if so, what else might someone ask for?