Add basic custom header

client/gutenboarding/gutenboard.tsx

@@ -18,6 +18,7 @@ import '@wordpress/format-library';
 /**
  * Internal dependencies
  */
+import { Header } from './header';
 import './style.scss';
 
 /* eslint-disable no-restricted-syntax */
@@ -34,6 +35,7 @@ export function Gutenboard() {
 
 	return (
 		<>
+			<Header />
 			<div>
 				<a href="/gutenboarding/onboard">Onboard!</a>
 			</div>
@@ -45,7 +47,7 @@ export function Gutenboard() {
 							onInput={ updateBlocks }
 							onChange={ updateBlocks }
 						>
-							<div className="editor-styles-wrapper">
+							<div className="gutenboarding__block-editor">
 								<BlockEditorKeyboardShortcuts />
 								<WritingFlow>
 									<ObserveTyping>

client/gutenboarding/header.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, NavigableMenu } from '@wordpress/components';
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import Inserter from './inserter';
+
+export function Header() {
+	return (
+		<div
+			className="gutenboarding__header"
+			role="region"
+			aria-label={ __( 'Top bar' ) }
+			tabIndex="-1"
+		>
+			<NavigableMenu>
+				<Inserter.Slot />
+			</NavigableMenu>
+			<div className="gutenboarding__header-actions">
+				<Button isPrimary isLarge>
+					{ __( 'Continue' ) }
+				</Button>
+			</div>
+		</div>
+	);
+}

client/gutenboarding/inserter.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+import React from 'react';
+
+const { Fill: BlockInserterFill, Slot: BlockInserterSlot } = createSlotFill(
+	'GutenboardingInserter'
+);
+
+const Inserter = BlockInserterFill;
+
+Inserter.Slot = function() {
+	return <BlockInserterSlot bubblesVirtually />;
+};
+
+export default Inserter;

client/gutenboarding/style.scss

@@ -0,0 +1,52 @@
+@import './gutenberg-styles/z-index';
+@import './gutenberg-styles/colors';
+@import './gutenberg-styles/variables';
+@import './gutenberg-styles/breakpoints';
+@import './gutenberg-styles/mixins';
+@import './gutenberg-styles/animations';
+
+:root {
+	@include reset;
+}
+
+.gutenboarding__block-editor *,
+.gutenboarding__block-editor ::after,
+.gutenboarding__block-editor ::before {
+	box-sizing: border-box;
+}
+
+// Copied from https://github.com/WordPress/gutenberg/blob/8c0c7b7267473b5c197dd3052e9707f75f4e6448/packages/edit-widgets/src/components/header/style.scss
+.gutenboarding__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px solid $light-gray-500;
+	height: $header-height;
+	background: $white;
+	z-index: 1;
+
+	left: 0;
+	right: 0;
+	// Stick the toolbar to the top, because the admin bar is not fixed on mobile.
+	top: 0;
+	position: sticky;
+
+	// On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container.
+	@include break-small {
+		position: fixed;
+		padding: $grid-size;
+		// Needed at wp-admin but not in Calypso
+		// top: $admin-bar-height-big;
+	}
+
+	// Needed at wp-admin but not in Calypso
+	/*
+	@include break-medium() {
+		top: $admin-bar-height;
+	}
+	*/
+}
+
+.gutenboarding__header-actions {
+	padding: 0 20px;
+}