Using main style.css with add_editor_style

Question

Using main style.css with add_editor_style

epsilon42

2017年9月14日 11:09

All the resources I've read online suggest using a different CSS file (i.e. editor-style.css) in order to style the WYSIWYG editor to better resemble what the actual content will look like.

For the purpose of testing I tried to just use the main style.css file that I've been using for the rest of the site and the styling in the WYSIWYG editor looks great and so far I haven't noticed any problems by doing this.

Should I still create a new editor-style.css and use that or is it an acceptable practice to use my main style.css?

For reference, this is the code I used below:

function wysiwyg_styles() {
    add_editor_style( 'style.css' );
}
add_action( 'init', 'wysiwyg_styles' );

Topic add-editor-style tinymce wysiwyg Wordpress

Category Web

cybmeta · Accepted Answer · 2017年9月14日 11:09

The simplest answer is: you can use whatever stylesheet you want for the editor. editor-style.css is just the default stylesheet loaded if none is passed to add_editor_style().

This will load the specified stylesheet:

add_editor_style( 'some-stylsheet.css' );

This will load editor-style.css:

add_editor_style();

Use whatever better fits your needs.

By the way, it is better practice to add the editor stylesheet using after_setup_theme action, not init, as it is something specific for the theme:

add_action( 'after_setup_theme', 'cyb_theme_setup' );
fucntion cyb_theme_setup() {
    add_editor_style();
}

Jacob Peattie · Accepted Answer · 2017年9月13日 06:30

There's no reason you can't do that, but you need to consider a couple of things:

Firstly, you're loading a lot of styles that are irrelevant to the content represented by the editor.

And the other thing to consider is that the TinyMCE content isn't wrapped in an entry class or similar, so the front-end of your theme would need to use the base h1,p,ul styles etc. without any extra specificity or the content in the editor won't actually match the front-end. I deliberately build my themes so that the content represented by the editor uses the base styles for this very reason.

I also use LESS when developing my themes, so I break out various parts of the CSS into separate files like base.less, entry.less, widget.less. Then I have two main LESS files for the front-end and editor that just import the bits they need. So style.less might look like:

@import (reference) 'variables';
@import 'base/normalize';
@import 'base/html';
@import 'base/forms';
@import 'base/media';
@import 'components/grid';
@import 'components/header'
@import 'components/sidebar';
@import 'components/navbar';
@import 'components/footer';

While editor-style.less looks like:

@import (reference) 'variables';
@import 'base/normalize';
@import 'base/html';
@import 'base/forms';
@import 'base/media';

Then style.less gets compiled into style.css and editor-style.less gets compiled into editor-style.css.

So I'm only writing one set of styles, but only the bits I need get put into the edtior stylesheet.

Johansson · Accepted Answer · 2017年9月13日 06:04

The editor doesn't use the every style used by your website's front end. So, you don't need the whole style.css file. But still, the file is cached by the browser, so there won't be a problem of performance, probably.

But there might be a conflict problem if you style.css is fairly huge. It might override the other styles used by the admin panel. You might have noticed a few small changes in the overall look of your dashboard ( Probably, not certainly ). In this case, you can write a small stylesheet and only include styles that are used in the single posts and pages.

Using main style.css with add_editor_style

About