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

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:

Read More
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?

Related posts

1 comment

  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.

Comments are closed.