Make WordPress Core

Opened 5 years ago

Closed 13 months ago

#33249 closed defect (bug) (wontfix)

Hardcoded styles in preview should be filterable

Reported by: programmin Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords:
Focuses: javascript Cc:


I noticed the wp.media.views.sandboxStyles setting was removed from the mce-views Javascript.

Very well, maybe it's redundant to have it coming from the head portion of the JSON response, and having it in a JS place that can change, is redundant. I looked for the filter to add the necessary styling scripts to style the wp-playlist or other views from the head part of the JSON response to the parse-media-shortcode request, and I found it's still hardcoded in the function wp_ajax_parse_media_shortcode calls:

function wpview_media_sandbox_styles() {
 	$version = 'ver=' . $GLOBALS['wp_version'];
 	$mediaelement = includes_url( "js/mediaelement/mediaelementplayer.min.css?$version" );
 	$wpmediaelement = includes_url( "js/mediaelement/wp-mediaelement.css?$version" );

	return array( $mediaelement, $wpmediaelement );

So, there is effectively no way that one can add the proper previewing style for their theme's players into wp-view system now.

Change History (8)

This ticket was mentioned in Slack in #core by obenland. View the logs.

5 years ago

#2 @obenland
5 years ago

  • Version trunk deleted

#3 @iseulde
5 years ago

  • Keywords reporter-feedback added

Can't you add them to the editor stylesheet?

#4 @programmin
5 years ago

Styles never affect the iframes within a page. The wpviews are iframe previews, hence the wpview_media_sandbox_styles() function is necessary.

Last edited 5 years ago by programmin (previous) (diff)

#5 @programmin
5 years ago

Any chance this can be added in 4.3?

#6 @iseulde
5 years ago

The editor styles are also added in the iframes. See mce-view.js

#7 @programmin
5 years ago

Ah, I didn't see that, setIframes() function in mce-views.js adds in some stylesheet links. Unfortunately in the cases I need to customize this I'm using TinyMCE in inline mode, not iframe mode. In my case


is empty when that runs, hence the callback to getNodes isn't called.

Looking a few lines down in setIframes(), I see it wouldn't be much good even if that were working - it still is hardcoding just a couple css files that won't show in the previews - 'skins/lightgray/content.min.css' and 'skins/wordpress/wp-content.css' - which are not filtered in JS either. If those files mess up the preview-inner-iframe, how do you know other styles added in with the editor styles filter won't break it? If I have an inline MCE editor on a page I wouldn't want all styles, margin, padding, applied to the outer document.body to also be applied to the iframe within the TinyMCE's wp-view-iframe.

I liked how it was before when you could set the proper styles with wp.media.views.sandboxStyles

#8 @azaozz
13 months ago

  • Keywords reporter-feedback removed
  • Resolution set to wontfix
  • Status changed from new to closed

The sandboxing iframe is local which makes it pretty easy to access its DOM and add anything you need there. I agree, it's not as straightforward as before but seems sufficient.

This is also superseded by the block editor. Closing as wontfix, feel free to reopen (preferably with a patch) if it is still needed.

Note: See TracTickets for help on using tickets.