build Unstyled block, prettier ignore mdx

.vscode/settings.json

@@ -18,4 +18,5 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.formatOnSave": true
   },
+  "prettier.ignorePath": "./code/.prettierignore"
 }

code/.prettierignore

@@ -0,0 +1 @@
+*.mdx

code/ui/blocks/src/blocks/Unstyled.mdx

@@ -0,0 +1,39 @@
+import { Unstyled } from './Unstyled.tsx';
+import StoriesMeta, {Undefined} from '../controls/Boolean.stories';
+import { Story } from '@storybook/blocks';
+import { Meta } from '@storybook/blocks';
+
+<Story of={Undefined} meta={StoriesMeta}/>
+
+# The Unstyled Block
+
+By default most elements in docs have a few default styles applied to ensure the docs look good. This is achieved by applying default styles to most elements like `h1`, `p`, etc..
+However sometimes you might want some of your content to not have these styles applied, this is where the `Unstyled` block is useful. Wrap any content you want in the `Unstyled` block to remove the default styles:
+
+```md
+import { Unstyled } from '@storybook/blocks';
+
+> This block quote will be styled
+
+... and so will this paragraph.
+
+<Unstyled>
+  > This block quote will not be styled
+
+  ... neither will this paragraph, nor the following component:
+  <MyCustomComponent />
+</Unstyled>
+```
+
+Yields: 
+
+> This block quote will be styled
+
+... and so will this paragraph.
+
+<Unstyled>
+  > This block quote will not be styled
+
+  ... neither will this paragraph, nor the following component:
+</Unstyled>
+

code/ui/blocks/src/blocks/Unstyled.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const Unstyled: React.FC = (props) => <div {...props} className="sb-unstyled" />;