How to adjust text’s width and put it at center of post (Visual) editor?

Question

[Disclaimer: I'm not a developer of any sort, but willing to take the time. (Can do a bit of CSS, though.) Also, new to this forum.]

I’m using Anders Norén’s Hemingway theme.

I haven’t tried creating child themes yet and I’m not sure whether a solution to this requires one.

My goal, in short, is to make the whole “Edit Post” webpage look like an offline word processor:

1. Make the Visual editor occupy the whole screen. (I use the classic editor.) (Done: Collapsed the vertical menu on the left side, selected 1-column layout, and disabled “full height editor and distraction-free functionality.”)
2. Set a width for the text (because currently text is almost from edge to edge of screen)
3. Put text at the center (but “aligned left,” not “justified”). This is for the "left and right margins," within the post editor.

It now looks like this.

How do I do #2 and #3?

Thank you.

Edit: Just to clarify: I'm looking to change how the Visual editor looks--only the Visual editor, not any output the live website would show.

Answer 1

One option: switch to the Block Editor instead of the Classic Editor. The Block Editor comes with any version of WordPress 5.0 or higher, so update your install, and then if you have the Classic Editor plugin enabled, disable it.

If you have more than one post type, you may want to look into the Gutenberg Ramp plugin, which allows you to choose which post types to use the Block Editor on. You might try just one post type to see how well it works for you.

In any case, the Block Editor has a "Fullscreen Mode" that completely hides the top, left, and right toolbars, and which also has a fixed-width middle column for all of your content. It's very similar to what you're trying to achieve in the Classic Editor.

Answer 2

WordPress uses the JavaScript library of TinyMCE (https://www.tiny.cloud/) with some modifications. In order to do what you're trying to do you will have to modify the way the JavaScript renders the editor.

The WordPress codex shows that there is a hook for applying custom style sheets to the editor.

The mce_css filter provides a method to add custom stylesheets to the TinyMCE editor window

You can find that here

I've never tried it before so you'll have to play around with it. You could also look into the TinyMCE Advanced Plugin it's open source and could be modified.

Now to the big question. Do you feel comfortable enough learning some JavaScript and PHP in order to do the modifications. If not you may want to look at something like UpWork to find some help.

Answer 3

I'm looking to change how the Visual editor looks

I think you should be able to change the Visual editor looks just by adding some custom editor styles with add_editor_style() function.

Here's a basic example copied from the WP code reference examples.

Add the following to the functions.php file of your (child) theme.

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

Next, create a file named custom-editor-style.css in your (child) themes root directory. Any CSS rules added to that file will be reflected within the TinyMCE visual editor. The contents of the file might look like this:

body#tinymce.wp-editor { 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 10px; 
}

body#tinymce.wp-editor a {
    color: #4CA6CF;
}

How do I do #2 and #3?

I didn't check the css selector, but I think by adding some margin/padding to body#tinymce.wp-editor you should get the left and right white-spaces you're looking for.