Trim left every line of a shortcode to avoid the accidental markdown codeblock

components/rendering/src/shortcode.rs

@@ -96,7 +96,13 @@ fn render_shortcode(name: String, args: Map<String, Value>, tera: &Tera, config:
     context.insert("config", config);
     let tpl_name = format!("shortcodes/{}.html", name);
 
-    tera.render(&tpl_name, &context).chain_err(|| format!("Failed to render {} shortcode", name))
+    let res = tera
+        .render(&tpl_name, &context)
+        .chain_err(|| format!("Failed to render {} shortcode", name))?;
+
+    // We trim left every single line of a shortcode to avoid the accidental
+    // shortcode counted as code block because of 4 spaces left padding
+    Ok(res.lines().map(|s| s.trim_left()).collect())
 }
 
 pub fn render_shortcodes(content: &str, tera: &Tera, config: &Config) -> Result<String> {

components/rendering/tests/markdown.rs

@@ -515,3 +515,25 @@ fn can_make_permalinks_with_colocated_assets_for_image() {
         "<p><img src=\"https://vincent.is/about/image.jpg\" alt=\"alt text\" /></p>\n"
     );
 }
+
+#[test]
+fn markdown_doesnt_wrap_html_in_paragraph() {
+    let permalinks_ctx = HashMap::new();
+    let config = Config::default();
+    let context = RenderContext::new(&GUTENBERG_TERA, &config, "https://vincent.is/about/", &permalinks_ctx, InsertAnchor::None);
+    let res = render_content(r#"
+Some text
+
+<h1>Helo</h1>
+
+<div>
+<a href="mobx-flow.png">
+        <img src="mobx-flow.png" alt="MobX flow">
+    </a>
+</div>
+    "#, &context).unwrap();
+    assert_eq!(
+        res.0,
+        "<p>Some text</p>\n<h1>Helo</h1>\n<div>\n<a href=\"mobx-flow.png\">\n        <img src=\"mobx-flow.png\" alt=\"MobX flow\">\n    </a>\n</div>\n"
+    );
+}

docs/content/documentation/content/shortcodes.md

@@ -32,6 +32,9 @@ are in a `if` statement, we can assume they are optional.
 
 That's it, Gutenberg will now recognise this template as a shortcode named `youtube` (the filename minus the `.html` extension).
 
+The markdown renderer will wrap an inline HTML node like `<a>` or `<span>` into a paragraph. If you want to disable that,
+simply wrap your shortcode in a `div`.
+
 ## Using shortcodes
 
 There are two kinds of shortcodes: