WordPress.org

1. bobbingwide
   Member
   Posted 4 months ago #
   

   This was previously reported as
   http://wordpress.org/support/topic/strange-behavior-making-lists-in-the-visual-editor?replies=5
   but the item was closed EVEN though it was not resolved AND had been reported to occur in WordPress 3.5 and the Twenty Twelve theme.

   Problem:
   Unwanted span tags created when toggling ordered or unordered list in Visual edit.
   

   span style="line-height: 1.714285714; font-size: 1rem;"

   Steps to create:

   • Switch to Twenty Twelve theme
   • In the text editor type/paste in some lines you want to turn into a list.
   • Switch to Visual
   • Select the block of lines and click on the Unordered list toolbar.
   • Switch back to Text
   • Notice the unwanted spans that have been created.

   Alternatively, start with a perfectly acceptable Unordered list and try to remove the list. The unwanted spans rear their ugly head again.

   Same problem occurs with ordered list.

   Using Chrome inspector you can see the unwanted spans being created when the toolbar button is clicked.

2. bobbingwide
   Member
   Posted 4 months ago #
   

   I have done a little more investigation. I don't profess to understanding the TinyMCE editor but it appears to have picked up the CSS styling for the unwanted span from the editor-style.css in the twentytwelve theme.

   The value for the line-height coming from:
   

   /* =Text elements
   -------------------------------------------------------------- */
   
   p {
   	line-height: 1.714285714;
   	margin: 0 0 24px;
   	margin: 0 0 1.714285714rem;
   }

   and font-size from
   

   body {
   	color: #444;
   	font-family: "Open Sans", Helvetica, Arial, sans-serif;
   	font-size: 14px;
   	font-size: 1rem;
   	line-height: 1;
   	text-rendering: optimizeLegibility;
   	vertical-align: baseline;
   }

3. bobbingwide
   Member
   Posted 4 months ago #
   

   Here is a simple workaround to the problem.
   In twentytwelve/functions.php find the call to add_editor_style() and comment it out.

4. esmi
   Theme Diva & Forum Moderator
   Posted 4 months ago #
   

   No! Do not edit the Twenty Twelve theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

5. bobbingwide
   Member
   Posted 4 months ago #
   

   The problem is associated with the TwentyTwelve theme.
   I was trying to debug the problem. By editing the theme I was able to demonstrate a simple workaround.

   Another simple workaround is to use a different browser.
   The problem occurs in Google Chrome version 24.0.1312.52
   but not in Firefox or IE9.

   I have not yet found a modification to the editor-style.css that works. TinyMCE is still insistent on adding the unwanted span. Whether or not the span is solely for display purposes I don't know.

6. esmi
   Theme Diva & Forum Moderator
   Posted 4 months ago #
   

   The problem is associated with the TwentyTwelve theme.

   Then post it as bug in Trac but do not encourage people to edit the default WordPress theme.

7. bobbingwide
   Member
   Posted 4 months ago #
   

   Hi esmi, you're not being much help with this problem.

   Originally, I did not have enough information to post a bug in TRAC, so was reporting it here.

   I have now discovered this reopened ticket: http://core.trac.wordpress.org/ticket/17154

   and the whole history of related TRACs including http://core.trac.wordpress.org/ticket/14218
   in which azaozz attributed the problem to Webkit.

   Which explains why it fails in Chrome AND Safari on Windows.
   The "Full Featured Example" of TinyMCE 3.5.8 did not appear to exhibit the problem.

   I have also developed a workaround using a child theme of twentytwelve
   My functions.php contains
   

   /**
    * I want to use the basic 2012 theme but don't want TinyMCE to create
    * unwanted HTML. By removing editor-style.css from the $editor_styles
    * global, this code effectively undoes the call to add_editor_style()
    */
   add_action( 'after_setup_theme', 'foobar_setup', 11 );
   function foobar_setup() {
     global $editor_styles;
     $editor_styles = array();
   }

8. esmi
   Theme Diva & Forum Moderator
   Posted 4 months ago #
   

   A child theme is definitely the way to go. Just please do not encourage anyone to edit the parent, default, theme. Such suggestions cause no end of problems for forum regulars who then have to try and guide people to fix their badly broken sites.

9. bobbingwide
   Member
   Posted 4 months ago #
   

   In the short term the child theme is the way to go. The long term fix is to revisit the open TRAC. I've added a comment to 17154.

10. SirStuey
    Member
    Posted 4 months ago #
    

    I have been experiencing the same issue with a TwentyTen child theme; the issue is not isolated to the TwentyTwelve theme.

    <ul>
    	<li><span style="line-height: 16px;"> one</span></li>
    	<li>two</li>
    </ul>

    I was hoping 3.5.1 would fix this, but it didn't.

    Also, I found a workaround works most of the time. Instead of clicking on the ol or ul button to start a list, start typing the first list item, highlight it, and then select the ol or ul button. For some reason this leads to a list without unintended spans or markup.

11. WPyogi
    Volunteer Moderator
    Posted 4 months ago #
    

    @SirStuey - please start your own thread if you need help.

12. SirStuey
    Member
    Posted 4 months ago #
    

    @SirStuey - please start your own thread if you need help.

    I don't need help as the problem is already documented. I was mopstly responding to:

    The problem is associated with the TwentyTwelve theme.

    I also provide an easier workaround in case the OP doesn't want to start editing his theme's functions file.

13. beefchimi
    Member
    Posted 1 month ago #
    

    This has been a constant annoyance for me. Any update on a better fix? SirStuey's suggestion doesn't seem to work for me :(

14. esmi
    Theme Diva & Forum Moderator
    Posted 1 month ago #
    

    Why are you still using WordPress 3.5?

15. beefchimi
    Member
    Posted 1 month ago #
    

    I have the latest version, 3.5.1

16. Christine Prefontaine
    Member
    Posted 1 month ago #
    

    I am having the same problem. Using Chrome 26.0.1410.65 and WP 3.5.1. Super annoying :(

17. saccromyces
    Member
    Posted 3 weeks ago #
    

    I had this same problem today, turns out it was a bug in CHROME, switched to Firefox to edit and the problem went away.

18. jebswebs
    Member
    Posted 2 weeks ago #
    

    Confirming that the issue is related to the Chrome browser. I just switched back to Firefox and the problem went away. Now who do we complain to? ;-)

19. bhandtc
    Member
    Posted 2 weeks ago #
    

    Just want to pile on here and say that I am also having this problem. I use the Weaver II theme, so I don't think this is a theme-related problem.

    I use Chrome Version 27.0.1453.93 and WP 3.5.1

    Very annoying. My solution is to just type in the HTML when using lists.

20. bravenewniche
    Member
    Posted 1 week ago #
    

    Thanks for identifying this as a webkit problem! I was going crazy trying to figure out which plugin might be causing that...

    I'm on Windows Chrome 27.0.1453.94 and WP 3.5.1

    I've since discovered that HTML tags WITHIN a list item, such as EM or STRONG, are getting the same style added to them.

    I had written a function to strip out the offending SPAN tag that was getting added, but was still having formating issues, and that's when I noticed that instead of adding a SPAN within these other HTML tags, it was simply adding the style.

    Back to Firefox!

Reply

You must log in to post.