flexWrap, alignContent, initialPlayground

Summary: Adds `initialPlayground` to the markdown header. Adds contents fro alignContent and flexWrap.

Reviewed By: emilsjolander

Differential Revision: D6987513

fbshipit-source-id: 41de309d427a9f42e09477170fb8512ce1e7a816

website/src/templates/withPlayground.js

@@ -22,16 +22,25 @@ import './index.css';
 type Props = {
   pathContext: {
     html: string,
-    frontmatter: {},
+    frontmatter: {
+      initialPlayground?: string,
+    },
   },
 };
 const REGEX = /<controls prop="([A-Za-z]+)"\s?\/>/gi;
 
 export default class withPlayground extends Component<Props> {
   render() {
+    let layoutDefinition;
+    if (this.props.pathContext.frontmatter.initialPlayground) {
+      layoutDefinition = JSON.parse(
+        atob(this.props.pathContext.frontmatter.initialPlayground),
+      );
+    }
     return (
       <Page className="doc-block playground">
         <Playground
+          layoutDefinition={layoutDefinition}
           selectedNodePath={[]}
           showGuides={false}
           renderSidebar={(layout, onChange) => (