Strange Behaviour making lists in the Visual Editor

  • This was previously reported as
    https://www.ads-software.com/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.

Viewing 15 replies - 1 through 15 (of 23 total)
  • Thread Starter bobbingwide

    (@bobbingwide)

    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;
}

    Thread Starter bobbingwide

    (@bobbingwide)

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

    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.

    Thread Starter bobbingwide

    (@bobbingwide)

    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.

    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.

    Thread Starter bobbingwide

    (@bobbingwide)

    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: https://core.trac.www.ads-software.com/ticket/17154

    and the whole history of related TRACs including https://core.trac.www.ads-software.com/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();
}

    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.

    Thread Starter bobbingwide

    (@bobbingwide)

    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.

    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.

    @sirstuey – please start your own thread if you need help.

    @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.

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

    Why are you still using WordPress 3.5?

    I have the latest version, 3.5.1

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

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Strange Behaviour making lists in the Visual Editor’ is closed to new replies.