diff --git a/client/gutenboarding/gutenboard.tsx b/client/gutenboarding/gutenboard.tsx
index 0ea8c18c509df..640b2783a23b6 100644
--- a/client/gutenboarding/gutenboard.tsx
+++ b/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 (
<>
+
@@ -45,7 +47,7 @@ export function Gutenboard() {
onInput={ updateBlocks }
onChange={ updateBlocks }
>
-
+
diff --git a/client/gutenboarding/header.tsx b/client/gutenboarding/header.tsx
new file mode 100644
index 0000000000000..50b4c6ac5a783
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/client/gutenboarding/inserter.tsx b/client/gutenboarding/inserter.tsx
new file mode 100644
index 0000000000000..d896ca963d1d6
--- /dev/null
+++ b/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 ;
+};
+
+export default Inserter;
diff --git a/client/gutenboarding/style.scss b/client/gutenboarding/style.scss
index e69de29bb2d1d..a166a2beb21e3 100644
--- a/client/gutenboarding/style.scss
+++ b/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;
+}