[wp-trac] [WordPress Trac] #38999: Border broken if enabled in tinymce preview_styles

[WordPress Trac]

#38999: Border broken if enabled in tinymce preview_styles
--------------------------+-----------------------------
 Reporter:  smerriman     |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  TinyMCE       |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 This affects any theme, but as a simple way to replicate in a fresh
 installation of WordPress / twentyfifteen:

 1) In functions.php, add:

 {{{#!php
 function twentyfifteen_tinymce_before_init( $init ) {
     unset($init['preview_styles']);
     return $init;
 }
 add_filter('tiny_mce_before_init', 'twentyfifteen_tinymce_before_init');
 }}}

 This resets back to TinyMCE's default preview styles, which includes
 border (WordPress' default excludes this for some reason).

 2) In css/editor-style, add a border to h2:

 {{{
 h2 {border-bottom:1px solid #000;}
 }}}

 3) If you now load the visual editor, click toolbar toggle, and look at
 the h2 in the block formats dropdown, you do not see a border. If you look
 at the dropdown element in inspector, you will see broken CSS for border,
 border-radius, and outline:

 {{{
 style='font-family:"Noto Serif",serif;font-size:29px;font-weight:700;font-
 style:normal;text-decoration:none;text-transform:none;color:rgb(51, 51,
 51);border:;border-radius:;outline:;text-shadow:none;
 }}}

 Is this a bug in TinyMCE, or a compatibility bug with WordPress code
 somewhere? Given border is part of the default preview styles and
 WordPress removed it, I'm guessing a bug in WordPress somewhere.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38999>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform