WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#7311 closed defect (bug) (fixed)

Custom Admin CSS not applied to WP2.6 Edit Image page (TinyMCE plugin wpeditimage/editimage.html)

Reported by: caesarsgrunt Owned by: azaozz
Milestone: 2.6.1 Priority: normal
Severity: normal Version: 2.6
Component: TinyMCE Keywords: wpeditimage
Focuses: Cc:

Description

Custom admin colours set using the wp_admin_css_color() function are not applied to WP2.6's new Edit Image page (TinyMCE plugin wpeditimage/editimage.html).
Instead they actually cause the default colour scheme to be removed, leaving no colour scheme applied to that iframe. Screenshot attached.

Attachments (2)

Picture 1.png (98.6 KB) - added by caesarsgrunt 7 years ago.
screenshot illustrating bug
editimage-fixed.js (16.4 KB) - added by caesarsgrunt 7 years ago.
Proposed fixed version of editimage.js, with 'colours-' changed to 'colours'.

Download all attachments as: .zip

Change History (10)

@caesarsgrunt7 years ago

screenshot illustrating bug

comment:1 @caesarsgrunt7 years ago

  • Cc caesarsgrunt added

comment:2 @ryan7 years ago

  • Owner changed from anonymous to azaozz

comment:3 in reply to: ↑ description ; follow-up: @azaozz7 years ago

Replying to caesarsgrunt:

Custom admin colours set using the wp_admin_css_color() function are not applied to WP2.6's new Edit Image page (TinyMCE plugin wpeditimage/editimage.html).

Are there any js errors reported? The right css file is chosen by js and added to the iframe's head to avoid having to load lots of unnecessary files.

comment:4 in reply to: ↑ 3 @caesarsgrunt7 years ago

Replying to azaozz:

Are there any js errors reported? The right css file is chosen by js and added to the iframe's head to avoid having to load lots of unnecessary files.

Nope, no JS errors.

I had realised that JS was used to insert the stylesheet (although I can't actually find the bit of JS that does it...)
The relevant styleheet tag isn't inserted at all when custom colours are enabled. I've tried both my own colours and the example admin colours plugin 'Brazil'; neither works.

I don't supppose it's relevant, but if I try opening /wp-includes/js/tinymce/plugins/wpeditimage/editimage.html directyly, ie not in the iframe, it loads plenty of code but nothing is visible, just a blank page, and it throws three JS errors to do with tinymce not being defined.

comment:5 @caesarsgrunt7 years ago

OK; I've found the problem.

Here's the function which detects the styleheet used by the parent (lines 76-84 of /wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.js) :

// import colors stylesheet from parent
var win = tinyMCEPopup.getWin();
var styles = win.document.styleSheets;

for ( i = 0; i < styles.length; i++ ) {
	var url = styles.item(i).href;
	if ( url && url.indexOf('colors-') != -1 )
		document.write( '<link rel="stylesheet" href="'+url+'" type="text/css" media="all" />' );
}

The problem is line 82 :

	if ( url && url.indexOf('colors-') != -1 )

Neither of the admin stylesheets I tried has 'colours-' in the name... so they weren't being detected.

Is there any need for the hyphen? Removing it would increase compatibility greatly... I removed in on my test server and it worked perfectly.

For the moment I'll rename my custom CSS file from 'admin-colours.css' to something with a hyphen after 'colours'.

@caesarsgrunt7 years ago

Proposed fixed version of editimage.js, with 'colours-' changed to 'colours'.

comment:6 @azaozz7 years ago

Yes, it expects the custom colors stylesheets to follow the default file names: colors-classic, colors-fresh, colors-[custom], etc. Of course the hyphen can be removed to improve compatibility.

comment:7 @azaozz7 years ago

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

(In [8356]) fixes #7311 for trunk.

comment:8 @azaozz7 years ago

(In [8357]) Improve compatibility when importing custom colors css, props caesarsgrunt. fixes #7311 for 2.6.

Note: See TracTickets for help on using tickets.