DevDocs: Add block playground

babel.config.js

@@ -5,6 +5,12 @@ const isBrowser = process.env.BROWSERSLIST_ENV !== 'server';
 const babelConfig = {
 	presets: [ '@automattic/calypso-build/babel/default' ],
 	plugins: [ [ '@automattic/transform-wpcalypso-async', { async: isBrowser } ] ],
+	overrides: [
+		{
+			test: [ './apps/o2-blocks/src' ],
+			plugins: [ '@wordpress/import-jsx-pragma', '@babel/transform-react-jsx' ],
+		},
+	],
 	env: {
 		production: {
 			plugins: [ 'babel-plugin-transform-react-remove-prop-types' ],

client/devdocs/block-playground/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import React, { FunctionComponent, useEffect, useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import Main from 'components/main';
+import DocumentHead from 'components/data/document-head';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockEditorProvider,
+	BlockList,
+	ObserveTyping,
+	WritingFlow,
+} from '@wordpress/block-editor';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { BlockInstance, parse, serialize } from '@wordpress/blocks';
+
+import '@wordpress/components/build-style/style.css';
+import '@wordpress/block-editor/build-style/style.css';
+import '@wordpress/block-library/build-style/style.css';
+import '@wordpress/block-library/build-style/editor.css';
+import '@wordpress/block-library/build-style/theme.css';
+
+registerCoreBlocks();
+
+export const BlockPlayground: FunctionComponent = () => {
+	useEffect( () => {
+		import( /* webpackChunkName: "o2-blocks" */ '../../../apps/o2-blocks/src/editor.js' );
+	}, [] );
+
+	const [ blocks, setBlocks ] = useState< BlockInstance[] >( [] );
+	const [ post, setPost ] = useState< string >( '' );
+	const update = ( newBlocks: BlockInstance[] ) => {
+		setBlocks( newBlocks );
+		setPost( serialize( newBlocks ) );
+	};
+
+	return (
+		<Main className="devdocs block-playground">
+			<DocumentHead title="Block Playground" />
+			<div>
+				<BlockEditorProvider value={ blocks } onInput={ update } onChange={ update }>
+					<WritingFlow>
+						<ObserveTyping>
+							<BlockList />
+						</ObserveTyping>
+					</WritingFlow>
+				</BlockEditorProvider>
+			</div>
+			<textarea
+				style={ { minHeight: '480px' } }
+				value={ post }
+				onChange={ ( event ) => setPost( event.target.value ) }
+				onBlur={ () => setBlocks( parse( post ) ) }
+			/>
+		</Main>
+	);
+};
+
+export default BlockPlayground;

client/devdocs/controller.js

@@ -122,6 +122,13 @@ const devdocs = {
 		next();
 	},
 
+	blockPlayground: function ( context, next ) {
+		context.primary = (
+			<AsyncLoad require="./block-playground" component={ context.params.component } />
+		);
+		next();
+	},
+
 	typography: function ( context, next ) {
 		context.primary = (
 			<AsyncLoad component={ context.params.component } require="./design/typography" />

client/devdocs/index.js

@@ -60,6 +60,13 @@ export default function () {
 			makeLayout,
 			clientRender
 		);
+		page(
+			'/devdocs/block-playground',
+			controller.sidebar,
+			controller.blockPlayground,
+			makeLayout,
+			clientRender
+		);
 		page(
 			'/devdocs/typography',
 			controller.sidebar,

client/devdocs/sidebar.jsx

@@ -126,6 +126,13 @@ export default class DevdocsSidebar extends React.PureComponent {
 							link="/devdocs/selectors"
 							selected={ this.isItemSelected( '/devdocs/selectors', false ) }
 						/>
+						<SidebarItem
+							className="devdocs__navigation-item"
+							icon="custom-post-type"
+							label="Block Playground"
+							link="/devdocs/block-playground"
+							selected={ this.isItemSelected( '/devdocs/block-playground', false ) }
+						/>
 					</ul>
 				</SidebarMenu>
 			</Sidebar>

packages/calypso-build/webpack/util.js

@@ -83,6 +83,7 @@ const nodeModulesToTranspile = [
 	'escape-string-regexp/',
 	'filesize/',
 	'gridicons/',
+	'new-github-issue-url/',
 	'prismjs/',
 	'punycode/',
 	'react-spring/',