Fix magic block callout icons alignment.

packages/markdown/__tests__/__snapshots__/components.test.js.snap

@@ -2,8 +2,6 @@
 
 exports[`Components Callout 1`] = `"<blockquote class=\\"callout callout_error\\" theme=\\"❗️\\"><h3 class=\\"callout-heading false\\"><span class=\\"callout-icon\\">❗️</span><p>Error Callout</p></h3><p>Lorem ipsum dolor.</p></blockquote>"`;
 
-exports[`Components Callout 2`] = `"<blockquote class=\\"callout callout_default\\" theme=\\"🎟\\"><h3 class=\\"callout-heading empty\\"><span class=\\"callout-icon\\">🎟</span></h3><p>Callout with no title or theme.</p></blockquote>"`;
-
 exports[`Components Embed 1`] = `"<div class=\\"embed\\"><a href=\\"https://gist.github.com/chaddy81/f852004d6d1510eec1f6\\" rel=\\"noopener noreferrer\\" style=\\"display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none;\\" target=\\"_blank\\"><b style=\\"color: rgb(51, 51, 51);\\">View Embed:</b> <span style=\\"opacity: 0.75;\\">https://gist.github.com/chaddy81/f852004d6d1510eec1f6</span></a></div>"`;
 
 exports[`Components Image 1`] = `"<p><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" alt=\\"Bro eats pizza and makes an OK gesture.\\" title=\\"Pizza Face\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" width=\\"auto\\" loading=\\"lazy\\"><span class=\\"lightbox\\" role=\\"dialog\\"><span class=\\"lightbox-inner\\"><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" alt=\\"Bro eats pizza and makes an OK gesture.\\" title=\\"Click to close...\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" width=\\"auto\\" loading=\\"lazy\\"></span></span></p>"`;

packages/markdown/__tests__/components.test.js

@@ -53,15 +53,30 @@ describe('Components', () => {
 `,
       `
 
-> 🎟  
+> 🚧  
 > 
-> Callout with no title or theme.
+> Callout with no title.
 
 `,
+      `[block:callout]
+{
+  "type": "warning",
+  "body": "Callout with no title."
+}
+[/block]`,
     ];
-    const wrap = [mount(markdown.react(callout[0])), mount(markdown.react(callout[1]))];
+    const wrap = [
+      mount(markdown.react(callout[0])),
+      mount(markdown.react(callout[1])),
+      mount(markdown.react(callout[2])),
+    ];
+
     expect(wrap[0].html()).toMatchSnapshot();
-    expect(wrap[1].html()).toMatchSnapshot();
+
+    const noTitleExpectation =
+      '<blockquote class="callout callout_warn" theme="🚧"><h3 class="callout-heading empty"><span class="callout-icon">🚧</span></h3><p>Callout with no title.</p></blockquote>';
+    expect(wrap[1].html()).toBe(noTitleExpectation);
+    expect(wrap[2].html()).toBe(noTitleExpectation);
   });
 
   it('Multi Code Block', () => {

packages/markdown/components/Callout/index.jsx

@@ -4,6 +4,8 @@ const PropTypes = require('prop-types');
 const Callout = props => {
   let { children } = props;
   const { attributes, theme, title, icon } = props;
+  if (!(title || children)) return '';
+
   const content = title ? children.splice(1) : children;
   children = title ? children : '';
   return (
@@ -13,7 +15,7 @@ const Callout = props => {
         <span className="callout-icon">{icon}</span>
         {children}
       </h3>
-      {(content.length && content) || (!title ? children : '')}
+      {(content && content.length && content) || (!title && children)}
     </blockquote>
   );
 };

packages/markdown/processor/parse/magic-block-parser.js

@@ -140,13 +140,7 @@ function tokenize(eat, value) {
                 value: json.body,
               },
             },
-            children: [
-              {
-                type: 'paragraph',
-                children: [...this.tokenizeInline(json.title, eat.now())],
-              },
-              ...this.tokenizeBlock(json.body, eat.now()),
-            ],
+            children: [...this.tokenizeBlock(json.title, eat.now()), ...this.tokenizeBlock(json.body, eat.now())],
           },
           json
         )