WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 6 years ago

#14430 closed defect (bug) (fixed)

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

Reported by: helix84 Owned by: 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 7 years ago.
fix for the issue (WP 3.0)
14430.patch (1000 bytes) - added by JohnPBloch 6 years ago.
Reverse the order stylesheets are included

Download all attachments as: .zip

Change History (14)

@helix84
7 years ago

fix for the issue (WP 3.0)

#1 @apeatling
7 years ago

  • Cc apeatling added

#2 @apeatling
7 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
7 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
7 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
7 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
7 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
7 years ago

  • Milestone changed from Awaiting Review to 3.1

#8 @JohnPBloch
6 years ago

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

@JohnPBloch
6 years ago

Reverse the order stylesheets are included

#9 @JohnPBloch
6 years ago

  • Keywords has-patch added

#10 @nacin
6 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
6 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
6 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.