DevDocs: add a Gutenberg blocks section

client/devdocs/controller.js

@@ -162,6 +162,14 @@ const devdocs = {
 		context.primary = React.createElement( DevWelcome, {} );
 		next();
 	},
+
+	// Gutenberg Blocks
+	gutenbergBlocks: function( context, next ) {
+		context.primary = (
+			<AsyncLoad component={ context.params.component } require="./design/gutenberg-blocks" />
+		);
+		next();
+	},
 };
 
 export default devdocs;

client/devdocs/design/gutenberg-blocks.jsx

@@ -0,0 +1,27 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import DocumentHead from 'components/data/document-head';
+import Main from 'components/main';
+import ReadmeViewer from 'components/readme-viewer';
+
+export default class GutenbergBlocks extends React.Component {
+	render() {
+		const className = classnames( 'devdocs', 'devdocs__gutenberg-blocks' );
+
+		return (
+			<Main className={ className }>
+				<DocumentHead title="Gutenberg Blocks" />
+				<ReadmeViewer readmeFilePath="/client/devdocs/gutenberg-blocks/README.md" />
+			</Main>
+		);
+	}
+}

client/devdocs/gutenberg-blocks/README.md

@@ -0,0 +1,13 @@
+Gutenberg Blocks
+====
+
+[Gutenberg](https://wordpress.org/gutenberg/) is the new publishing experience for WordPress.
+
+The Gutenberg editor uses 
+[blocks](https://github.com/WordPress/gutenberg/blob/master/blocks/README.md) to create all types
+of content. A Gutenberg block is the abstract term used to describe units of markup that, 
+composed together, form the content or layout of a webpage.
+
+Calypso provides all the 
+[built-in Gutenberg blocks](https://github.com/WordPress/gutenberg/tree/master/core-blocks), so 
+they can be used in any React component. 

client/devdocs/index.js

@@ -71,6 +71,17 @@ export default function() {
 		);
 		page( '/devdocs/start', controller.pleaseLogIn, makeLayout, clientRender );
 		page( '/devdocs/welcome', controller.sidebar, controller.welcome, makeLayout, clientRender );
+
+		if ( config.isEnabled( 'devdocs/gutenberg-blocks' ) ) {
+			page(
+				'/devdocs/gutenberg-blocks',
+				controller.sidebar,
+				controller.gutenbergBlocks,
+				makeLayout,
+				clientRender
+			);
+		}
+
 		page( '/devdocs/:path*', controller.sidebar, controller.singleDoc, makeLayout, clientRender );
 	}
 }

client/devdocs/sidebar.jsx

@@ -13,6 +13,7 @@ import Sidebar from 'layout/sidebar';
 import SidebarHeading from 'layout/sidebar/heading';
 import SidebarMenu from 'layout/sidebar/menu';
 import SidebarItem from 'layout/sidebar/item';
+import { isEnabled } from 'config';
 
 export default class DevdocsSidebar extends React.PureComponent {
 	static displayName = 'DevdocsSidebar';
@@ -103,6 +104,15 @@ export default class DevdocsSidebar extends React.PureComponent {
 							link="/devdocs/blocks"
 							selected={ this.isItemSelected( '/devdocs/blocks', false ) }
 						/>
+						{ isEnabled( 'devdocs/gutenberg-blocks' ) && (
+							<SidebarItem
+								className="devdocs__navigation-item"
+								icon="grid"
+								label="Gutenberg Blocks"
+								link="/devdocs/gutenberg-blocks"
+								selected={ this.isItemSelected( '/devdocs/gutenberg-blocks', false ) }
+							/>
+						) }
 						<SidebarItem
 							className="devdocs__navigation-item"
 							icon="code"

config/development.json

@@ -44,6 +44,7 @@
 		"devdocs": true,
 		"devdocs/redirect-loggedout-homepage": true,
 		"devdocs/components-usage-stats": false,
+		"devdocs/gutenberg-blocks": true,
 		"dev/test-helper": true,
 		"dev/preferences-helper": true,
 		"domains/cctlds": true,

config/test.json

@@ -34,6 +34,7 @@
 		"devdocs": true,
 		"devdocs/redirect-loggedout-homepage": true,
 		"devdocs/components-usage-stats": false,
+		"devdocs/gutenberg-blocks": true,
 		"gdpr-banner": false,
 		"google-analytics": false,
 		"google-my-business": false,