0

[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.

enter image description here

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.

0

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.

  • Thank you. I have everything updated to their latest version. I'll look into it... I've disabled the Gutenberg editor on the day it was released. I didn't like the "blocks." IIRC Gutenberg broke my draft into one block per paragraph...although I admit I didn't find more time to play with it (maybe because I didn't need it). I'll shift to Gutenberg if I can make it look and feel like the classic editor. (Is that essentially just one huge block, then?) Classic's simplicity is what makes it great, IMO. – myniuat May 22 at 14:40
  • That's correct, each paragraph becomes a separate block, though that happens automatically (you don't have to manually add each block, you just type) and it's easy to go back and forth between them (keyboard arrows will get you there). It takes a little getting used to, but all the other aspects are the clean writing experience you're looking for, and Classic Editor will eventually go away. Might be worth experimenting with on just one post type to ease into it. – WebElaine May 22 at 14:52
  • My OP was motivated by my need to use WP's post editor as my main editing and formatting tool. I've been using a word processor in which heavy editing and almost all formatting are done. It's making sense: the Gutenberg devs must have thought exactly what I'm looking for. Users just have to get used to it. Probably also the reason why I don't see "real/popular" solutions to the Classic issue. Will be trying out Gutenberg with a couple of posts. Thank you. – myniuat May 22 at 17:04
  • For what it's worth, the Block Editor also accepts formatted text pasted from tools like Google Docs and Word much better than the Classic Editor. – WebElaine May 22 at 17:06
  • 1
    I've been a forever user of MS Word until a month ago. Now I also use LibreOffice Writer. LO Writer's what actually pushed me to this; it uses, like, 3x more html than MS Word. Which made me realize I've been using WP's editors quite wrong all in all. Now I paste my ugly first drafts on the Text editor first--giving me zero html tags, which feels really clean--and then I shift to the Visual editor for all editing and formatting. – myniuat May 23 at 3:34
0

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.

  • That's indeed the big question. Thanks, John. It's weird because I was excepting that a couple of lines of Additional CSS code would do: I play with my browser's Inspector and I achieve all my goals in real time, but after I save the Additional CSS, everything reverts. – myniuat May 23 at 3:19
  • Sounds lie a plan. Let me know if you need any help. – John Swaringen May 24 at 0:00
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.