basic shortcode - Why 1st paragraph not wrapped in p tag, but 2nd is

Question

I'm working on a basic plugin that adds shortcodes for columns, buttons, panels, ect. Nothing new here. I haven't altered wpautop in anyway; I've tried removing it and delaying it - no change. What happens with all shortcodes used is, the first paragraph isn't wrapped within a p tag (the p tags are actually appearing directly after the first paragraph and empty), but all paragraphs after the first within the same shortcode ARE wrapped in p tags. I need to figure out WHY the first paragraph isn't being wrapped.

Function:

function vc_shortcode_panel($atts, $content = null) {
  extract( shortcode_atts( array(
    'type' => ''
  ), $atts) );
 return '<div class="panel ' . $type . '">' . do_shortcode( trim($content) ) . '</div>';
 }
add_shortcode('panel', 'vc_shortcode_panel');

Shortcode:

[panel type=""]paragraph 1

paragraph 2[/panel]

Output looks like this:

<div class="panel">
  paragraph 1
  <p></p>
  <p>paragraph 2</p>
</div>

I know if I add a line break between the [panel] and the first paragraph, it will then wrap that first paragraph in a p tag. But shouldn't shortcodes be able to be formatted correctly without requiring that line break? What am I doing wrong and can anyone tell me why this is happening?

Answer 1

This is actually an example of the wpautop() function's intended purpose. From the Codex:

Changes double line-breaks in the text into HTML paragraphs (<p>...</p>).

Note that the example provided in the Codex explicitly uses a string that begins with a line-break for this very purpose:

<?php
$some_long_text = // Start Text
Some long text
that has many lines

and paragraphs in it.
// end text

echo wpautop($some_long_text);
?>

The above results in following markup:

<p>Some long text<br/>
that has many lines</p>
<p>and paragraphs in it.</p>

The reasoning behind this functionality is that double line-breaks in HTML markup are interpreted as generic whitespace and render as a single line-break in the DOM. In order to properly display a double line-break, you either have to insert <br /> elements or make use of default paragraph-element styling, which is what WordPress does.

As the first line of your example contains no line-breaks, no paragraph or <br /> elements are added, as no line-break formatting needs to be preserved.

See the wpautop() function's source for the exact implementation.