shortcode block and line breaks

  • Resolved hupe13

    (@hupe13)


    1 week, 2 days ago

    If you write multiple shortcodes in a shortcode block, each on a new line, line breaks <br /> and paragraphs <p> </p> are inserted during rendering. This can result in large gaps.

    Is this a feature or a bug?

    There is an shortcode_unautop function for removing <p> </p>, but that didn’t help in my case. I solved this in my plugin with some code.

    Or is there another solution that works for everyone?

    • This topic was modified 1 week, 2 days ago by hupe13.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator threadi

    (@threadi)

    1 week, 1 day ago

    I can’t reproduce the issue you described. Here’s what I did to test it:

    A completely new WordPress installation (version 6.9.4).

    The default TwentyTwentyFive theme.

    Two custom shortcodes:

    add_shortcode( 'example1', function( $atts ) {
        return 'example1out';
    } );

    add_shortcode( 'example2', function( $atts ) {
        return 'example2out';
    } );

    I inserted this shortcode block into a page:

    <!-- wp:shortcode -->
    [example1]
    [example2]
    <!-- /wp:shortcode -->

    This is how it appears on the front end:

    <div class="entry-content alignfull wp-block-post-content has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained"><p>example1out<br />
    example2out</p>
    </div>

    In which environment and with which theme did you encounter this issue?

    Thread Starter hupe13

    (@hupe13)

    1 week, 1 day ago

    The problem is the <br />:

    example1out<br />

    Maybe it is a special case:

    If you enter the shortcodes individually, one per shortcode block, no <br /> tags are generated. If you enter the shortcodes in a single shortcode block, one per line, the <br /> tags are inserted.

    The shortcodes in the Leaflet Map plugins create mostly Javascript, the concrete shortcode creates no output, WordPress renders the shortcode block and adds the <br />.

    Is that the intention?

    Moderator threadi

    (@threadi)

    1 week, 1 day ago

    Am I understanding this correctly that in your case, one of the two shortcodes isn’t displaying anything at all? It might be helpful if you could provide a specific example, like the one I demonstrated above. Which shortcodes are you using. What do they look like in the Block Editor, and how do they appear on the front end.

    Thread Starter hupe13

    (@hupe13)

    1 week, 1 day ago

    No, no, it is correct, that the specific shortcode has no output.

    Example: ids is the id of a picture in media gallery


    <!-- wp:shortcode -->
    [gallery ids=10518]
    [gallery ids=10518]
    [gallery ids=10518]
    <!-- /wp:shortcode -->

    <!-- wp:paragraph -->
    <p>*****</p>
    <!-- /wp:paragraph -->

    <!-- wp:shortcode -->
    [gallery ids=10518]
    <!-- /wp:shortcode -->

    <!-- wp:shortcode -->
    [gallery ids=10518]
    <!-- /wp:shortcode -->

    <!-- wp:shortcode -->
    [gallery ids=10518]
    <!-- /wp:shortcode -->

    creates

    <p><div id='gallery-1' class='gallery galleryid-10950 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>
    			<div class='gallery-icon landscape'>
    				<a href='https://my-domain.tld/bild6/'><img decoding="async" width="150" height="150" src="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" srcset="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png 150w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6-300x300.png 300w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6.png 512w" sizes="(max-width: 150px) 100vw, 150px" /></a>
    			</div></figure>
    		</div>
    <br />
    <div id='gallery-2' class='gallery galleryid-10950 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>
    			<div class='gallery-icon landscape'>
    				<a href='https://my-domain.tld/bild6/'><img decoding="async" width="150" height="150" src="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" srcset="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png 150w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6-300x300.png 300w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6.png 512w" sizes="(max-width: 150px) 100vw, 150px" /></a>
    			</div></figure>
    		</div>
    <br />
    <div id='gallery-3' class='gallery galleryid-10950 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>
    			<div class='gallery-icon landscape'>
    				<a href='https://my-domain.tld/bild6/'><img decoding="async" width="150" height="150" src="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" srcset="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png 150w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6-300x300.png 300w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6.png 512w" sizes="(max-width: 150px) 100vw, 150px" /></a>
    			</div></figure>
    		</div>
    </p>


    <p>*****</p>


    <div id='gallery-4' class='gallery galleryid-10950 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>
    			<div class='gallery-icon landscape'>
    				<a href='https://my-domain.tld/bild6/'><img decoding="async" width="150" height="150" src="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" srcset="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png 150w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6-300x300.png 300w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6.png 512w" sizes="(max-width: 150px) 100vw, 150px" /></a>
    			</div></figure>
    		</div>



    <div id='gallery-5' class='gallery galleryid-10950 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>
    			<div class='gallery-icon landscape'>
    				<a href='https://my-domain.tld/bild6/'><img decoding="async" width="150" height="150" src="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" srcset="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png 150w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6-300x300.png 300w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6.png 512w" sizes="(max-width: 150px) 100vw, 150px" /></a>
    			</div></figure>
    		</div>



    <div id='gallery-6' class='gallery galleryid-10950 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>
    			<div class='gallery-icon landscape'>
    				<a href='https://my-domain.tld/bild6/'><img decoding="async" width="150" height="150" src="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" srcset="https://my-domain.tld/wp-content/uploads/Bilder/Bild6-150x150.png 150w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6-300x300.png 300w, https://my-domain.tld/wp-content/uploads/Bilder/Bild6.png 512w" sizes="(max-width: 150px) 100vw, 150px" /></a>
    			</div></figure>
    		</div>

    You can see the <br /> . These generate a greater space between the pictures.

    Moderator threadi

    (@threadi)

    1 week ago

    Yes, this HTML line break is correct here as well. In the shortcode block, you enter the individual shortcodes with a line break – which is then also applied in the output.

    If you want to omit it, enter the shortcodes without a line break:

    <!-- wp:shortcode -->
    [gallery ids=10518][gallery ids=10518][gallery ids=10518]
    <!-- /wp:shortcode -->

    Alternatively, you could also choose not to use shortcodes and use blocks instead. These ultimately offer the user more options as well.

    Thread Starter hupe13

    (@hupe13)

    1 week ago

    Alternatively, you could also choose not to use shortcodes and use blocks instead.

    That’s a big disadvantage of (my) Leaflet Map plugins, and it’s on the wish list. I’m not able to do that.

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

You must be logged in to reply to this topic.