orphan tag before line break

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.

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 ?

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.

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.

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

The first solution I found was terrible.

This one was much better and less invasive to the wp core
https://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.