Unexpected result with shortcode in template parts

  • Resolved Guillaume G.

    (@g4ll4is)


    1 year, 3 months ago

    Hi,

    If you try to insert a form shortcode in a template part, the plugin outputs a unexpected very visible empty <p>.

    This breaks the intended visual output, as the <p> is about 700px height, can’t be edited or deleted by the end user.

    Step to reproduce :

    1. Launch a WordPress installation with a block theme
    2. Enter a template part
    3. Add a Brevo shortcode (e.g [sibwp_form id=2])
    4. Check front end to see a <p> before the actual form :
    <p>				<input type="hidden" name="sib_form_action" value="subscribe_form_submit"><br>
				<input type="hidden" name="sib_form_id" value="1"><br>
                <input type="hidden" name="sib_form_alert_notice" value="Please fill out this field"><br>
                <input type="hidden" name="sib_form_invalid_email_notice" value="Your email address is invalid"><br>
                <input type="hidden" name="sib_security" value="5e96bf1694"></p>

    I’ve tested this on a blank 6.2.2 WordPress with only the Brevo plugin (3.1.67) installed and Twenty Twenty-Three (1.1). The issue also occurred on another WordPress, with another block theme.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support alexisbienayme

    (@alexisbienayme)

    Hi,

    Thanks for contacting us ! To try reproducing the issue, would you please explain what do you mean by “enter a template part” ?

    Looking forward to hearing from you.

    Best Regards,

    Alexis

    Thread Starter Guillaume G.

    (@g4ll4is)

    Hi,

    I mean opening Appareance > Editor from the backend, selecting a Template part (i.e a part of the Theme) and start editing it via the Site Editor. See the Block Theme documentation about Templates.

    On newest WordPress versions (6.3 or running up-to-date Gutenberg plugins), Template part are located under Appareance > Editor > Patterns.

    Plugin Support alexisbienayme

    (@alexisbienayme)

    Hi,

    Thanks. We indeed reproduced this scenario. It seems the?<input>?elements with type hidden are automatically added under?<p>?tag.

    In WordPress, input elements with type “hidden” are added under a <p> tag when editing using templates part due to how the WordPress content editor, also known as the Gutenberg editor, handles certain elements.

    The Gutenberg editor is designed to generate semantic HTML, and it attempts to wrap elements in appropriate HTML tags to maintain proper structure and styling. When you add an input element with type “hidden” in the templates part editor, the Gutenberg editor automatically tries to add a container around the input element to ensure it is part of a block or paragraph.

    Since the <p> tag represents a paragraph in HTML, the Gutenberg editor wraps the hidden input element inside a <p> tag. This can sometimes lead to unexpected behavior or styling issues, especially if the hidden input element needs to be completely separate from other content within a paragraph.

    To prevent this automatic wrapping behavior, you have a few options:

    1.Use a different container: Instead of using a <p> tag, you can wrap the hidden input element in a <div> or other appropriate container tag. This can be done by switching to the HTML editor view and manually adjusting the code.

    2. Use a custom block: You can create a custom block in the Gutenberg editor to add the hidden input element without any automatic wrapping. Custom blocks allow you to have more control over the HTML structure of your content.

    3. Use a plugin: There are some plugins available that can modify the behavior of the Gutenberg editor and prevent automatic wrapping of certain elements.

    Best Regards,

    Alexis

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Unexpected result with shortcode in template parts’ is closed to new replies.