Make WordPress Core

Opened 13 years ago

Closed 12 years ago

#14430 closed defect (bug) (fixed)

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

Reported by: helix84's profile helix84 Owned by: johnpbloch's profile JohnPBloch
Milestone: 3.1 Priority: normal
Severity: normal Version: 3.0
Component: General Keywords: has-patch needs-refresh
Focuses: Cc:

Description

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.

Attachments (2)

wp-editor-style.diff (731 bytes) - added by helix84 13 years ago.
fix for the issue (WP 3.0)
14430.patch (1000 bytes) - added by JohnPBloch 13 years ago.
Reverse the order stylesheets are included

Download all attachments as: .zip

Change History (14)

@helix84
13 years ago

fix for the issue (WP 3.0)

#1 @apeatling
13 years ago

  • Cc apeatling added

#2 @apeatling
13 years ago

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.

#3 follow-up: @nacin
13 years ago

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.

#4 in reply to: ↑ 3 @nacin
13 years ago

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?

#5 @avit
13 years ago

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.

#6 @DreadLox
13 years ago

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");

#7 @nacin
13 years ago

  • Milestone changed from Awaiting Review to 3.1

#8 @JohnPBloch
13 years ago

  • Owner set to JohnPBloch
  • Status changed from new to accepted

@JohnPBloch
13 years ago

Reverse the order stylesheets are included

#9 @JohnPBloch
13 years ago

  • Keywords has-patch added

#10 @nacin
13 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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

#11 @somatic
12 years ago

  • Component changed from General to Formatting
  • Keywords needs-refresh added
  • Resolution fixed deleted
  • Status changed from closed to reopened
  • Version changed from 3.0 to 3.2.1

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?

#12 @dd32
12 years ago

  • Component changed from Formatting to General
  • Resolution set to fixed
  • Status changed from reopened to closed
  • Version changed from 3.2.1 to 3.0

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.

Note: See TracTickets for help on using tickets.