orphan tag before line break

globaltimoto
(@globaltimoto)

10 years, 7 months ago
Hello

Great plugin by the way !

I have taken note that it is wise to remove all unwanted whitespace between the wpui shortcodes. I have eliminated that space except between

[wptabcontent] and [/wptabcontent]

which is where you would expect to have line breaks on paragraphs etc.

On a fresh install using twentythirteen, editing with TinyMCE “Visual” an orphan </p> tag is introduced to the browser source just before a line break:
```
<div id="wp-tabs-1" class="wp-tabs wpui-light wpui-styles"><h3 class="wp-tab-title">Test</h3><div class="wp-tab-content"><div class="wp-tab-content-wrapper"></p>
<p>Text</p></div></div></div>
```
The only way I found to eliminate this behaviour was to use the “Text” editor instead, remove all space, then add line breaks by hitting the return key.

However if the editor is switched back to “Visual” mode, the orphan </p> tags return.

Is there a way to overcome this issue when switching between “Visual” and “Text” mode using TinyMCE or any other editor for that matter ?

http://wordpress.org/plugins/wp-ui/

Viewing 6 replies - 1 through 6 (of 6 total)

Thread Starter globaltimoto
(@globaltimoto)

10 years, 7 months ago

I have tried the same with 2 more editors Ultimate TinyMCE and CKeditor, but with the same outcome.

What I notice is that each time the post is saved via a visual editor wp attempts to wrap the first line of shortcodes with a p tag:

<p>[wptabs mode="horizontal"][wptabtitle]Test[/wptabtitle][wptabcontent]</p>

but the resulting browser source omits the opening p tag:

<div id="wp-tabs-1" class="wp-tabs wpui-light wpui-styles"><h3 class="wp-tab-title">Test</h3><div class="wp-tab-content"><div class="wp-tab-content-wrapper"></p>

of course really we don’t want the shortcodes to be wrapped in p anyway.
Thread Starter globaltimoto
(@globaltimoto)

10 years, 7 months ago
I tried many given solutions but finally arrived at this:
```
//move wpautop filter to AFTER shortcode is processed
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 99);
add_filter( 'the_content', 'shortcode_unautop', 100);
```
which was added to functions.php

and additionally the first line of text after the first [wptabcontent] needed to be an explicit tag placed in the editor such as <h4> otherwise that first line of text would still be preceeded by an orphan </p>

I just wonder if this is an issue with wp core not processing shortcodes in the right order or if it is something else ?
Plugin Author kavingray
(@kavingray)

10 years, 7 months ago
Hi,

For these reasons, entering shortcode via Visual editor is strongly discouraged. You can always use Visual editor to write content and wrap them in tabs just before publishing.

The best method to workaround this problem is,

1) Have each shortcode in separate line,
2) Same shortcodes tags on same line,
3) No spaces between [wptabtitle], [wptabcontent], [wptabs] shortcodes.
```
[wptabs single_line="on"]
[wptabtitle]First tabs title[/wptabtitle]
[wptabcontent]WordPress is a great platform suitable for almost every case of websites out there, ranging from a personal blog to a complex CMS. This plugin started out as a snippet when i needed a way to shorten my posts and make them look more presentable. WP UI plugin for WordPress, right from its first release, is all about user experience and presentation. [/wptabcontent]
...
....
....
```
Always use HTML editor to input shortcodes, remove unnecessary line breaks, don’t switch between editors and save.
Thread Starter globaltimoto
(@globaltimoto)

10 years, 7 months ago

Hello kavingray

Thank you for the response.

I hope that I showed in my examples that I followed your guidelines.

But this method is highly susceptible to user error and the issue always remained when using the Visual Editor (VE) no matter how careful, because of the first line break after [wptabcontent]

and you can’t ask people not to put line breaks in-between [wptabcontent][/wptabcontent]

It’s also difficult to ask users not to use the VE.

So that’s why I changed the wp filter order so that this became less of a concern.

I just hope that changing the filter order like that doesn’t cause other issues elsewhere.

As I understand it devs and users alike have been complaining about the mishaps that happen between Visual and Text editor for years.

This is just another instance I suppose.
Plugin Author kavingray
(@kavingray)

10 years, 7 months ago
Lol there arent guidelines, just my humble recommendations.

I am not asking people to stop using VE, but do the tab insertion process at the end, after the content are done. And u misunderstood about the wptabcontent.. use as many line breaks needed, but it’s best to have beginning in the same line with opening and last with closing tags. E.g.
```
[wptabcontent]WordPress is a great platform suitable for almost every case of websites out there, ranging from a personal blog to a complex CMS.

            This plugin started out as a snippet when i needed a way to shorten my posts and make them look more presentable. 

WP UI plugin for WordPress, right from its first release, is all about user experience and presentation. [/wptabcontent]
...
```
But YMMV, so it’s best to stick to what is working for you. C ya mate. 😉
Thread Starter globaltimoto
(@globaltimoto)

10 years, 7 months ago
The first solution I found was terrible.

This one was much better and less invasive to the wp core
http://wordpress.stackexchange.com/a/70260/21090
```
function wpex_clean_shortcodes($content){
$array = array (
    '<p>[' => '[',
    ']</p>' => ']',
    ']<br />' => ']'
);
$content = strtr($content, $array);
return $content;
}
add_filter('the_content', 'wpex_clean_shortcodes');
```
Basicaly removes any <p> and <br /> that wrap shortcodes

Now I can switch between Visual and Text editor without pain.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘orphan tag before line break’ is closed to new replies.

Tags