editor-style.css of a child theme overriden by parent theme

[helix84]

Although it's possible to customize the look of the editor window (see <​http://codex.wordpress.org/Function_Reference/add_editor_style>), the child's style is included before the parent's style, so the parent's styles will override child's styles.

E.g.:
childs-editor-style.css:
h1 { color:red }
parents-editor-style.css:
h1 { color:blue }
result: h1 in post editor will have blue color

The solution is to change the order of styles. Patch attached.

[helix84]

fix for the issue (WP 3.0)

[apeatling]

I can confirm this to be a problem. The only option right now is to filter on 'mce_css' and do an explode() - array_reverse() - implode() on the stylesheets.

[nacin]

I don't think an array_reverse is the right way to do this... Some themes may be adding more than one stylesheet and those should be added in order.

I do realize that the child theme should come second but I'm really not sure how best to do it.

I wish I thought about this more when it was implemented -- in hindsight I would rather the parent theme editor-style.css doesn't even get loaded if the child theme file exists (much like how other templates work) and then force the child theme to @import.

[nacin]

Replying to nacin:

I wish I thought about this more when it was implemented -- in hindsight I would rather the parent theme editor-style.css doesn't even get loaded if the child theme file exists (much like how other templates work) and then force the child theme to @import.

How much would that break? Does anyone else have an opinion on whether that direction is a better approach?

[avit]

Confirmed, I'm experiencing this bug on a child theme that I based on Twenty Ten.

I don't think helix84's patch is a good fix: reversing the order will cause other problems. I worked around it by changingif ( file_exists( "$template_dir/$file" ) ) to an elseif. (This prevents the parent template from loading.) I would be satisfied with this as a resolution, it seems to mirror the way we load the public stylesheet, and I think that should be the expected behaviour.

[DreadLox]

True, parent style sheet should NOT get loaded as we can load it in the child'd one using:

@import url("../twentyten/editor-style.css");

[JohnPBloch]

Reverse the order stylesheets are included

[nacin]

(In [16688]) add_editor_style should include the parent theme CSS before the child theme CSS for override reasons. props JohnPBloch. fixes #14430.

[somatic]

I'm seeing this same behavior again, in 3.2.1

I've got a twentyeleven child theme using add_editor_style() to register a custom .css file. In the page source, I can see the

tinyMCEPreInit

arguments, and the one for content_css shows my child editor style loading first, then the parent. I can confirm that unless I use !important in my child editor stylesheet, I am unable to override the parent styles.

content_css:"http://mysite.com/wp-content/themes/my-child-theme/child-editor-style.css,http://baruch.somaticstudios.com/wp-content/themes/twentyeleven/editor-style.css"

was this patch lost somehow?

[dd32]

The problem you've got is slightly different.

The Files are being enqueued in order of definition. The child theme is registering 'child-editor-style.css' before the parent theme registers 'editor-style.css'. Since these have different names, they're just being enqueued in the order they were registered.

The patch here dealt with the child theme's file being added before the parents theme file when they were the same name. It's probably better in a new ticket to change it so all parent css is included before all child css.

Since this ticket was closed in the 3.1 milestone, I'm reclosing this, but I've opened #18457 to suggest adding all styles from the parent theme, and then all styles from the child theme.

Tip: Name your child-editor-style.css file 'editor-style.css', remove the add_editor_style() call from your child theme, and rely on the fact that the parents call with include both the parent, and child, editor-style.css files in the correct order.