WordPress.org

Ready to get started?Download WordPress

Forums

Strange Behaviour making lists in the Visual Editor (24 posts)

  1. bobbingwide
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

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

  12. SirStuey
    Member
    Posted 1 year 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 11 months 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 11 months ago #

    Why are you still using WordPress 3.5?

  15. beefchimi
    Member
    Posted 11 months ago #

    I have the latest version, 3.5.1

  16. Christine Prefontaine
    Member
    Posted 11 months ago #

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

  17. saccromyces
    Member
    Posted 10 months 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 10 months 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 10 months 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 10 months 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!

  21. ichadwick
    Member
    Posted 3 months ago #

    This problem is still present in V3.8. and happens with other themes (I'm using Skirmish) Every now and then the visual editor adds this in front of a paragraph (not starting or within a list):

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

    I can't duplicate any single event that would cause this; it seems to do it randomly. I use Chrome, too, and gave up on IE9. Maybe I should migrate to FF?

  22. WPyogi
    Volunteer Moderator
    Posted 3 months ago #

    @ichadwick - it this is a current issue, please start a new thread - this one references WP3.5.

  23. ichadwick
    Member
    Posted 3 months ago #

    No, it's the same issue... it's been reported in versions 3.5 to 3.8. Please read the thread before responding.

  24. jfdeclercq
    Member
    Posted 3 months ago #

    Temporary workaround:

    If you do a li identation change in WYSIWYG and it's not what you expect, than quicky click the Text tab than go back to the Visual tab, you should see the correct display.

    J-F

Topic Closed

This topic has been closed to new replies.

About this Topic